/* Opening scene shown while the app loads: circuit traces run in from the
   edges to a chip, the SemiconOS mark lights up on it, and the chip splits
   open onto the app. Colours are the semiconos.vercel.app palette. Driven by
   intro.js; it never holds the app back -- it leaves once the app has drawn
   its first frame and the scene has played. */
.sos-intro {
  --bg: #0b0810;
  --bg-2: #110d17;
  --accent: #b69de0;
  --gold: #d7bd8a;
  --faint: #6c6359;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  position: fixed; inset: 0; z-index: 2147483000;
  overflow: hidden; pointer-events: all;
}
/* The two halves the chip splits into on the way out. */
.sos-intro__half {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--bg);
  transition: transform 1s var(--ease-io);
}
.sos-intro__half--top { top: 0; }
.sos-intro__half--bottom { bottom: 0; }
.sos-intro__halo {
  position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(91, 45, 129, 0.32), rgba(91, 45, 129, 0.08) 45%, transparent 70%);
  opacity: 0; animation: sos-fade 1.6s var(--ease) 0.2s forwards;
}
/* Everything drawn on the chip scene; fades as one on the way out (the
   children's own animations would otherwise hold their opacity). */
.sos-intro__stage {
  position: absolute; inset: 0;
  transition: opacity 0.35s ease, transform 0.6s var(--ease-io);
}
.sos-intro__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.sos-intro__trace {
  fill: none; stroke: rgba(182, 157, 224, 0.28); stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: sos-draw 1.1s var(--ease-io) forwards;
}
.sos-intro__pulse {
  fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 46 1000; stroke-dashoffset: 46; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(215, 189, 138, 0.9));
  animation: sos-pulse 1s var(--ease-io) forwards;
}
.sos-intro__pin {
  fill: var(--accent); opacity: 0;
  animation: sos-fade 0.4s ease forwards;
}
.sos-intro__die {
  fill: var(--bg-2); stroke: var(--accent); stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: sos-draw 0.9s var(--ease-io) 0.55s forwards, sos-die-glow 1.2s ease 1.55s forwards;
}
.sos-intro__corner { fill: none; stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; animation: sos-fade 0.5s ease 1.3s forwards; }
.sos-intro__logo {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: sos-logo 1.1s var(--ease) 1.45s forwards;
}
/* Loading line at the foot: moves only while the app is still loading. */
.sos-intro__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(241, 236, 227, 0.08); overflow: hidden;
}
.sos-intro__line i {
  position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sos-scan 1.4s var(--ease-io) infinite;
}

/* Leaving: the scene dims and the chip splits along its middle. */
.sos-intro.is-leaving { pointer-events: none; }
.sos-intro.is-leaving .sos-intro__stage { opacity: 0; transform: scale(1.04); }
.sos-intro.is-leaving .sos-intro__half { transition-delay: 0.18s; }
.sos-intro.is-leaving .sos-intro__half--top { transform: translateY(-100%); }
.sos-intro.is-leaving .sos-intro__half--bottom { transform: translateY(100%); }
.sos-intro__seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); opacity: 0;
}
.sos-intro.is-leaving .sos-intro__seam { animation: sos-seam 0.7s var(--ease) forwards; }

@keyframes sos-draw { to { stroke-dashoffset: 0; } }
@keyframes sos-fade { to { opacity: 1; } }
@keyframes sos-pulse {
  0% { opacity: 0; stroke-dashoffset: 46; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -1000; }
}
@keyframes sos-die-glow {
  0% { filter: none; }
  35% { filter: drop-shadow(0 0 18px rgba(182, 157, 224, 0.75)); }
  100% { filter: drop-shadow(0 0 10px rgba(182, 157, 224, 0.35)); }
}
@keyframes sos-logo {
  from { opacity: 0; transform: scale(0.94); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes sos-scan { from { left: -30%; } to { left: 100%; } }
@keyframes sos-seam {
  0% { transform: scaleX(0); opacity: 1; }
  60% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sos-intro *, .sos-intro *::before, .sos-intro *::after {
    animation-duration: 1ms !important; animation-delay: 0s !important;
    transition-duration: 0.2s !important; transition-delay: 0s !important;
  }
  .sos-intro__pulse, .sos-intro__line { display: none; }
}