/* ===========================================================
   ALIENTEK ENTERTAINMENT — SITE STATUS
   Shared between 404.html and maintenance.html. Minimal chrome:
   logo-only header, no primary nav — the site (or this section
   of it) isn't fully reachable, so there's nothing to link to.
   =========================================================== */

.status-header{ padding:var(--sp-5) 0; border-top:none; }
.status-header .wrap{ display:flex; justify-content:center; }
.status-header .brand img{ width:56px; height:56px; }

.status-page{
  min-height:calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--sp-6) var(--sp-4) var(--sp-8);
  position:relative;
  overflow:hidden;
  border-top:none;
}
.status-page::before{
  content:'';
  position:absolute;
  top:-160px; left:50%;
  width:900px; height:420px;
  transform:translateX(-50%);
  border-radius:50%;
  filter:blur(110px);
  opacity:0.14;
  pointer-events:none;
  background:var(--gradient-signal);
}
.status-404::before{ background:linear-gradient(135deg, var(--danger) 0%, var(--violet) 100%); opacity:0.12; }

.status-inner{ position:relative; z-index:1; max-width:560px; margin:0 auto; }

/* ---------- Status badges (Ion Violet + Danger, per design system: reserved for status/rare highlights) ---------- */

.badge-error{ color:var(--danger); background:rgba(244,91,105,0.08); border-color:rgba(244,91,105,0.3); }
.badge-error::before{ background:var(--danger); box-shadow:0 0 6px var(--danger); }

.badge-maint{ color:var(--violet); background:rgba(139,92,246,0.1); border-color:rgba(139,92,246,0.3); }
.badge-maint::before{ background:var(--violet); box-shadow:0 0 6px var(--violet); }

.status-inner .badge{ margin-bottom:var(--sp-5); }

/* ---------- 404 glyph: mono readout with a signal-glitch treatment ---------- */

.status-glyph{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(72px,14vw,140px);
  line-height:1;
  margin-bottom:var(--sp-5);
  position:relative;
  display:inline-block;
  background:var(--gradient-signal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.status-glyph.glitch::before,
.status-glyph.glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  -webkit-text-fill-color:currentColor;
}
.status-glyph.glitch::before{ color:var(--mint); left:-3px; opacity:0.55; animation:glitchShift 3.4s infinite linear; }
.status-glyph.glitch::after{ color:var(--blue); left:3px; opacity:0.55; animation:glitchShift 2.7s infinite linear reverse; }

@keyframes glitchShift{
  0%,100%{ clip-path:inset(0 0 88% 0); transform:translate(0,0); }
  15%{ clip-path:inset(12% 0 58% 0); transform:translate(-2px,1px); }
  30%{ clip-path:inset(42% 0 38% 0); transform:translate(2px,-1px); }
  45%{ clip-path:inset(68% 0 12% 0); transform:translate(-1px,2px); }
  60%{ clip-path:inset(22% 0 55% 0); transform:translate(1px,-2px); }
  75%{ clip-path:inset(52% 0 22% 0); transform:translate(-2px,0); }
  90%{ clip-path:inset(6% 0 82% 0); transform:translate(1px,1px); }
}

/* ---------- Maintenance glyph: pulsing mark, radar-style rings ---------- */

.pulse-glyph{
  position:relative;
  width:120px; height:120px;
  margin:0 auto var(--sp-5);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pulse-mark{
  width:64px;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 20px rgba(47,230,174,0.35));
  animation:pulseMark 2.6s ease-in-out infinite;
}
.pulse-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(47,230,174,0.4);
  animation:pulseRing 2.6s ease-out infinite;
}
.pulse-ring.delay{ animation-delay:1.3s; border-color:rgba(51,85,244,0.4); }

@keyframes pulseRing{
  0%{ transform:scale(0.5); opacity:0.8; }
  100%{ transform:scale(1.6); opacity:0; }
}
@keyframes pulseMark{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

/* ---------- Shared copy + actions ---------- */

.status-title{
  font-size:clamp(28px,4vw,42px);
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin-bottom:var(--sp-3);
}
.status-message{
  color:var(--fog-dim);
  font-size:16px;
  max-width:460px;
  margin:0 auto var(--sp-6);
}
.status-eta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--static);
  margin:calc(var(--sp-6) * -1) auto var(--sp-6);
}
.status-eta span{ color:var(--fog-dim); }

.status-actions{
  display:flex;
  gap:var(--sp-3);
  justify-content:center;
  flex-wrap:wrap;
}

.status-social{ justify-content:center; margin-top:var(--sp-5); }

.status-footer{
  padding:var(--sp-5) 0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--static-dim);
  letter-spacing:0.05em;
  border-top:1px solid var(--border-soft);
}

@media (prefers-reduced-motion: reduce){
  .status-glyph.glitch::before, .status-glyph.glitch::after{ animation:none; opacity:0.4; }
  .pulse-mark{ animation:none; }
  .pulse-ring{ animation:none; opacity:0.25; transform:scale(1); }
}