/* =========================================================================
   Drifin — abertura cinematográfica (Three.js + GSAP ScrollTrigger)
   ========================================================================= */

.df-cine {
  position: relative;
  height: 1500vh;           /* comprimento do "filme": mais alto = scroll mais lento */
  background: #030406;
  z-index: 4;
}

/* O palco fica preso na tela enquanto a seção rola por baixo dele */
.df-cine-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;          /* altura estável no celular (não pula com a barra do navegador) */
  overflow: hidden;
  background: #030406;
  isolation: isolate;
  contain: layout paint;
}

.df-cine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.df-cine--ready .df-cine-canvas { opacity: 1; }

/* Fallback (sem WebGL / sem JS / movimento reduzido): pôster estático da cena 01 */
.df-cine-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background: #030406 url("../assets/cinematic/01-hero.webp") 57% 58% / cover no-repeat;
}
.df-cine-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,4,6,.55), rgba(3,4,6,.15) 40%, rgba(3,4,6,.85));
}

.df-cine-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.85) 100%),
    linear-gradient(180deg, rgba(3,4,6,.55) 0, transparent 22%, transparent 70%, rgba(3,4,6,.7) 100%);
}

.df-cine-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* ---- HUD (capítulo + barra) ---- */
.df-cine-hud {
  position: absolute;
  z-index: 30;
  top: calc(76px + 18px + env(safe-area-inset-top, 0px));
  left: clamp(18px, 4vw, 58px);
  right: clamp(18px, 4vw, 58px);
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .25em;
  color: #8a93a1;
  text-transform: uppercase;
  pointer-events: none;
}
.df-cine-hud i {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(245,166,35,.16);
  overflow: hidden;
}
.df-cine-hud b {
  position: absolute;
  inset: 0;
  background: #F5A623;
  box-shadow: 0 0 12px #F5A623;
  transform-origin: left center;
  transform: scaleX(0);
}
.df-cine-hud [data-cine-chapter] { color: #F5A623; }

/* ---- Título de abertura ---- */
.df-cine-title {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 20px 30vh;     /* no céu, acima do carro */
  will-change: opacity, transform;
}
.df-cine-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .3em;
  color: #c9ced6;
  margin-bottom: 18px;
}
.df-cine-kicker span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F5A623;
  box-shadow: 0 0 18px #F5A623;
}
.df-cine-word {
  margin: 0;
  font: 900 clamp(56px, min(19vw, 24vh), 176px)/.84 Archivo, sans-serif;
  letter-spacing: -.055em;
  color: #F5A623;
  background: linear-gradient(180deg, #FFD08A 0%, #F5A623 48%, #C97A0A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 38px rgba(245,166,35,.28)) drop-shadow(0 6px 26px rgba(0,0,0,.8));
}
.df-cine-sub {
  margin-top: 20px;
  font: 500 clamp(12px, 1.4vw, 16px)/1.5 Manrope, sans-serif;
  color: #c3cad4;
  letter-spacing: .04em;
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
}

.df-cine-cue {
  position: absolute;
  z-index: 26;
  left: 50%;
  bottom: calc(100lvh - 100svh + clamp(26px, 6vh, 64px));
  margin-left: -80px;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #9aa3b2;
  pointer-events: none;
}
.df-cine-cue i {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, #F5A623, rgba(245,166,35,0));
}

/* ---- Legendas ---- */
.df-cine-copy {
  position: absolute;
  z-index: 30;
  left: clamp(20px, 8vw, 130px);
  right: clamp(56px, 8vw, 130px);
  bottom: calc(100lvh - 100svh + clamp(46px, 9vh, 120px));
  max-width: 400px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
}
.df-cine-copy small {
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #F5A623;
  margin-bottom: 12px;
}
.df-cine-copy strong {
  font: 800 clamp(26px, 3.6vw, 48px)/1.02 Archivo, sans-serif;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #F1F3F5;
  text-shadow: 0 2px 30px rgba(0,0,0,.85);
}
.df-cine-copy span {
  margin-top: 12px;
  max-width: 36ch;
  font: 500 14px/1.6 Manrope, sans-serif;
  color: #b3bbc6;
  text-shadow: 0 1px 16px rgba(0,0,0,.95);
}
.df-cine-copy--feature strong { font-size: clamp(22px, 3vw, 38px); }

/* ---- Final ---- */
.df-cine-final {
  position: absolute;
  z-index: 31;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
}
.df-cine-final-logo {
  width: min(240px, 58vw);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(245,166,35,.22));
}
.df-cine-final-cta {
  margin: 26px 0 18px;
  font: 800 clamp(20px, 3vw, 30px)/1.1 Archivo, sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #F1F3F5;
}
.df-cine-play {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: #F5A623;
  color: #05070A;
  padding: 15px 30px;
  border-radius: 14px;
  font: 800 17px/1.12 Manrope, sans-serif;
  box-shadow: 0 20px 56px -18px rgba(245,166,35,.95);
  transition: background .2s ease, transform .2s ease;
}
.df-cine-play:hover { background: #FFC46B; color: #05070A; transform: translateY(-2px); }
.df-cine-play:focus-visible { outline: 2px solid #FFC46B; outline-offset: 4px; }
.df-cine-play-icon {
  width: 0;
  height: 0;
  border-left: 16px solid #05070A;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.df-cine-play-text { display: flex; flex-direction: column; text-align: left; }
.df-cine-play-text small { font-size: 10px; font-weight: 600; letter-spacing: .14em; opacity: .7; }

/* ---- Progresso + pular ---- */
.df-cine-progress {
  position: absolute;
  z-index: 35;
  right: clamp(16px, 3vw, 44px);
  top: 50%;
  width: 2px;
  height: 110px;
  margin-top: -55px;
  background: rgba(255,255,255,.1);
  pointer-events: none;
}
.df-cine-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #F5A623;
  box-shadow: 0 0 12px #F5A623;
  transform-origin: top center;
  transform: scaleY(0);
}

.df-cine-skip {
  position: absolute;
  z-index: 36;
  right: clamp(16px, 3vw, 44px);
  bottom: calc(100lvh - 100svh + clamp(14px, 3vh, 30px));
  padding: 10px 2px;
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8a93a1;
  border-bottom: 1px solid rgba(237,239,242,.18);
}
.df-cine-skip:hover, .df-cine-skip:focus-visible { color: #F5A623; border-color: #F5A623; }
.df-cine-skip:focus-visible { outline: 2px solid #F5A623; outline-offset: 4px; }

/* ---- Carregando ---- */
.df-cine-loading {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 1px;
  margin-left: -45px;
  background: rgba(245,166,35,.15);
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.df-cine-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5A623;
  transform-origin: left;
  animation: dfCineLoad 1.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes dfCineLoad { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(1) translateX(100%); } }
.df-cine--loading .df-cine-loading { opacity: 1; }
.df-cine--loading .df-cine-title,
.df-cine--loading .df-cine-cue { opacity: 0 !important; }

/* ---- Modo estático (sem WebGL, sem GSAP/Three ou movimento reduzido) ---- */
.df-cine--static,
html:not(.df-js) .df-cine { height: auto; }
.df-cine--static .df-cine-stage,
html:not(.df-js) .df-cine-stage { position: relative; height: 100vh; height: 100svh; min-height: 520px; }
html:not(.df-js) .df-cine-canvas,
html:not(.df-js) .df-cine-copy,
html:not(.df-js) .df-cine-final,
html:not(.df-js) .df-cine-progress,
html:not(.df-js) .df-cine-skip,
html:not(.df-js) .df-cine-loading { display: none; }
html:not(.df-js) .df-cine-poster { display: block; }
html:not(.df-js) .df-cine-title,
html:not(.df-js) .df-cine-cue { opacity: 1; visibility: visible; }
.df-cine--static .df-cine-canvas,
.df-cine--static .df-cine-copy,
.df-cine--static .df-cine-final,
.df-cine--static .df-cine-progress,
.df-cine--static .df-cine-loading,
.df-cine--static .df-cine-hud i { display: none; }
.df-cine--static .df-cine-poster { display: block; }
.df-cine--static .df-cine-title,
.df-cine--static .df-cine-cue { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.df-cine--static .df-cine-skip { display: none; }

@media (max-width: 720px) {
  .df-cine-hud { top: calc(76px + 12px + env(safe-area-inset-top, 0px)); }
  .df-cine-copy { right: 52px; }
  .df-cine-copy strong { font-size: 28px; }
  .df-cine-copy--feature strong { font-size: 24px; }
  .df-cine-copy span { font-size: 13.5px; }
  .df-cine-progress { height: 80px; margin-top: -40px; }
}

/* Celular deitado / telas baixas */
@media (max-height: 520px) {
  .df-cine-title { padding-bottom: 8vh; }
  .df-cine-kicker { margin-bottom: 10px; }
  .df-cine-sub { margin-top: 12px; }
  .df-cine-hud, .df-cine-cue { display: none; }
  .df-cine-copy strong { font-size: 22px; }
  .df-cine-copy span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .df-cine { height: auto; }
  .df-cine-loading::after { animation: none; }
}