/* ============================================================================
   BOLT.KYBERS.CA — GLOBAL STYLES
   All colors via CSS vars from theme.css. No raw hex anywhere in this file.
   ============================================================================ */

/* ── Box-sizing reset ────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin:  0;
  padding: 0;
}

/* ── Fluid base font ─────────────────────────────────────────────────────── */
html {
  font-size: clamp(14px, 1.1vw, 18px);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background:  var(--bg-gradient);
  color:       var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height:     100svh;
  overflow:   hidden;
}

/* ── Energy pulse rings — static concentric circles, stroke only ────────── */
/* Radii match design file exactly (viewBox 0 0 1440 900):
   outer r=199.25 opacity=0.04 / mid r=139.25 opacity=0.07 / inner r=79.25 opacity=0.12 */
.ep-ring {
  fill:         none;
  stroke:       #3d6ef5;
  stroke-width: 1.5;
}
.ep-r1 { stroke-opacity: 0.04; }
.ep-r2 { stroke-opacity: 0.07; }
.ep-r3 { stroke-opacity: 0.12; }

/* ── Energy pulse core — glowing circle, breathing opacity ──────────────── */
/* r=16, fill=#1D4ED8 fill-opacity=0.25, glow via drop-shadow  */
.ep-core {
  fill:   rgba(29, 78, 216, 0.25);
  filter: drop-shadow(0 0 10px rgba(61, 110, 245, 0.60));
  animation: corePulse 1.8s ease-in-out infinite alternate;
}

@keyframes corePulse {
  from { opacity: 0.35; filter: drop-shadow(0 0 6px  rgba(61, 110, 245, 0.40)); }
  to   { opacity: 1.00; filter: drop-shadow(0 0 18px rgba(61, 110, 245, 0.75)); }
}

/* ── Constellation SVG — full-viewport, fixed behind content ────────────── */
#constellation-svg {
  position:       fixed;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  z-index:        0;
  overflow:       hidden;
}

/* Breathing node groups — transform-box fill-box scales around the circle center */
.c-node {
  transform-box:    fill-box;
  transform-origin: center;
  animation:        nodeBreathe 3.2s ease-in-out infinite;
}
.nd-b { animation-delay: 0.6s; }
.nd-c { animation-delay: 1.2s; }
.nd-d { animation-delay: 1.9s; }
.nd-e { animation-delay: 2.5s; }

/* Glow halo — r=8, fill=#3D6EF5 fill-opacity=0.2 from design */
.c-glow {
  fill:         #3d6ef5;
  fill-opacity: 0.20;
}

/* Core dot — r=2.5, fill=#5A84F7 from design, glow filter for visibility */
.c-core {
  fill:   #5a84f7;
  filter: drop-shadow(0 0 6px rgba(90, 132, 247, 1.0))
          drop-shadow(0 0 12px rgba(61, 110, 245, 0.60));
}

/* Static ambient dots — r=1.5, #7FA8F5 fill-opacity=0.4 from design */
.amb-dot {
  fill:         #7fa8f5;
  fill-opacity: 0.40;
}

/* Light mode — boost line + dot visibility (hardcoded opacities are near-invisible on white) */
html.light #constellation-svg rect[fill="#7FA8F5"] {
  fill-opacity: 0.11;
}
html.light #constellation-svg rect[fill="#3D6EF5"] {
  fill-opacity: 0.55;
}
html.light .amb-dot {
  fill:         #3d6ef5;
  fill-opacity: 0.30;
}
html.light .c-glow {
  fill-opacity: 0.15;
}

@keyframes nodeBreathe {
  0%, 100% { opacity: 0.35; transform: scale(1.0); }
  50%       { opacity: 1.00; transform: scale(1.8); }
}

/* ── Guitar string vibration overlay ────────────────────────────────────────
   JS creates these dynamically on top of the static blue rects when struck.
   The rects underneath never change — this is a separate animated layer.   */
.str-vibe {
  fill:           none;
  stroke:         #5a84f7;
  stroke-opacity: 0.85;
  stroke-width:   1.5;
  stroke-linecap: round;
  pointer-events: none;
}

/* Bolt icon — lightning symbol on the struck node.
   animation-duration is set inline by JS to match strike force (0–4s).     */
.node-bolt-flash { pointer-events: none; }

.bolt-icon {
  fill:             #5a84f7;
  filter:           url(#bolt-glow);
  transform-box:    fill-box;
  transform-origin: center;
  animation:        boltCycle 1s ease-out forwards; /* duration overridden by JS */
}

@keyframes boltCycle {
  0%   { opacity: 0;    transform: scale(0.2); }
  12%  { opacity: 1;    transform: scale(1.5); }
  22%  { opacity: 1;    transform: scale(1.0); }
  78%  { opacity: 1;    transform: scale(1.0); }
  100% { opacity: 0;    transform: scale(0.7); }
}

/* ── App wrapper ─────────────────────────────────────────────────────────── */
#app {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  height:         100svh;
  overflow:       hidden;
}

/* ── Edge vignettes — smooth top/bottom fade over the particle canvas ────
   Disabled in dark mode: the linear gradient already covers the full viewport
   and the near-black bg-primary caused harsh dark bands at top and bottom.  */
html.light #app::before,
html.light #app::after {
  content:        '';
  position:       fixed;
  left:           0;
  right:          0;
  height:         clamp(100px, 22vh, 200px);
  pointer-events: none;
}

html.light #app::before {
  top:        0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}

html.light #app::after {
  bottom:     0;
  background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%);
}

/* ============================================================================
   HEADER
   ============================================================================ */
#page-header {
  position:        relative;
  z-index:         10;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
}

@media (min-width: 768px) {
  #page-header {
    padding: 1.5rem 2.5rem;
  }
}

#logo-link {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  text-decoration: none;
}

#logo-container {
  height:      52px;
  display:     flex;
  align-items: center;
}

#logo-container svg {
  height:  52px;
  width:   auto;
  display: block;
  opacity: 1;
  overflow: visible;
}

html.dark #logo-container svg {
  filter: brightness(1.6) saturate(1.2);
}

html.light #logo-container svg {
  filter: brightness(0.85) saturate(1.8) contrast(1.2);
}

.header-controls {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

/* ── Control buttons (theme + lang) ─────────────────────────────────────── */
.ctrl-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          2.25rem;
  min-width:       2.25rem;
  padding:         0 0.625rem;
  border-radius:   var(--radius-md);
  background:      var(--overlay);
  border:          1px solid var(--border);
  color:           var(--text-primary);
  font-size:       0.8125rem;
  font-family:     var(--font-ui);
  font-weight:     500;
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s;
  white-space:     nowrap;
}

.ctrl-btn:hover {
  background:   var(--overlay-hover);
  border-color: var(--primary);
}

/* Dark mode — silver, matches kybers.ca globe wire color */
html.dark .ctrl-btn {
  color:        #c8daf0;
  border-color: rgba(180, 195, 215, 0.28);
}
html.dark .ctrl-btn:hover {
  border-color: #c8daf0;
  background:   rgba(200, 218, 240, 0.08);
}

/* Light mode — silver */
html.light .ctrl-btn {
  color:        #4a6a88;
  border-color: rgba(74, 106, 136, 0.55);
  background:   rgba(74, 106, 136, 0.07);
}
html.light .ctrl-btn:hover {
  color:        #3a5a78;
  border-color: #4a6a88;
  background:   rgba(74, 106, 136, 0.14);
}

html.light .theme-icon-moon,
html.light .back-btn {
  color: #1533b0;
}

/* Theme button: CSS-driven icon toggle — no JS required */
.theme-icon-sun,
.theme-icon-moon {
  display:      inline-flex;
  align-items:  center;
  line-height:  1;
}

/* Dark mode → show sun (silver), hide moon */
html.dark  .theme-icon-sun  { display: inline-flex; color: #c8daf0; }
html.dark  .theme-icon-moon { display: none; }

/* Light mode → show moon (blue), hide sun */
html.light .theme-icon-sun  { display: none; }
html.light .theme-icon-moon { display: inline-flex; color: var(--primary); }

/* ── Language dropdown ───────────────────────────────────────────────────── */
.lang-wrapper {
  position: relative;
}

#lang-menu {
  position:     absolute;
  top:          calc(100% + 6px);
  right:        0;
  min-width:    160px;
  background:   var(--bg-surface);
  border:       1px solid var(--border);
  border-radius: var(--radius-md);
  padding:      0.375rem;
  z-index:      100;
  box-shadow:   var(--shadow-lg);
}

#lang-menu.hidden {
  display: none;
}

.lang-option {
  display:       block;
  width:         100%;
  padding:       0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background:    transparent;
  border:        none;
  color:         var(--text-primary);
  font-family:   var(--font-ui);
  font-size:     0.8125rem;
  text-align:    left;
  cursor:        pointer;
  transition:    background 0.15s;
}

.lang-option:hover {
  background: var(--overlay-hover);
}

.lang-option.active {
  color:           var(--primary);
  font-weight:     600;
}

/* ============================================================================
   MAIN CONTENT — left-aligned column, fluid padding
   ============================================================================ */
#page-main {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: center;
  text-align:      left;
  padding:         clamp(1.5rem, 6vh, 5rem) clamp(2rem, 8vw, 10rem);
  overflow:        hidden;
}

.content-shell {
  width:     100%;
  max-width: clamp(320px, 42vw, 640px);
}

/* ── Overline ────────────────────────────────────────────────────────────── */
/* text-decoration: none overrides Tailwind's .overline utility (text-decoration-line: overline) */
.overline {
  font-size:       var(--text-overline);
  font-weight:     500;
  letter-spacing:  2px;
  text-transform:  uppercase;
  color:           var(--primary);
  margin-bottom:   0.4rem;
  text-decoration: none;
}

/* ── Product name ────────────────────────────────────────────────────────── */
#product-name {
  font-family:    var(--font-data);
  font-size:      clamp(2rem, 4.5vw, 5.5rem);
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--text-primary);
  line-height:    1.05;
  margin:         0 0 clamp(0.3rem, 1vh, 0.75rem);
}

/* ── Subtitle ────────────────────────────────────────────────────────────── */
.page-subtitle {
  font-size:   clamp(1.1rem, 2.2vw, 2.8rem);
  font-style:  italic;
  font-weight: 600;
  color:       var(--primary);
  line-height: 1.2;
  margin:      0 0 clamp(0.5rem, 1.5vh, 1rem);
}

/* ── Description ─────────────────────────────────────────────────────────── */
.page-description {
  font-size:   clamp(0.85rem, 1.1vw, 1.05rem);
  color:       var(--text-dim);
  line-height: 1.6;
  margin:      0 0 clamp(0.75rem, 2vh, 1.5rem);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.divider {
  width:        100%;
  height:       1px;
  background:   var(--border);
  margin:       0.5rem 0;
}

/* ============================================================================
   COUNTDOWN TIMER
   ============================================================================ */
#countdown {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  gap:             clamp(0.75rem, 3vw, 2rem);
  margin-bottom:   0.75rem;
}

.countdown-unit {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.3rem;
}

.countdown-value {
  font-family:  var(--font-data);
  font-size:    var(--text-stat);
  font-weight:  700;
  color:        var(--text-primary);
  line-height:  1;
  min-width:    2.5ch;
  text-align:   center;
}

.countdown-label {
  font-size:   var(--text-stat-label);
  color:       var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.countdown-sep {
  font-family:  var(--font-data);
  font-size:    var(--text-stat);
  font-weight:  700;
  color:        var(--text-dim);
  line-height:  1;
  padding-top:  2px;
  opacity:      0.35;
}

/* Launched state */
#countdown-launched {
  font-size:   var(--text-body);
  color:       var(--success);
  font-weight: 600;
  display:     none;
}

/* ============================================================================
   SUBSCRIBE FORM
   ============================================================================ */
#subscribe-section {
  text-align:       left;
  width:            100%;
  background:       var(--bg-card);
  border:           1px solid var(--border-card);
  border-radius:    var(--radius-xl);
  padding:          1.5rem 1.75rem;
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.subscribe-overline {
  font-size:      var(--text-overline);
  font-weight:    500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  0.3rem;
}

.subscribe-title {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--text-primary);
  margin:      0 0 0.25rem;
}

.subscribe-subtitle {
  font-size:   var(--text-body);
  color:       var(--text-dim);
  line-height: 1.5;
  margin:      0 0 0.75rem;
}

/* ── Form layout ─────────────────────────────────────────────────────────── */
#subscribe-form {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

/* Stacked fields — always single column */
.sub-field {
  margin-bottom: 0.375rem;
}

/* ── Form inputs ─────────────────────────────────────────────────────────── */
.form-input {
  width:         100%;
  padding:       0.65rem 0.875rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  background:    var(--bg-surface);
  color:         var(--text-primary);
  font-size:     0.9rem;
  font-family:   var(--font-ui);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder {
  color: var(--text-dim);
  opacity: 0.65;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(61,110,245,0.18);
}

.form-input.error {
  border-color: var(--error);
  box-shadow:   0 0 0 3px rgba(239,68,68,0.15);
}

.form-error-msg {
  font-size:  0.78rem;
  color:      var(--error);
  margin-top: 0.25rem;
}

/* ── GDPR consent ────────────────────────────────────────────────────────── */
.gdpr-row {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
}

.gdpr-checkbox {
  flex-shrink: 0;
  margin-top:  0.2rem;
  width:       16px;
  height:      16px;
  accent-color: var(--primary);
  cursor:       pointer;
}

.gdpr-label-text {
  font-size:   0.8125rem;
  color:       var(--text-dim);
  line-height: 1.5;
  cursor:      pointer;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         0.75rem 1.5rem;
  border-radius:   var(--radius-md);
  background:      var(--primary);
  color:           var(--text-on-primary);
  font-size:       0.875rem;
  font-weight:     600;
  font-family:     var(--font-ui);
  border:          none;
  cursor:          pointer;
  width:           100%;
  transition:      background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: 0 8px 24px rgba(61,110,245,0.35);
}

.btn-primary:disabled {
  opacity: 0.48;
  cursor:  not-allowed;
}

.btn-spring {
  touch-action: manipulation;
}

/* ── Form status message ─────────────────────────────────────────────────── */
#form-status {
  padding:       0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size:     0.875rem;
  line-height:   1.5;
  display:       none;
}

#form-status.error-msg {
  background: rgba(239,68,68,0.08);
  border:     1px solid rgba(239,68,68,0.25);
  color:      var(--error);
  display:    block;
}

/* ── Success state ───────────────────────────────────────────────────────── */
#subscribe-success {
  padding:       1.5rem;
  border-radius: var(--radius-lg);
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  text-align:    center;
  display:       none;
}

#subscribe-success.visible {
  display: block;
}

.success-icon {
  font-size:     2rem;
  margin-bottom: 0.75rem;
  display:       block;
}

.success-title {
  font-size:     1.125rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin:        0 0 0.5rem;
}

.success-body {
  font-size:   var(--text-body);
  color:       var(--text-dim);
  line-height: 1.6;
  margin:      0;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width:            16px;
  height:           16px;
  border:           2px solid rgba(255,255,255,0.3);
  border-top-color: var(--text-on-primary);
  border-radius:    50%;
  animation:        spin 0.7s linear infinite;
  display:          inline-block;
  flex-shrink:      0;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
#page-footer {
  padding:         0.875rem 1.5rem;
  text-align:      center;
  border-top:      1px solid var(--border);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.4rem;
  position:        relative;
  z-index:         2; /* sits above the bottom vignette pseudo-element */
}

@media (min-width: 480px) {
  #page-footer {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.25rem 2.5rem;
  }
}

.footer-copy {
  font-size: var(--text-caption);
  color:     var(--text-dim);
}

.footer-links {
  display: flex;
  gap:     1.25rem;
}

.footer-link {
  font-size:       var(--text-caption);
  color:           var(--text-dim);
  text-decoration: none;
  transition:      color 0.2s;
}

.footer-link:hover {
  color: var(--text-primary);
}

/* ── Back to kybers.ca — inherits color from html.dark/.light .ctrl-btn ── */
.back-btn {
  text-decoration: none;
  font-weight:     500;
  padding:         0 0.875rem;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-1 { animation: fadeInUp 0.6s ease-out 0.1s both; }
.fade-in-2 { animation: fadeInUp 0.6s ease-out 0.25s both; }
.fade-in-3 { animation: fadeInUp 0.6s ease-out 0.40s both; }
.fade-in-4 { animation: fadeInUp 0.6s ease-out 0.55s both; }
.fade-in-5 { animation: fadeInUp 0.6s ease-out 0.70s both; }

/* ── Countdown tick pulse ────────────────────────────────────────────────── */
@keyframes tickPulse {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.08); }
  35%  { transform: scale(1); }
}

.tick { animation: tickPulse 0.3s ease-out; }

/* ============================================================================
   EASTER EGG OVERLAY
   Triggered by: logo ×5 fast click OR typing "bolt" anywhere.
   Flash → bolt SVG scales in → teaser text fades up → auto-dismiss after 4s.
   ============================================================================ */
#easter-egg {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(6, 13, 26, 0.92);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.4s ease;
  backdrop-filter: blur(8px);
}

#easter-egg.ee-visible {
  opacity:        1;
  pointer-events: all;
}

#easter-egg-inner {
  text-align: center;
  display:    flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
}

/* Lightning bolt SVG */
#easter-egg-bolt {
  width:   clamp(64px, 12vw, 96px);
  height:  clamp(64px, 12vw, 96px);
  color:   #facc15; /* amber — intentional, not a theme token */
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.1s;
  filter:  drop-shadow(0 0 24px rgba(250,204,21,0.7));
}
#easter-egg-bolt svg {
  width:  100%;
  height: 100%;
}

#easter-egg.ee-visible #easter-egg-bolt {
  opacity:   1;
  transform: scale(1);
}

/* Headline */
#easter-egg-headline {
  margin:      0;
  font-family: var(--font-ui);
  font-size:   clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color:       #f0f4ff;
  opacity:     0;
  transform:   translateY(12px);
  transition:  opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}

/* Sub line */
#easter-egg-sub {
  margin:      0;
  font-family: var(--font-ui);
  font-size:   clamp(0.9rem, 2vw, 1.1rem);
  color:       #a8b8d8;
  opacity:     0;
  transform:   translateY(8px);
  transition:  opacity 0.4s ease 0.55s, transform 0.4s ease 0.55s;
}

/* Small dismiss hint */
#easter-egg-hint {
  margin:      0;
  font-family: var(--font-data);
  font-size:   0.7rem;
  color:       rgba(168,184,216,0.4);
  opacity:     0;
  transition:  opacity 0.4s ease 0.8s;
  letter-spacing: 0.08em;
}

#easter-egg.ee-visible #easter-egg-headline,
#easter-egg.ee-visible #easter-egg-sub,
#easter-egg.ee-visible #easter-egg-hint {
  opacity:   1;
  transform: translateY(0);
}

/* Screen flash — white overlay that fires on trigger */
#easter-egg-flash {
  position:       fixed;
  inset:          0;
  z-index:        9998;
  background:     white;
  opacity:        0;
  pointer-events: none;
}
#easter-egg-flash.ee-flash {
  animation: eeFlash 0.5s ease-out forwards;
}

@keyframes eeFlash {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ============================================================================
   RESPONSIVE — Mobile (< 640px) + Tablet portrait safety net (640–1080px)
   ============================================================================ */

/* ── Mobile: allow scroll, tighten layout ────────────────────────────────── */
@media (max-width: 639px) {
  /* Unlock scrolling — content may exceed 100svh on small phones.
     Particle canvas + vignettes are position:fixed, so they're unaffected. */
  body {
    height:     auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  #app {
    height:     auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  #page-main {
    justify-content: flex-start;
    overflow:        visible;
    padding:         1rem 1.5rem 2.5rem;
  }

  .content-shell {
    max-width: 100%;
  }

  /* Smaller logo on mobile */
  #logo-container {
    height: 36px;
  }

  /* Product name — tighter floor for 375px screens */
  #product-name {
    font-size: clamp(1.85rem, 9vw, 2.75rem);
  }

  /* Subtitle */
  .page-subtitle {
    font-size: clamp(1rem, 5vw, 1.5rem);
  }
}

/* ── Tablet portrait: scroll unlock + reduce left padding ────────────────── */
@media (min-width: 640px) and (max-width: 1080px) {
  body {
    height:     auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  #app {
    height:     auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  #page-main {
    padding: clamp(1.5rem, 4vh, 3.5rem) clamp(2rem, 6vw, 5rem);
  }

  .content-shell {
    max-width: clamp(320px, 55vw, 580px);
  }
}

/* ============================================================================
   REDUCED MOTION — all animations off
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .fade-in-1,
  .fade-in-2,
  .fade-in-3,
  .fade-in-4,
  .fade-in-5 {
    animation: none !important;
    opacity:   1 !important;
    transform: none !important;
  }

  #constellation-svg {
    display: none !important;
  }

  #easter-egg-flash {
    display: none !important;
  }

  #easter-egg-bolt {
    transition: none !important;
  }

  .ep-core,
  .c-node {
    animation: none !important;
  }
}