/* ============================================================
   PACHALKI — camada PREMIUM (cinema)
   Carregar APÓS v3.css. Tudo é progressivo: sem JS/sem motion,
   o conteúdo aparece normalmente.
   ============================================================ */

/* ---- abertura (intro loader) --------------------------- */
.pk-intro {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: var(--espresso); overflow: hidden;
}
.pk-intro__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pk-intro__logo { height: clamp(40px, 6vw, 64px); width: auto; opacity: 0; transform: translateY(14px); }
.pk-intro__bar { width: clamp(140px, 22vw, 240px); height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; overflow: hidden; }
.pk-intro__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--amber)); }
.pk-intro__panel { position: absolute; inset: 0; background: var(--espresso); z-index: 1; }
/* sheen */
.pk-intro::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 50% at 50% 45%, oklch(0.62 0.205 30 / .14), transparent 70%); }

@media (prefers-reduced-motion: no-preference) {
  .pk-intro__logo { animation: pkLogoIn .9s cubic-bezier(.2,.7,.2,1) .15s forwards; }
  .pk-intro__bar i { animation: pkBar 1.15s cubic-bezier(.6,0,.2,1) .35s forwards; }
  .pk-intro.is-done { animation: pkFade .6s ease .05s forwards; }
  .pk-intro.is-done .pk-intro__panel { transform: translateY(0); animation: pkWipe .85s cubic-bezier(.76,0,.24,1) forwards; }
  .pk-intro.is-done .pk-intro__inner { animation: pkInnerOut .45s ease forwards; }
}
@keyframes pkLogoIn { to { opacity: 1; transform: none; } }
@keyframes pkBar { to { width: 100%; } }
@keyframes pkInnerOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pkWipe { to { transform: translateY(-100%); } }
@keyframes pkFade { to { opacity: 0; visibility: hidden; } }

/* ---- hero cinematográfico ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* zoom lento (Ken Burns) começa após a revelação */
  html.pk-loaded .hero__bg { animation: pkKen 20s ease-out .2s forwards; transform-origin: 60% 45%; }

  /* estados iniciais (só quando pk está ativo) */
  html.pk .hero .kicker,
  html.pk .hero__sub,
  html.pk .hero__cta,
  html.pk .scrollcue,
  html.pk .hero__vlabel { opacity: 0; transform: translateY(20px); }
  html.pk .hero h1 { opacity: 0; }
  html.pk .hero h1 .pk-line > span { transform: translateY(112%); }
  html.pk .seal { opacity: 0; transform: rotate(-12deg) scale(.85); }

  /* revelação */
  html.pk-loaded .hero h1 { opacity: 1; }
  html.pk-loaded .hero h1 .pk-line > span { transform: none; transition: transform 1s cubic-bezier(.16,1,.3,1); }
  html.pk-loaded .hero h1 .pk-line:nth-child(2) > span { transition-delay: .12s; }
  html.pk-loaded .hero h1 .pk-line:nth-child(3) > span { transition-delay: .24s; }
  html.pk-loaded .hero .kicker { transition: opacity .8s ease .15s, transform .8s cubic-bezier(.2,.7,.2,1) .15s; opacity: 1; transform: none; }
  html.pk-loaded .hero__sub { transition: opacity .9s ease .55s, transform .9s cubic-bezier(.2,.7,.2,1) .55s; opacity: 1; transform: none; }
  html.pk-loaded .hero__cta { transition: opacity .9s ease .7s, transform .9s cubic-bezier(.2,.7,.2,1) .7s; opacity: 1; transform: none; }
  html.pk-loaded .scrollcue,
  html.pk-loaded .hero__vlabel { transition: opacity 1s ease 1s, transform 1s ease 1s; opacity: .55; transform: none; }
  html.pk-loaded .hero__vlabel { opacity: .4; }
  html.pk-loaded .seal { transition: opacity 1s ease .5s, transform 1.1s cubic-bezier(.16,1,.3,1) .5s; opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes pkKen { to { transform: scale(1.12); } }

/* ---- hero das divisões (mesmo tratamento) -------------- */
@media (prefers-reduced-motion: no-preference) {
  html.pk-loaded .dv-hero__bg { animation: pkKen 20s ease-out .2s forwards; transform-origin: 60% 45%; }
  html.pk .dv-hero__tag,
  html.pk .dv-hero__sub,
  html.pk .dv-hero__cta,
  html.pk .dv-top { opacity: 0; transform: translateY(20px); }
  html.pk .dv-hero h1 { opacity: 0; }
  html.pk .dv-hero h1 .pk-line > span { transform: translateY(112%); }
  html.pk-loaded .dv-hero h1 { opacity: 1; }
  html.pk-loaded .dv-hero h1 .pk-line > span { transform: none; transition: transform 1s cubic-bezier(.16,1,.3,1); }
  html.pk-loaded .dv-top { transition: opacity .8s ease .1s, transform .8s cubic-bezier(.2,.7,.2,1) .1s; opacity: 1; transform: none; }
  html.pk-loaded .dv-hero__tag { transition: opacity .8s ease .35s, transform .8s cubic-bezier(.2,.7,.2,1) .35s; opacity: 1; transform: none; }
  html.pk-loaded .dv-hero__sub { transition: opacity .9s ease .55s, transform .9s cubic-bezier(.2,.7,.2,1) .55s; opacity: 1; transform: none; }
  html.pk-loaded .dv-hero__cta { transition: opacity .9s ease .7s, transform .9s cubic-bezier(.2,.7,.2,1) .7s; opacity: 1; transform: none; }
}
.dv-hero h1 .pk-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.dv-hero h1 .pk-line > span { display: block; will-change: transform; }

/* estrutura das linhas do título (clip reveal) */
.hero h1 .pk-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero h1 .pk-line > span { display: block; will-change: transform; }

/* ---- revelação por máscara (imagens grandes) ----------- */
@media (prefers-reduced-motion: no-preference) {
  .mask-rise { clip-path: inset(0 0 100% 0); transform: scale(1.04); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1); }
  .mask-rise.in-view { clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* ---- destaque tipográfico de títulos de seção ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sec__head h2.pk-title, .intro2__t.pk-title { clip-path: inset(0 0 -10% 0); }
}

/* ---- garantia do estado revelado (vence timing/cascata) - */
@media (prefers-reduced-motion: no-preference) {
  html.pk-loaded .hero h1 .pk-line > span,
  html.pk-loaded .dv-hero h1 .pk-line > span { transform: none !important; }
  html.pk-loaded .hero h1,
  html.pk-loaded .dv-hero h1 { opacity: 1 !important; }
  html.pk-loaded .hero .kicker,
  html.pk-loaded .hero__sub,
  html.pk-loaded .hero__cta,
  html.pk-loaded .dv-hero__tag,
  html.pk-loaded .dv-hero__sub,
  html.pk-loaded .dv-hero__cta,
  html.pk-loaded .dv-top { opacity: 1 !important; transform: none !important; }
  html.pk-loaded .seal { opacity: 1 !important; }
  html.pk-loaded .scrollcue { opacity: .55 !important; }
  html.pk-loaded .hero__vlabel { opacity: .4 !important; }
}