/* make image seamlessly fit the window at any width and never 
leave any part of the background uncovered*/

* {
    /* page contents fill whole screen*/
    margin: 0;
    padding: 0;
    /* sizes calculated with 
    padding and margins included */
    box-sizing: border-box;
}

body {
    /* body only as big as window, with scroll left to element*/
    overflow: hidden;
    height: 100vh;
    /* Fills any gap if image loads slow */
    background: white;
}

.image-container {
    /* also fills whole screen, but scrolls if image is taller than viewport */
    width: 100vw;
    height: 100dvh;
    /* Vertical scroll only */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.hero-image {
    display: block;
    /* Removes bottom gap from inline */
    width: 100%;
    /* Always full viewport width */
    height: auto;
    /* Maintains aspect ratio */
}

/* TEST: play button styling */
.play-button {
    position: fixed;
    top: 10px;
    left: 10px;
}

.overlay {
    position: fixed;
    inset: 0;
    /* covers full viewport */
    display: flex;
    /* for centering text */
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* sits on top */
    cursor: pointer;
    backdrop-filter: blur(10px) brightness(40%);
    font-size: 8em;
    font-family: "Ballet", cursive;
    /* text-shadow: 1px 1px 2px #2b5174; */
    color: white;
}

:root {
    --debug: 0;
    /* Change to 1 to turn on all test colors */
}

.sticker-main {
    background-color: rgb(0, 0, 255, calc(0.1 * var(--debug)));
    font-family: "IBM Plex Sans", sans-serif;
}

a {
    all: unset;
    cursor: pointer
}

.track {
    width: 100%;
}

.ui {
    position: sticky;
    top: 0;
    height: 100dvh;
    margin-bottom: -100dvh;
    z-index: 10;
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* top and bottom hug content, middle takes the rest */
    padding: 1rem;
}

/* --- FLUID TYPE: scale between 2.5rem and 6rem based on viewport --- */
.ui h1 {
    /* font-family: "Arial Black", sans-serif; */
    font-family: "Ballet", cursive;
    color: white;
    font-size: clamp(2.5rem, 12vw, 6rem);
    line-height: 1;
    text-align: center;
}

.ui-top {
    padding-top: 1.5rem;
}
.ui-bottom {
    padding-top: 1.5rem;
}
/* --- CENTER SECTION: responsive direction --- */
.ui-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: clamp(0.75rem, 3vh, 1.5rem); */
    min-height: 0;
    padding: 0.5rem;
}

/* --- IMAGE: flexible bounds --- */
#coat {
    max-height: min(60vh, 100%);
    max-width: 80%;
    object-fit: contain;
    flex-shrink: 1; /* allow shrink in row layout */
}

/* --- COPY: fixed width, left-aligned --- */
.copy {
    width: min(400px, 85vw);
    text-align: center;
    color: white;
    font-size: clamp(0.9rem, 2.5vw, 1.2em);
    line-height: 1.5;
    flex-shrink: 0; /* text doesn't squash unreadably */
}

.copy a {
    text-decoration: underline;
}

/* --- SHORT SCREENS: switch to side-by-side --- */
@media (max-height: 650px)and (min-aspect-ratio: 1/1) {
    .ui-centered {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        gap: 1rem;
    }
    
    #coat {
        max-height: 80%;
        max-width: 40%;
    }
    
    .copy {
        width: min(350px, 50vw);
    }
}

/* --- VERY SHORT: compress further --- */
@media (max-height: 350px) {
    .ui h1 {
        font-size: clamp(1.5rem, 8vw, 3rem);
    }
    
    .ui-centered {
        gap: 1rem;
    }
    
    #coat {
        max-width: 30%;
    }
    
    .copy {
        font-size: 0.85rem;
    }
}

/* --- NARROW SCREENS: ensure text fits --- */
@media (max-width: 480px) {
    .ui {
        padding: 0.5rem;
    }
    
    .copy {
        width: 90vw; /* nearly full width on phones */
    }
}