/* ============================================================
   SynPETic — Cinematic landing (persistent 3D backdrop)
   Near-black · off-white · one soft cyan accent. CDN-free.
   ============================================================ */
:root {
  --cine-cyan: #6fdde6;
  --cine-ink:  #eceae1;
  --cine-dim:  #98a0a8;
  --cine-faint:#575e67;
  --e2: cubic-bezier(.22, .61, .36, 1);
  --sh: 0 2px 40px rgba(0, 0, 0, .85);
}

/* Landing body: near-black, geometric sans, no horizontal scroll */
body {
  background: #04050a;
  color: var(--cine-ink);
  font-family: var(--font-geo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }

/* Persistent full-screen 3D backdrop */
#cine-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s var(--e2);
  pointer-events: none;
  background: radial-gradient(150% 115% at 62% 26%, #0b141e 0%, #05070e 52%, #030409 100%);
}
#cine-bg canvas { display: block; }

/* Vignette + film grain */
.cine-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(122% 94% at 60% 44%, transparent 46%, rgba(0, 0, 0, .7) 100%);
}
.cine-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Soft light bloom that pulses at each scene transition */
.cine-flash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at 62% 42%, rgba(111, 221, 230, .9) 0%, rgba(111, 221, 230, .18) 40%, transparent 70%);
  mix-blend-mode: screen; will-change: opacity;
}

/* Entrance reveal (close stamp) */
.cine-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--e2), transform .9s var(--e2); }
.cine-reveal.seen { opacity: 1; transform: none; }

/* Hero + scroll cue */
.cine-hero { position: relative; z-index: 3; min-height: 100vh; }
.cine-cue { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 3; }
.cine-cue .r { display: block; width: 1px; height: 34px; background: linear-gradient(var(--cine-cyan), transparent); position: relative; overflow: hidden; }
.cine-cue .r::after { content: ""; position: absolute; top: -40%; left: 0; width: 1px; height: 40%; background: var(--cine-cyan); animation: cineDrop 2s var(--e2) infinite; }
@keyframes cineDrop { to { top: 100%; } }

/* Scene captions — fixed bottom-left, tiny mono labels */
.cine-cap {
  position: fixed;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(64px, 12vh, 120px);
  z-index: 4; opacity: 0; pointer-events: none; max-width: 300px;
}
.cine-cap .k {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cine-cyan); display: inline-flex; align-items: center; gap: 9px; text-shadow: var(--sh);
}
.cine-cap .k::before { content: ""; width: 20px; height: 1px; background: var(--cine-cyan); opacity: .7; }
.cine-cap p { margin-top: 9px; font-size: 13px; font-weight: 400; color: var(--cine-dim); line-height: 1.45; text-shadow: var(--sh); }

/* Scroll-driving spacers (6 scenes) */
.cine-spacer { position: relative; z-index: 3; }
#cine-s0 { min-height: 210vh; }
#cine-s1 { min-height: 230vh; }
#cine-s2 { min-height: 220vh; }
#cine-s3 { min-height: 240vh; }
#cine-s4 { min-height: 220vh; }
#cine-s5 { min-height: 280vh; }

/* Closing stamp */
.cine-close {
  position: relative; z-index: 3; min-height: 110vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(4, 5, 10, 0), rgba(4, 5, 10, .86) 42%, #04050a 78%);
}
.cine-stamp { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; }
.cine-stamp .mark { font-family: var(--font-geo); font-weight: 600; font-size: clamp(19px, 4vw, 28px); letter-spacing: .42em; text-transform: uppercase; text-shadow: var(--sh); }
.cine-stamp .mark b { color: var(--cine-cyan); font-weight: 600; }
.cine-stamp .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .32em; color: var(--cine-dim); text-transform: uppercase; }

@media (max-width: 760px) {
  .cine-cap { max-width: 240px; }
  #cine-s0, #cine-s1, #cine-s2, #cine-s3, #cine-s4, #cine-s5 { min-height: 200vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-cue .r::after { animation: none; }
  .cine-reveal { opacity: 1; transform: none; }
  #cine-bg { opacity: 1; }
}

/* ============================================================
   Intro / outro branding screens + nav brand hide
   ============================================================ */
/* Hide the injected nav brand on the landing (intro screen carries it) */
.brand { display: none !important; }
.nav-menu { margin-left: auto; }

/* Full-screen intro that scrolls away */
.cine-screen {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, #070a10 0%, #04050a 60%, #030409 100%);
  will-change: opacity, transform;
}
.cine-intro { z-index: 60; }
.cine-screen-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; padding: 0 6vw; }
.cine-screen-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cine-cyan);
  opacity: 0; animation: cineIn 1s var(--e2) forwards; animation-delay: .2s;
}
.cine-screen-wm {
  margin: 0;
  font-family: var(--font-geo); font-weight: 600;
  font-size: clamp(3.4rem, 15vw, 12rem); line-height: 0.88; letter-spacing: -0.05em;
  color: var(--cine-ink);
  opacity: 0; animation: cineWm 1.5s var(--e2) forwards; animation-delay: .35s;
}
.cine-screen-wm .pet {
  background: linear-gradient(120deg, var(--cine-cyan) 0%, #d8fbff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cine-screen-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cine-dim);
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; animation: cineIn 1s var(--e2) forwards; animation-delay: 1.1s;
}
.cine-screen-hint::after {
  content: ""; width: 1px; height: 26px; margin-top: 6px;
  background: linear-gradient(var(--cine-cyan), transparent);
  display: inline-block; animation: cineHint 1.8s var(--e2) infinite;
}
@keyframes cineIn { to { opacity: 1; } }
@keyframes cineWm { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cineHint { 0% { transform: translateY(-6px); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateY(6px); opacity: .3; } }

/* Enlarge / centre the closing stamp into a finale screen */
.cine-close { min-height: 128vh; }
.cine-stamp { gap: 1.1rem; }
.cine-stamp .mark { font-size: clamp(2.4rem, 8vw, 6rem); letter-spacing: -0.03em; text-transform: none; }
.cine-stamp .mark b { color: var(--cine-cyan); }
.cine-stamp .sub { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cine-dim); }
@media (prefers-reduced-motion: reduce) {
  .cine-screen-eyebrow, .cine-screen-wm, .cine-screen-hint { animation: none; opacity: 1; }
  .cine-screen-hint::after { animation: none; }
}