/* ==========================================================================
   SP Wealth Group — SEQUENCE V2  (page /homepage-v2/, body.spw-seq-v2)

   Loads AFTER spw-home.css + spw-revisions.css and only on the V2 page. Every
   rule here is scoped to .spw-seq-v2 / .spw-hero--v2seq / .spw-seqv2-*, so the
   live homepage (body.spw-concept-01) is untouched. Shared furniture — company
   tiles, the company modal, the marquee, the CEO note, the preloader chrome,
   the intro star container — is inherited from spw-home.css unchanged. The
   scroll star is back as its own full-bleed backdrop layer (.spw-seqv2-star*,
   NOT the front page's .spw-page-star mount) sitting behind the arch window
   (.spw-seqv2-arch*) below.
   ========================================================================== */

body.spw-cinematic-home.spw-seq-v2{background:var(--spw-hero-night)}
/* The act stepper drives window.scrollTo() frame by frame; a smooth
   scroll-behaviour anywhere up the cascade would fight it. */
html:has(body.spw-seq-v2){scroll-behavior:auto!important}

/* --------------------------- the preloader gate --------------------------- */
/* V2 replaces the front page's plain-text ENTER with the foil shield — but the
   shield you see is the HERO LOCKUP'S own shield half, revealed in its final
   position under this overlay and left standing from there into the hero. It can
   be revealed under the preloader because .spw-preloader--line is background:
   transparent (spw-home.css): the overlay is a click catcher, not a curtain, and
   the intro star behind it is already visible the same way.
   So this button carries the affordance only — label, focus ring, pointer — and
   is stretched invisibly over the whole overlay (the preloader is position:fixed,
   so inset:0 resolves to the viewport). display:none until spw-seq-v2.js arms it.
   Keep it a SIBLING of .spw-preloader__content in the markup: the intro tweens a
   transform onto that box, which would otherwise become this button's containing
   block and collapse it to the counter's size mid-fade. */
/* Same fix as the stage: .spw-preloader is position:fixed;inset:0 (shared
   rule), which SHOULD track the true live viewport — but iOS Safari has a
   known quirk where fixed elements don't reliably re-measure as the toolbar
   collapses/expands, so its centered content can drift off the visible
   middle exactly like the stage's gap did. Force it onto the same static
   100lvh box the stage now uses, so both agree on where "the middle" is. */
.spw-seq-v2 .spw-preloader{height:100lvh}
.spw-seqv2-gate{position:absolute;display:none;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.spw-seqv2-gate:focus-visible{outline:1px solid var(--spw-gold-light);outline-offset:-16px}

/* ------------------------------- the stage ------------------------------- */
.spw-hero--v2seq,.spw-hero--v2seq *{box-sizing:border-box}
/* lvh (large viewport height), not svh: svh sizes to the SMALLEST possible
   viewport (toolbar expanded) and never grows, so when Safari's toolbar
   retracts mid-scroll the real viewport exceeds this box and a gap opens
   below the pinned stage. lvh assumes toolbars retracted (max real estate)
   and — like svh — is a STATIC unit, not a live-tracking one like dvh, so it
   never resizes/jumps as the toolbar moves; when the toolbar IS showing it
   simply overlaps the edge of this box instead of revealing a gap. */
.spw-hero--v2seq{position:relative;z-index:2;width:100vw!important;max-width:none!important;min-height:100lvh;height:auto;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;background:var(--spw-hero-night);font-family:var(--spw-sans);color:var(--spw-paper)}
.spw-seqv2-stage{position:relative;width:100vw!important;max-width:none!important;height:100lvh;overflow:hidden;background:var(--spw-hero-night)}

/* Layer stacking inside the stage: intro star and the scroll-star backdrop
   share the bottom tier (they hand off — intro hides right as the scroll
   star's own fade-in begins, so the two never overlap), act 'reveal's arch
   window sits above both, copy above that, the logo lockup on top. */
.spw-seq-v2 .spw-intro-star{z-index:1}
.spw-seq-v2 .spw-seqv2-star{z-index:1}
.spw-seq-v2 .spw-seqv2-arch{z-index:2}

/* ------------------------------ scroll star ------------------------------- */
/* Full-bleed backdrop layer behind the arch window above — the blue-mask/
   eternal-path-scroll pattern, back as background PRESENCE rather than its
   own masked shape (no arch-mask.svg here, unlike the front page's own
   .spw-page-star): reads as filling the screen, with the arch photo sitting
   "in front of" it, per Haseeb. Lives inside the already-pinned
   .spw-seqv2-stage, so — unlike the front page's own star, which is
   reparented `.is-fixed` to survive past its own pin boundary — this one
   never needs position:fixed; the stage IS the pin for its whole visible
   life. Sizing formula matches the front page's .spw-page-star__art exactly
   (width:max(100vw,100vh), square, centered) so it reads at the same scale. */
.spw-seqv2-star{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0}
.spw-seqv2-star__art{position:absolute;left:50%;top:50%;width:max(100vw,100vh);aspect-ratio:1;transform:translate(-50%,-50%)}
.spw-seqv2-star__art svg{display:block;width:100%!important;height:100%!important;overflow:hidden}
.spw-seqv2-star__art video{display:block;width:100%;height:100%;object-fit:contain}

/* ------------------------------ arch window ------------------------------- */
/* act 'reveal''s portal: the SAME arch-mask.svg + arch-portal.webp asset and
   "portal parallax" zoom-out (poster scale 1.6 -> 1, mask-size closed ->
   mediumMask()) as the front page's About section (spw-home.css/.js
   .spw-about-arch*) — a separate instance here so V2 stays self-contained
   rather than reusing the shared rules directly. Sits behind the headline/
   paragraph copy and centred in the stage; never expands past medium, unlike
   the old full-bleed blue mask it replaces. */
.spw-seqv2-arch{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.spw-seqv2-arch__media{position:relative;width:min(64vw,560px);height:min(78svh,820px);overflow:hidden;-webkit-mask-image:url("../images/arch-mask.svg");mask-image:url("../images/arch-mask.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:0 0;mask-size:0 0;will-change:-webkit-mask-size,mask-size}
.spw-seqv2-arch__poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:brightness(1.08) saturate(.94) contrast(1.03);will-change:transform}
/* Rotation killed entirely per Haseeb — was contributing to the star's
   "sped up" look layered on top of the frame-scrub itself. Removing V2's own
   override rule here isn't enough on its own: spw-home.css still has the
   front page's base .spw-intro-star__art svg{animation:spw-slow-spin} rule
   (desktop-only, >820px), and V2 reuses the same .spw-intro-star__art class
   — with no V2 override at all that base rule applies here too. This
   explicitly kills it instead. */
.spw-seq-v2 .spw-intro-star__art svg,.spw-seq-v2 .spw-intro-star__art video{animation:none!important}
.spw-ua-safari .spw-seqv2-arch__poster{filter:none!important}

/* ------------------------------ copy panels ------------------------------ */
/* Both acts share one centred box; only one is ever revealed at a time. The
   wrappers start hidden so a failed JS boot can never flash both at once —
   spw-seq-v2.js reveals the wrapper and animates the words inside it. */
.spw-seqv2-copy{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:0 clamp(20px,5vw,64px);text-align:center;pointer-events:none;opacity:0;visibility:hidden}
.spw-seqv2-headline{width:min(1000px,92vw);margin:0!important;font-family:var(--spw-serif)!important;font-size:var(--spw-h-display)!important;font-weight:350!important;line-height:1.12!important;letter-spacing:-.025em!important;color:#f4efe4!important;text-wrap:pretty}
.spw-seqv2-headline em{font-style:italic;font-weight:400}
/* text-wrap:pretty removed per Haseeb ("dont like this") — its orphan-avoidance
   heuristic was isolating "Sharia-compliant" alone on its own line. Back to
   default wrapping. */
.spw-seqv2-para{width:min(820px,92vw);margin:0!important;font-family:var(--spw-sans)!important;font-size:clamp(22px,1.9vw,32px)!important;font-weight:400!important;line-height:1.6!important;color:#f4efe4!important}
.spw-seqv2-word{will-change:transform,opacity,filter}
/* Outer width-matcher for the paragraph — same width as .spw-seqv2-para so
   grid centering is unaffected. No clipping needed any more: the paragraph
   is a plain per-word opacity fade now, nothing slides. */
.spw-seqv2-para-clip{width:min(820px,92vw)}

/* ---------------------------- the logo lockup ---------------------------- */
/* Same geometry as the live homepage's shield-over-wordmark lockup: the stacked
   SVG is clipped to its wordmark half and a separate foil shield sits above it,
   each half sliding in from its own edge. Mirrored (not shared) because the
   concept-01 rules are scoped to .spw-hero--v1 and must stay that way. */
.spw-seqv2-lockup{z-index:8}
.spw-seq-v2 .spw-hero__brand-mask{overflow:visible}
/* Restructured per Haseeb ("focus everything... ensure the shield is bang
   smack in the middle... rework everything as needed"). The OLD structure
   was a 2-row CSS grid (shield row + wordmark row + row-gap) whose COMBINED
   box got centered by the outer .spw-hero__brand{place-items:center} — so
   the shield's own position was a function of the WORDMARK row's height AND
   the gap between them: grow the gap, and the shield (bottom-anchored in
   row 1) drifts upward even though nothing about the shield itself changed.
   That's WHY the row-gap edits this session kept quietly undoing whatever
   centering fix had just landed. Now: .spw-hero__brand-inner's own height is
   set to EXACTLY the shield row's height (94px) — so IT, not some taller
   combined box, is what the outer place-items:center actually centers. The
   wordmark is pulled OUT of normal flow (position:absolute, top:100% + the
   gap) so it hangs below that box without ever affecting its size or
   center. Row-gap tuning (mobile's own gap, right after this block) can
   never shift the shield again — it only moves the wordmark. */
.spw-seq-v2 .spw-hero__brand-inner{position:relative;width:100%;height:94px}
.spw-seq-v2 .spw-hero__brand-part{position:relative;width:100%;overflow:hidden}
.spw-seq-v2 .spw-hero__brand-part--shield{height:100%}
.spw-seq-v2 .spw-hero__brand-part--wordmark{position:absolute;left:0;top:calc(100% + 35px);height:64px}
.spw-seq-v2 .spw-hero__brand-shield-piece{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;will-change:transform,opacity}
.spw-seq-v2 .spw-hero__brand-shield{display:block;width:57px;height:auto}
.spw-seq-v2 .spw-hero__brand-wordmark-piece{position:absolute;inset:0;will-change:transform,opacity}
.spw-seq-v2 .spw-hero__brand-wordmark{position:absolute;left:50%;top:0;display:block;width:68%;height:auto;transform:translate(-50%,-63.36%)}
.spw-seq-v2 .spw-hero__brand-sheen{left:50%;top:auto;bottom:0;width:57px;height:60px;transform:translateX(-50%)}
/* Centering, reset to a clean baseline per Haseeb ("presuming you have unset
   any tweaks we made... previous attempts to centre"). Every V2-specific
   nudge tried this session (20px, then -30px on the brand-mask; a matching
   -50px added to .spw-intro-star__art) is gone. In its place: the EXACT
   value the front page (concept-01) actually runs in production against
   this same star asset, not a re-guess — spw-home.css:153's
   `.spw-concept-01 .spw-hero--v1 .spw-hero__brand-mask{translateY(-8px)}`
   is scoped to concept-01 specifically, so V2 does NOT inherit it for
   free; it needs its own rule carrying the identical number. (An old
   comment here claimed V2 was already "reusing the front page's own
   measured fix" at 20px — it wasn't; 20px never matched concept-01's real
   -8px. Separately: analysis of the Lottie's own layer positions found the
   pattern is centered in its canvas to well under 1% — ~6px on a 2045px
   canvas — so a small nudge like -8px is the right order of magnitude,
   not the 30-50px swings tried this session. */
/* Final logo position, dialed in live against the real page via an on-page
   nudge widget per Haseeb (not re-guessed from screenshots). */
@media(min-width:701px){.spw-seq-v2 .spw-hero__brand-mask{transform:translate(2px,-29px)!important}}
@media(max-width:700px){.spw-seq-v2 .spw-hero__brand-mask{transform:translate(-3px,-24px)!important}}
/* Background pattern nudge per Haseeb (X 8px, Y 11px) — on top of the base
   translate(-50%,-50%) centering, desktop only (matching the scope of the
   -8px logo nudge above; mobile's pattern was never flagged as off). */
@media(min-width:701px){.spw-seq-v2 .spw-intro-star__art{transform:translate(calc(-50% + 8px),calc(-50% + 11px))!important}}
/* Preload counter nudge per Haseeb, dialed in live via the counter-nudge
   widget (desktop only so far). */
@media(min-width:701px){.spw-seq-v2 .spw-preloader__counter{transform:translate(4px,5px)!important}}

/* ------------------------- content below the pin ------------------------- */
/* Nothing after the hero may paint until the sequence is wired, or the tiles
   flash under the preloader. */
.spw-cinematic-home.spw-seq-v2:not(.spw-content-motion-ready) .spw-seqv2-flow>section:not(.spw-hero--v2seq){visibility:hidden!important}
.spw-cinematic-home.spw-seq-v2.usb_preview .spw-seqv2-flow>section{visibility:visible!important}
/* Per Haseeb: kill the dead scroll gap after act 'release' — pull the tiles
   up under the releasing pin the SAME way the front page does
   (.spw-managed-companies{margin-top:-8svh} in spw-home.css), so the tiles
   start riding into view while 'release's own exit tween is still playing
   rather than after a standalone dead pause. Pulled progressively further
   each time Haseeb flagged the gap as still too loose: -8svh -> -22svh ->
   -34svh. Top padding trimmed further to match. Paired with the shrunk
   acts[3].span/releaseTail in spw-seq-v2.js, and with the tiles' own
   staggered fade-up entrance (spw-seq-v2.js's companyCards ScrollTrigger) —
   pulling them up this far risked them just sitting flatly visible before
   the user's eye gets there, so the fade-up masks that instead of relying
   purely on scroll-position timing against a pin they sit outside of. */
.spw-cinematic-home.spw-seq-v2 .spw-managed-companies{margin-top:-34svh!important;padding-top:clamp(12px,2svh,40px)}

/* ------------------- static fallback (reduced motion, no GSAP, editor) ---- */
.spw-hero--v2seq.is-static{min-height:0}
.spw-hero--v2seq.is-static .spw-seqv2-stage{height:auto;min-height:0;display:grid;justify-items:center;gap:clamp(28px,6svh,56px);padding:clamp(72px,12svh,140px) clamp(20px,5vw,64px);overflow:visible;background:transparent}
.spw-hero--v2seq.is-static .spw-seqv2-copy{position:relative;inset:auto;padding:0;opacity:1;visibility:visible}
.spw-hero--v2seq.is-static .spw-hero__brand{position:relative;inset:auto;order:-1;visibility:visible;opacity:1;width:min(430px,70vw)}

/* ------------------------------ mobile diet ------------------------------ */
/* Matches the homepage doctrine: no backdrop-filter, no blur() tweens, no
   per-word scrubbing (spw-seq-v2.js swaps those for block tweens under
   V2.mobileBreakpoint). Only layout belongs here. */
/* The sheen is NOT killed below 820px any more — it is two gradient sweeps on one
   shield-sized element (gate, then wordmark join), and the gate reveal is the
   whole affordance on mobile. */
@media(max-width:700px){
/* Same restructure as desktop above — .spw-hero__brand-inner's own height is
   the shield row's height only (44px), so it (not a taller combined box) is
   what gets centered; the wordmark hangs below via position:absolute,
   unable to shift the shield. Gap cut ~50% per Haseeb (35px -> 18px). */
/* Shield a further 20% smaller per Haseeb — static CSS size, no scale anim. */
.spw-seq-v2 .spw-hero__brand-inner{height:35px}
.spw-seq-v2 .spw-hero__brand-part--wordmark{top:calc(100% + 18px);height:43px}
.spw-seq-v2 .spw-hero__brand-shield{width:30px}
.spw-seq-v2 .spw-hero__brand-sheen{width:30px;height:31px}
.spw-seqv2-para{font-size:clamp(18px,4.6vw,23px)!important;line-height:1.5!important}
.spw-seqv2-copy{padding:0 22px}
/* Arch window ~30% smaller on mobile (64vw/560px, 78svh/820px * 0.7). */
.spw-seqv2-arch__media{width:min(45vw,392px);height:min(55svh,574px)}
}

/* ------------------------ bottom scroll-cue prompt ------------------------ */
/* Desktop's up/down button nav is gone entirely per Haseeb ("the scroll nav
   sucks on desktop too. lets kill it."). Runs on BOTH desktop and mobile
   now — per Haseeb ("if not cursor then use the same scroll thing as on
   mobile"), since the cursor-follower's "Scroll" hint wasn't visibly
   working for him on desktop. A passive cue, no taps — JS toggles
   is-visible; hidden once past the pin. */
.spw-scroll-prompt{
	position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
	z-index:60;pointer-events:none;
	display:flex;flex-direction:column;align-items:center;gap:8px;
	opacity:0;transition:opacity .4s ease;
}
.spw-scroll-prompt.is-visible{opacity:1}
.spw-scroll-prompt span:first-child{
	font-family:var(--spw-sans);font-size:10px;font-weight:600;letter-spacing:.22em;
	text-transform:uppercase;color:rgba(244,239,228,.55);
}
/* Per Haseeb: "instead of arrow make it gold gradient line fade down
   slight gradient anim" — a gold gradient chunk loops down a thin line via
   background-position, reading as light flowing downward rather than a
   bouncing icon. */
.spw-scroll-prompt__line{
	display:block;width:1px;height:30px;
	background-image:linear-gradient(to bottom, transparent 0%, var(--spw-gold) 45%, transparent 85%);
	background-size:100% 240%;
	background-repeat:no-repeat;
	animation:spw-scroll-prompt-flow 2s linear infinite;
}
@keyframes spw-scroll-prompt-flow{
	0%{background-position:0 100%}
	100%{background-position:0 -140%}
}
@media(prefers-reduced-motion:reduce){.spw-scroll-prompt__line{animation:none;background-position:0 0}}

/* --------------------------- reduced motion ------------------------------ */
@media(prefers-reduced-motion:reduce){
.spw-seq-v2 .spw-preloader{display:none}
.spw-hero--v2seq{min-height:0}
.spw-seqv2-copy{position:relative;inset:auto;opacity:1;visibility:visible}
.spw-cinematic-home.spw-seq-v2 .spw-seqv2-flow>section{visibility:visible!important}
}