/* ─────────────────────────────────────────────────────────────────
   SUPERCELL · AURORA GLASS — shared component CSS
   ─────────────────────────────────────────────────────────────────
   Visual primitives shared across all preview cards, UI kit screens,
   and prototypes. Loaded AFTER colors_and_type.css.
   ───────────────────────────────────────────────────────────────── */

/* Reset just enough to be safe */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────────────────────────
   GLASS SURFACE
   .glass        — base translucent panel
   .glass--strong — for dialogs (more opaque)
   .glass--inset  — recessed (table area on a glass card)
   .glass::before — adds the top-edge highlight
   ───────────────────────────────────────────────────────────────── */
.glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.glass--strong { background: var(--glass-fill-strong); }
.glass--flat   { box-shadow: none; }
.glass--inset {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 1px 1px 4px 0 rgba(0,0,0,0.4),
    inset -1px -1px 0 0 rgba(255,255,255,0.02);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass--inset::before { display: none; }

/* Hover lift — apply to .glass-row or interactive .glass tiles */
.glass-hover { transition: transform var(--t-base) var(--ease-out),
                           background var(--t-base) var(--ease-out),
                           border-color var(--t-base) var(--ease-out),
                           box-shadow var(--t-base) var(--ease-out); }
.glass-hover:hover {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px) scale(1.003);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 18px 40px -10px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04);
}

/* ─────────────────────────────────────────────────────────────────
   NEUMORPH BUTTONS
   ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-button);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  color: var(--fg-1);
  background: var(--canvas-3);
  box-shadow: var(--neu-raised);
  transition: all var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--canvas-4); box-shadow: var(--neu-raised-hover); }
.btn:active { box-shadow: var(--neu-pressed); transform: scale(0.985); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn--sm { height: var(--h-button-sm); padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn--lg { height: var(--h-button-lg); padding: 0 var(--space-6); font-size: var(--text-base); }

.btn--ghost {
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08);
  color: var(--fg-2);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--fg-1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

/* Primary — the only filled button. Crimson, with glow on hover. */
.btn--primary {
  color: #FFF;
  background: linear-gradient(180deg, var(--crimson-500), var(--crimson-700));
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 0 rgba(0,0,0,0.25),
    0 6px 18px -4px rgba(220,38,38,0.45),
    0 2px 4px -1px rgba(0,0,0,0.3);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--crimson-400), var(--crimson-600));
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 0 rgba(0,0,0,0.25),
    0 8px 24px -4px rgba(239,68,68,0.65),
    0 2px 6px -1px rgba(0,0,0,0.4);
}
.btn--primary:active { transform: scale(0.985); }

.btn--danger {
  color: var(--danger-400);
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px rgba(244,63,94,0.25);
}
.btn--danger:hover { background: rgba(244,63,94,0.18); }

/* Icon-only button */
.btn--icon { width: var(--h-button); padding: 0; }
.btn--icon.btn--sm { width: var(--h-button-sm); }

/* ─────────────────────────────────────────────────────────────────
   INPUTS
   ───────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--h-input);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.25);
  box-shadow:
    inset 1px 1px 3px 0 rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  color: var(--fg-0);
  font-size: var(--text-sm);
  transition: box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.field:hover { box-shadow:
  inset 1px 1px 3px 0 rgba(0,0,0,0.45),
  inset 0 0 0 1px rgba(255,255,255,0.10); }
.field:focus-within {
  background: rgba(0,0,0,0.32);
  box-shadow:
    inset 1px 1px 3px 0 rgba(0,0,0,0.4),
    inset 0 0 0 1px var(--crimson-ring),
    0 0 0 4px rgba(220,38,38,0.10),
    var(--crimson-glow);
}
.field input,
.field select,
.field textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
}
.field input::placeholder { color: var(--fg-4); }
.field .icon { color: var(--fg-4); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────
   BADGE / CHIP
   ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  background: rgba(255,255,255,0.06);
  color: var(--fg-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  white-space: nowrap;
}
.badge--ok      { color: var(--ok-400);     background: var(--ok-soft);
                  box-shadow: inset 0 0 0 1px rgba(16,185,129,0.22); }
.badge--warn    { color: var(--warn-400);   background: var(--warn-soft);
                  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.22); }
.badge--danger  { color: var(--danger-400); background: var(--danger-soft);
                  box-shadow: inset 0 0 0 1px rgba(244,63,94,0.22); }
.badge--info    { color: var(--info-400);   background: var(--info-soft);
                  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.22); }
.badge--brand   { color: var(--crimson-400); background: var(--crimson-soft);
                  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.30); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-2);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: all var(--t-fast) var(--ease-out);
  cursor: pointer;
}
.chip:hover { color: var(--fg-0); background: rgba(255,255,255,0.07); }
.chip[aria-pressed="true"], .chip.is-active {
  color: var(--fg-0);
  background: var(--crimson-soft);
  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.40), var(--crimson-glow);
}

/* ─────────────────────────────────────────────────────────────────
   ROW (data card rows replacing dense tables)
   ───────────────────────────────────────────────────────────────── */
.row {
  display: grid;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 1px 0 0 rgba(0,0,0,0.2);
  transition: all var(--t-base) var(--ease-out);
}
.row:hover {
  background: var(--glass-fill-hover);
  transform: translateX(2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 8px 24px -6px rgba(0,0,0,0.5),
    -4px 0 0 0 var(--crimson-600);
}
.row--urgent {
  box-shadow:
    inset 0 0 0 1px rgba(220,38,38,0.25),
    0 0 24px -6px rgba(239,68,68,0.30);
  animation: aurora-pulse 2.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────
   BANK TILE
   ───────────────────────────────────────────────────────────────── */
.bank {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-fill), var(--canvas-2);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.bank::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bank-tint, transparent);
  z-index: -1;
}
.bank::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bank-accent, transparent), transparent);
  opacity: 0.6;
}
.bank:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px -10px rgba(0,0,0,0.6),
    0 0 36px -8px var(--bank-accent, rgba(255,255,255,0));
}
.bank--galicia   { --bank-tint: var(--bank-galicia-gradient);
                   --bank-accent: var(--bank-galicia); }
.bank--santander { --bank-tint: var(--bank-santander-gradient);
                   --bank-accent: var(--bank-santander); }
.bank--bbva     { --bank-tint: var(--bank-bbva-gradient);
                   --bank-accent: var(--bank-bbva); }
.bank--mp       { --bank-tint: var(--bank-mp-gradient);
                   --bank-accent: var(--bank-mp); }

/* ─────────────────────────────────────────────────────────────────
   TOAST (refined notification)
   ───────────────────────────────────────────────────────────────── */
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--glass-fill-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 14px 38px -10px rgba(0,0,0,0.65);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.toast .toast-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok-500);
  box-shadow: 0 0 12px var(--ok-500);
}
.toast .toast-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ok-500);
  animation: aurora-ping 1.6s var(--ease-out) infinite;
}

/* ─────────────────────────────────────────────────────────────────
   STAT
   ───────────────────────────────────────────────────────────────── */
.stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-3);
}
.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-value--xl {
  font-size: var(--text-3xl);
}
.stat-sub {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────────
   PROGRESS / STOCK GAUGE
   ───────────────────────────────────────────────────────────────── */
.progress {
  position: relative;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fill-from, var(--ok-500)), var(--fill-to, var(--ok-400)));
  width: var(--value, 50%);
  box-shadow: 0 0 8px -1px var(--fill-glow, rgba(16,185,129,0.45));
  transition: width 1.2s var(--ease-out);
}
.progress--warn  { --fill-from: var(--warn-500); --fill-to: var(--warn-400);
                   --fill-glow: rgba(245,158,11,0.5); }
.progress--danger{ --fill-from: var(--crimson-700); --fill-to: var(--crimson-500);
                   --fill-glow: rgba(239,68,68,0.55); }

/* Circular gauge (svg-based) — use class on container with width/height set */
.gauge {
  position: relative;
  width: 56px;
  height: 56px;
}
.gauge svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .track  { stroke: rgba(255,255,255,0.08); }
.gauge .fill   { stroke: var(--ok-500); transition: stroke-dashoffset 1.2s var(--ease-out); }
.gauge--warn   .fill { stroke: var(--warn-500); }
.gauge--danger .fill { stroke: var(--crimson-500);
                       filter: drop-shadow(0 0 6px rgba(239,68,68,0.7)); }
.gauge-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   CASCADE ENTRY ANIMATION — apply to a list container
   ───────────────────────────────────────────────────────────────── */
.cascade > * {
  opacity: 0;
  transform: translateY(8px);
  animation: aurora-rise var(--t-slow) var(--ease-out) forwards;
}
.cascade > *:nth-child(1)  { animation-delay: 0ms; }
.cascade > *:nth-child(2)  { animation-delay: 60ms; }
.cascade > *:nth-child(3)  { animation-delay: 120ms; }
.cascade > *:nth-child(4)  { animation-delay: 180ms; }
.cascade > *:nth-child(5)  { animation-delay: 240ms; }
.cascade > *:nth-child(6)  { animation-delay: 300ms; }
.cascade > *:nth-child(7)  { animation-delay: 360ms; }
.cascade > *:nth-child(8)  { animation-delay: 420ms; }
.cascade > *:nth-child(9)  { animation-delay: 480ms; }
.cascade > *:nth-child(10) { animation-delay: 540ms; }
.cascade > *:nth-child(n+11){ animation-delay: 600ms; }

/* ─────────────────────────────────────────────────────────────────
   TECH-HERO ICON SYSTEM
   Loaded via assets/icons.js. The .tech-icon class controls colour,
   weight and the optional energy core glow.
   ───────────────────────────────────────────────────────────────── */
.tech-icon {
  color: currentColor;
  flex-shrink: 0;
  vertical-align: middle;
}
.tech-icon .core {
  fill: var(--crimson-500);
  filter: drop-shadow(0 0 3px var(--crimson-500))
          drop-shadow(0 0 1px var(--crimson-500));
}
/* Quieter core variant — when the icon shouldn't glow (e.g. nav, large grid) */
.tech-icon.is-quiet .core {
  fill: currentColor;
  filter: none;
  opacity: 0.7;
}
/* Strong core — when an icon is meant to feel "powered" / urgent */
.tech-icon.is-powered .core {
  fill: var(--crimson-400);
  filter: drop-shadow(0 0 5px var(--crimson-500))
          drop-shadow(0 0 2px var(--crimson-400));
}
/* On a brand-coloured surface the core inverts to white */
.tech-icon.on-brand .core {
  fill: white;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
}

/* ─────────────────────────────────────────────────────────────────
   HERALDIC SHIELD BADGE
   Heraldic pentagon silhouette evoking a hero shield without
   recreating the Superman one. Use as a chip for stock states or
   urgent flags.
   ───────────────────────────────────────────────────────────────── */
.crest {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 36px;
  flex-shrink: 0;
  clip-path: path("M16 0 L31 5.5 L31 18 C31 27.5 24 32 16 36 C8 32 1 27.5 1 18 L1 5.5 Z");
  /* Inner background, set by tone modifier */
  background: rgba(255,255,255,0.05);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  isolation: isolate;
}
/* Heraldic 1px bevel — drawn with two stacked ::before/::after that mimic the path */
.crest::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 50%);
  clip-path: inherit;
  pointer-events: none;
  z-index: 2;
}
.crest::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  clip-path: inherit;
  pointer-events: none;
  z-index: 1;
}
/* Tone modifiers */
.crest--ok {
  background: linear-gradient(180deg, rgba(16,185,129,0.30), rgba(16,185,129,0.08));
  color: #6EE7B7;
  box-shadow: 0 0 12px -2px rgba(16,185,129,0.4);
}
.crest--ok::after { box-shadow: inset 0 0 0 1px rgba(110,231,183,0.30); }

.crest--off {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--fg-4);
}

.crest--warn {
  background: linear-gradient(180deg, rgba(245,158,11,0.30), rgba(245,158,11,0.08));
  color: #FCD34D;
  box-shadow: 0 0 12px -2px rgba(245,158,11,0.4);
}
.crest--warn::after { box-shadow: inset 0 0 0 1px rgba(252,211,77,0.30); }

.crest--urgent {
  background: linear-gradient(180deg, rgba(245,158,11,0.45), rgba(220,38,38,0.20));
  color: #FDE68A;
  box-shadow:
    0 0 18px -2px rgba(245,158,11,0.5),
    0 0 8px  -1px rgba(220,38,38,0.5);
  animation: aurora-pulse 2.4s ease-in-out infinite;
}
.crest--urgent::after { box-shadow: inset 0 0 0 1px rgba(253,230,138,0.45); }

/* Chip-style shield badge (for inline use in row meta) */
.shield-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  color: var(--fg-2);
}
.shield-chip .crest { width: 18px; height: 20px; }
.shield-chip--ok { color: #34D399; background: rgba(16,185,129,0.10); box-shadow: inset 0 0 0 1px rgba(16,185,129,0.25); }
.shield-chip--off { color: var(--fg-3); }
.shield-chip--urgent {
  color: #FBBF24; background: rgba(220,38,38,0.12);
  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.30), 0 0 14px -2px rgba(239,68,68,0.4);
}

/* ─────────────────────────────────────────────────────────────────
   HALFTONE WATERMARK
   Comic halftone dots at 1-2% opacity. Drop into a relative parent
   as ::before via .halftone, or layer over any element by adding
   .halftone-overlay.
   ───────────────────────────────────────────────────────────────── */
.halftone, .halftone-overlay { position: relative; }
.halftone::before, .halftone-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.10) 1px, transparent 1.2px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.06) 1px, transparent 1.2px);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: 0.18;
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: inherit;
  z-index: 0;
}
.halftone > *, .halftone-overlay > * { position: relative; z-index: 1; }

/* Intensified halftone — for special hero cards */
.halftone--bold::before { opacity: 0.32; }

/* ─────────────────────────────────────────────────────────────────
   ELASTIC SPRING HOVER — comic-energy lift
   Apply to product cards, hero glass items.
   ───────────────────────────────────────────────────────────────── */
.spring-hover {
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 320ms var(--ease-out),
              border-color 240ms var(--ease-out);
  will-change: transform;
}
.spring-hover:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: rgba(220,38,38,0.30);
  box-shadow:
    0 22px 48px -14px rgba(0,0,0,0.7),
    0 0 36px -8px rgba(220,38,38,0.45),
    inset 0 0 0 1px rgba(220,38,38,0.20);
}
.spring-hover:active {
  transform: translateY(-1px) scale(0.998);
  transition-duration: 120ms;
}

/* ─────────────────────────────────────────────────────────────────
   CORE-POWERING-ON SEQUENCE
   For product detail loads. Wrap content in .core-power and the
   children fade-and-rise in a slow ramp, with a crimson "ignition"
   pulse at the start.
   ───────────────────────────────────────────────────────────────── */
.core-power {
  position: relative;
}
.core-power > * {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  filter: blur(2px);
  animation: power-on 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.core-power > *:nth-child(1) { animation-delay: 60ms; }
.core-power > *:nth-child(2) { animation-delay: 200ms; }
.core-power > *:nth-child(3) { animation-delay: 320ms; }
.core-power > *:nth-child(4) { animation-delay: 420ms; }
.core-power > *:nth-child(5) { animation-delay: 500ms; }
.core-power > *:nth-child(6) { animation-delay: 580ms; }
.core-power > *:nth-child(7) { animation-delay: 640ms; }
.core-power > *:nth-child(n+8) { animation-delay: 700ms; }
@keyframes power-on {
  0%   { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Ignition glow — drop into .core-power as the first child for the
   crimson swell that wipes across the page on power-on. */
.ignition {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background: radial-gradient(50% 60% at 50% 50%,
    rgba(239,68,68,0.45), transparent 70%);
  animation: ignition-pulse 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
@keyframes ignition-pulse {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.15); }
}

/* Diagonal-line texture utility (matches login brand panel) */
.diag-lines {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 14px);
}

/* Atmospheric crimson glow blob — drop into a relative parent */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.glow-blob--crimson { background: rgba(220,38,38,0.30); }
.glow-blob--amber   { background: rgba(245,158,11,0.18); }