html { scroll-behavior: smooth; }
::selection { background: #5EB1FF; color: #0A0B0D; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- power-on flicker for the headline ---------- */
.flicker-in { animation: flicker 1.1s steps(1) forwards; }
@keyframes flicker {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  8%   { opacity: 0.2; }
  12%  { opacity: 1; }
  18%  { opacity: 0.3; }
  22%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ---------- scroll reveal ---------- */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.in { opacity: 1; transform: translateY(0); }

/* ---------- FAQ accordion ---------- */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a.open { max-height: 240px; }
.faq-chev { transition: transform .3s ease; }
.faq-chev.rot { transform: rotate(45deg); }

/* ---------- magnetic buttons ---------- */
.magnetic { transition: transform .15s ease; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #5EB1FF; outline-offset: 2px;
}

.glow-border { transition: box-shadow .3s ease, border-color .3s ease; }
.glow-border:hover { border-color: #5EB1FF; box-shadow: 0 0 0 1px #5EB1FF, 0 0 24px rgba(94,177,255,0.25); }

/* ---------- hero parallax layers ---------- */
#hero-parallax { will-change: transform; transition: transform .2s ease-out; }
#arc-canvas { will-change: transform; transition: transform .3s ease-out; }

/* ---------- boot-on overlay ---------- */
#boot-overlay {
  transition: opacity .5s ease;
}
#boot-overlay.boot-hide {
  opacity: 0;
  pointer-events: none;
}

#boot-switch-knob {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), fill .35s ease;
  transform-origin: 40px 104px;
}
#boot-overlay.boot-flip #boot-switch-knob {
  transform: translateY(-52px);
  fill: #5EB1FF;
}
#boot-overlay.boot-flip #boot-switch rect {
  transition: stroke .35s ease;
  stroke: #5EB1FF;
}

#boot-label {
  transition: opacity .3s ease;
}
#boot-overlay.boot-flip #boot-label {
  opacity: 0;
}

#boot-flash {
  background: radial-gradient(circle at 50% 74%, rgba(94,177,255,0.9), rgba(94,177,255,0) 60%);
  opacity: 0;
}
#boot-overlay.boot-surge #boot-flash {
  animation: surgeflash .5s ease-out forwards;
}
@keyframes surgeflash {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2.2); }
}