/* ============================================================
   NEXT PLAY WEALTH — motion layer ("Montfort-style")
   Keeps the warm identity (styles.css) and adds:
   full-screen hero · big type · scroll reveals · parallax ·
   cross-fade page transitions.  Include AFTER styles.css.
   ============================================================ */

/* ---- cross-fade between pages (Chromium; progressive) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* ============================================================
   DARK CINEMATIC HERO  (full viewport)
   ============================================================ */
.hero--cinematic {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.hero--cinematic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(196,168,104,0.16), transparent 60%),
    radial-gradient(70% 80% at 0% 100%, rgba(196,168,104,0.08), transparent 55%);
}
.hero--cinematic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero--cinematic .wrap { position: relative; z-index: 2; width: 100%; }
.hero--cinematic .eyebrow { color: var(--brass-soft); }
.hero--cinematic .eyebrow::before { background: var(--brass-soft); }

.hero-xl {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-top: 1.4rem;
}
.hero-xl .lead { display: block; color: var(--paper); }
.cycle-word {
  display: inline-block;
  color: var(--brass-soft);
  font-style: italic;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.cycle-word.swap { opacity: 0; transform: translateY(0.25em); }

.hero--cinematic .lede { color: rgba(246,241,230,0.78); margin-top: 2rem; max-width: 50ch; }

/* scroll cue */
.scrollcue {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(246,241,230,0.6);
}
.scrollcue .rail { position: relative; width: 1px; height: 46px; background: rgba(246,241,230,0.25); overflow: hidden; }
.scrollcue .rail::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--brass-soft); animation: railrun 2.1s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes railrun { 0% { transform: translateY(0); } 100% { transform: translateY(300%); } }

/* header over the dark hero: transparent until scrolled */
body[data-hero="dark"] .site-header { background: transparent; border-color: transparent; transition: background .4s, border-color .4s; }
body[data-hero="dark"] .site-header:not(.scrolled) .brand .mark { color: var(--paper); }
body[data-hero="dark"] .site-header:not(.scrolled) .brand .mark b { color: var(--brass-soft); }
body[data-hero="dark"] .site-header:not(.scrolled) .brand .reg { color: rgba(246,241,230,0.6); }
body[data-hero="dark"] .site-header:not(.scrolled) .nav a { color: rgba(246,241,230,0.82); }
body[data-hero="dark"] .site-header:not(.scrolled) .nav a:hover { color: var(--paper); }
body[data-hero="dark"] .site-header:not(.scrolled) .nav .btn { background: transparent; color: var(--paper); border-color: rgba(246,241,230,0.5); }
body[data-hero="dark"] .site-header:not(.scrolled) .nav .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
body[data-hero="dark"] .site-header:not(.scrolled) .nav-toggle { border-color: rgba(246,241,230,0.4); }
body[data-hero="dark"] .site-header:not(.scrolled) .nav-toggle span { background: var(--paper); }
body[data-hero="dark"] .site-header.scrolled { background: color-mix(in srgb, var(--paper) 85%, transparent); border-bottom-color: var(--line-soft); }

/* ============================================================
   BIG EDITORIAL TYPE + SECTIONS
   ============================================================ */
.statement {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch;
}
.statement em { font-style: italic; color: var(--brass-deep); }

.bignum {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--brass);
  letter-spacing: -0.02em; display: block;
}

.row-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 4vw, 3.5rem);
  align-items: center; padding-block: clamp(1.8rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.row-item:last-child { border-bottom: 1px solid var(--line); }
.row-item h3 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 400; }
.row-item p { color: var(--ink-soft); max-width: 40ch; }
.row-item .go { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .row-item { grid-template-columns: 1fr; gap: 0.8rem; }
  .row-item .go { justify-self: start; }
}

/* full-bleed dark band */
.band { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.band::after { content:""; position:absolute; right:-8%; top:-30%; width:55%; height:160%; background: radial-gradient(circle, rgba(196,168,104,0.16), transparent 60%); pointer-events:none; }
.band .eyebrow { color: var(--brass-soft); } .band .eyebrow::before { background: var(--brass-soft); }
.band h2 { color: var(--paper); } .band p { color: rgba(246,241,230,0.8); }
.band .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.band .btn:hover { background: var(--brass-soft); border-color: var(--brass-soft); }

/* ============================================================
   REVEAL VARIANTS + PARALLAX  (main.js toggles .in)
   ============================================================ */
[data-reveal="rise"] { opacity: 0; transform: translateY(48px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
[data-reveal="rise"].in { opacity: 1; transform: none; }

[data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s cubic-bezier(.2,.8,.2,1); }
[data-reveal="wipe"].in { clip-path: inset(0 0 0 0); }

[data-parallax] { will-change: transform; }

/* ============================================================
   CINEMATIC IMAGE SECTIONS  (swap placeholders for licensed media)
   ============================================================ */
/* clipped frame; inner image overflows so it can travel on scroll */
.media {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--paper-3);
}
.media--full {            /* full-bleed band */
  border-radius: 0; width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: clamp(60vh, 78vh, 820px);
}
.media__img {
  position: absolute; left: 0; width: 100%;
  height: calc(100% + 22vh); top: -11vh;     /* overflow budget for parallax */
  object-fit: cover; will-change: transform;
  transform: scale(1.06);                     /* slight zoom; settles via JS */
}
.media__scrim {            /* legibility wash for captions */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,36,30,.15) 0%, rgba(21,36,30,.05) 40%, rgba(21,36,30,.55) 100%);
}
.media__scrim--top { background: linear-gradient(180deg, rgba(21,36,30,.55) 0%, transparent 45%); }
.media-cap {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter);
  color: var(--paper);
}
.media-cap .wrap { padding-inline: 0; }
.media-cap .eyebrow { color: var(--brass-soft); } .media-cap .eyebrow::before { background: var(--brass-soft); }
.media-cap h2 { color: var(--paper); font-size: clamp(2rem, 5.5vw, 4.4rem); font-weight: 400; max-width: 18ch; }
.media-cap p { color: rgba(246,241,230,.85); max-width: 46ch; margin-top: 0.8rem; }

/* reveal the frame with a wipe as it enters */
.media[data-reveal="wipe"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.2,.8,.2,1); }
.media[data-reveal="wipe"].in { clip-path: inset(0 0 0 0); }

/* sticky/pinned: image holds while captions scroll past */
.pin { position: relative; }
.pin__media { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pin__media .media__img { height: 100%; top: 0; }
.pin__panels { position: relative; z-index: 2; }
.pin__panel { min-height: 100svh; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .media__img { transform: none !important; }
  .media[data-reveal="wipe"] { clip-path: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue .rail::after { animation: none; }
  [data-reveal="rise"], [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: none; transition: none; }
  [data-parallax] { transform: none !important; }
}