/* ── 3D Animations ─────────────────────────────────────────────── */

/* ── Perspective container for 3D cards ── */
.card-3d-wrap {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s cubic-bezier(.23,1,.32,1);
}

/* ── Floating particle canvas (hero bg) ── */
#particles-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── 3D rotating ball in hero ── */
.ball-3d-wrap {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

#ball-canvas-3d {
  width: 320px;
  height: 320px;
  opacity: 0.85;
  filter: drop-shadow(0 20px 60px rgba(45,106,39,0.35));
}

/* ── 3D flip cards (KPI chips on hover) ── */
.kpi-chip {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1), border-color 0.3s, box-shadow 0.3s;
}
.kpi-chip:hover {
  transform: rotateY(8deg) rotateX(-4deg) translateY(-4px) scale(1.03);
  box-shadow: 0 20px 40px rgba(45,106,39,0.18), -6px 6px 20px rgba(45,106,39,0.1);
}

/* ── 3D card tilt — managed entirely by GSAP, no CSS overrides ── */

/* ── Floating animation for select elements ── */
@keyframes float3d {
  0%, 100% {
    transform: translateY(0px) rotateX(0deg);
  }
  33% {
    transform: translateY(-8px) rotateX(2deg);
  }
  66% {
    transform: translateY(-4px) rotateX(-1deg);
  }
}

.hero-kpis .kpi-chip:nth-child(1) { animation: float3d 6s ease-in-out infinite; animation-delay: 0s; }
.hero-kpis .kpi-chip:nth-child(2) { animation: float3d 6s ease-in-out infinite; animation-delay: 1.5s; }
.hero-kpis .kpi-chip:nth-child(3) { animation: float3d 6s ease-in-out infinite; animation-delay: 3s; }

/* ── 3D section titles ── */
.section-title-3d {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.section-title-3d:hover {
  transform: perspective(500px) rotateX(-5deg) translateZ(10px);
}

/* ── 3D pitch canvas container ── */
.pitch-wrap {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.23,1,.32,1), box-shadow 0.6s ease;
}
.pitch-wrap:hover {
  transform: perspective(1200px) rotateX(3deg) rotateY(-1deg) translateZ(8px);
  box-shadow: 0 30px 60px rgba(45,106,39,0.15), 0 10px 20px rgba(0,0,0,0.08);
}

/* ── Timeline items 3D ── */
.tl-item {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.tl-item:hover {
  transform: perspective(600px) rotateY(3deg) translateZ(5px);
}

/* ── 3D nav brand ── */
.nav-brand {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.nav-brand:hover {
  transform: perspective(400px) rotateX(-8deg) translateZ(4px);
}

/* ── Score counter 3D flip ── */
@keyframes flip3dIn {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.card-big {
  display: inline-block;
  animation: flip3dIn 0.6s cubic-bezier(.23,1,.32,1) both;
  transform-origin: center top;
}

/* ── 3D badge on scroll reveal ── */
.badge-status {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.badge-status:hover {
  transform: perspective(300px) rotateX(-10deg) translateZ(5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ── Orbiting dots decoration ── */
.orbit-wrap {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 400px;
  height: 400px;
  pointer-events: none;
}

/* ── Model card 3D depth layers ── */
.grid-3 .card,
.grid-4 .card {
  transform-style: preserve-3d;
}

/* ── Predictor card 3D ── */
.predictor-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.23,1,.32,1), box-shadow 0.5s ease;
}
.predictor-card:hover {
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) translateZ(10px);
  box-shadow: 0 30px 60px rgba(184,137,42,0.2), 12px 12px 30px rgba(0,0,0,0.08);
}

/* ── Three.js WebGL canvas ── */
#threejs-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.65;
  width: 100% !important;
  height: 100% !important;
}

/* ── Glowing border animation ── */
@keyframes glowPulse3d {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(45,106,39,0), 0 4px 24px rgba(45,106,39,0.08);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(45,106,39,0.15), 0 4px 24px rgba(45,106,39,0.12);
  }
}

/* ── 3D rotate on scroll (section label) ── */
.section-label {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.section-label:hover {
  transform: perspective(300px) rotateX(-12deg) translateZ(6px);
}

/* ── Data particles canvas ── */
#data-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── Depth shadows on cards (stacked 3d effect) ── */
.card::after {
  content: '';
  position: absolute;
  inset: 6px -6px -6px 6px;
  border-radius: var(--radius-lg);
  background: rgba(45,106,39,0.04);
  z-index: -1;
  transition: inset 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.card:hover::after {
  opacity: 1;
  inset: 10px -10px -10px 10px;
}

/* Ensure cards can stack visually */
.card { position: relative; overflow: visible; }

/* ── Section 3D entrance ── */
@keyframes slideIn3d {
  from {
    transform: perspective(1000px) rotateX(15deg) translateY(60px);
    opacity: 0;
  }
  to {
    transform: perspective(1000px) rotateX(0deg) translateY(0px);
    opacity: 1;
  }
}

.rev.animate-3d {
  animation: slideIn3d 0.8s cubic-bezier(.23,1,.32,1) both;
}

/* ── Holographic shimmer on gold cards ── */
@keyframes holographicShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.card.gold::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(184,137,42,0.08) 40%,
    rgba(212,168,78,0.12) 50%,
    rgba(184,137,42,0.08) 60%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: holographicShimmer 3s linear infinite;
  pointer-events: none;
  z-index: 1;
}