/* NÓVERA — CINEMA: abertura + hero com refração em WebGL.
   Tudo aqui só vale com html.cine (definido por js/intro-gate.js).
   Sem JS ou com movimento reduzido, o site abre exatamente como antes. */

:root { --cine-ease: cubic-bezier(.16, 1, .3, 1); --cine-io: cubic-bezier(.76, 0, .24, 1); --amber: #e8b673; }
html.intro-lock, html.intro-lock body { overflow: hidden; }

/* ---------- ABERTURA ---------- */
.intro { display: none; }
html.cine-intro .intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 55%, #1a140e 0%, #0b0907 55%, #070605 100%);
  color: #f3eee4; clip-path: inset(0 0 0 0); cursor: pointer;
  /* trava de segurança: se o JS falhar, a abertura some sozinha */
  animation: introFailsafe .7s ease 4.6s forwards;
}
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; } }
.intro.is-running { animation: none; }

.intro-stage { position: relative; display: grid; justify-items: center; gap: clamp(18px, 2.6vw, 30px); transition: transform 1s var(--cine-io), opacity .7s ease; }
.intro-word {
  display: flex; margin: 0 -.16em 0 0; letter-spacing: .16em;
  font: 400 clamp(52px, 10.5vw, 156px)/1 'Bodoni Moda', Georgia, serif;
}
.intro-word span { display: inline-block; overflow: hidden; padding: .06em 0 .1em; }
.intro-word i { display: inline-block; font-style: normal; transform: translateY(108%) rotate(4deg); filter: blur(10px); opacity: 0; }
/* a abertura anima só com CSS, desde a primeira pintura (não espera o JS) */
html.cine-intro .intro-word i { animation: letterIn 1.25s var(--cine-ease) both; animation-delay: calc(var(--i) * 75ms + 200ms); }
@keyframes letterIn { from { transform: translateY(108%) rotate(4deg); filter: blur(10px); opacity: 0; } to { transform: none; filter: blur(0); opacity: 1; } }
@keyframes beamIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes beamOut { from { transform: scaleX(1); opacity: .95; } to { transform: scaleX(1.25) scaleY(60); opacity: 0; } }
@keyframes cineFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro-beam {
  width: min(72vw, 760px); height: 1px; transform: scaleX(0); opacity: .95;
  background: linear-gradient(90deg, transparent, #b98a52 18%, #fff2d9 50%, #b98a52 82%, transparent);
  box-shadow: 0 0 22px 2px #e8a85a8c, 0 0 70px 8px #e8a85a33;
}
.intro-beam { animation: beamIn 1.5s var(--cine-io) .1s both; }
.intro-sub { margin: 0; font: 500 11px/1 Manrope, system-ui, sans-serif; letter-spacing: .42em; text-transform: uppercase; color: #c9b597; opacity: 0; transform: translateY(8px); }
.intro-sub { animation: cineFade 1s var(--cine-ease) 1s both; }
.intro-meta { position: absolute; left: var(--pad, 24px); right: var(--pad, 24px); bottom: 28px; display: flex; justify-content: space-between; font: 500 11px/1 Manrope, system-ui, sans-serif; letter-spacing: .18em; color: #a8987f; opacity: 0; }
.intro-meta { animation: cineFade .8s ease .45s both; }
.intro-count { font-variant-numeric: tabular-nums; color: #e9dcc6; }

/* saída: a luz estoura e a cortina sobe revelando o hero */
.intro.is-out { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--cine-io) .12s; }
.intro.is-out .intro-stage { transform: translateY(-9vh); opacity: 0; }
.intro.is-out .intro-beam { animation: beamOut .75s var(--cine-io) forwards; }
.intro.is-gone { display: none !important; }

/* ---------- HERO ---------- */
#hero .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease; }
#hero .hero-fx.on { opacity: 1; }
/* a camada de gradiente do hero continua acima do canvas */
#hero .hero-bg::after { z-index: 1; pointer-events: none; }

/* estado antes da revelação (com trava de segurança) */
html.cine-pending body #hero .hero-in > *,
html.cine-pending body #hero .hero-bottom,
html.cine-pending body #hero .hero-index,
html.cine-pending body #hero .hot { opacity: 0; transform: translateY(26px); animation: cineFailsafe .6s ease 5s forwards; }
@keyframes cineFailsafe { to { opacity: 1; transform: none; } }
html.cine-pending body #hero .hero-in > .hero-title { opacity: 1; transform: none; }

/* título em linhas mascaradas */
#hero .hero-title .ln { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .08em .14em 0; margin: -.04em -.08em -.14em 0; }
#hero .hero-title .ln > span { display: inline-block; will-change: transform; }
html.cine-pending body #hero .hero-title .ln > span { transform: translateY(112%) rotate(3deg); }

/* revelação em cascata */
html.cine body #hero.is-revealed .hero-in > *,
html.cine body #hero.is-revealed .hero-bottom,
html.cine body #hero.is-revealed .hero-index,
html.cine body #hero.is-revealed .hot {
  opacity: 1; transform: none; animation: none;
  transition: opacity 1s ease, transform 1.2s var(--cine-ease);
  transition-delay: var(--d, 0ms);
}
html.cine body #hero.is-revealed .hero-title .ln > span { transform: none; transition: transform 1.35s var(--cine-ease); transition-delay: var(--d, 0ms); }

/* sem WebGL: a foto entra com zoom suave e cortina de luz */
html.cine body #hero.no-fx.is-revealed .hero-bg picture { animation: heroFallback 1.8s var(--cine-ease) both; }
@keyframes heroFallback { from { clip-path: inset(0 0 0 100%); transform: scale(1.08); filter: brightness(1.6); } to { clip-path: inset(0); transform: none; filter: none; } }

/* paralaxe do conteúdo ao rolar (--hp vai de 0 a 1) */
html.cine #hero .hero-in { transform: translate3d(0, calc(var(--hp, 0) * -80px), 0); opacity: calc(1 - var(--hp, 0) * 1.15); will-change: transform, opacity; }

/* botão principal magnético (só desktop) */
@media (hover: hover) and (pointer: fine) {
  html.cine #hero .hero-cta .btn { transition: transform .5s var(--cine-ease), background .3s ease; }
  html.cine #hero .hero-cta .btn > span { display: inline-block; transition: transform .5s var(--cine-ease); }
  html.cine #hero .hero-cta .btn:hover > span { transform: translate(3px, -3px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}

/* atraso de cada letra (sem style inline, por causa da CSP) */
.intro-word span:nth-child(1) i { --i: 0; } .intro-word span:nth-child(2) i { --i: 1; } .intro-word span:nth-child(3) i { --i: 2; }
.intro-word span:nth-child(4) i { --i: 3; } .intro-word span:nth-child(5) i { --i: 4; } .intro-word span:nth-child(6) i { --i: 5; }

/* no celular o título fica numa linha só: o espaço entre "que" e "fica" vira margem */
@media (max-width: 600px) {
  .experience #hero .hero-title .ln ~ .ln { margin-left: .2em; }
  .experience #hero .hero-title .ln em::before { content: none; }
}