/* ─── Reset & base ─── */
:root {
    --paper: var(--dark-primary, #0f1419);
    --ink: var(--text-primary, #e2e6ea);
    --muted: var(--text-muted, #6e7a8a);
    --red: var(--text-accent-green, #66bb6a);
    --white: #ffffff;
    --pol-w: 180px;
    --pol-h: 220px;
    --pol-img: 150px;
    /* Scale applied to the active (centred) polaroid by GSAP — read in
       polaroid-hero.js. Tuned per-breakpoint below so the expanded polaroid
       doesn't overlap the #info-panel on narrower viewports. */
    --polaroid-active-scale: 2.0;
}

/* ─── Hero wrapper — height is managed by GSAP pin, not CSS ─── */
#polaroid-hero {
    position: relative;
    background: var(--dark-primary);
    font-family: var(--font-family, 'Inter', sans-serif);
    color: var(--ink);
    overflow: visible;
}

/* ─── Stage — pinned by GSAP ScrollTrigger, not CSS sticky ─── */
#stage {
    /* Keep `100vh` (not `100svh`). The pile is vertically centred via flex,
       so a shorter stage pulls the pile closer to the absolutely-positioned
       headline — visibly noticeable in portrait on iOS Safari where the URL
       bar makes `svh` < `vh`. Once GSAP pins the stage the URL bar is
       effectively static, so 100vh causes no scroll glitches in practice. */
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-primary);
    position: relative;
    overflow: hidden;
}

/* Grid overshoots each edge by 60px so a grid line always sits flush at the boundary */
#stage::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 40px 40px;
}


/* ─── Hero headline (static, always visible) ─── */
.hero-headline {
    position: absolute;
    top: clamp(80px, 12vh, 110px);
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hero-headline.headline-dimmed {
    opacity: 0.2;
}

.hero-headline h1 {
    font-family: var(--heading-font-family, 'Poppins', sans-serif);
    font-size: clamp(2.5rem, 6.5vw, 5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: var(--text-primary);
}

.hero-headline h1 em {
    font-family: 'Caveat', cursive;
    font-style: normal;
    color: var(--text-accent-green);
    -webkit-text-fill-color: var(--text-accent-green);
    font-size: 1.3em;
    font-weight: 500;
}

.hero-headline p {
    margin-top: .75rem;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--muted);
}

/* ─── Pile — the scattered polaroid cluster ─── */
#pile {
    position: relative;
    width: var(--pol-w);
    height: var(--pol-h);
    margin-top: clamp(3.5rem, 7vh, 5.5rem);
}

/* ─── Individual polaroid ─── */
.polaroid {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pol-w);
    height: var(--pol-h);
    cursor: pointer;
    transform-origin: center bottom;
    /* No `will-change: transform` here — it pre-rasterises the polaroid at
       1× and the GPU bilinear-scales the cached texture when GSAP transforms
       it to CENTRE scale 2.0, blurring the SVG content. Removing it lets
       Chrome re-raster vectors at the destination scale (sharp). */
}

.polaroid-inner {
    width: 100%;
    height: 100%;
    background: var(--white);
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    box-shadow:
        2px 3px 8px rgba(0, 0, 0, .22),
        0 1px 2px rgba(0, 0, 0, .12);
}

.polaroid-image {
    width: 100%;
    height: var(--pol-img);
    overflow: hidden;
    position: relative;
    background: #f0ebe2; /* Base color before image loads */
}

.polaroid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid-image .placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Only constrains the small fallback placeholder icons (svg with no
   sizing class). The full-content SVGs that fill the polaroid use
   .svg-fill — they need to stretch to the polaroid-image bounds. */
.polaroid-image svg:not(.svg-fill) {
    width: 56px;
    height: 56px;
    opacity: .8;
}

.polaroid-caption {
    font-family: 'Caveat', cursive;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-top: 6px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.tape {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 44px;
    height: 16px;
    opacity: .6;
    border-radius: 2px;
    z-index: 2;
}

/* ─── Active info panel ─── */
#info-panel {
    position: absolute;
    bottom: clamp(60px, 10vh, 100px);
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 88vw);
    text-align: center;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    background: rgba(15, 20, 25, 0.85);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(102, 187, 106, 0.2);
    backdrop-filter: blur(8px);
    /* Pre-hint the compositor that opacity changes every scroll frame so the
       backdrop-filtered layer isn't repainted from scratch each time. */
    will-change: opacity;
}

.info-sector {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-accent-green);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.info-title {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    color: var(--white);
    font-family: var(--heading-font-family, 'Poppins', sans-serif);
}

.info-body {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 380px;
    margin: 0 auto;
}

.info-cta {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-accent-green);
    border-bottom: 1.5px solid var(--text-accent-green);
    padding-bottom: 1px;
    letter-spacing: .04em;
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.info-cta:hover {
    color: var(--white);
    border-color: var(--white);
}

/* ─── Scroll progress dots ─── */
#progress-dots {
    position: absolute;
    right: clamp(16px, 3vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 30;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .25s, transform .25s;
}

.dot.active {
    background: var(--text-accent-green);
    transform: scale(1.35);
}

/* ─── Hero CTA button — positioning only; visual style from .btn.btn-primary ─── */
.hero-cta-btn {
    position: absolute;
    bottom: var(--spacing-4xl);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-cta-btn:hover:not(:disabled),
.hero-cta-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

.scroll-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(var(--pol-h) / 2 + clamp(1.75rem, 3.5vh, 2.75rem) + clamp(7rem, 14vh, 11rem)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 1;
    z-index: 10;
    pointer-events: none;
    transition: opacity .4s;
}

.scroll-hint span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scroll-hint svg {
    width: 20px;
    height: 24px;
    animation: bounce 1.8s ease-in-out infinite;
}

.scroll-hint svg path {
    stroke: rgba(255, 255, 255, 0.85);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@media (max-width: 600px) {
    :root {
        --pol-w: 140px;
        --pol-h: 172px;
        --pol-img: 116px;
        /* No mobile override of --polaroid-active-scale — `transform-origin:
           center bottom` anchors the scaled polaroid's bottom edge at
           pile_bottom, so info-panel gap (~22px) is independent of scale.
           Keep the 2.0× root default for visual impact. */
    }
    .info-body { font-size: 14px; }
    #progress-dots { display: none; }
    #stage { overflow: hidden; }

    /* Bumped from 3.75rem → 6.5rem for portrait breathing room between the
       headline and the pile. Flex centring "absorbs" half the change, so the
       visible gap grows by ~22px. Safe to push: polaroid scales from
       `transform-origin: center bottom`, so the scaled bottom stays anchored
       and the gap to #info-panel below is unaffected. */
    #pile { margin-top: 6.5rem; }

    .hero-cta-btn { bottom: var(--spacing-2xl); }

    .scroll-hint { display: none; }

    /* Position info panel below the polaroid stack (centered + half height + gap + pile margin) */
    #info-panel {
        top: calc(50% + 102px + 3.75rem);
        bottom: auto;
        padding: 1rem;
    }
}

/* ─── Short-landscape variant (e.g. phones rotated to landscape) ───
   The default mobile breakpoint is width-based (max-width: 600px), but
   modern phones in landscape are 667–932px wide so they never hit it —
   they get desktop sizing inside ~390px of vertical space and everything
   collides. This block targets the failure mode directly (short height +
   landscape) so portrait layout is untouched. */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --pol-w: 110px;
        --pol-h: 134px;
        --pol-img: 90px;
        /* Smaller exploded polaroid in landscape — the right column needs
           room and 2.0× would push toward the divider. 1.6× scaled = 176px
           wide, fits comfortably in the left half. */
        --polaroid-active-scale: 1.6;
        /* Compress the idle-fan so it fits inside the left column (388px on
           a 844-wide viewport) instead of spilling into the right column.
           Read in polaroid-hero.js — overrides the default
           `min(1, innerWidth/600)` auto-scale. */
        --pile-scatter-scale: 0.6;
    }

    /* ── Two symmetric columns, 4vw outer padding each side ────────────
       Left column:  x =  4vw  → 50vw  (width 46vw)
       Right column: x = 50vw  → 96vw  (width 46vw)
       Pile centred in left col at 27vw. Headline + info-panel fill right
       col with the same 4vw outer padding.
       Pile switches from flex-positioned to absolute so the columns can
       use identical inset math. */
    #pile {
        position: absolute;
        left: 27vw;
        /* Nudge the pile (and therefore the scaled polaroid, which anchors
           at its bottom) down so the exploded card doesn't crowd the top
           of the viewport. */
        top: 64%;
        transform: translate(-50%, -50%);
        margin-top: 0;
    }

    /* Headline → vertically centred in the right column, then nudged down
       30px so its top edge sits *below* the pile's top edge rather than
       lined up with it. Visual centre stays inside the info-panel's
       coverage area so the overlay still looks clean when active. */
    .hero-headline {
        top: 50%;
        bottom: auto;
        left: 50vw;
        right: 4vw;
        width: auto;
        transform: translateY(calc(-50% + 30px));
        text-align: left;
    }
    .hero-headline h1 {
        font-size: clamp(1.3rem, 6vh, 2rem);
        line-height: 1.15;
    }
    .hero-headline p {
        display: none;
    }

    /* Info-panel → same box as headline so the card sits cleanly over it. */
    #info-panel {
        top: 50%;
        bottom: auto;
        left: 50vw;
        right: 4vw;
        width: auto;
        transform: translateY(-50%);
        max-height: 80vh;
        overflow-y: auto;
        padding: 0.8rem 1.1rem;
        text-align: left;
    }
    .info-title { font-size: 17px; margin-bottom: 4px; }
    .info-body  { font-size: 13px; line-height: 1.45; }
    .info-cta   { margin-top: 10px; }

    /* CTA → centred inside the right column.
       Right column spans 50vw → 96vw, so its midpoint is 73vw. Pulled up
       from the bottom edge so it sits closer to the info-panel without
       overlapping it (info-panel bottom is at ~68% of stage on this
       breakpoint, so 10% keeps a ~35px gap). */
    .hero-cta-btn {
        bottom: 10%;
        left: 73vw;
        right: auto;
        transform: translateX(-50%);
    }
    .hero-cta-btn:hover:not(:disabled),
    .hero-cta-btn:hover {
        transform: translateX(-50%) translateY(-2px);
    }

    /* Chrome that doesn't fit. */
    .scroll-hint,
    #progress-dots {
        display: none;
    }
}

/* ── Light theme overrides ─────────────────────────────
   Moved to theme-tokens.css — edit there for all theme fixes.
   ─────────────────────────────────────────────────────── */