/* ============================================================
   Cox Ferguson — HOME v7 · Video storytelling (Noomo-style)
   Layers over styles.css (ivory system) for the content tail.
   ============================================================ */

/* ---------- Story stage ---------- */
.story { position: relative; background: radial-gradient(130% 100% at 50% 20%, #0a0f18 0%, #05070b 70%); }
.story-media[data-gl] {
  background-color: #05070b;
  background-image:
    radial-gradient(130% 100% at 50% 22%, rgba(10,15,24,.30) 0%, rgba(5,7,11,.64) 75%),
    url("../assets/img/cf-office.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.gl-scrim { background: radial-gradient(110% 85% at 50% 42%, transparent 46%, rgba(5,7,11,.55) 100%) !important; }

.story-media {
  position: fixed; top: 0; left: 0; right: 0; height: 100svh; overflow: hidden; z-index: 1;
  transition: opacity .5s ease;
}
/* The 3D background is fixed and morphs as a scroll-progress effect; it fades out
   once you scroll past the story into the ivory content below. */
body:not(.over-story) .story-media { opacity: 0; pointer-events: none; }
.story-media video, .story-media img.fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: vidDrift 26s ease-in-out infinite alternate;
}
@keyframes vidDrift {
  0% { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.13) translate(-1.2%, -1.4%); }
}
.story-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(7,10,15,.18), rgba(7,10,15,.66) 88%),
    linear-gradient(to bottom, rgba(7,10,15,.5), rgba(7,10,15,.32) 40%, rgba(7,10,15,.6));
}
.story-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 220px rgba(0,0,0,.55); }

/* scenes scroll normally over the fixed background — one screen each, content
   centred, no sticky pinning (that was causing the lock/vibrate on mobile) */
.scene {
  position: relative; z-index: 5; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 70px 0;
  pointer-events: none;
  overflow-x: clip;
}
.scene .sc-wrap {
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px);
  text-align: center;
  will-change: opacity, filter;
  pointer-events: auto;
}
/* soft dark halo behind scene content so particles never wash the text out */
.scene .sc-wrap::before {
  content: ""; position: absolute; z-index: -1;
  inset: -14% 0;
  background: radial-gradient(58% 58% at 50% 50%, rgba(4,6,10,.72) 0%, rgba(4,6,10,.42) 55%, transparent 78%);
  pointer-events: none;
}

/* ---------- Hero scene ---------- */
.sc-emblem {
  display: block; width: clamp(38px, 4.6vw, 58px); height: auto;
  margin: 0 auto clamp(10px, 2vh, 20px);
  opacity: 0; transform: translateY(20px) scale(.92);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 6px 30px rgba(0,0,0,.45));
}
.scene.live .sc-emblem { opacity: 1; transform: none; }

.sc-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .68rem; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(245,242,234,.85); font-weight: 600; margin-bottom: clamp(14px, 3vh, 30px);
}
.sc-kicker::before, .sc-kicker::after { content: ""; width: 44px; height: 1px; background: rgba(245,242,234,.4); }
.sc-pre {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 2.1rem); color: rgba(245,242,234,.92);
  letter-spacing: -.01em;
}
.sc-pre .of { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.sc-mega {
  font-family: var(--font-serif); font-style: italic; font-weight: 480;
  font-size: min(clamp(4.6rem, 17.5vw, 16.5rem), 38svh); line-height: 1.04; letter-spacing: -.02em;
  color: rgba(245,242,234,.96);
  text-shadow: 0 2px 60px rgba(7,10,15,.35);
  margin: clamp(2px, 1vh, 12px) 0 0; display: block;
  padding: .04em .1em .1em;
}
.sc-tag {
  margin-top: clamp(10px, 2vh, 22px);
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(.82rem, 1.4vw, 1.08rem); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,242,234,.78);
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease .55s, transform .7s cubic-bezier(.22,1,.36,1) .55s;
}
.scene.live .sc-tag { opacity: 1; transform: none; }
.sc-mega .blend { opacity: .92; }

.sc-start {
  position: absolute; top: calc(100svh - 82px); left: 50%; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; cursor: pointer; border: none;
  background: rgba(245,242,234,.1); color: #f5f2ea;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(245,242,234,.3);
  font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  transition: background .35s ease, transform .35s var(--ease);
  pointer-events: auto;
}
.sc-start:hover { background: rgba(245,242,234,.2); transform: translateX(-50%) scale(1.04); }
.sc-start .dot { width: 7px; height: 7px; border-radius: 50%; background: #f5f2ea; animation: startPulse 1.8s ease-in-out infinite; }
@keyframes startPulse { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- Narrative scenes ---------- */
.sc-line {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.16; letter-spacing: -.015em;
  color: #f5f2ea; max-width: 21ch; margin: 0 auto;
  text-shadow: 0 2px 44px rgba(7,10,15,.5);
}
.sc-line em { font-style: italic; color: #c5a05a; }
.sc-small {
  margin: 26px auto 0; max-width: 44ch;
  font-size: clamp(.95rem, 1.4vw, 1.12rem); color: rgba(245,242,234,.78);
}

/* portrait chips */
.sc-duo { display: flex; gap: 18px; justify-content: center; margin-top: 34px; }
.sc-duo a { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(245,242,234,.9); font-size: .82rem; font-weight: 600; letter-spacing: .06em; }
.sc-duo .ph {
  width: clamp(86px, 10vw, 132px); height: clamp(86px, 10vw, 132px); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(245,242,234,.5), 0 18px 50px rgba(0,0,0,.45);
}
.sc-duo .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); }
.sc-duo a:hover .ph img { transform: scale(1.1); }
.sc-duo small { display: block; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: .6rem; color: rgba(245,242,234,.6); margin-top: 2px; }

/* review stars */
.sc-stars {
  display: flex; gap: clamp(10px, 1.5vw, 20px); justify-content: center;
  margin-top: clamp(20px, 3.4vh, 34px);
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: #d8b46b;
  text-shadow: 0 0 18px rgba(216,180,107,.55), 0 6px 34px rgba(4,6,10,.8);
}
.sc-stars span {
  opacity: 0; transform: translateY(16px) scale(.6) rotate(-12deg);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.34,1.56,.64,1);
}
.sc-stars span:nth-child(1) { transition-delay: .25s; }
.sc-stars span:nth-child(2) { transition-delay: .37s; }
.sc-stars span:nth-child(3) { transition-delay: .49s; }
.sc-stars span:nth-child(4) { transition-delay: .61s; }
.sc-stars span:nth-child(5) { transition-delay: .73s; }
.scene.live .sc-stars span { opacity: 1; transform: none; }

/* glass chips row */
.sc-chips { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.sc-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: rgba(245,242,234,.09); color: #f5f2ea;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(245,242,234,.26);
  font-weight: 600; font-size: .9rem;
  transition: background .35s, transform .35s var(--ease);
}
.sc-chip:hover { background: rgba(245,242,234,.18); transform: translateY(-3px); color: #fff; }
.sc-chip svg { flex-shrink: 0; }

/* final scene CTAs */
.sc-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.sc-ctas .btn-gold { background: #f5f2ea; color: #0c1420; }
.sc-ctas .btn-gold:hover { background: #fff; color: #0c1420; box-shadow: 0 16px 50px rgba(0,0,0,.4); }
.sc-ctas .btn-ghost { color: #f5f2ea; box-shadow: inset 0 0 0 1.5px rgba(245,242,234,.45); }
.sc-ctas .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #f5f2ea; color: #fff; }
.scene .hero-pill {
  margin: 34px auto 0; background: rgba(245,242,234,.1);
  box-shadow: inset 0 0 0 1px rgba(245,242,234,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; max-width: 520px;
}
.scene .hero-pill input { color: #f5f2ea; }
.scene .hero-pill input::placeholder { color: rgba(245,242,234,.6); }
.scene .hero-pill .btn { background: #f5f2ea; color: #0c1420; }
.scene .hero-note { color: rgba(245,242,234,.66); }
.scene .hero-note a { color: #c5a05a; }

/* story progress dots */
.story-dots {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 11px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.story-dots.show { opacity: 1; pointer-events: auto; }
.story-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: rgba(245,242,234,.35); transition: all .35s var(--ease);
}
.story-dots button.on { background: #f5f2ea; transform: scale(1.6); }

/* ---------- Header over the story ---------- */
.site-header .lg-light { display: none; }
/* Header sits fully transparent over the story video (blur now lives on ::before) */
body.over-story .site-header:not(.scrolled-solid) { box-shadow: none; }
body.over-story .site-header:not(.scrolled-solid)::before {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.over-story .site-header .lg-dark { display: none; }
body.over-story .site-header .lg-light { display: block; }
body.over-story .site-header .main-nav a:not(.btn) { color: rgba(245,242,234,.85); }
body.over-story .site-header .main-nav a:not(.btn):hover,
body.over-story .site-header .main-nav a.active:not(.btn) { color: #fff; }
body.over-story .site-header .main-nav a:not(.btn)::before { background: #f5f2ea; }
body.over-story .site-header .btn-gold { background: #f5f2ea; color: #0c1420; }
body.over-story .nav-toggle span { background: #f5f2ea; }
@media (max-width: 860px) {
  body.over-story .main-nav { background: rgba(7,10,15,.96); }
  body.over-story .main-nav a:not(.btn) { color: #f5f2ea; }
}

/* ---------- Content tail transition ---------- */
.tail-rise {
  position: relative; z-index: 10; background: var(--paper);
  margin-top: 0;
}

/* ---------- Word-by-word reveals ---------- */
.sc-line .swd {
  display: inline-block; opacity: 0;
  transform: translateY(.55em) rotate(2deg); filter: blur(7px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease;
  transition-delay: calc(var(--wi, 0) * 55ms);
  transform-origin: left bottom;
}
.scene.live .sc-line .swd { opacity: 1; transform: none; filter: none; }

.scene .sc-small, .scene .sc-duo, .scene .sc-chips, .scene .sc-ctas, .scene .hero-pill, .scene .hero-note {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1) .35s, transform .7s cubic-bezier(.22,1,.36,1) .35s;
}
.scene.live .sc-small, .scene.live .sc-duo, .scene.live .sc-chips,
.scene.live .sc-ctas, .scene.live .hero-pill, .scene.live .hero-note {
  opacity: 1; transform: none;
}
.scene .sc-duo { transition-delay: .5s; }
.scene .sc-chips { transition-delay: .5s; }

/* mega title gets a clip-rise */
.sc-mega { overflow: hidden; }
.sc-mega .blend {
  display: inline-block; transform: translateY(112%);
  transition: transform 1.2s cubic-bezier(.16,1,.3,1) .15s;
}
.scene.live .sc-mega .blend { transform: none; }
.sc-pre, .sc-kicker {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease .05s, transform .7s cubic-bezier(.22,1,.36,1) .05s;
}
.scene.live .sc-pre, .scene.live .sc-kicker { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .story-media video, .story-media img.fallback { animation: none; }
  .scene { min-height: 100svh; }
  .scene .sc-wrap { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sc-start .dot { animation: none; }
  .sc-line .swd, .sc-mega .blend, .sc-pre, .sc-kicker, .sc-tag, .sc-emblem,
  .scene .sc-small, .scene .sc-duo, .scene .sc-chips, .scene .sc-ctas,
  .scene .hero-pill, .scene .hero-note { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

@media (max-width: 860px) {
  .sc-mega { font-size: clamp(4rem, 24vw, 8rem); }
  .story-dots { display: none; }
  .scene .sc-wrap { padding: 0 22px; }
  .sc-line { font-size: clamp(1.7rem, 7.4vw, 2.6rem); }
  /* story text fades in only (no rise/blur) on touch so nothing shifts as you scroll */
  .scene .sc-line .swd { transform: none; filter: none; }
  /* Option 2 pill: drop the glass wrapper so the email field stands on its own */
  .scene .hero-pill {
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---------- Mobile polish (home story) ---------- */
@media (max-width: 600px) {
  .scene .sc-wrap { padding: 0 20px; }
  .sc-kicker { font-size: .6rem; letter-spacing: .3em; gap: 8px; }
  .sc-kicker::before, .sc-kicker::after { width: 24px; }
  .sc-pre { font-size: clamp(1.05rem, 5.4vw, 1.5rem); }
  .sc-mega { font-size: clamp(3.4rem, 26vw, 7rem); }
  .sc-line { font-size: clamp(1.6rem, 7.6vw, 2.4rem); max-width: 18ch; }
  .sc-tag { font-size: .72rem; letter-spacing: .16em; }
  .sc-small { font-size: .98rem; margin-top: 18px; }

  /* dual CTAs stack full-width and stay tappable */
  .sc-ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .sc-ctas .btn { width: 100%; justify-content: center; }

  /* glass chips full-width pills */
  .sc-chips { gap: 12px; }
  .sc-chip { padding: 13px 22px; font-size: .86rem; }

  /* portraits a touch smaller, side by side still */
  .sc-duo { gap: 16px; margin-top: 28px; }

  /* keep the scroll-to-begin pill clear of the very bottom */
  .sc-start { top: calc(100svh - 74px); padding: 11px 22px; font-size: .76rem; }
}