/* ============================================================
   AthenaOS — design enhancements (preview)
   Same tokens, pushed further: neural canvas, aurora, 3D tilt,
   animated borders, orbital agents. Sober futurism intact.
   ============================================================ */

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 300;
  pointer-events: none;
  background: linear-gradient(90deg, var(--blue-deeper), var(--accent), var(--blue-bright));
  box-shadow: 0 0 12px var(--glow);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- Hero: neural canvas + aurora ---------- */
.neural-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.aurora {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background: radial-gradient(circle at 50% 50%, var(--blue-bright), transparent 70%);
}
.aurora.a1 { top: -240px; left: -160px; animation: aurora-drift-1 26s var(--ease) infinite alternate; }
.aurora.a2 { top: 40px; right: -220px; opacity: 0.11; animation: aurora-drift-2 32s var(--ease) infinite alternate; }
@keyframes aurora-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(140px, 70px) scale(1.18); }
}
@keyframes aurora-drift-2 {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-120px, 60px) scale(0.92); }
}

/* ---------- Hero title shimmer ---------- */
.hero h1 .grad {
  background: linear-gradient(
    100deg,
    var(--text) 0%,
    var(--text) 38%,
    var(--blue-bright) 50%,
    var(--text) 62%,
    color-mix(in srgb, var(--text) 55%, var(--accent)) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-sheen 7s var(--ease) infinite;
}
@keyframes title-sheen {
  0%, 55%  { background-position: 110% 0; }
  85%, 100% { background-position: -110% 0; }
}

/* ---------- Grid: drifting data pulse ---------- */
.bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(340px 340px at 20% 30%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    radial-gradient(280px 280px at 80% 60%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
  animation: grid-pulse 16s var(--ease) infinite alternate;
}
@keyframes grid-pulse {
  from { transform: translate(0, 0); opacity: 0.7; }
  to   { transform: translate(60px, -40px); opacity: 1; }
}

/* ---------- Product frame: 3D tilt + ring glow ---------- */
.hero-visual .product-frame {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s var(--ease);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 90px -50px var(--glow);
}
.term-demo {
  box-shadow: var(--shadow), 0 0 90px -50px var(--glow);
}

/* ---------- Feature cards: animated conic border ---------- */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.feat-card { isolation: isolate; }
.feat-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: conic-gradient(
    from var(--ang),
    transparent 0%,
    color-mix(in srgb, var(--accent) 65%, transparent) 12%,
    transparent 26%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.feat-card:hover::before {
  opacity: 1;
  animation: border-spin 2.6s linear infinite;
}
@keyframes border-spin { to { --ang: 360deg; } }
.feat-card:hover .feat-ico {
  box-shadow: 0 0 22px -4px var(--glow);
  transition: box-shadow 0.3s var(--ease);
}

/* ---------- Compare: living border on the Athena column ---------- */
.compare-col.athena {
  position: relative;
  overflow: visible;
}
.compare-col.athena::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: conic-gradient(
    from var(--ang),
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--accent) 80%, transparent) 25%,
    color-mix(in srgb, var(--accent) 16%, transparent) 50%,
    color-mix(in srgb, var(--accent) 80%, transparent) 75%,
    color-mix(in srgb, var(--accent) 16%, transparent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: border-spin 6s linear infinite;
  pointer-events: none;
}

/* ---------- Roadmap: light beam along the track ---------- */
.road-track::after {
  content: "";
  position: absolute;
  top: 19px; left: 6%; right: 6%;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 45%, var(--blue-bright) 50%, var(--accent) 55%, transparent);
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: road-beam 4.5s var(--ease) infinite;
  filter: drop-shadow(0 0 6px var(--glow));
}
@keyframes road-beam {
  from { background-position: -220px 0; }
  to   { background-position: calc(100% + 220px) 0; }
}
@media (max-width: 980px) { .road-track::after { display: none; } }
.road-step.done .road-node { animation: node-glow 3.2s var(--ease) infinite; }
@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 24px -2px var(--glow); }
}

/* ---------- Primary button sheen ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- Orbital agents (AI core) ---------- */
.ai-orbit {
  position: relative;
  height: 230px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
}
.ai-orbit .ring {
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50%;
}
.ai-orbit .ring.r1 { width: 130px; height: 130px; animation: orbit-spin 14s linear infinite; }
.ai-orbit .ring.r2 { width: 205px; height: 205px; animation: orbit-spin 26s linear infinite reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.ai-orbit .core {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: 0 0 40px -8px var(--glow), 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent);
  animation: core-breathe 4s var(--ease) infinite;
  z-index: 2;
}
.ai-orbit .core img { width: 38px; height: 38px; object-fit: contain; }
@keyframes core-breathe {
  0%, 100% { box-shadow: 0 0 40px -8px var(--glow), 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent); }
  50%      { box-shadow: 0 0 56px -6px var(--glow), 0 0 0 10px color-mix(in srgb, var(--accent) 9%, transparent); }
}
.ai-orbit .sat {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 12px var(--glow);
}
.ai-orbit .sat::after {
  content: attr(data-label);
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
.ai-orbit .ring .sat { animation: sat-counter 14s linear infinite; }
.ai-orbit .ring.r2 .sat { animation: sat-counter-rev 26s linear infinite; }
@keyframes sat-counter { to { transform: rotate(-360deg); } }
@keyframes sat-counter-rev { to { transform: rotate(360deg); } }
.ai-orbit .ring .sat-anchor {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}
.ai-orbit .ring.r1 .sat-anchor { transform: translate(65px, 0); }
.ai-orbit .ring.r2 .sat-anchor.p1 { transform: translate(-102.5px, 0); }
.ai-orbit .ring.r2 .sat-anchor.p2 { transform: translate(51px, 89px); }

/* ---------- Staggered reveal (delays set by JS) ---------- */
.reveal { transition-duration: 0.8s; }

/* ---------- Final section canvas ---------- */
.final { position: relative; }
.final .neural-canvas { opacity: 0.45; }

/* ---------- Preview chip ---------- */
.preview-chip {
  position: fixed;
  bottom: 16px; left: 16px;
  z-index: 400;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.preview-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warning-amber);
  box-shadow: 0 0 8px var(--warning-amber);
}

/* ---------- Reduced motion: calm everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .neural-canvas, .aurora, .bg-grid::after, .road-track::after { display: none; }
  .hero h1 .grad, .road-step.done .road-node, .ai-orbit .ring,
  .ai-orbit .sat, .ai-orbit .core, .compare-col.athena::before { animation: none; }
}