/* ============================================================
   Syan — elevation layer.
   Modern motion + detail on top of the design system. Loaded
   after components.css so it can refine, never replace. The one
   bold idea: the page enacts verification (orchestrated load,
   ambient ring drift, numbers that count up to their proof).
   Everything here is gated behind prefers-reduced-motion.
   ============================================================ */

/* ---- Smooth in-page nav + dark scrollbar ---- */
html { scroll-behavior: smooth; }
#syan-site { scrollbar-color: var(--syan-navy-500) var(--syan-navy-900); }
#syan-site ::-webkit-scrollbar { width: 11px; height: 11px; }
#syan-site ::-webkit-scrollbar-track { background: var(--syan-navy-900); }
#syan-site ::-webkit-scrollbar-thumb {
  background: var(--syan-navy-500); border-radius: 999px;
  border: 3px solid var(--syan-navy-900);
}
#syan-site ::-webkit-scrollbar-thumb:hover { background: var(--syan-cyan-deep); }

/* ============================================================
   Ambient orbital drift — the mark's ring, alive and continuous.
   Slow, near-imperceptible; it signals "always verifying."
   ============================================================ */
.orbital-field { animation: orbit-drift 120s linear infinite; transform-origin: 50% 50%; }
.orbital-field .ring { animation: ring-breathe 9s var(--ease-in-out) infinite; }
.orbital-field .ring:nth-child(2) { animation-delay: -2.2s; }
.orbital-field .ring:nth-child(3) { animation-delay: -4.4s; }
.orbital-field .ring:nth-child(4) { animation-delay: -6.6s; }
.orbital-field .ring:nth-child(5) { animation-delay: -1.1s; }

@keyframes orbit-drift { to { transform: rotate(360deg); } }
@keyframes ring-breathe {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.45); }
}

/* ============================================================
   Hero load — one orchestrated sequence on first paint.
   ============================================================ */
.hero-anim { opacity: 0; will-change: transform, opacity; animation: hero-rise .8s var(--ease-out) forwards; }
.hero-anim.d1 { animation-delay: .05s; }
.hero-anim.d2 { animation-delay: .16s; }
.hero-anim.d3 { animation-delay: .28s; }
.hero-anim.d4 { animation-delay: .40s; }
.hero-anim.d5 { animation-delay: .54s; }
.hero-anim.panel { animation-duration: .9s; animation-delay: .34s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Cyan underglow that resolves in under the hero panel as it lands */
.evidence-panel { position: relative; }
.evidence-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(33,212,199,.18), 0 18px 60px rgba(33,212,199,.10);
  opacity: 0; animation: panel-glow 1s var(--ease-out) .7s forwards; pointer-events: none;
}
@keyframes panel-glow { to { opacity: 1; } }

/* ============================================================
   Scroll-reveal — refined, with optional stagger on children.
   ============================================================ */
.reveal { transform: translateY(22px); }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .20s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .28s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .36s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .44s; }

/* ============================================================
   Nav links — an underline that draws from the leading edge.
   ============================================================ */
.nav-link { padding-bottom: 2px; }
.nav-link::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -2px;
  height: 1.5px; width: 100%; background: var(--syan-cyan);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .22s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ============================================================
   Cards — a calmer lift, with a hairline that warms to accent.
   ============================================================ */
.lift { transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s var(--ease-out); }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card:hover { box-shadow: var(--shadow-lg); }

/* ============================================================
   Buttons — a 1px settle on press, soft glow on the primary.
   ============================================================ */
.btn { transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(33,212,199,.22); }
.btn:active { transform: translateY(1px); }

/* ============================================================
   Stat number — tabular figures so count-up doesn't jitter.
   ============================================================ */
.stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============================================================
   Proof band + framework matrix (Home) — supporting styles.
   ============================================================ */
.proof-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--syan-navy-600); border: 1px solid var(--syan-navy-600); border-radius: var(--radius-card); overflow: hidden; }
.proof-cell { background: var(--syan-navy-800); padding: 26px 24px; }

.fw-row {
  display: grid; grid-template-columns: 1.1fr 2fr auto; gap: 18px; align-items: center;
  padding: 16px 20px; border: 1px solid var(--syan-line); border-radius: 12px; background: #fff;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.fw-row:hover { border-color: var(--syan-cyan); box-shadow: var(--shadow-sm); }
.fw-track { height: 7px; border-radius: 999px; background: var(--syan-line-soft); overflow: hidden; }
.fw-fill { height: 100%; border-radius: 999px; width: 0; background: linear-gradient(90deg, var(--syan-cyan-deep), var(--syan-cyan)); transition: width 1.1s var(--ease-out); }

/* Process connector for the Map -> Monitor -> Prove sequence */
.process-grid { position: relative; }

@media (max-width: 920px) {
  .proof-band { grid-template-columns: repeat(2, 1fr); }
  .fw-row { grid-template-columns: 1fr auto; }
  .fw-row .fw-track { display: none; }
}
@media (max-width: 560px) {
  .proof-band { grid-template-columns: 1fr; }
}

/* ============================================================
   Quality floor: honor reduced-motion everywhere.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbital-field, .orbital-field .ring { animation: none !important; }
  .hero-anim { opacity: 1 !important; animation: none !important; transform: none !important; }
  .evidence-panel::after { opacity: 1; animation: none; }
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .fw-fill { transition: none; }
  .lift, .btn { transition: none; }
}