/* Ohms Industries — entrance / boot-sequence pattern
 *
 * Drop this into any project that needs an Ohms-branded "first paint" feel:
 * the Tron grid lattice fades in, a single horizontal scan line sweeps once,
 * the pixel-Ω cells light up in scan order, HUD corner brackets snap in.
 * After ~1.4s everything settles into an ambient cyan glow.
 *
 * Requires tokens.css (--ohms-* tokens) and the pixel-Ω SVG to be rendered
 * inline as a sibling of an .ohms-boot-mark wrapper. Selector hits raw <rect>
 * elements; if your SVG also has <title> or <desc> children, use :nth-of-type.
 *
 * No JavaScript. No deps. Pure CSS. Respects prefers-reduced-motion.
 */

/* ── 1. Shell ──────────────────────────────────────────────────────────
 * Apply to the outermost container of your first-paint surface (page body,
 * login shell, splash). Provides the void→deep radial backdrop. */
.ohms-boot-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ohms-lume);
  background: var(--ohms-bg-gradient,
    radial-gradient(120% 80% at 50% 0%, #0A0F13 0%, #05080A 70%, #020306 100%));
}

/* ── 2. Background lattice ─────────────────────────────────────────────
 * Absolute-positioned overlay. Insert as a sibling INSIDE .ohms-boot-shell
 *   <div class="ohms-boot-grid" aria-hidden="true"></div>
 * Sparse cyan grid, radial mask at center, fades in over 1.1s. */
.ohms-boot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 90%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 90%);
  opacity: 0;
  animation: ohms-boot-grid-fade 1100ms ease-out 80ms forwards;
}

/* ── 3. Scan line ──────────────────────────────────────────────────────
 * Single-pass horizontal sweep, top→bottom. Insert as a sibling of the grid
 *   <div class="ohms-boot-scanline" aria-hidden="true"></div> */
.ohms-boot-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%, rgba(0, 229, 255, 0.9) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.65),
              0 0 36px rgba(0, 229, 255, 0.35);
  opacity: 0;
  pointer-events: none;
  animation: ohms-boot-scan 1400ms cubic-bezier(.22, .61, .36, 1) 200ms forwards;
}

/* ── 4. Materialising surface ──────────────────────────────────────────
 * Apply to the card / panel that holds the actual content. Fades up after
 * the scan line clears. */
.ohms-boot-card {
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: ohms-boot-card-in 600ms cubic-bezier(.16, .84, .32, 1) 700ms forwards;
}
.ohms-boot-card::after {
  /* Continuous ambient border-glow once the card has materialised. */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(0, 229, 255, 0.35);
  pointer-events: none;
  animation: ohms-boot-border 3.6s ease-in-out infinite 1500ms;
}

/* ── 5. HUD corner brackets ────────────────────────────────────────────
 * Snap into place at each corner, last in the sequence. Insert four spans
 * inside .ohms-boot-card:
 *   <span class="ohms-bracket ohms-bracket-tl"></span> ... -tr / -bl / -br */
.ohms-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  animation: ohms-bracket-in 280ms ease-out forwards;
}
.ohms-bracket::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ohms-cyan);
}
.ohms-bracket-tl { top: -5px;    left: -5px;    animation-delay: 1100ms; }
.ohms-bracket-tl::before { border-right: 0; border-bottom: 0; }
.ohms-bracket-tr { top: -5px;    right: -5px;   animation-delay: 1160ms; }
.ohms-bracket-tr::before { border-left: 0;  border-bottom: 0; }
.ohms-bracket-bl { bottom: -5px; left: -5px;    animation-delay: 1220ms; }
.ohms-bracket-bl::before { border-right: 0; border-top: 0; }
.ohms-bracket-br { bottom: -5px; right: -5px;   animation-delay: 1280ms; }
.ohms-bracket-br::before { border-left: 0;  border-top: 0; }

/* ── 6. Pixel-Ω boot animation ─────────────────────────────────────────
 * The 19 cells of the pixel mark fade in sequentially (scan order), with a
 * brief overshoot on each cell, then settle into a continuous glow pulse.
 *   <span class="ohms-boot-mark">{inline pixel-Ω SVG}</span>
 *
 * If your SVG has <title>/<desc> children, the :nth-of-type selectors below
 * still match because they target <rect> only. If your SVG has zero non-rect
 * children, switch to :nth-child for identical behaviour. */
.ohms-boot-mark {
  display: inline-flex;
  color: var(--ohms-cyan);
  filter: var(--ohms-glow);
  animation: ohms-mark-pulse 3.2s ease-in-out infinite 1800ms;
}
.ohms-boot-mark svg rect {
  opacity: 0;
  animation: ohms-cell-on 380ms ease-out forwards;
}
.ohms-boot-mark svg rect:nth-of-type(1)  { animation-delay: 250ms; }
.ohms-boot-mark svg rect:nth-of-type(2)  { animation-delay: 275ms; }
.ohms-boot-mark svg rect:nth-of-type(3)  { animation-delay: 300ms; }
.ohms-boot-mark svg rect:nth-of-type(4)  { animation-delay: 325ms; }
.ohms-boot-mark svg rect:nth-of-type(5)  { animation-delay: 350ms; }
.ohms-boot-mark svg rect:nth-of-type(6)  { animation-delay: 375ms; }
.ohms-boot-mark svg rect:nth-of-type(7)  { animation-delay: 400ms; }
.ohms-boot-mark svg rect:nth-of-type(8)  { animation-delay: 425ms; }
.ohms-boot-mark svg rect:nth-of-type(9)  { animation-delay: 450ms; }
.ohms-boot-mark svg rect:nth-of-type(10) { animation-delay: 475ms; }
.ohms-boot-mark svg rect:nth-of-type(11) { animation-delay: 500ms; }
.ohms-boot-mark svg rect:nth-of-type(12) { animation-delay: 525ms; }
.ohms-boot-mark svg rect:nth-of-type(13) { animation-delay: 550ms; }
.ohms-boot-mark svg rect:nth-of-type(14) { animation-delay: 575ms; }
.ohms-boot-mark svg rect:nth-of-type(15) { animation-delay: 600ms; }
.ohms-boot-mark svg rect:nth-of-type(16) { animation-delay: 625ms; }
.ohms-boot-mark svg rect:nth-of-type(17) { animation-delay: 650ms; }
.ohms-boot-mark svg rect:nth-of-type(18) { animation-delay: 675ms; }
.ohms-boot-mark svg rect:nth-of-type(19) { animation-delay: 700ms; }

/* ── 7. Line-up — generic stagger for headings, inputs, buttons ────────
 * Apply .ohms-boot-line and inline `style="--d: 950ms"` per element.
 *   <h1 class="ohms-boot-line" style="--d:900ms">…</h1> */
.ohms-boot-line {
  opacity: 0;
  animation: ohms-line-up 480ms ease-out var(--d, 900ms) forwards;
}

/* ── 8. Typewriter for a single mono caps line ─────────────────────────
 * Clip-path reveal with a blinking cyan caret that fades on completion. */
.ohms-boot-type {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: ohms-type-in 700ms steps(var(--chars, 14), end) var(--d, 1000ms) forwards;
}
.ohms-boot-type::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ohms-cyan);
  box-shadow: 0 0 6px var(--ohms-cyan);
  animation:
    ohms-caret-blink 700ms steps(1, end) var(--d, 1000ms) 1,
    ohms-caret-fade  240ms ease-out      calc(var(--d, 1000ms) + 700ms) forwards;
}

/* ── 9. Keyframes ──────────────────────────────────────────────────────
 * All animations land within ~1.4s of first paint, then settle. */
@keyframes ohms-boot-grid-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ohms-boot-scan {
  0%   { top: -2px;  opacity: 0; }
  15%  {             opacity: 1; }
  85%  {             opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}
@keyframes ohms-boot-card-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ohms-bracket-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}
@keyframes ohms-cell-on {
  0%   { opacity: 0; }
  40%  { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1);   }
}
@keyframes ohms-mark-pulse {
  0%, 100% { filter:
      drop-shadow(0 0 6px  rgba(0, 229, 255, 0.50))
      drop-shadow(0 0 14px rgba(0, 229, 255, 0.25)); }
  50%      { filter:
      drop-shadow(0 0 9px  rgba(0, 229, 255, 0.65))
      drop-shadow(0 0 22px rgba(0, 229, 255, 0.35)); }
}
@keyframes ohms-boot-border {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}
@keyframes ohms-line-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes ohms-type-in {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes ohms-caret-blink {
  0%,    50%    { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}
@keyframes ohms-caret-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── 10. Reduced motion — collapse to a still composition ──────────────
 * Users who prefer reduced motion see the final state immediately. */
@media (prefers-reduced-motion: reduce) {
  .ohms-boot-grid,
  .ohms-boot-scanline,
  .ohms-boot-card,
  .ohms-bracket,
  .ohms-boot-mark svg rect,
  .ohms-boot-line,
  .ohms-boot-type {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .ohms-boot-mark { animation: none !important; }
}