/* ============================================================
   MBP FORGE — "The Enlightenment"
   Cinematic transition into the contact section.
   Black → the brain emerges → the road lights → bloom → the ask.
   ============================================================ */

.ignite-seq {
  position: fixed; inset: 0; z-index: 200;
  background: #04070C;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.6, 1);
  overflow: hidden;
  cursor: pointer;
}
.ignite-seq[hidden] { display: none; }
.ignite-seq.on { opacity: 1; }
.ignite-seq.out { opacity: 0; transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1); }

/* the road + node canvas sits behind the brain */
.ig-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* KOVA IS the light: it arrives at the vanishing point and everything —
   halo, road, constellation — radiates out of it */
.ig-core {
  position: relative;
  width: min(42vw, 380px);
  display: grid; place-items: center;
  transform: translateY(-6vh);
}

/* the halo KOVA casts once it lands */
.ig-halo {
  position: absolute; left: 50%; top: 50%;
  width: 190%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 190, 0.20), rgba(56, 219, 255, 0.16) 38%, rgba(56, 219, 255, 0.04) 58%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.ignite-seq.on .ig-halo {
  animation: ig-halo 2000ms cubic-bezier(0.16, 1, 0.3, 1) 820ms forwards;
}
@keyframes ig-halo {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.5); }
  55%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}

/* the ignition: a hard flash at the instant KOVA arrives */
.ig-flash {
  position: absolute; left: 50%; top: 50%;
  width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, rgba(255, 235, 250, 0.75) 22%, rgba(56, 219, 255, 0) 62%);
  opacity: 0; pointer-events: none;
}
.ignite-seq.on .ig-flash { animation: ig-flash 720ms cubic-bezier(0.16, 1, 0.3, 1) 780ms forwards; }
@keyframes ig-flash {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.2); }
  18%  { opacity: 0.95; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.9); }
}

/* KOVA streaks in from the right and stops dead centre */
.ig-kova {
  position: relative; z-index: 2;
  width: 100%; height: auto;
  opacity: 0;
  transform: translateX(62vw) scale(0.6);
  filter: brightness(0.55) saturate(0.85);
  pointer-events: none;
}
.ignite-seq.on .ig-kova {
  animation: ig-kova-fly 900ms cubic-bezier(0.16, 1, 0.3, 1) 60ms forwards,
             ig-kova-breathe 3.6s ease-in-out 1100ms infinite;
}
@keyframes ig-kova-fly {
  0%   { opacity: 0; transform: translateX(62vw) scale(0.6);  filter: brightness(0.55) saturate(0.85); }
  30%  { opacity: 1; }
  75%  {              transform: translateX(-3vw) scale(1.04); filter: brightness(1.35) saturate(1.1); }
  100% { opacity: 1; transform: translateX(0) scale(1);        filter: brightness(1.15) saturate(1.05); }
}
@keyframes ig-kova-breathe {
  0%, 100% { margin-top: 0;     filter: brightness(1.15) saturate(1.05); }
  50%      { margin-top: -12px; filter: brightness(1.32) saturate(1.12); }
}
@media (max-width: 767px) {
  .ig-core { width: 74vw; }
  @keyframes ig-kova-fly {
    0%   { opacity: 0; transform: translateX(80vw) scale(0.6); filter: brightness(0.55) saturate(0.85); }
    30%  { opacity: 1; }
    75%  {              transform: translateX(-3vw) scale(1.04); filter: brightness(1.35) saturate(1.1); }
    100% { opacity: 1; transform: translateX(0) scale(1);       filter: brightness(1.15) saturate(1.05); }
  }
}

/* the line that speaks */
.ig-line {
  position: absolute; left: 50%; bottom: 12vh;
  transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 13px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(210, 240, 255, 0.9);
  white-space: nowrap;
  opacity: 0;
}
.ignite-seq.on .ig-line { animation: ig-line 1400ms cubic-bezier(0.16, 1, 0.3, 1) 1450ms forwards; }
@keyframes ig-line {
  0%   { opacity: 0; letter-spacing: 0.5em; }
  100% { opacity: 1; letter-spacing: 0.26em; }
}

/* the bloom that hands you back to the page */
.ig-bloom {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 44%, #FFFFFF 0%, rgba(233, 235, 238, 0.9) 30%, rgba(233, 235, 238, 0) 70%);
  opacity: 0; pointer-events: none;
}
.ignite-seq.bloom .ig-bloom {
  animation: ig-bloom 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ig-bloom {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(2.2); }
}

.ig-skip {
  position: absolute; right: 2rem; bottom: 2rem;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(180, 210, 230, 0.55); text-transform: uppercase;
  opacity: 0;
}
.ignite-seq.on .ig-skip { animation: ig-line 600ms ease 900ms forwards; }

@media (max-width: 767px) {
  .ig-line { font-size: 11px; letter-spacing: 0.18em; bottom: 10vh; }
}

/* the arrival: the contact section brightens as it takes over */
.contact-arrive .contact-panel {
  animation: ig-arrive 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ig-arrive {
  0%   { opacity: 0; transform: translateY(18px); box-shadow: 0 0 0 rgba(56, 219, 255, 0); }
  60%  { box-shadow: 0 0 60px -10px rgba(56, 219, 255, 0.55); }
  100% { opacity: 1; transform: none; box-shadow: 0 1px 2px rgba(22, 50, 70, 0.06), 0 8px 24px -12px rgba(22, 50, 70, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .ignite-seq { display: none !important; }
  .contact-arrive .contact-panel { animation: none; }
}