/* The Simmer — scroll-scrubbed opening flight for /welcome.
   Five baked scenes (Seedance) scrubbed by scroll; ends in a cream
   whiteout that hands off to the page itself. Contract:
   agentic-os video-projects/simmer-splash/anchor-brief.md.
   Engine: simmer.js. Sticky stage on purpose — no ScrollTrigger pin,
   so a failed measure can never corrupt the pins below. */

.simmer {
  position: relative;
  background: #131109;
  padding: 0; /* the site's generic section padding would leave dark bands around the sticky stage */
}

/* Track height set by JS (scenes × per-scene span). Fallback keeps the
   section harmless if JS never runs: one viewport, poster only. */
.simmer-track { position: relative; height: 100vh; }

.simmer-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #131109;
}

.simmer-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.simmer-scene.is-front { opacity: 1; }
.simmer-scene video,
.simmer-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Poster sits under the video; video fades in over it once it can seek. */
.simmer-scene video { opacity: 0; transition: opacity 0.35s ease; }
.simmer-scene.video-ready video { opacity: 1; }

/* At rest the film holds frame 0 — no lid motion for the scroll to
   fight. Life comes from the ember glow + slow breathe (both continuous
   sine, no dwell at the extremes). */
@keyframes simmer-breathe {
  0%, 100% { transform: scale(1.0); }
  50% { transform: scale(1.012); }
}
.simmer .simmer-scene[data-scene="0"] img,
.simmer .simmer-scene[data-scene="0"] video {
  animation: simmer-breathe 5.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.simmer.is-scrolled .simmer-scene[data-scene="0"] img,
.simmer.is-scrolled .simmer-scene[data-scene="0"] video { animation: none; }

/* Copy overlays — cream type over the film, one line at a time. */
.simmer-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
}
.simmer-line {
  position: absolute;
  max-width: 30ch;
  opacity: 0;
  transform: translateY(14px);
  color: #F5F1DF;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.simmer-line .script {
  display: block;
  font-family: 'Vintage Goods', cursive;
  font-size: 0.72em;
  color: #E9B98C;
  margin-top: 0.5em;
}
/* Feature callouts ride lower thirds so the food stays the star. */
.simmer-line.is-callout { place-self: end center; margin-bottom: 16vh; }

/* Cream-out — the phone screen becomes the page. Uses the page cream. */
.simmer-creamout {
  position: absolute;
  inset: 0;
  background: #F5F1DF;
  opacity: 0;
  pointer-events: none;
}

/* Scroll cue + skip */
.simmer-cue {
  position: absolute;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(245, 241, 223, 0.85);
  font: 500 0.72rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.simmer.is-ready .simmer-cue { opacity: 1; }
.simmer.is-scrolled .simmer-cue { opacity: 0; }
.simmer-cue span {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, rgba(245,241,223,0), rgba(245,241,223,0.9));
  animation: simmer-cue-drip 1.8s ease-in-out infinite;
}
@keyframes simmer-cue-drip {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.simmer-skip {
  position: absolute;
  right: calc(1.1rem + env(safe-area-inset-right));
  top: calc(1.1rem + env(safe-area-inset-top));
  padding: 0.55rem 0.95rem;
  min-height: 44px;
  border: 1px solid rgba(245, 241, 223, 0.35);
  border-radius: 999px;
  background: rgba(19, 17, 9, 0.35);
  color: rgba(245, 241, 223, 0.9);
  font: 500 0.72rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.simmer-skip:hover { border-color: rgba(245, 241, 223, 0.7); }

/* Reduced motion (or the engine bailing): the flight steps aside entirely —
   the page below is the complete experience. */
html.reduce .simmer, .simmer.simmer-off { display: none; }

/* While the flight owns the viewport, the site nav steps out of frame
   (igloo grammar: the film is the page). It returns at the cream-out. */
html.simmer-live .nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ---------- v2 (Matt's notes): branding, alive-at-rest, film-only page ---------- */

/* The film IS the page now: the old marketing acts step aside. The
   walkthrough (.story) and the closer survive; everything else retires. */
.nav, .chapters, .intro, .stats, .family, .rail, .story { display: none !important; }

/* Branding — live type in the brand script (the wordmark asset is navy,
   invisible on the film; type stays crisp at every DPR). */
.simmer-brand-corner {
  position: absolute;
  left: calc(1.4rem + env(safe-area-inset-left));
  top: calc(1.05rem + env(safe-area-inset-top));
  color: #F5F1DF;
  font-size: 1.25rem;
  opacity: 0.92;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.simmer-brand-corner .script, .simmer-lockup .script { font-family: 'Vintage Goods', cursive; }
.simmer-lockup {
  position: absolute;
  left: 50%;
  top: 16vh;
  transform: translateX(-50%);
  text-align: center;
  color: #F5F1DF;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.simmer-lockup img { display: block; margin: 0 auto 0.4rem; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
.simmer-lockup .script { display: block; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; }
.simmer-lockup em {
  display: block;
  margin-top: 0.55rem;
  font: 500 0.78rem/1.4 Inter, system-ui, sans-serif;
  font-style: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 241, 223, 0.75);
}

/* The walkthrough joins the film world: near-black act, cream type,
   the phone stays the light source. */
.story {
  background: #131109 !important;
  color: #F5F1DF !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
}
.story .section-head .eyebrow { color: #E06A35; }
.story .section-head h2 { color: #F5F1DF; }
.story .story-beat .eyebrow { color: #E06A35; }
.story .story-beat h3 { color: #F5F1DF; }
.story .story-beat p { color: rgba(245, 241, 223, 0.78); }
.story .skip-chip { background: rgba(19,17,9,0.4); color: rgba(245,241,223,0.85); border-color: rgba(245,241,223,0.3); }

.closer-backtotop-row { margin-top: 1.4rem; text-align: center; }


/* ---------- v3: ember glow pulse + the walkthrough on the film phone ---------- */

.simmer-film { position: absolute; inset: 0; will-change: transform; }

/* igloo-style pulse: warm light breathing out of the simmering pot.
   Pure sine (cubic-bezier(0.37,0,0.63,1) ≈ easeInOutSine both ways),
   so there is never a dwell at the top or bottom of the pulse. */
.simmer-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 130vmin;
  height: 90vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(224, 106, 53, 0.34), rgba(224, 106, 53, 0.10) 45%, rgba(224, 106, 53, 0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: simmer-glow 5.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes simmer-glow {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
.simmer.is-scrolled .simmer-glow { animation: none; opacity: 0; transition: opacity 0.5s ease; }

/* The app playing on the film phone's screen. Position/size set by JS
   from the measured hold-frame rect — it is glued to the video phone. */
.simmer-screenfit {
  position: absolute;
  overflow: hidden;
  border-radius: 4.5% / 2.2%;
  background: #F5F1DF;
  opacity: 0;
  pointer-events: none;
}
.simmer-screenfit .sfit-shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  will-change: transform;
}
.sfit-caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4.5%;
  padding: 0.7em 0.9em;
  border-radius: 14px;
  background: rgba(245, 241, 223, 0.92);
  box-shadow: 0 8px 26px -12px rgba(58, 42, 30, 0.5);
  text-align: center;
  opacity: 0;
}
.sfit-caption span {
  display: block;
  font: 600 0.62rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C4623A;
}
.sfit-caption strong {
  display: block;
  margin-top: 0.3em;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.35vw, 1.15rem);
  color: #3A2A1E;
}


/* Idle film layer: the pot lives while the page rests (steam, flame,
   breathing ember light — lid still). Fades out the moment scroll owns
   the frame; the scrub layer beneath starts from the same anchor frame. */
.simmer-idle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.simmer.is-scrolled .simmer-idle { opacity: 0; }

/* During the dive the screen turns into pure light */
.simmer-screenfit.is-zooming { box-shadow: 0 0 120px 40px rgba(245, 241, 223, 0.55); }

/* Stable compositor layers for the film copy — WebKit ghost-paint guard */
.simmer-line, .simmer-lockup { will-change: opacity, transform; }