.hero-visual {
  perspective: 1200px;
}

.visual-card.spine-card {
  width: min(100%, 500px);
  aspect-ratio: .84;
  background: linear-gradient(180deg, rgba(255,254,250,.92), rgba(255,254,250,.72));
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
  will-change: transform;
  z-index: 2;
}

.visual-card.spine-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.48);
  pointer-events: none;
}

.visual-topline {
  z-index: 5;
}

.status-dot::before {
  animation: pulseDot 2.6s ease-in-out infinite;
}

.spine-aura {
  position: absolute;
  inset: 108px 88px 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(130,180,153,.22) 0%, rgba(130,180,153,.10) 36%, rgba(130,180,153,0) 72%);
  filter: blur(10px);
  animation: auraFloat 7s ease-in-out infinite;
}

.spine-grid {
  position: absolute;
  inset: 84px 76px 126px;
  border-radius: 36px;
  background-image:
    linear-gradient(rgba(23,61,54,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,61,54,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at center, black 48%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle at center, black 48%, transparent 88%);
  opacity: .7;
}

.spine-illustration {
  position: absolute;
  inset: 76px 72px 102px;
  width: calc(100% - 144px);
  height: calc(100% - 178px);
  overflow: visible;
  z-index: 3;
}

.spine-path-core,
.spine-path-glow {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.spine-path-core {
  animation: spineDraw 1.7s cubic-bezier(.2,.7,.2,1) forwards, spineSway 7s ease-in-out infinite 1.7s;
}

.spine-path-glow {
  animation: spineDraw 1.7s cubic-bezier(.2,.7,.2,1) forwards, glowTrail 5.2s ease-in-out infinite 1.7s;
}

.spine-vertebrae {
  transform-origin: 50% 50%;
  animation: spineSway 7s ease-in-out infinite 1.7s;
}

.vertebra {
  fill: rgba(255,255,255,.8);
  stroke: #2d6558;
  stroke-width: 4;
  filter: drop-shadow(0 10px 18px rgba(35,55,47,.08));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: vertebraAppear .6s ease forwards, vertebraFloat 4.5s ease-in-out infinite;
}

.v1 { animation-delay: .25s, 1.9s; }
.v2 { animation-delay: .38s, 2.0s; }
.v3 { animation-delay: .51s, 2.1s; }
.v4 { animation-delay: .64s, 2.2s; }
.v5 { animation-delay: .77s, 2.3s; }
.v6 { animation-delay: .90s, 2.4s; }
.v7 { animation-delay: 1.03s, 2.5s; }
.v8 { animation-delay: 1.16s, 2.6s; }
.v9 { animation-delay: 1.29s, 2.7s; }
.v10 { animation-delay: 1.42s, 2.8s; }

.spine-node {
  fill: #76a78f;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: nodeAppear .5s ease forwards 1.2s, nodePulse 3.2s ease-in-out infinite 2s;
}

.node-mid { animation-delay: 1.45s, 2.6s; }
.node-low { animation-delay: 1.7s, 3.1s; }

.visual-caption {
  z-index: 4;
}

@keyframes spineDraw {
  from { stroke-dashoffset: 100; opacity: .2; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes spineSway {
  0%,100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-5px) rotate(1.2deg); }
}

@keyframes auraFloat {
  0%,100% { transform: scale(1) translateY(0); opacity: .85; }
  50% { transform: scale(1.05) translateY(-8px); opacity: 1; }
}

@keyframes glowTrail {
  0%,100% { opacity: .22; }
  50% { opacity: .4; }
}

@keyframes vertebraAppear {
  from { opacity: 0; transform: translateY(10px) scale(.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vertebraFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes nodeAppear {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes nodePulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(118,167,143,0)); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 12px rgba(118,167,143,.3)); }
}

@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(107,156,131,.16); }
  60% { box-shadow: 0 0 0 8px rgba(107,156,131,0); }
}

@media (max-width: 980px) {
  .visual-card.spine-card {
    max-width: 460px;
  }

  .spine-illustration {
    inset: 82px 64px 104px;
    width: calc(100% - 128px);
    height: calc(100% - 186px);
  }
}

@media (max-width: 760px) {
  .visual-card.spine-card {
    width: 92%;
  }

  .spine-aura {
    inset: 104px 58px 132px;
  }

  .spine-grid {
    inset: 92px 44px 126px;
  }

  .spine-illustration {
    inset: 84px 42px 112px;
    width: calc(100% - 84px);
    height: calc(100% - 196px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card,
  .spine-aura,
  .spine-path-core,
  .spine-path-glow,
  .spine-vertebrae,
  .vertebra,
  .spine-node,
  .status-dot::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}