/* ===================================================================
   chromocat — Minecraft-style title screen
   =================================================================== */

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

body
{
    background: #6f9fc4;
    color: #ffffff;
    font-family: monospace;
    overflow: hidden;
    cursor: url( "assets/sword.png" ) 9 7, auto;
}

/* keep the diamond-sword cursor over links/buttons too */
a, .btn { cursor: inherit; }

/* ---- panorama ----------------------------------------------------- */

/* flat panning fallback (file:// / no-WebGL), sits behind the WebGL skybox */
.flatpano
{
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.flatpano .strip
{
    display: flex;
    width: 500vw;
    height: 100%;
    animation: pan 70s linear infinite;
}

.flatpano .strip > div
{
    width: 100vw;
    height: 100%;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
}

.flatpano .strip > div:nth-child(1) { background-image: url( "assets/panorama_0.jpg" ); }
.flatpano .strip > div:nth-child(2) { background-image: url( "assets/panorama_1.jpg" ); }
.flatpano .strip > div:nth-child(3) { background-image: url( "assets/panorama_2.jpg" ); }
.flatpano .strip > div:nth-child(4) { background-image: url( "assets/panorama_3.jpg" ); }
.flatpano .strip > div:nth-child(5) { background-image: url( "assets/panorama_0.jpg" ); }

@keyframes pan
{
    from { transform: translateX( 0 ); }
    to   { transform: translateX( -400vw ); }
}

#sky
{
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* served locally the panorama can't load WebGL textures — drop it for a clean backdrop */
.nopano .flatpano,
.nopano #sky
{
    display: none;
}

.nopano body
{
    background: radial-gradient( circle at 50% 28%, #2b2f3e 0%, #14151d 75% );
}

/* ---- menu --------------------------------------------------------- */

.menu
{
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp( 1.5rem, 5vh, 4rem ) 1rem;
}

.logo-wrap
{
    position: relative;
    margin-top: clamp( 1.5rem, 9vh, 6rem );
    margin-bottom: clamp( 2.5rem, 9vh, 6rem );
    text-align: center;
}

.logo-img
{
    display: block;
    margin: 0 auto;
    width: clamp( 320px, 70vw, 760px );
    height: auto;
    filter: drop-shadow( 0 6px 12px rgba( 0, 0, 0, 0.45 ) );
}

/* splash — anchor fixes its centre near the logo's right end (stays put at any length) */
.splash
{
    position: absolute;
    right: 11%;
    top: 74%;
    transform: translate( 50%, -50% );
    pointer-events: none;
}

/* rotation + bob live on the inner element so the anchor stays clean */
.splash-rot
{
    display: inline-block;
    transform-origin: center;
    animation: splash-bob 1s ease-in-out infinite;
}

.splash-rot canvas
{
    display: block;
    image-rendering: pixelated;
    max-width: min( 40vw, 360px );
    height: auto;
}

@keyframes splash-bob
{
    0%, 100% { transform: rotate( -20deg ) scale( 1 ); }
    50%      { transform: rotate( -20deg ) scale( 1.06 ); }
}

/* ---- buttons ------------------------------------------------------ */

.buttons
{
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp( 42px, 6.5vh, 50px );
    padding: 0.3rem 1rem;
    text-decoration: none;
    background: transparent;
    border: 9px solid transparent;
    border-image: url( "assets/mc_button.png" ) 3 fill / 9px / 0 stretch;
    image-rendering: pixelated;
    cursor: inherit;
}

.btn:hover  { border-image-source: url( "assets/mc_button_hl.png" ); }
.btn:active { transform: translateY( 1px ); }
.btn.quit   { margin-top: 1.5rem; }

/* label = stacked normal + highlight canvases; hover swaps them */
.label
{
    position: relative;
    display: inline-block;
    transform: scale( 0.85 );
    transform-origin: center;
}

.label canvas { display: block; image-rendering: pixelated; }

.label .lbl-hi
{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.btn:hover .label .lbl-base { opacity: 0; }
.btn:hover .label .lbl-hi   { opacity: 1; }

/* ---- "quit": tabs can't self-close, so fade to black like the game shutting down */
#bye
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

#bye.on
{
    opacity: 1;
    pointer-events: auto;
}

/* ---- intro reveal: text is drawn from a bitmap font once it loads,
   so fade the whole menu in together instead of popping in label by label */
.menu
{
    opacity: 0;
    transition: opacity 0.28s ease;
}

.ready .menu
{
    opacity: 1;
}

/* ---- reduced motion ----------------------------------------------- */
@media ( prefers-reduced-motion: reduce )
{
    .splash-rot,
    .flatpano .strip
    {
        animation: none;
    }
}