/* ==========================================================================
   Animations — EBM process, porous lattice, bone ingrowth, particles
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rotate360rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes float-y-big {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
@keyframes pulse-ring {
  0%   { transform: scale(.8); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes scan-line {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(220px); opacity: 0; }
}
@keyframes layer-build {
  0%   { opacity: 0; transform: translateY(-12px); }
  20%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes cell-flow {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 30px), var(--ty, 30px)) scale(1); }
}
@keyframes draw-stroke {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--r, 80px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r, 80px)) rotate(-360deg); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@keyframes count-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

/* ---------- Apply animations to SVG classes ---------- */

/* Universal fade-up reveal */
.reveal-svg { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal-svg.in { opacity: 1; transform: none; }

/* Rotating rings */
.ring { transform-origin: center; transform-box: fill-box; }
.ring.spin      { animation: rotate360 30s linear infinite; }
.ring.spin-rev  { animation: rotate360rev 45s linear infinite; }
.ring.spin-fast { animation: rotate360 12s linear infinite; }
.ring.spin-slow { animation: rotate360 60s linear infinite; }

/* Floating elements */
.float      { animation: float-y 4s ease-in-out infinite; }
.float-slow { animation: float-y 6s ease-in-out infinite; }
.float-big  { animation: float-y-big 7s ease-in-out infinite; }

/* Pulsing */
.pulse       { animation: pulse-soft 2.4s ease-in-out infinite; }
.pulse-fast  { animation: pulse-soft 1.4s ease-in-out infinite; }
.pulse-slow  { animation: pulse-soft 3.6s ease-in-out infinite; }
.pulse-ring  { animation: pulse-ring 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.pulse-ring.delay-1 { animation-delay: .8s; }
.pulse-ring.delay-2 { animation-delay: 1.6s; }

/* Layer-by-layer build (EBM) */
.layer-build > * {
  opacity: 0;
  transform-origin: center bottom;
  animation: layer-build .8s var(--ease-out) forwards;
}
.layer-build > *:nth-child(1)  { animation-delay: .1s; }
.layer-build > *:nth-child(2)  { animation-delay: .25s; }
.layer-build > *:nth-child(3)  { animation-delay: .4s; }
.layer-build > *:nth-child(4)  { animation-delay: .55s; }
.layer-build > *:nth-child(5)  { animation-delay: .7s; }
.layer-build > *:nth-child(6)  { animation-delay: .85s; }
.layer-build > *:nth-child(7)  { animation-delay: 1.0s; }
.layer-build > *:nth-child(8)  { animation-delay: 1.15s; }
.layer-build > *:nth-child(9)  { animation-delay: 1.3s; }
.layer-build > *:nth-child(10) { animation-delay: 1.45s; }
.layer-build > *:nth-child(11) { animation-delay: 1.6s; }
.layer-build > *:nth-child(12) { animation-delay: 1.75s; }

/* Layer build infinite loop (for EBM hero) */
@keyframes layer-build-loop {
  0%   { opacity: 0; transform: translateY(-30px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}
.layer-loop { animation: layer-build-loop 6s ease-out infinite; }
.layer-loop.l2 { animation-delay: .5s; }
.layer-loop.l3 { animation-delay: 1.0s; }
.layer-loop.l4 { animation-delay: 1.5s; }
.layer-loop.l5 { animation-delay: 2.0s; }
.layer-loop.l6 { animation-delay: 2.5s; }

/* Scanning line for CMM / quality */
.scan-line {
  animation: scan-line 3s ease-in-out infinite;
  transform-origin: center;
}

/* Cell flow (bone ingrowth) */
.cell-flow {
  animation: cell-flow 4s ease-out infinite;
  transform-origin: center;
}
.cell-flow.delay-1 { animation-delay: .8s; }
.cell-flow.delay-2 { animation-delay: 1.6s; }
.cell-flow.delay-3 { animation-delay: 2.4s; }
.cell-flow.delay-4 { animation-delay: 3.2s; }

/* Draw stroke (paths animate in) */
.draw-stroke {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-stroke 3s ease-out forwards;
}

/* Animated bars (complication comparison) */
.bar-grow {
  transform-origin: left center;
  animation: grow-x 1.4s var(--ease-out) forwards;
  transform: scaleX(0);
}
@keyframes grow-x {
  to { transform: scaleX(1); }
}

/* Shimmer gradient for premium feel */
.shimmer-bg {
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.18) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.4s ease-in-out infinite;
}

/* ---------- Tech in motion section ---------- */
.tech-motion {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (max-width: 900px) { .tech-motion { grid-template-columns: 1fr; } }

.tm-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: all var(--t-med) var(--ease);
}
.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--c-primary-200);
}
.tm-card .tm-vis {
  aspect-ratio: 1.4;
  background: linear-gradient(135deg, var(--c-primary-50), var(--c-accent-100));
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tm-card .tm-vis svg { width: 100%; height: 100%; }
.tm-card h3 { font-size: 1.15rem; margin: 0; }
.tm-card p { color: var(--text-muted); font-size: .92rem; margin: 0; }
.tm-card .tm-tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-accent-700);
  text-transform: uppercase;
}

/* Hero big animation block */
.hero-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(800px 500px at 70% 30%, rgba(0,180,216,.25), transparent 60%),
    radial-gradient(700px 400px at 30% 70%, rgba(19,62,115,.25), transparent 60%),
    linear-gradient(135deg, #061B3A 0%, #0E3057 100%);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}
.hero-anim::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 49%, rgba(255,255,255,.04) 50%, transparent 51%) 0 0 / 100% 28px,
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.04) 50%, transparent 51%) 0 0 / 28px 100%;
  pointer-events: none;
}
.hero-anim svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-anim .glow-orb {
  position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,.4), transparent 70%);
  filter: blur(20px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-soft 4s ease-in-out infinite;
}

/* Glowing line / connector for hero */
.connector {
  stroke-dasharray: 6 6;
  animation: blink 2.2s ease-in-out infinite;
}

/* Patient data floating card */
.data-card {
  position: absolute;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem;
  animation: float-y 4s ease-in-out infinite;
}
.data-card .lbl { color: var(--text-muted); font-size: .72rem; }
.data-card .val { color: var(--c-primary-800); font-weight: 700; }

/* Stat card with animated number */
.stat-anim {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: #fff;
  position: relative; overflow: hidden;
}
.stat-anim::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-accent-500), var(--c-primary-700));
  transform: scaleX(0); transform-origin: left;
  animation: grow-x 1.2s var(--ease-out) forwards;
}
.stat-anim .v { font-size: 1.8rem; font-weight: 800; color: var(--c-primary-800); letter-spacing: -.02em; }
.stat-anim .k { font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Section heading with animated underline */
.section-title-anim {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
}
.section-title-anim::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 60%; height: 3px;
  background: linear-gradient(90deg, var(--c-accent-500), var(--c-primary-700));
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-x 1.2s var(--ease-out) .3s forwards;
}