/* Studio DT — front-page hero logo explosion. Driven by scroll (logo-explosion.js). */

/* In-flow hero block: header → logo block → hero text. The scene is its own
   section at the top of the front page (NOT an absolute backdrop), so the hero
   text flows below it rather than under it. */
.hero-logo {
    position: relative;
    overflow: visible;        /* scattered pieces may extend past the hero box */
    pointer-events: none;     /* decorative — never blocks content/links */
    margin-block-start: calc(-1 * var(--space-3xs) + 10px);   /* +10px top: keeps the logo in place after the nav's 10px-tighter bottom */
    /* No fixed height on desktop: the in-flow scene-wrap below sets it, so the hero is
       exactly as tall as the logo and the hero text follows just beneath it (gap on
       .site-main--front) instead of a full 100svh shoving it a screen away.
       Body-level sibling of the header (see front-page.php) → its width is the body
       content width, the SAME reference as the full-width nav (no 100vw scrollbar skew). */
}

/* The landscape SVGs are cropped to the mark's left silhouette (viewBox 129 138 2968 1442):
   x=129 is the light-blue arc's left edge — the shape that sits beside the nav — so the box
   left lands the arc exactly on the gutter. The crop also trims the yellow bar's 13-unit
   overhang (its true left was x=116) so it stops at the same gutter rather than jutting out.
   Box IS the ink — no scale-up, no overflow, no scrollbar. In-flow (position:relative) so it
   gives .hero-logo its height; margin-inline:auto = --space-md gutters (matching the nav);
   its top sits at the header's bottom edge = one --space-md below the nav text. 100% is the
   body content width (hero is a body-level sibling of the header), matching the nav. */
.hero-logo__scene-wrap {
    position: relative;
    width: calc(100% - 2 * var(--space-md));
    margin-inline: auto;
    aspect-ratio: var(--logo-ratio-landscape, 2968 / 1442);
}
@media (orientation: portrait) {
    /* Mobile mirrors desktop: the logo overflows full-bleed (118vw), so the scene-wrap stays
       absolute, but the hero is sized to the logo's VISIBLE ink height — the 118vw square box
       × the 3688/4252 ink-height fraction (the portrait SVGs are uncropped) — so the hero text
       follows the same --space-4xl below it, not a full 100svh away. Top-aligned (not centered)
       so the nav→logo gap is a constant --space-md; the box is lifted by the ink's top inset
       (282/4252 = 6.63% of its height) to put the mark's visible top one --space-md below the
       nav. Horizontal keeps the intentional 118vw edge bleed. */
    .hero-logo { block-size: calc(var(--logo-width-portrait, 118vw) * 3688 / 4252); }
    .hero-logo__scene-wrap {
        position: absolute;
        left: 50%; top: 0; margin-inline: 0;
        transform: translateX(-50%) translateY(-6.63%);
        width: var(--logo-width-portrait, 118vw);
        aspect-ratio: var(--logo-ratio-portrait, 1 / 1);
    }
    /* Alt (tall) mobile mark: pieces cropped to their ink (box IS the ink). Laid out in-flow
       like the desktop logo — --space-md side gutters (matching the nav) and its top one
       --space-md below the nav — rather than the original's full-bleed 118vw. */
    /* Explicit height (not block-size:auto): Safari resolves an auto height from the scene-wrap's
       aspect-ratio ~12px too tall, which opens a gap above the shapes. This is the scene-wrap's own
       computed height — width (100vw − one --space-md gutter) × the 663/965 portrait ratio — so the
       box hugs the mark in every engine. Top margin inherits the base .hero-logo rule (matches desktop). */
    .hero-logo.hero-logo--portrait-alt { block-size: calc((100vw - var(--space-md)) * 965 / 663); }
    .hero-logo--portrait-alt .hero-logo__scene-wrap {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin-inline: auto;
        width: calc(100% - var(--space-md));   /* 10px side gutters, matching the nav */
        aspect-ratio: 663 / 965;
    }
    /* Safari derives the <img> intrinsic ratio from the landscape fallback src, not the selected
       portrait <source>, so object-fit:contain letterboxes the portrait SVG vertically (a gap above
       the shapes). The box aspect-ratio already equals the portrait SVG's, so fill maps it
       edge-to-edge with no distortion and no dependence on the intrinsic ratio. */
    .hero-logo--portrait-alt .hero-logo__inner img { object-fit: fill; }
}

/* isolation: isolate → contains the layers' multiply blend to the scene group, so
   overlapping pieces darken against EACH OTHER (ink clash) while non-overlapping
   pieces keep full colour over the light page. */
.hero-logo__scene { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; isolation: isolate; }

/* Two boxes: .hero-logo__layer owns the translate (scatter), .hero-logo__inner owns the rotate —
   so the two transforms set by JS don't overwrite each other.
   mix-blend-mode: multiply → the overlap colour clash (red×navy → dark, green×yellow → olive). */
.hero-logo__layer { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; will-change: transform; }
.hero-logo__inner { display: block; width: 100%; height: 100%; transform-origin: center; will-change: transform; }
.hero-logo__inner picture,
.hero-logo__inner img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    user-select: none; -webkit-user-drag: none;
}

/* Reduced motion: JS bails (no transforms) → static composed logo. Nothing extra needed,
   but guard against any stray transition. */
@media (prefers-reduced-motion: reduce) {
    .hero-logo__layer, .hero-logo__inner { transition: none !important; }
}