/* ============================================================
   SCROLL SEQUENCE — Cohete X Design Enterprise (Scuencia 2)
   Fondo fijo cálido, frames avanzan con el scroll de la página.
   Cada giro del cohete revela una frase motivacional.
   ============================================================ */

/* ── Stacking: body transparente para que el canvas fijo se vea ── */
html { background: #160f14; }
body { background: transparent !important; }

/* ── Contenedor fixed: detrás de absolutamente todo ── */
.seq-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Base cálida que arma con el atardecer de la secuencia */
  background:
    linear-gradient(to bottom, #20131d 0%, #160f14 55%, #1a1012 100%);
}

/* ── Secciones: fondo cálido semi-transparente → el cohete ilumina
      toda la página manteniendo el texto legible ── */
.section--hero { background: transparent !important; }

.svc-ed,
.section--sectors,
.section--pricing,
.section--paquetes,
.section--contact,
.parallax-section,
footer {
  background: rgba(22,15,20,0.74) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Canvas centrado, cubre el viewport ── */
#seqCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;            /* el cohete cálido se ve, sin tapar texto */
  will-change: contents;
}

/* ── Overlay cálido encima del canvas: legibilidad ── */
.seq-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(22,15,20,0.55) 0%,
      rgba(22,15,20,0.32) 45%,
      rgba(22,15,20,0.55) 100%),
    radial-gradient(ellipse 32% 100% at 0%   50%, rgba(22,15,20,0.7) 0%, transparent 100%),
    radial-gradient(ellipse 32% 100% at 100% 50%, rgba(22,15,20,0.7) 0%, transparent 100%);
}

/* ── Barra de progreso (dorado → naranja) ── */
.seq-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-gold, #e8b04a), var(--accent, #f97316));
  opacity: 0.55;
  box-shadow: 0 0 10px rgba(249,115,22,0.4);
}

/* ============================================================
   FRASES MOTIVACIONALES — caption cinematográfico (bottom)
   ============================================================ */
.seq-phrases {
  position: fixed;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  transform: translateX(-50%);
  z-index: 90;
  pointer-events: none;
  width: max-content;
  max-width: min(90vw, 720px);
  text-align: center;
}

.seq-phrase {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 18px);
  width: max-content;
  max-width: min(90vw, 720px);

  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px;
  border-radius: 100px;

  font-family: var(--font-display, 'Clash Display', sans-serif);
  font-size: clamp(15px, 2.1vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #faf3ec;
  white-space: nowrap;

  /* Glass cálido sutil */
  background: rgba(36,24,33,0.55);
  border: 1px solid rgba(232,176,74,0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);

  opacity: 0;
  filter: blur(6px);
  transition:
    opacity .7s cubic-bezier(0.16,1,0.3,1),
    transform .7s cubic-bezier(0.16,1,0.3,1),
    filter .6s cubic-bezier(0.16,1,0.3,1);
}

/* Punto-cohete dorado antes de la frase */
.seq-phrase::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #f97316);
  box-shadow: 0 0 12px 2px rgba(249,115,22,0.7);
}

.seq-phrase em {
  font-style: italic;
  color: var(--accent-gold, #e8b04a);
}

.seq-phrase.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, 0);
}

/* ── Mobile: frases más compactas, permiten 2 líneas ── */
@media (max-width: 600px) {
  .seq-phrase {
    white-space: normal;
    text-align: center;
    max-width: 84vw;
    padding: 11px 20px;
    font-size: 14px;
  }
}

/* ============================================================
   COHETE FINAL — se eleva en grande con el scroll (#starfall)
   ============================================================ */
.starfall-section { position: relative; overflow: hidden; }

.final-rocket-canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(94vw, 760px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
  /* screen: el cielo horneado se funde, el cohete y la llama brillan */
  mix-blend-mode: screen;
  /* máscara radial: bordes se disuelven en la sección (sin rectángulo) */
  -webkit-mask: radial-gradient(120% 80% at 50% 60%, #000 45%, transparent 78%);
  mask: radial-gradient(120% 80% at 50% 60%, #000 45%, transparent 78%);
}

/* El contenido (slogan, CTAs, stats) por encima del cohete */
.starfall-content { position: relative; z-index: 3; }

/* Ocultamos el cohete SVG pequeño: ahora manda el grande */
.starfall-rocket { display: none !important; }

@media (max-width: 600px) {
  .final-rocket-canvas { width: 96vw; opacity: 0.8; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #seqCanvas { opacity: 0.28; }
  .seq-phrase {
    transition: opacity .3s ease;
    filter: none;
    transform: translate(-50%, 0);
  }
}