/* ==========================================================
   Zypheral — motion layer
   Keep it: refined, short, easeOutQuint. Never flashy.
   ========================================================== */

:root {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Scroll reveal base ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out-quint),
    transform 900ms var(--ease-out-quint);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="rise-sm"] { transform: translateY(8px); }
[data-reveal="rise-lg"] { transform: translateY(22px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero kicker + headline ---------- */
.hero .kicker,
.hero h1,
.hero .lede,
.hero .hero-cta,
.hero .hero-meta { /* defaults via data-reveal */ }

/* h1 underline: stroke reveals in after entrance */
.hero h1 .underline::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms 350ms var(--ease-out-expo);
}
.hero h1.is-in .underline::after { transform: scaleX(1); }

/* ---------- Hero card stack (replaces inline rotation) ---------- */
/* override the static transforms; cards now translate into rotation.
   - `transform` carries entrance lift + rotation
   - `translate` (independent property) carries mouse parallax
   - this lets both animate independently without @property gymnastics
*/
.h-card {
  opacity: 0;
  transform: translateY(18px) rotate(var(--rot, 0deg));
  translate: 0 0;
  transition:
    opacity 800ms ease-out,
    transform 1100ms var(--ease-out-quint),
    translate 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 300ms ease;
  will-change: transform, translate, opacity;
}
.h-server   { --rot:  2deg; }
.h-ssl      { --rot: -4deg; }
.h-uptime   { --rot: -2deg; }
.h-threats  { --rot:  3deg; }

.h-card.is-in {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}
.hero-visual.parallax-on .h-card {
  transition:
    opacity 800ms ease-out,
    transform 1100ms var(--ease-out-quint),
    translate 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 300ms ease;
}

/* ---------- Live dot pulse (ambient) ---------- */
@keyframes zy-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color, rgba(20,224,138,0.45)); }
  70%  { box-shadow: 0 0 0 7px rgba(20,224,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,224,138,0); }
}
.h-card-bar .dot.live,
.eyebrow .dot,
.timeline-note .dot {
  animation: zy-pulse 2.4s ease-out infinite;
}

/* ---------- Console rows stagger ---------- */
.h-server .row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-out-quint), transform 600ms var(--ease-out-quint);
}
.h-server.is-in .row { opacity: 1; transform: none; }
.h-server.is-in .row:nth-child(1) { transition-delay:  60ms; }
.h-server.is-in .row:nth-child(2) { transition-delay: 120ms; }
.h-server.is-in .row:nth-child(3) { transition-delay: 180ms; }
.h-server.is-in .row:nth-child(4) { transition-delay: 240ms; }
.h-server.is-in .row:nth-child(5) { transition-delay: 300ms; }
.h-server.is-in .row:nth-child(6) { transition-delay: 360ms; }
.h-server.is-in .row:nth-child(7) { transition-delay: 420ms; }

/* meter fills */
.h-server .meter > div {
  width: 0 !important;
  transition: width 1100ms 500ms var(--ease-out-quint);
}
.h-server.is-in .meter > div.fill-cpu   { width: 18% !important; }
.h-server.is-in .meter > div.fill-cache { width: 94% !important; }

/* ---------- Threats sparkline draw + count-up ---------- */
.spark-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1600ms 300ms var(--ease-out-expo);
}
.h-threats.is-in .spark-path { stroke-dashoffset: 0; }

.spark-fill {
  opacity: 0;
  transition: opacity 600ms 900ms ease-out;
}
.h-threats.is-in .spark-fill { opacity: 1; }

/* ---------- Uptime bars wave ---------- */
.h-uptime .bars span {
  transform: scaleY(0.4);
  transform-origin: bottom;
  opacity: 0.4;
  transition: transform 500ms var(--ease-out-quint), opacity 400ms;
}
.h-uptime.is-in .bars span { transform: scaleY(1); opacity: 0.9; }
.h-uptime.is-in .bars span.down { opacity: 0.18; }
/* stagger each bar */
.h-uptime.is-in .bars span:nth-child(1)  { transition-delay:   0ms; }
.h-uptime.is-in .bars span:nth-child(2)  { transition-delay:  20ms; }
.h-uptime.is-in .bars span:nth-child(3)  { transition-delay:  40ms; }
.h-uptime.is-in .bars span:nth-child(4)  { transition-delay:  60ms; }
.h-uptime.is-in .bars span:nth-child(5)  { transition-delay:  80ms; }
.h-uptime.is-in .bars span:nth-child(6)  { transition-delay: 100ms; }
.h-uptime.is-in .bars span:nth-child(7)  { transition-delay: 120ms; }
.h-uptime.is-in .bars span:nth-child(8)  { transition-delay: 140ms; }
.h-uptime.is-in .bars span:nth-child(9)  { transition-delay: 160ms; }
.h-uptime.is-in .bars span:nth-child(10) { transition-delay: 180ms; }
.h-uptime.is-in .bars span:nth-child(11) { transition-delay: 200ms; }
.h-uptime.is-in .bars span:nth-child(12) { transition-delay: 220ms; }
.h-uptime.is-in .bars span:nth-child(13) { transition-delay: 240ms; }
.h-uptime.is-in .bars span:nth-child(14) { transition-delay: 260ms; }
.h-uptime.is-in .bars span:nth-child(15) { transition-delay: 280ms; }
.h-uptime.is-in .bars span:nth-child(16) { transition-delay: 300ms; }
.h-uptime.is-in .bars span:nth-child(17) { transition-delay: 320ms; }
.h-uptime.is-in .bars span:nth-child(18) { transition-delay: 340ms; }
.h-uptime.is-in .bars span:nth-child(19) { transition-delay: 360ms; }
.h-uptime.is-in .bars span:nth-child(20) { transition-delay: 380ms; }
.h-uptime.is-in .bars span:nth-child(21) { transition-delay: 400ms; }
.h-uptime.is-in .bars span:nth-child(22) { transition-delay: 420ms; }
.h-uptime.is-in .bars span:nth-child(23) { transition-delay: 440ms; }
.h-uptime.is-in .bars span:nth-child(24) { transition-delay: 460ms; }
.h-uptime.is-in .bars span:nth-child(25) { transition-delay: 480ms; }
.h-uptime.is-in .bars span:nth-child(26) { transition-delay: 500ms; }
.h-uptime.is-in .bars span:nth-child(27) { transition-delay: 520ms; }
.h-uptime.is-in .bars span:nth-child(28) { transition-delay: 540ms; }
.h-uptime.is-in .bars span:nth-child(29) { transition-delay: 560ms; }
.h-uptime.is-in .bars span:nth-child(30) { transition-delay: 580ms; }

/* ---------- Group reveal helper (staggered children) ---------- */
[data-reveal-group] > [data-reveal-child] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms var(--ease-out-quint), transform 800ms var(--ease-out-quint);
}
[data-reveal-group].is-in > [data-reveal-child] {
  opacity: 1;
  transform: none;
}
[data-reveal-group].is-in > [data-reveal-child]:nth-child(1) { transition-delay:  40ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(2) { transition-delay: 100ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(3) { transition-delay: 160ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(4) { transition-delay: 220ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(6) { transition-delay: 340ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(7) { transition-delay: 400ms; }
[data-reveal-group].is-in > [data-reveal-child]:nth-child(8) { transition-delay: 460ms; }

/* ---------- Card hover micro-interactions ---------- */
.feature-card .ico {
  transition: transform 380ms var(--ease-out-quint), background 220ms ease;
}
.feature-card:hover .ico { transform: translateY(-2px) scale(1.04); }

/* feature-card subtle outline glow on hover */
.feature-card {
  transition:
    transform 360ms var(--ease-out-quint),
    box-shadow 360ms ease,
    border-color 220ms ease;
}

/* step number hover */
.step .num { transition: transform 360ms var(--ease-out-quint), background 220ms ease, color 220ms ease; }
.step:hover .num { transform: translateY(-2px); }

/* Plan featured: subtle ambient glow */
@keyframes plan-glow {
  0%, 100% { box-shadow: 0 30px 80px -30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.04); }
  50%      { box-shadow: 0 30px 100px -28px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.04); }
}
.plan.featured.is-in { animation: plan-glow 6s ease-in-out 1.5s infinite; }

/* ribbon shimmer on entrance */
.plan .ribbon {
  position: absolute; overflow: hidden;
}
.plan .ribbon::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.plan.featured.is-in .ribbon::after {
  animation: ribbon-shimmer 1.8s 1.2s ease-out 1 forwards;
}
@keyframes ribbon-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* FAQ row hover indicator */
.faq-item .faq-q .idx { transition: color 220ms ease; }
.faq-item:hover .faq-q .idx,
.faq-item.open .faq-q .idx { color: var(--accent-2); }

/* Hero trust strip items stagger */
.trust-row .t {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out-quint), transform 700ms var(--ease-out-quint);
}
.trust-strip.is-in .t { opacity: 0.9; transform: none; }
.trust-strip.is-in .t:nth-child(1) { transition-delay:   0ms; }
.trust-strip.is-in .t:nth-child(2) { transition-delay:  70ms; }
.trust-strip.is-in .t:nth-child(3) { transition-delay: 140ms; }
.trust-strip.is-in .t:nth-child(4) { transition-delay: 210ms; }
.trust-strip.is-in .t:nth-child(5) { transition-delay: 280ms; }
.trust-strip.is-in .t:nth-child(6) { transition-delay: 350ms; }

/* Compare row entrance — slide right slightly */
.compare-row { transition: background 240ms ease; }
.compare-row[data-reveal] { transform: translateY(0) translateX(-8px); }
.compare-row[data-reveal].is-in { transform: translateY(0) translateX(0); }

/* Nav blur on scroll subtle deepening */
.nav { transition: background 280ms ease, box-shadow 280ms ease; }
.nav.is-scrolled {
  background: rgba(246, 245, 241, 0.92);
  box-shadow: 0 1px 0 var(--line-soft), 0 6px 20px -10px rgba(11,14,18,0.08);
}

/* Button arrow shine when hero CTA enters */
@keyframes nudge-arrow {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.hero .btn-primary.on-dark.is-in .arrow {
  animation: nudge-arrow 1.6s 1.6s ease-in-out 1;
}

/* CTA card gradient slow drift */
@keyframes cta-drift {
  0%, 100% { background-position: 0% 0%, 0% 100%; }
  50%      { background-position: 20% 10%, 10% 90%; }
}
.cta-card::before {
  background-size: 140% 140%, 140% 140%;
  animation: cta-drift 14s ease-in-out infinite;
}