/* v4 — fluid motion + volumetric depth */

:root {
  --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Global ambient blobs (page-wide depth) */
.ambient--global {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: blobDrift 22s var(--ease-soft) infinite alternate;
}
.ambient__blob--a {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  top: -8%;
  right: -5%;
  background: radial-gradient(circle, rgba(0, 255, 163, 0.35), transparent 70%);
}
.ambient__blob--b {
  width: min(45vw, 420px);
  height: min(45vw, 420px);
  bottom: 15%;
  left: -10%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.22), transparent 70%);
  animation-delay: -8s;
  animation-duration: 28s;
}
.ambient__blob--c {
  width: min(35vw, 320px);
  height: min(35vw, 320px);
  top: 45%;
  left: 40%;
  background: radial-gradient(circle, rgba(0, 255, 163, 0.12), transparent 70%);
  animation-delay: -14s;
  animation-duration: 32s;
}
@keyframes blobDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.08); }
  66% { transform: translate(-25px, 25px) scale(0.95); }
  100% { transform: translate(15px, 35px) scale(1.05); }
}

/* Hero volumetric layer */
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: orbFloat 16s var(--ease-soft) infinite alternate;
}
.hero__orb--1 {
  width: 380px;
  height: 380px;
  top: 10%;
  right: 5%;
  background: radial-gradient(circle, rgba(0, 255, 163, 0.25), transparent 65%);
}
.hero__orb--2 {
  width: 280px;
  height: 280px;
  bottom: 20%;
  left: 30%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 65%);
  animation-delay: -5s;
  animation-duration: 20s;
}
.hero__orb--3 {
  width: 200px;
  height: 200px;
  top: 35%;
  left: 55%;
  background: radial-gradient(circle, rgba(0, 255, 163, 0.15), transparent 65%);
  animation-delay: -10s;
  animation-duration: 24s;
}
@keyframes orbFloat {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-20px, 30px) scale(1.12); }
}

.hero__grid-lines {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(0, 255, 163, 0.06), transparent),
    repeating-conic-gradient(from 0deg at 70% 45%, transparent 0deg, rgba(0, 255, 163, 0.015) 0.5deg, transparent 1deg);
  mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, #000, transparent);
  animation: gridRotate 120s linear infinite;
}
@keyframes gridRotate { to { transform: rotate(360deg); } }

.hero--dense .hero__particles { opacity: 0.7; }

/* Hero viz — 3D volume */
.hero__viz {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform 0.15s var(--ease-fluid);
  will-change: transform;
}
.hero__viz-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 255, 163, 0.2), transparent 55%);
  filter: blur(40px);
  z-index: 0;
  animation: glowPulse 4s var(--ease-soft) infinite alternate;
}
@keyframes glowPulse {
  from { opacity: 0.5; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}
.hero--dense .hero__viz {
  max-height: 580px;
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 255, 163, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -40px 80px rgba(0, 255, 163, 0.03);
}
.hero__viz > canvas,
.hero__viz > .viz-hub,
.hero__viz > .viz-float,
.hero__viz > .viz-ring,
.hero__viz > .viz-scan {
  position: relative;
  z-index: 1;
}

.viz-ring--2 {
  inset: 22%;
  animation-direction: reverse;
  animation-duration: 45s;
  border-color: rgba(0, 212, 255, 0.12);
}
.viz-float--4 {
  bottom: 8%;
  right: 8%;
  animation-delay: -3s;
}
/* Override base reveal for fluid entrance */
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Cap wall stagger entrance */
.cap-wall.is-visible .cap {
  animation: capIn 0.7s var(--ease-fluid) backwards;
}
.cap-wall.is-visible .cap:nth-child(1) { animation-delay: 0.02s; }
.cap-wall.is-visible .cap:nth-child(2) { animation-delay: 0.05s; }
.cap-wall.is-visible .cap:nth-child(3) { animation-delay: 0.08s; }
.cap-wall.is-visible .cap:nth-child(4) { animation-delay: 0.11s; }
.cap-wall.is-visible .cap:nth-child(5) { animation-delay: 0.14s; }
.cap-wall.is-visible .cap:nth-child(6) { animation-delay: 0.17s; }
.cap-wall.is-visible .cap:nth-child(n+7) { animation-delay: 0.2s; }
@keyframes capIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.viz-flow {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--accent-2);
  letter-spacing: 0.04em;
}

/* Smoother float cards */
.viz-float {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.4s var(--ease-fluid), box-shadow 0.4s;
}
.viz-hub {
  box-shadow:
    0 12px 48px rgba(0, 255, 163, 0.15),
    0 0 0 1px rgba(0, 255, 163, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Section ambient orbs */
.section--fluid {
  position: relative;
  overflow: hidden;
}
.section-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.section-ambient--right { display: flex; justify-content: flex-end; align-items: center; }
.section-ambient--left { display: flex; justify-content: flex-start; align-items: center; }
.section-ambient__orb {
  width: min(50vw, 480px);
  height: min(50vw, 480px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 163, 0.08), transparent 65%);
  filter: blur(50px);
  animation: sectionOrb 18s var(--ease-soft) infinite alternate;
}
.section-ambient--right .section-ambient__orb { margin-right: -10%; }
.section-ambient--left .section-ambient__orb { margin-left: -10%; }
.section-ambient__orb--cyan {
  background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent 65%);
}
.section-ambient__orb--large {
  width: min(70vw, 600px);
  height: min(70vw, 600px);
  opacity: 0.8;
}
@keyframes sectionOrb {
  from { transform: translateY(0) scale(1); opacity: 0.6; }
  to { transform: translateY(-30px) scale(1.1); opacity: 1; }
}
.section--fluid > .container,
.section--fluid > .h-scroll,
.section--fluid > .h-scroll-hint {
  position: relative;
  z-index: 1;
}

/* Smoother reveals with stagger */
.reveal {
  transition:
    opacity 1s var(--ease-fluid),
    transform 1s var(--ease-fluid),
    filter 1s var(--ease-fluid);
  transform: translateY(36px);
  filter: blur(6px);
}
.reveal.is-visible {
  filter: blur(0);
}
.reveal--delay { transition-delay: 0.15s; }
.reveal--delay-2 { transition-delay: 0.3s; }
.reveal--delay-3 { transition-delay: 0.45s; }

/* Stagger children */
.cap-wall .cap,
.bento__card,
.principle-card,
.format-card,
.mock--wide {
  transition:
    transform 0.5s var(--ease-fluid),
    border-color 0.4s,
    box-shadow 0.5s var(--ease-fluid);
}

.cap-wall .cap:nth-child(1) { transition-delay: 0.02s; }
.cap-wall .cap:nth-child(2) { transition-delay: 0.04s; }
.cap-wall .cap:nth-child(3) { transition-delay: 0.06s; }
.cap-wall .cap:nth-child(4) { transition-delay: 0.08s; }
.cap-wall .cap:nth-child(5) { transition-delay: 0.1s; }
.cap-wall .cap:nth-child(6) { transition-delay: 0.12s; }

.cap:hover,
.bento__card:hover,
.principle-card:hover,
.format-card:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(0, 255, 163, 0.06);
}

/* Bento depth */
.bento__card {
  backdrop-filter: blur(8px);
}
.bento__card--accent {
  box-shadow: inset 0 1px 0 rgba(0, 255, 163, 0.15), 0 0 60px rgba(0, 255, 163, 0.04);
}

/* Horizontal scroll — smooth momentum feel */
.h-scroll {
  scroll-behavior: smooth;
}
.h-scroll__track {
  transition: transform 0.1s linear;
}
.mock--wide {
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: translateZ(0);
  transition: transform 0.6s var(--ease-fluid), box-shadow 0.6s var(--ease-fluid);
}
.mock--wide:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(0, 255, 163, 0.08);
}

/* Flow diagram pulse */
.flow-node {
  transition: transform 0.4s var(--ease-fluid), box-shadow 0.4s;
  animation: nodePulse 3s var(--ease-soft) infinite;
}
.flow-node:nth-child(2) { animation-delay: 0.3s; }
.flow-node:nth-child(4) { animation-delay: 0.6s; }
.flow-node:nth-child(6) { animation-delay: 0.9s; }
.flow-node:nth-child(8) { animation-delay: 1.2s; }
.flow-node:nth-child(10) { animation-delay: 1.5s; }
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 255, 163, 0); }
  50% { box-shadow: 0 0 24px rgba(0, 255, 163, 0.12); }
}
.flow-line {
  animation: flowDash 2s linear infinite;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
}
@keyframes flowDash {
  to { background-position: 200% 0; }
}

/* Terminal float smoother */
.terminal {
  transition: transform 0.6s var(--ease-fluid);
}
.terminal-stack:hover .terminal--float {
  transform: translateY(-4px);
}
.terminal-stack:hover .terminal--float-2 {
  transform: translateY(16px);
}

/* Tabs smooth crossfade */
.tabs__panel {
  animation: tabFade 0.55s var(--ease-fluid);
}
@keyframes tabFade {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* CTA volumetric */
.cta {
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cta__glow {
  animation: glowPulse 5s var(--ease-soft) infinite alternate;
}

/* Buttons smoother */
.btn {
  transition: transform 0.35s var(--ease-fluid), box-shadow 0.35s var(--ease-fluid), background 0.35s, border-color 0.35s;
}

/* Cursor glow stronger */
.cursor-glow {
  width: 600px;
  height: 600px;
  transition: opacity 0.6s var(--ease-soft);
}
body:hover .cursor-glow { opacity: 0.22; }

/* Parallax layers */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ambient__blob,
  .hero__orb,
  .hero__grid-lines,
  .section-ambient__orb,
  .flow-node,
  .flow-line,
  .cta__glow,
  .hero__viz-glow {
    animation: none !important;
  }
  .reveal { filter: none; }
  .hero__viz { transition: none; }
}

@media (max-width: 768px) {
  .ambient__blob { opacity: 0.2; filter: blur(60px); }
  .hero__orb { opacity: 0.6; }
  .section-ambient__orb { width: 80vw; height: 80vw; }
}

/* Override base reveal for fluid entrance */
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Cap wall stagger entrance */
.cap-wall.is-visible .cap {
  animation: capIn 0.7s var(--ease-fluid) backwards;
}
.cap-wall.is-visible .cap:nth-child(1) { animation-delay: 0.02s; }
.cap-wall.is-visible .cap:nth-child(2) { animation-delay: 0.05s; }
.cap-wall.is-visible .cap:nth-child(3) { animation-delay: 0.08s; }
.cap-wall.is-visible .cap:nth-child(4) { animation-delay: 0.11s; }
.cap-wall.is-visible .cap:nth-child(5) { animation-delay: 0.14s; }
.cap-wall.is-visible .cap:nth-child(6) { animation-delay: 0.17s; }
.cap-wall.is-visible .cap:nth-child(n+7) { animation-delay: 0.2s; }
@keyframes capIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.viz-flow {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--accent-2);
  letter-spacing: 0.04em;
}