/* ============================================================
   AEROPAR — HERO · capa cinematográfica (home)
   Coreografía de entrada + reveal por máscara + sheen + rastro
   de vuelo 2D + profundidad al puntero. Se carga después de
   site.css y fx.css. Todo con gates para reduced-motion / lite /
   táctil. Progresivo: si el JS no arma la Hero (.js-hero), el
   contenido se muestra normal (sin ocultarse).
   ============================================================ */

/* ---- z-order interno de la Hero (contenido siempre por encima) ---- */
.hero .hero-in { z-index:3; }
.hero .hero-cue { z-index:4; }
.page-flight { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }
.page-flight svg { position:absolute; inset:0; width:100%; height:100%; }
.page-flight .fl-trail { fill:none; stroke:var(--red-2); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.22; }
.page-flight .fl-plane { opacity:.85; }
.page-flight .fl-bob { animation:flBob 3.6s ease-in-out infinite; }
@keyframes flBob { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(3px); } }

/* ---- estados iniciales (SOLO cuando el JS arma la Hero) ---- */
.js-hero .hero .slogan,
.js-hero .hero p.lead,
.js-hero .hero .hero-rotator,
.js-hero .hero .hero-ctas,
.js-hero .hero .hero-cred,
.js-hero .hero .hero-locs,
.js-hero .hero .hero-cue {
  opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--fx-ease), transform 1s var(--fx-ease);
  will-change:opacity, transform;
}

/* ---- revelado coreografiado (cuando entra .lit) ---- */
.hero.lit .slogan       { opacity:1;  transform:none; transition-delay:.05s; }
.hero.lit p.lead        { opacity:.95; transform:none; transition-delay:.52s; }
.hero.lit .hero-rotator { opacity:1;  transform:none; transition-delay:.60s; }
.hero.lit .hero-ctas    { opacity:1;  transform:none; transition-delay:.72s; }
.hero.lit .hero-cred    { opacity:1;  transform:none; transition-delay:.86s; }
.hero.lit .hero-locs    { opacity:1;  transform:none; transition-delay:.96s; }
.hero.lit .hero-cue     { opacity:1;  transform:none; transition-delay:1.2s; }

/* ---- texto que rota: "Aeropar · [servicio]" con máscara ---- */
.hero-rotator { display:inline-flex; align-items:center; gap:11px; margin:-6px 0 28px; font-size:14.5px; font-weight:600; color:var(--dim); letter-spacing:.01em; }
.hero-rotator .rd { width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0; box-shadow:0 0 10px rgba(212,35,31,.75); }
.hero-rotator .rb { color:var(--light); font-weight:700; }
.hero-rotator .rot-mask { position:relative; overflow:hidden; height:1.55em; display:inline-flex; align-items:center; }
.hero-rotator .rot-word { display:inline-block; color:var(--red-2); font-weight:700; white-space:nowrap; transition:transform .5s var(--fx-ease), opacity .5s var(--fx-ease); }
.hero-rotator .rot-word.out { transform:translateY(-120%); opacity:0; }
.hero-rotator .rot-word.pre { transform:translateY(120%); opacity:0; transition:none; }

/* ---- light sweep: un haz cruza la Hero una vez al entrar ---- */
.hero-sweep { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; opacity:0; }
.hero-sweep::before {
  content:""; position:absolute; top:-25%; left:0; width:38%; height:150%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), rgba(255,255,255,.17), transparent);
  filter:blur(6px); transform:skewX(-14deg) translateX(-80vw);
}
.hero.lit .hero-sweep { opacity:1; }
.hero.lit .hero-sweep::before { animation:heroSweep 1.9s .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroSweep { from { transform:skewX(-14deg) translateX(-80vw); } to { transform:skewX(-14deg) translateX(180vw); } }

/* ---- niebla/glow de profundidad (parallax al puntero) ---- */
.hero-haze {
  position:absolute; inset:-12%; z-index:1; pointer-events:none;
  background:radial-gradient(38% 40% at 66% 40%, rgba(212,35,31,.17), transparent 70%);
  mix-blend-mode:screen;
}

/* ---- slogan: línea de acento que se dibuja (coherente con .kicker) ---- */
.hero .slogan { display:inline-flex; align-items:center; gap:14px; }
.hero .slogan::before {
  content:""; width:0; height:2px; background:var(--red); flex-shrink:0;
  transition:width .85s var(--fx-ease) .28s;
}
.hero.lit .slogan::before { width:34px; }

/* ---- título: revelado por máscara (cada palabra sube de su caja) ---- */
.hero h1 .hw {
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;   /* aire para descendentes (g, p, j) */
}
.hero h1 .hw > i {
  display:inline-block; font-style:normal;
  transform:translateY(115%);
  transition:transform 1s var(--fx-ease);
}
.hero h1 .hw.in > i { transform:none; }

/* ---- sheen sobre las palabras rojas ("orgullo paraguayo") ---- */
.hero h1 .red .hw > i {
  background:linear-gradient(100deg, var(--red-2) 28%, #ff7d73 50%, var(--red-2) 72%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:heroSheen 6s ease-in-out 1.5s infinite;
}
@keyframes heroSheen { 0% { background-position:135% 0; } 55%,100% { background-position:-135% 0; } }

/* ---- CTA principal: brillo que cruza periódicamente ---- */
.hero-ctas .btn-red { position:relative; overflow:hidden; }
.hero-ctas .btn-red::after {
  content:""; position:absolute; top:0; left:-150%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:ctaSheen 5s ease-in-out 1.8s infinite;
}
@keyframes ctaSheen { 0% { left:-150%; } 26%,100% { left:170%; } }

/* ---- profundidad al puntero (lo escribe hero.js; aquí solo el hint) ---- */
.hero.depth .hero-in, .hero.depth .page-flight { will-change:transform; }

/* ---- móvil: sin rastro de vuelo (evita cruzar el texto) ---- */
@media (max-width:860px){ .page-flight { display:none; } }

/* ---- gates ---- */
@media (prefers-reduced-motion: reduce) {
  .js-hero .hero .slogan,
  .js-hero .hero p.lead,
  .js-hero .hero .hero-rotator,
  .js-hero .hero .hero-ctas,
  .js-hero .hero .hero-cred,
  .js-hero .hero .hero-locs,
  .js-hero .hero .hero-cue { opacity:1 !important; transform:none !important; }
  .hero h1 .hw > i { transform:none !important; }
  .hero-sweep { display:none !important; }
  .hero .slogan::before { width:34px !important; }
  .hero h1 .red .hw > i {
    background:none !important; -webkit-text-fill-color:var(--red-2) !important; color:var(--red-2) !important;
    animation:none !important;
  }
  .hero-ctas .btn-red::after { display:none !important; }
  .page-flight { display:none !important; }
}
.fx-lite .page-flight, .fx-lite .hero-sweep { display:none !important; }
.fx-lite .hero h1 .red .hw > i { background:none !important; -webkit-text-fill-color:var(--red-2) !important; color:var(--red-2) !important; animation:none !important; }
.fx-lite .hero-ctas .btn-red::after { display:none !important; }