/*
 * hypatia-ds.css — Hypatia Design Standard 1.0
 *
 * THE reference stylesheet for WOW-factor elements across ALL Hypatia apps.
 * Drop `<link rel="stylesheet" href="/css/hypatia-ds.css">` in any page to get
 * the full design language: glow rings, holograph text, spring physics, glass cards.
 *
 * Design references:
 *   text-effects.colorion.co  — Holograph, Neon-Haus, Glitchcore, Iridescent, Aurora
 *   kinetics.colorion.co      — Card Resize, Magnetic Button, Tab Pill Glide,
 *                               Toast Overshoot, Number Counter, Ripple Feedback
 *   contained-app (macOS 26)  — ResourceGlassCard, specular, soft-light tint
 *   impeccable.style          — No bounce on layout, SF Pro, GPU-only animations
 *
 * FULLY THEME-AWARE: every color via var(--accent), var(--bg-card), etc.
 * Auto-adapts to Gold Luxury, Tron, Galaxy, Miami, all 20+ themes.
 *
 * Version: 1.0 — 2026-07-11
 */

/* ═══════════════════════════════════════════════════════════════════════
   Design Standard Tokens
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --hy-ds: '1.0';

  /* Glow scale */
  --hy-glow-xs: 0 0 8px  var(--accent-glow, rgba(0,255,163,0.30));
  --hy-glow-sm: 0 0 14px var(--accent-glow, rgba(0,255,163,0.35));
  --hy-glow-md: 0 0 24px var(--accent-glow, rgba(0,255,163,0.40)),
                0 0 48px color-mix(in srgb, var(--accent, #00ffa3) 10%, transparent);
  --hy-glow-lg: 0 0 36px var(--accent-glow, rgba(0,255,163,0.45)),
                0 0 72px color-mix(in srgb, var(--accent, #00ffa3) 14%, transparent),
                0 0 120px color-mix(in srgb, var(--accent, #00ffa3) 6%, transparent);

  /* Selected / active ring — THE signature Hypatia glow */
  --hy-ring: 0 0 0 2.5px var(--accent, #00ffa3),
             0 0 0 5px   var(--accent-dim, rgba(0,255,163,0.15)),
             0 0 24px    var(--accent-glow, rgba(0,255,163,0.35));

  /* Glass recipe */
  --hy-glass-bg:    rgba(12, 12, 20, 0.55);
  --hy-glass-blur:  saturate(220%) blur(32px) brightness(1.10);
  --hy-specular:    inset 0 1.5px 0 rgba(255,255,255,0.28);

  /* Typography */
  --hy-font-display: -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --hy-font-body:    -apple-system, 'SF Pro Text',    system-ui, sans-serif;
  --hy-font-mono:    'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   §1  Keyframes
   ═══════════════════════════════════════════════════════════════════════ */

/* Holograph text shift — text-effects.colorion.co "Holograph" */
@keyframes hy-holo-shift {
  0%   { background-position: 0%   center; filter: hue-rotate(0deg)   brightness(1.00); }
  33%  { background-position: 100% center; filter: hue-rotate(18deg)  brightness(1.06); }
  66%  { background-position: 200% center; filter: hue-rotate(-12deg) brightness(0.97); }
  100% { background-position: 300% center; filter: hue-rotate(0deg)   brightness(1.00); }
}

/* Iridescent hue cycle */
@keyframes hy-iridescent {
  0%,100% { filter: hue-rotate(0deg)   brightness(1.00); }
  33%     { filter: hue-rotate(20deg)  brightness(1.08); }
  66%     { filter: hue-rotate(-14deg) brightness(0.96); }
}

/* Neon-Haus glow pulse — text-effects.colorion.co "Neon-Haus" */
@keyframes hy-neon-pulse {
  0%,100% { text-shadow: 0 0 8px  var(--accent-glow), 0 0 20px var(--accent-glow); }
  50%     { text-shadow: 0 0 18px var(--accent-glow), 0 0 40px var(--accent-glow), 0 0 64px color-mix(in srgb, var(--accent) 15%, transparent); }
}

/* Glitchcore — text-effects.colorion.co "Glitchcore" */
@keyframes hy-glitch {
  0%,100% { clip-path: none;           transform: none; }
  20%     { clip-path: inset(40% 0 50% 0); transform: translateX(-4px) skewX(1deg); }
  40%     { clip-path: inset(10% 0 70% 0); transform: translateX(4px)  skewX(-1deg); }
  60%     { clip-path: inset(70% 0 10% 0); transform: translateX(-2px); }
  80%     { clip-path: none;           transform: translateX(2px); }
}

/* Aurora gradient shift */
@keyframes hy-aurora-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Spring entry (kinetics Accordion Spring) */
@keyframes hy-spring-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.95); filter: blur(4px); }
  55%  { opacity: 1; transform: translateY(-2px) scale(1.01);  filter: blur(0); }
  75%  { transform: scale(0.995) translateY(1px); }
  100% { transform: none; filter: blur(0); }
}

/* Shimmer sweep */
@keyframes hy-shimmer {
  0%   { transform: translateX(-130%) skewX(-12deg); }
  100% { transform: translateX(240%)  skewX(-12deg); }
}

/* Glow pulse (badge, active indicator) */
@keyframes hy-glow-pulse {
  0%,100% { box-shadow: var(--hy-glow-sm); }
  50%     { box-shadow: var(--hy-glow-md); }
}

/* Ring pulse (live status dot) */
@keyframes hy-ring-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow, rgba(0,255,163,0.40)); opacity: 1; }
  70%  { box-shadow: 0 0 0 10px transparent; opacity: 0.3; }
  100% { box-shadow: 0 0 0 0   transparent; opacity: 0; }
}

/* Badge pop (kinetics spring pop) */
@keyframes hy-badge-pop {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; }
  75%  { transform: scale(0.95); }
  90%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}

/* Underline grow (section header accent) */
@keyframes hy-underline-grow {
  from { width: 0%; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

/* Float (idle) */
@keyframes hy-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

/* Ripple */
@keyframes hy-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Number bump (kinetics Number Counter) */
@keyframes hy-bump {
  0%   { transform: scale(1)    translateY(0); }
  40%  { transform: scale(1.22) translateY(-6px); }
  100% { transform: scale(1)    translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §2  Text Effects
   ═══════════════════════════════════════════════════════════════════════ */

/* Holograph iridescent — premium hero titles */
.hy-text-holo {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(200,180,255,0.95) 20%,
    rgba(255,200,230,0.95) 40%,
    rgba(180,220,255,0.95) 60%,
    rgba(220,255,210,0.95) 80%,
    rgba(255,255,255,0.95) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hy-holo-shift 8s ease-in-out infinite;
  will-change: background-position;
}

/* Neon-Haus glow — brand name, key headers */
.hy-text-neon {
  color: var(--accent, #00ffa3);
  text-shadow:
    0 0 8px  var(--accent-glow, rgba(0,255,163,0.5)),
    0 0 20px var(--accent-glow, rgba(0,255,163,0.3)),
    0 0 40px color-mix(in srgb, var(--accent, #00ffa3) 15%, transparent);
  animation: hy-neon-pulse 3s ease-in-out infinite;
}

/* Iridescent cycling gradient */
.hy-text-iridescent {
  background: linear-gradient(
    135deg,
    var(--accent, #00ffa3) 0%,
    color-mix(in srgb, var(--accent) 60%, #3ac9ff) 25%,
    color-mix(in srgb, var(--accent) 40%, #b47aff) 50%,
    color-mix(in srgb, var(--accent) 60%, #ff6ec7) 75%,
    var(--accent, #00ffa3) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hy-aurora-shift 6s ease infinite, hy-iridescent 9s ease-in-out infinite;
}

/* Aurora pastel — airy section headers */
.hy-text-aurora {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 80%, white) 0%,
    color-mix(in srgb, var(--info,  #3ac9ff) 70%, white) 33%,
    color-mix(in srgb, var(--purple,#b47aff) 70%, white) 66%,
    color-mix(in srgb, var(--accent) 80%, white) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hy-aurora-shift 8s ease infinite;
}

/* Glitchcore — alerts, mission control, hacker */
.hy-text-glitch {
  position: relative;
  animation: hy-glitch 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   §3  Titles & Banners
   ═══════════════════════════════════════════════════════════════════════ */

/* Large page title — SF Display ultra-light */
.hy-title {
  font-family: var(--hy-font-display);
  font-weight: 100;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255,255,255,0.96);
}

.hy-title--lg  { font-size: clamp(48px, 8vw,  96px); }
.hy-title--xl  { font-size: clamp(64px, 12vw, 124px); }

/* Section header with animated accent underline */
.hy-section-header {
  font-family: var(--hy-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, rgba(200,255,240,0.6));
  position: relative;
  padding-bottom: 8px;
  display: inline-block;
}

.hy-section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #00ffa3), transparent);
  border-radius: 1px;
  animation: hy-underline-grow var(--spring-smooth, 0.45s) both;
  width: 100%;
}

/* Glass banner — hero surfaces */
.hy-banner {
  position: relative;
  overflow: hidden;
  background: var(--hy-glass-bg);
  -webkit-backdrop-filter: var(--hy-glass-blur);
          backdrop-filter: var(--hy-glass-blur);
  border: 0.5px solid color-mix(in srgb, var(--accent, #00ffa3) 20%, rgba(255,255,255,0.10));
  border-radius: 20px;
  box-shadow: var(--hy-specular),
              0 8px 32px rgba(0,0,0,0.30),
              var(--hy-glow-sm);
  padding: 24px 28px;
  animation: hy-spring-in var(--spring-smooth, 0.45s) both;
}

/* Soft-light accent tint (contained-app ResourceGlassCard) */
.hy-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #00ffa3) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent, #00ffa3)  5%, transparent) 100%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hy-banner--hero {
  padding: 40px 48px;
  border-radius: 28px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   §4  Selected / Active Glow Ring
       THE signature Hypatia design element — every active state glows.
       Changes color automatically with active color theme.
   ═══════════════════════════════════════════════════════════════════════ */

.hy-selected,
.hy-selectable[aria-selected="true"],
.hy-selectable.selected,
.hy-selectable.active {
  outline: 2.5px solid var(--accent, #00ffa3);
  outline-offset: 0;
  box-shadow:
    0 0 0 5px var(--accent-dim, rgba(0,255,163,0.15)),
    0 0 24px  var(--accent-glow, rgba(0,255,163,0.35)),
    var(--lg-shadow, 0 8px 28px rgba(0,0,0,0.30));
  transition:
    box-shadow    var(--spring-micro, 0.20s),
    outline-color var(--spring-micro, 0.20s);
}

/* Navigation items — sidebar active state */
.hy-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-md, 10px);
  color: var(--muted, rgba(200,255,240,0.6));
  font-family: var(--hy-font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    color       var(--spring-magnetic, 0.15s),
    background  var(--spring-magnetic, 0.15s),
    box-shadow  var(--spring-micro, 0.20s);
  position: relative;
}

.hy-nav-item:hover {
  color: var(--text, rgba(200,255,240,0.9));
  background: var(--accent-dim, rgba(0,255,163,0.06));
}

.hy-nav-item.active,
.hy-nav-item[aria-current="page"] {
  color: var(--accent, #00ffa3);
  background: var(--accent-dim, rgba(0,255,163,0.10));
  box-shadow: inset 3px 0 0 var(--accent, #00ffa3),
              inset 0 0 20px var(--accent-dim, rgba(0,255,163,0.08));
}

/* ═══════════════════════════════════════════════════════════════════════
   §5  Cards
   ═══════════════════════════════════════════════════════════════════════ */

.hy-card {
  position: relative;
  overflow: hidden;
  background: var(--hy-glass-bg, rgba(12,12,20,0.55));
  -webkit-backdrop-filter: var(--hy-glass-blur);
          backdrop-filter: var(--hy-glass-blur);
  border: 0.5px solid color-mix(in srgb, var(--accent, #00ffa3) 18%, rgba(255,255,255,0.09));
  border-radius: var(--lg-radius, 18px);
  box-shadow:
    var(--hy-specular),
    0 0 0 0.5px rgba(0,0,0,0.18),
    0 4px 14px   rgba(0,0,0,0.22),
    0 12px 36px  rgba(0,0,0,0.28);
  transition:
    transform   var(--spring-card, 0.42s),
    box-shadow  var(--spring-card, 0.42s),
    border-color var(--spring-micro, 0.20s);
  will-change: transform;
}

/* Soft-light accent tint layer */
.hy-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #00ffa3) 16%, transparent) 0%,
    color-mix(in srgb, var(--accent, #00ffa3)  5%, transparent) 100%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Shimmer sweep on hover */
.hy-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent            0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.06) 65%,
    transparent            100%
  );
  transform: translateX(-130%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
}

.hy-card > * { position: relative; z-index: 2; }

/* Hover: kinetics Card Resize spring lift */
.hy-card:hover {
  transform: translateY(-3px) scale(1.006);
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 35%, rgba(255,255,255,0.14));
  box-shadow:
    var(--hy-specular),
    0 0 0 0.5px rgba(0,0,0,0.18),
    0 8px 28px   rgba(0,0,0,0.32),
    0 20px 52px  rgba(0,0,0,0.36),
    var(--hy-glow-sm);
}

.hy-card:hover::after {
  animation: hy-shimmer 0.70s ease-out forwards;
}

/* Press: snap-back */
.hy-card:active {
  transform: scale(0.976);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}

/* Card selected state */
.hy-card.selected,
.hy-card[aria-selected="true"] {
  border-color: var(--accent, #00ffa3);
  box-shadow:
    var(--hy-specular),
    0 0 0 2.5px var(--accent, #00ffa3),
    0 0 0 5px   var(--accent-dim, rgba(0,255,163,0.15)),
    0 0 24px    var(--accent-glow, rgba(0,255,163,0.35)),
    0 12px 40px rgba(0,0,0,0.30);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6  Buttons
   ═══════════════════════════════════════════════════════════════════════ */

.hy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  min-height: 38px;
  border-radius: var(--radius-full, 9999px);
  border: 0.5px solid color-mix(in srgb, var(--accent, #00ffa3) 25%, rgba(255,255,255,0.12));
  background: rgba(12,12,20,0.45);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
          backdrop-filter: saturate(160%) blur(16px);
  color: var(--text, rgba(200,255,240,0.9));
  font-family: var(--hy-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.22);
  transition:
    transform     var(--spring-micro, 0.20s),
    box-shadow    var(--spring-micro, 0.20s),
    border-color  var(--spring-micro, 0.20s);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* Shimmer */
.hy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 60%, transparent 100%);
  transform: translateX(-130%) skewX(-8deg);
  pointer-events: none;
}

.hy-btn:hover::before { animation: hy-shimmer 0.50s ease-out forwards; }

.hy-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 55%, rgba(255,255,255,0.18));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.18),
              0 2px 12px rgba(0,0,0,0.26),
              0 0 0 1px color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent);
  transform: translateY(-1px);
}

.hy-btn:active {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}

/* Primary — solid accent, neon glow */
.hy-btn--primary {
  background: var(--accent, #00ffa3);
  border-color: transparent;
  color: var(--text-invert, #000);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 3px 14px var(--accent-glow, rgba(0,255,163,0.40)),
              inset 0 1.5px 0 rgba(255,255,255,0.30);
}

.hy-btn--primary:hover {
  background: color-mix(in srgb, var(--accent, #00ffa3) 85%, white);
  box-shadow: 0 4px 22px var(--accent-glow, rgba(0,255,163,0.55)),
              var(--hy-glow-sm),
              inset 0 1.5px 0 rgba(255,255,255,0.35);
  transform: translateY(-1px) scale(1.02);
}

/* Ghost */
.hy-btn--ghost {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: var(--accent, #00ffa3);
  color: var(--accent, #00ffa3);
  box-shadow: none;
}

.hy-btn--ghost:hover {
  background: var(--accent-dim, rgba(0,255,163,0.10));
  box-shadow: 0 0 0 1px var(--accent, #00ffa3), inset 0 0 20px var(--accent-dim, rgba(0,255,163,0.06));
  transform: translateY(-1px);
}

/* Danger */
.hy-btn--danger {
  background: color-mix(in srgb, var(--danger, #ff4d6d) 14%, rgba(0,0,0,0.30));
  border-color: color-mix(in srgb, var(--danger, #ff4d6d) 45%, transparent);
  color: var(--danger, #ff4d6d);
}

/* Icon-only */
.hy-btn--icon { padding: 8px; min-width: 38px; min-height: 38px; }

/* Ripple injection point */
.hy-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  transform: scale(0);
  animation: hy-ripple 0.55s ease-out forwards;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7  Inputs with focus glow
   ═══════════════════════════════════════════════════════════════════════ */

.hy-input {
  display: block;
  width: 100%;
  background: rgba(12,12,20,0.40);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent, #00ffa3) 18%, rgba(255,255,255,0.08));
  border-radius: var(--lg-radius-sm, 12px);
  padding: 10px 14px;
  color: var(--text, rgba(200,255,240,0.9));
  font-family: var(--hy-font-body);
  font-size: 14px;
  transition: border-color var(--spring-micro, 0.20s), box-shadow var(--spring-micro, 0.20s);
  -webkit-appearance: none;
  box-sizing: border-box;
}

.hy-input:focus {
  outline: none;
  border-color: var(--accent, #00ffa3);
  box-shadow:
    0 0 0 3px var(--accent-dim, rgba(0,255,163,0.18)),
    0 0 16px  var(--accent-glow, rgba(0,255,163,0.25));
}

.hy-input::placeholder { color: var(--muted, rgba(200,255,240,0.40)); }

/* ═══════════════════════════════════════════════════════════════════════
   §8  Badges & Status
   ═══════════════════════════════════════════════════════════════════════ */

.hy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--hy-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent, #00ffa3) 14%, rgba(0,0,0,0.25));
  border: 1px solid color-mix(in srgb, var(--accent, #00ffa3) 40%, transparent);
  color: var(--accent-text, #00ffa3);
  animation: hy-badge-pop var(--spring-bounce, 0.55s) both;
}

/* Live pulsing indicator */
.hy-badge--live {
  background: color-mix(in srgb, var(--success, #00ffa3) 14%, rgba(0,0,0,0.25));
  border-color: color-mix(in srgb, var(--success, #00ffa3) 40%, transparent);
  color: var(--success, #00ffa3);
  animation: hy-badge-pop var(--spring-bounce) both, hy-glow-pulse 2.4s ease-in-out infinite 0.5s;
}

/* Pulsing dot for live state */
.hy-dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.hy-dot::before,
.hy-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.hy-dot::before {
  background: var(--accent, #00ffa3);
  box-shadow: 0 0 6px var(--accent-glow, rgba(0,255,163,0.5));
}

.hy-dot::after {
  background: transparent;
  border: 1.5px solid var(--accent, #00ffa3);
  animation: hy-ring-pulse 2.2s ease-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   §9  Metrics & Counters
   ═══════════════════════════════════════════════════════════════════════ */

.hy-metric {
  font-family: var(--hy-font-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text, rgba(200,255,240,0.96));
  line-height: 1;
}

/* Apply bump animation via JS: el.classList.add('hy-counting'); */
.hy-counting .hy-metric {
  animation: hy-bump var(--spring-bump, 0.40s) ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════
   §10  Glass divider
   ═══════════════════════════════════════════════════════════════════════ */

.hy-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent, #00ffa3) 25%, rgba(255,255,255,0.12)) 30%,
    color-mix(in srgb, var(--accent, #00ffa3) 35%, rgba(255,255,255,0.18)) 50%,
    color-mix(in srgb, var(--accent, #00ffa3) 25%, rgba(255,255,255,0.12)) 70%,
    transparent 100%
  );
  border: none;
  margin: 16px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §11  Float / entry animations
   ═══════════════════════════════════════════════════════════════════════ */

.hy-enter   { animation: hy-spring-in var(--spring-smooth, 0.45s) both; }
.hy-float   { animation: hy-float 7s ease-in-out infinite; }
.hy-glow-pulse { animation: hy-glow-pulse 2.4s ease-in-out infinite; }

/* Stagger helpers */
.hy-d1 { animation-delay: 0.06s; }
.hy-d2 { animation-delay: 0.12s; }
.hy-d3 { animation-delay: 0.18s; }
.hy-d4 { animation-delay: 0.24s; }
.hy-d5 { animation-delay: 0.30s; }
.hy-d6 { animation-delay: 0.36s; }

/* Section stagger */
.hy-stagger > * {
  animation: hy-spring-in var(--spring-smooth, 0.45s) both;
}
.hy-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.hy-stagger > *:nth-child(2) { animation-delay: 0.09s; }
.hy-stagger > *:nth-child(3) { animation-delay: 0.14s; }
.hy-stagger > *:nth-child(4) { animation-delay: 0.19s; }
.hy-stagger > *:nth-child(5) { animation-delay: 0.24s; }
.hy-stagger > *:nth-child(6) { animation-delay: 0.29s; }

/* ═══════════════════════════════════════════════════════════════════════
   §12  Light mode overrides
   ═══════════════════════════════════════════════════════════════════════ */

[data-mode="light"] .hy-card {
  background: rgba(255,255,255,0.72);
  border-color: color-mix(in srgb, var(--accent, #007AFF) 16%, rgba(0,0,0,0.07));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.88),
    0 4px 14px rgba(0,0,0,0.10),
    0 12px 36px rgba(0,0,0,0.12);
}

[data-mode="light"] .hy-card::before {
  mix-blend-mode: multiply;
}

[data-mode="light"] .hy-btn {
  background: rgba(255,255,255,0.72);
  color: var(--text, #1c1c1e);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.90), 0 2px 8px rgba(0,0,0,0.10);
}

[data-mode="light"] .hy-input {
  background: rgba(255,255,255,0.80);
  border-color: rgba(0,0,0,0.12);
  color: var(--text, #1c1c1e);
}

[data-mode="light"] .hy-banner {
  background: rgba(255,255,255,0.78);
  border-color: color-mix(in srgb, var(--accent, #007AFF) 20%, rgba(0,0,0,0.06));
}

/* ═══════════════════════════════════════════════════════════════════════
   §13  Reduced Motion / data-reduce-motion
   ═══════════════════════════════════════════════════════════════════════ */

[data-reduce-motion="true"] .hy-card,
[data-reduce-motion="true"] .hy-btn,
[data-reduce-motion="true"] .hy-badge,
[data-reduce-motion="true"] .hy-banner,
[data-reduce-motion="true"] .hy-text-holo,
[data-reduce-motion="true"] .hy-text-neon,
[data-reduce-motion="true"] .hy-text-iridescent,
[data-reduce-motion="true"] .hy-text-aurora,
[data-reduce-motion="true"] .hy-section-header::after,
[data-reduce-motion="true"] .hy-dot::after {
  animation: none !important;
  transition: none !important;
}

[data-reduce-motion="true"] .hy-card:hover { transform: none !important; }
[data-reduce-motion="true"] .hy-card::after,
[data-reduce-motion="true"] .hy-btn::before { display: none !important; }