/* Example 3 — "One Day in Monroe" narrated photo-film */
#intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;opacity:1;transition:opacity .7s ease}
#intro.leaving{opacity:0;pointer-events:none}
#intro.gone{display:none}
#photos{position:absolute;inset:0}
.photo{position:absolute;inset:0;opacity:0;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}

#intro .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.38) 100%)}
#intro .grain{position:absolute;inset:-60px;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-24px,14px)}50%{transform:translate(16px,-20px)}75%{transform:translate(-10px,-14px)}100%{transform:translate(0,0)}}
#intro .wash{position:absolute;inset:0;background:#fff;opacity:0;z-index:4;transition:opacity 1.1s ease;pointer-events:none}
#intro.endmode .wash{opacity:1}
#intro .progress{position:absolute;left:0;bottom:0;height:3px;background:#7ddc7f;width:0;z-index:6;opacity:.9}

/* chapter tag */
.daytag{position:absolute;top:26px;left:30px;z-index:5;display:flex;align-items:center;gap:.9rem;opacity:0;transition:opacity .8s ease}
.daytag .rule{width:52px;height:2px;background:#7ddc7f}
.daytag span{font:700 .8rem 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.daytag.on{opacity:1}

/* captions — sentence case, word-by-word karaoke highlight */
#caption{position:absolute;left:6vw;right:6vw;bottom:9vh;z-index:5;pointer-events:none;text-align:left}
#caption .g{display:inline;font:600 clamp(1.25rem,2.6vw,2rem)/1.45 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.65)}
#caption .w{opacity:.38;transition:opacity .18s ease,text-shadow .18s ease}
#caption .w.on{opacity:1;text-shadow:0 0 18px rgba(125,220,127,.35),0 2px 22px rgba(0,0,0,.6)}
#caption{opacity:0;transition:opacity .35s ease}
#caption.show{opacity:1}

/* end card */
#endcard{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;opacity:0;transition:opacity .8s ease .2s}
#intro.endmode #endcard{opacity:1}
#endcard img.lockup{width:min(430px,68vw);height:auto;filter:drop-shadow(0 6px 24px rgba(16,19,18,.18))}
#endcard .tagline{font-family:'Anton',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:clamp(1.3rem,3.4vw,2.3rem);color:var(--black);letter-spacing:.03em}
#endcard .tagline .accent{color:var(--green)}
#endcard .sub{font:700 .86rem 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
#endcard .sub b{color:var(--green)}
#endcard>*{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
#intro.endmode #endcard>*{opacity:1;transform:none}
#intro.endmode #endcard>*:nth-child(2){transition-delay:.2s}
#intro.endmode #endcard>*:nth-child(3){transition-delay:.34s}

/* controls */
#controls{position:absolute;top:20px;right:20px;z-index:8;display:flex;gap:.6rem;opacity:0;transition:opacity .5s ease .6s}
#intro.on #controls{opacity:1}
#controls button{display:inline-flex;align-items:center;gap:.5rem;background:rgba(16,19,18,.55);color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.55rem 1.05rem;cursor:pointer;
  font:700 .78rem 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px);transition:.18s}
#controls button:hover{background:rgba(29,107,36,.85);border-color:#7ddc7f}
#controls button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btnSound .on-ic{display:none}
#btnSound.unmuted .on-ic{display:block}
#btnSound.unmuted .off-ic{display:none}

#logoFlight{position:fixed;z-index:120;pointer-events:none;transform-origin:top left;
  transition:transform 1.05s cubic-bezier(.55,.06,.15,1),opacity .5s ease .6s;will-change:transform}
#logoFlight img{display:block;width:100%;height:auto}
body:not(.intro-done) #siteLogo{opacity:0}

@media(max-width:640px){
  .daytag{left:18px;top:58px;gap:.6rem}
  .daytag .rule{width:26px}
  .daytag span{font-size:.6rem;letter-spacing:.18em;max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #caption{left:6vw;right:6vw;bottom:7vh}
  #controls{top:12px;right:12px}
  #controls button{padding:.5rem .85rem;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){ #intro .grain{animation:none} }
/* Replay button (from Kimi's page CSS; Daryl 2026-10-22: "have a replay intro button") */
.watch-intro{position:fixed;right:22px;bottom:22px;z-index:60;display:none;align-items:center;gap:.55rem;
  background:var(--black);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:.68rem 1.15rem;font:700 .82rem 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.18s}
.watch-intro:hover{background:var(--green);transform:translateY(-2px)}
.watch-intro .dot{width:9px;height:9px;border-radius:50%;background:#7ddc7f}
body.intro-done .watch-intro{display:inline-flex}
@media(max-width:560px){.watch-intro{right:12px;bottom:12px;padding:.5rem .85rem;font-size:.7rem;gap:.4rem}}
/* phone gutter for the end card (2026-10-22: the tagline line ran edge to edge at 390 px) */
#endcard{padding:0 16px;text-align:center}
@media(max-width:560px){#endcard .sub{letter-spacing:.1em;font-size:.72rem;line-height:1.6}}