/* Intro screen: shown on every launch, tap to continue. Colours come from the theme. */

#intro {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: min(2.4vmin, 18px);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg) 70%), var(--bg);
  color: var(--text); cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  padding: var(--safe-top, env(safe-area-inset-top)) var(--safe-right, env(safe-area-inset-right)) var(--safe-bottom, env(safe-area-inset-bottom)) var(--safe-left, env(safe-area-inset-left));
}
#intro.gone { display: none; }
#introStars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scanlines and a slow sweep for a HUD feel. */
#intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
#intro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
  animation: intro-sweep 4.5s linear 1.2s infinite;
}
@keyframes intro-sweep { to { top: 100%; } }

#intro > :not(canvas) { position: relative; z-index: 2; }

/* Corner brackets */
.intro-corners i {
  position: absolute; width: min(7vmin, 48px); height: min(7vmin, 48px);
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0; animation: intro-fade .5s ease-out .2s forwards;
}
.intro-corners { position: absolute !important; inset: max(3vmin, 14px); z-index: 2; pointer-events: none; }
.intro-corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.intro-corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.intro-corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.intro-corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* Emblem with rotating rings */
.intro-core {
  --size: min(30vmin, 210px);
  width: var(--size); height: var(--size); display: grid; place-items: center;
  animation: intro-pop .9s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
.intro-rings, .intro-rings i { position: absolute; inset: 0; border-radius: 50%; }
.intro-rings i { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.intro-rings i:nth-child(1) {
  inset: -6%; border-color: transparent; border-top-color: var(--accent); border-right-color: color-mix(in srgb, var(--accent) 40%, transparent);
  animation: intro-spin 2.6s linear infinite;
  filter: drop-shadow(0 0 6px var(--accent));
}
.intro-rings i:nth-child(2) {
  inset: 6%; border-style: dashed; opacity: .55;
  animation: intro-spin 9s linear infinite reverse;
}
.intro-rings i:nth-child(3) {
  inset: -16%; border-width: 1px; opacity: .25;
  border-left-color: var(--accent); border-right-color: transparent;
  animation: intro-spin 14s linear infinite;
}
.intro-emblem { width: 62%; height: 62%; color: var(--accent); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 55%, transparent)); }
.intro-emblem svg { width: 100%; height: 100%; display: block; stroke-width: 2.5; }
@keyframes intro-spin { to { transform: rotate(360deg); } }
@keyframes intro-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Title */
.intro-title {
  margin: 0; display: flex; gap: .35em; align-items: baseline;
  font: 400 min(7vmin, 46px)/1 var(--font-display); letter-spacing: .32em; text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: intro-track 1.2s cubic-bezier(.2, .8, .2, 1) .5s both;
}
.intro-title span { color: var(--accent); }
@keyframes intro-track { from { letter-spacing: 1.2em; opacity: 0; filter: blur(6px); } to { letter-spacing: .32em; opacity: 1; filter: none; } }

.intro-sub {
  font: 600 min(2.6vmin, 14px)/1.2 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--dim);
  animation: intro-fade .6s ease-out 1s both;
}

/* Boot log */
.intro-boot {
  display: flex; flex-direction: column; gap: 4px; min-width: min(64vmin, 360px);
  font: 600 min(2.4vmin, 12px)/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em;
  color: var(--dim); text-transform: uppercase;
}
.intro-boot div { display: flex; justify-content: space-between; gap: 16px; opacity: 0; animation: intro-line .3s steps(4) forwards; }
.intro-boot div:nth-child(1) { animation-delay: 1.1s; }
.intro-boot div:nth-child(2) { animation-delay: 1.35s; }
.intro-boot div:nth-child(3) { animation-delay: 1.6s; }
.intro-boot b { font-weight: 700; color: var(--green); }
.intro-boot .js-status { color: var(--text); }
@keyframes intro-line { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Tap prompt */
.intro-tap {
  margin-top: min(2vmin, 12px);
  padding: .7em 1.6em; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  font: 700 min(2.8vmin, 14px)/1 var(--font-body); letter-spacing: .34em; text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  opacity: 0; animation: intro-fade .4s ease-out 1.9s forwards, intro-pulse 1.6s ease-in-out 2.3s infinite;
}
@keyframes intro-pulse { 50% { opacity: .35; } }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }

/* Warp out */
#intro.warping { cursor: default; }
#intro.warping > :not(canvas):not(.intro-flash) { transition: opacity .35s ease, transform .9s cubic-bezier(.6, 0, .9, .4); opacity: 0; transform: scale(1.8); }
#intro.warping .intro-core { animation: none; transform: scale(2.6); opacity: 0; transition: transform .9s cubic-bezier(.6, 0, .9, .4), opacity .6s ease .2s; }
.intro-flash {
  position: absolute !important; inset: 0; z-index: 3 !important; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff, var(--accent) 30%, transparent 75%);
}
#intro.flash .intro-flash { animation: intro-flash .7s ease-out forwards; }
@keyframes intro-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
#intro.out { opacity: 0; transition: opacity .45s ease; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #intro *, #intro::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}