/* ============================================================
   HERO — Modo B (curta cinematográfico dirigido por scroll)
   Versão CLARA: linho + luz dourada de manhã, master 16:9 full-bleed
   (enche a TV; no celular corta no miolo seguro). O vídeo é scrubbado
   pelo scroll; a copy é ancorada/assimétrica com talão de passagem;
   a trilha lateral mostra os cães percorrendo a rota do voo.
   Tokens de cor/fonte vivem em style.css :root.
   z: film(1) < veil(4) < bloom(5) < grain(6) < copy(10) < verse/finale(11) < hint(12) < route(20)
   ============================================================ */

/* ══════════ BARRA SUPERIOR (a "passagem" como linguagem) ══════════ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,44px) 12px;
  background:linear-gradient(180deg,rgba(251,246,238,.92),rgba(251,246,238,.62) 62%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.topbar::after{content:"";position:absolute;left:clamp(16px,4vw,44px);right:clamp(16px,4vw,44px);bottom:0;
  border-bottom:1px dashed color-mix(in srgb,var(--eucalipto) 32%,transparent)}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--tinta)}
.mark b{font-family:var(--serif);font-weight:500;font-size:1.35rem;letter-spacing:.06em;line-height:1}
.mark span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--tinta-2);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--tinta-2);
  text-decoration:none;padding:9px 14px;border-radius:2px;transition:color .2s,background .2s;white-space:nowrap;cursor:pointer}
.nav a:hover{color:var(--tinta);background:color-mix(in srgb,var(--eucalipto) 9%,transparent)}
.nav a.is-you{color:var(--eucalipto);border:1px solid color-mix(in srgb,var(--eucalipto) 34%,transparent);margin-left:8px}
.nav a.is-send{color:var(--papel);background:var(--terracota)}
.nav a.is-send:hover{background:var(--vinho)}
.nav a:focus-visible{outline:2px solid var(--eucalipto);outline-offset:2px}
@media(max-width:640px){
  .nav a{padding:8px 10px;font-size:.64rem}
  .nav a.is-you span,.mark span{display:none}
  .nav a.is-you{margin-left:4px}
}

/* ══════════ SPLASH de carregamento (some quando o vídeo certo pinta o 1º frame) ══════════ */
.boot{position:fixed;inset:0;z-index:100;background:var(--linho);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease}
.boot.gone{opacity:0;pointer-events:none}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.boot-mark{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,9vw,4rem);
  letter-spacing:.08em;color:var(--tinta);line-height:1}
.boot-rail{position:relative;width:132px;height:2px;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb,var(--eucalipto) 22%,transparent)}
.boot-rail i{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:2px;
  background:var(--terracota);animation:boot-slide 1.15s ease-in-out infinite}
.boot-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--eucalipto)}
@keyframes boot-slide{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){
  .boot-rail i{animation:none;left:0;width:100%}
  .boot{transition:opacity .2s ease}
}

/* ══════════ O HERO ══════════ */
.hero{position:relative;height:340vh;background:var(--linho);margin:0}
.hero-stage{position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--linho)}

/* o filme: FULL-BLEED 16:9 — enche a TV, corta com segurança no celular */
.hero-film{position:absolute;inset:0}
#hero-video,.poster-fallback{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;background:var(--linho)}
/* poster segura o quadro até o primeiro frame do vídeo ser pintado (evita flash linho) */
#hero-video{z-index:1;opacity:0;transition:opacity .5s ease}
.poster-fallback{z-index:0;opacity:1}
.hero-stage.is-live #hero-video{opacity:1}
.hero-stage.is-live .poster-fallback{opacity:0}

/* véu de luz: mantém o texto legível sem escurecer a cena (é versão CLARA) */
.veil{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(96deg,var(--linho) 0%,color-mix(in srgb,var(--linho) 86%,transparent) 26%,
    color-mix(in srgb,var(--linho) 38%,transparent) 52%,transparent 78%)}
.bloom{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 48% at 76% 18%,color-mix(in srgb,var(--sol) 42%,transparent),transparent 72%)}
.grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── a copy ── */
.copylayer{position:absolute;inset:0;z-index:10;pointer-events:none}
.cap{position:absolute;left:clamp(20px,5.5vw,88px);top:50%;transform:translateY(-50%);
  width:min(46vw,540px);opacity:0;will-change:opacity}
.cap::before{content:"";position:absolute;left:-18px;top:6px;bottom:6px;
  border-left:1px dashed color-mix(in srgb,var(--eucalipto) 42%,transparent)}
.numeral{position:absolute;left:-4px;top:-.62em;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(7rem,16vw,13rem);line-height:1;color:color-mix(in srgb,var(--terracota) 35%,transparent);
  pointer-events:none;user-select:none;z-index:-1}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terracota);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow i{flex:0 0 26px;height:1px;background:currentColor;display:block;font-style:normal}
.line{font-family:var(--serif);font-weight:300;color:var(--tinta);margin:.42em 0 0;
  font-size:clamp(2.1rem,5.2vw,4.1rem);line-height:1.02;letter-spacing:-.012em;text-wrap:balance;
  text-shadow:var(--halo)}
.line em{font-style:italic;color:var(--vinho)}
/* elo temático entre a cena IV ("união") e a V ("uniu") — terracota reto, distinto do itálico-vinho */
.line .tie{color:var(--terracota);font-weight:500}
.sub{margin:1.1em 0 0;max-width:34ch;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.65vw,1.4rem);line-height:1.42;color:color-mix(in srgb,var(--tinta) 76%,var(--tinta-2))}
.stub{margin-top:1.6em;display:flex;gap:22px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--tinta-2);text-transform:uppercase}
.stub b{display:block;color:var(--tinta);font-weight:400;letter-spacing:.1em;margin-top:3px}

/* CAP II — a tipografia CONVERGE: dois blocos que viram um */
.duo{position:absolute;inset:0;opacity:0}
.duo .half{position:absolute;top:39%;width:min(30vw,330px);font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.05;will-change:transform;text-shadow:var(--halo)}
.duo .ela{left:clamp(20px,5.5vw,88px);text-align:left}
.duo .ele{right:clamp(20px,5.5vw,88px);text-align:right}
.duo .half small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--terracota);margin-bottom:.9em;text-shadow:var(--halo)}
.duo .join{position:absolute;left:50%;top:54%;transform:translateX(-50%);width:min(78vw,640px);text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.1rem,2.1vw,1.7rem);
  line-height:1.35;color:var(--tinta);opacity:0;text-shadow:var(--halo)}
/* cabeçalho de capítulo da cena II — PADRÃO PC: título no meio-baixo do numeral (~62%), como pág 1/3 */
.duo-eye{position:absolute;left:clamp(20px,5.5vw,88px);top:34%;bottom:auto;margin:0;z-index:1;white-space:nowrap}
.duo-num{left:clamp(12px,4.6vw,78px);top:20%;bottom:auto}

/* CAP V — mesma linguagem dos outros capítulos, ancorada à ESQUERDA (o casal
   fica no centro/direita da cena, então o texto à esquerda não cobre rostos) */
.cap-v{z-index:11}
.cap-v .sub{font-style:italic}
.finale{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;opacity:0;z-index:11}
.finale p{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.8rem);margin:0 0 1em;color:var(--tinta);
  text-shadow:var(--halo)}
.finale a{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--papel);background:var(--terracota);text-decoration:none;padding:14px 26px;pointer-events:auto;
  transition:background .3s}
.finale a:hover{background:var(--vinho)}
.finale a:focus-visible{outline:2px solid var(--eucalipto);outline-offset:3px}

/* ── TRILHA LATERAL: a rota do voo, com os cães como marcador ── */
.route{position:absolute;right:clamp(14px,2.6vw,40px);top:50%;transform:translateY(-50%);z-index:20;
  height:min(58vh,420px);width:2px}
.route .line-v{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:0;
  border-left:1px dashed color-mix(in srgb,var(--eucalipto) 45%,transparent)}
.route .fill{position:absolute;left:50%;top:0;transform:translateX(-50%);width:0;height:0;
  border-left:1.5px solid var(--terracota);transition:height .18s linear}
.wp{position:absolute;right:-5px;width:12px;height:12px;border-radius:50%;
  background:var(--linho);border:1px solid color-mix(in srgb,var(--eucalipto) 55%,transparent);
  cursor:pointer;transition:background .3s,border-color .3s,transform .3s;padding:0}
.wp span{position:absolute;right:24px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);
  opacity:0;transition:opacity .25s,color .25s}
.wp.on{background:var(--terracota);border-color:var(--terracota);transform:scale(1.25)}
.wp.on span,.route:hover .wp span{opacity:1}
.wp.on span{color:var(--tinta)}
.marker{position:absolute;right:-30px;width:78px;max-width:none;margin-top:-28px;pointer-events:none;
  filter:brightness(1.12) drop-shadow(0 4px 8px rgba(59,38,32,.22));transition:opacity .3s}
@media(max-width:860px){
  .route{right:8px;height:44vh}
  .wp span{display:none}
  .marker{width:50px;right:-7px;margin-top:-18px}
}

/* hint */
.hint{position:absolute;left:clamp(20px,5.5vw,88px);bottom:5vh;z-index:12;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);
  transition:opacity .5s ease}
.hint a{color:var(--tinta-2);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--tinta-2) 40%,transparent);
  margin-left:14px;pointer-events:auto}
.hint a:hover{color:var(--terracota);border-color:var(--terracota)}

/* mobile: a cena inteira cabe (contain) numa faixa 16:9 no alto; a copy fica
   embaixo no linho. Resolve convite cortado / só um noivo no aeroporto / cabeça
   cortada — nada é ampliado além do quadro. */
@media(max-width:860px){
  /* vídeo mobile é 9:16 nativo (cenas 1-2) + corte central (3-5) -> tela cheia (cover) */
  #hero-video,.poster-fallback{object-fit:cover;object-position:center;background:var(--linho)}
  .cap{left:20px;right:20px;width:auto;top:auto;bottom:14vh;transform:none;max-width:none}
  .cap::before{display:none}
  /* numeral: topo ALINHADO à linha do título (borda superior do numeral = título), à direita */
  .numeral{font-size:9rem;top:0;bottom:auto;left:auto;right:2px}
  .veil{background:linear-gradient(0deg,var(--linho) 5%,color-mix(in srgb,var(--linho) 80%,transparent) 36%,transparent 64%)}
  .line{font-size:clamp(1.9rem,8vw,2.6rem)}
  /* convergência VERTICAL, no terço superior (não cobre o casal que caminha no centro) */
  .duo .half{left:20px;right:20px;width:auto;font-size:clamp(1.4rem,6.4vw,1.9rem)}
  .duo .ela{top:26%;text-align:left} .duo .ele{top:44%;text-align:right}
  /* cena II: título subido + numeral alinhado ao título + texto (join) logo abaixo */
  .duo-eye{top:64%;bottom:auto;left:20px}
  .duo-num{top:64%;bottom:auto;left:auto;right:2px;font-size:9rem}
  .duo .join{top:69%;bottom:auto;width:84vw}
  /* cena IV: sobe título+texto (conteúdo curto ficava baixo demais) */
  #c3{bottom:24vh}
  .hint{bottom:3vh;font-size:.56rem}
  /* cena V: cap-v no MESMO bottom dos outros (numeral alinhado); botão ABAIXO do versículo */
  .finale{bottom:4vh}
  .finale p{font-size:1.05rem;margin:0 0 .6em}
  .finale a{white-space:nowrap;padding:13px 32px;font-size:.66rem;letter-spacing:.13em}
}

/* ── reduced motion: sem scrub; poster + versículo + fecho estáticos ── */
.hero.reduced{height:100dvh}
.hero.reduced .hero-stage{position:relative}
.hero.reduced #hero-video,.hero.reduced .route,.hero.reduced .hint,
.hero.reduced .cap:not(.cap-v),.hero.reduced .duo{display:none}
.hero.reduced .poster-fallback{opacity:1}
.hero.reduced .cap-v,.hero.reduced .finale{opacity:1}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }