/* ─── HERO CONTAINER ─── */
.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ─── AMBIENT BACKGROUND LAYERS ─── */
.hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Perspective grid on the "floor" */
.hero-grid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: perspective(600px) rotateX(60deg);
  transform-origin: center bottom;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 60%;
  background-image:
    linear-gradient(to right, rgba(0,197,102,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,197,102,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent 80%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent 80%);
  animation: grid-drift 40s linear infinite;
  opacity: 0.6;
}
@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 40px 40px; }
}

/* Light streaks behind the orb */
.hero-light-streak {
  position: absolute;
  left: 25%;
  top: 50%;
  width: 600px;
  height: 2px;
  transform-origin: left center;
  border-radius: 2px;
  filter: blur(1px);
}
.streak-1 {
  background: linear-gradient(90deg, rgba(0,197,102,0.6), transparent);
  transform: translate(-50%, -50%) rotate(-15deg);
  animation: streak-pulse 4s ease-in-out infinite;
}
.streak-2 {
  background: linear-gradient(90deg, rgba(229,67,96,0.5), transparent);
  transform: translate(-50%, -50%) rotate(25deg);
  animation: streak-pulse 5s ease-in-out infinite 0.8s;
}
.streak-3 {
  background: linear-gradient(90deg, rgba(74,158,255,0.4), transparent);
  transform: translate(-50%, -50%) rotate(-50deg);
  width: 400px;
  animation: streak-pulse 6s ease-in-out infinite 1.5s;
}
@keyframes streak-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.8; }
}

/* Particle container */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-drift linear infinite;
  will-change: transform, opacity;
}
.hero-particle.p-green {
  background: #00C566;
  box-shadow: 0 0 6px rgba(0,197,102,0.8);
}
.hero-particle.p-red {
  background: #E54360;
  box-shadow: 0 0 6px rgba(229,67,96,0.8);
}
.hero-particle.p-white {
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 4px rgba(255,255,255,0.5);
  width: 2px;
  height: 2px;
}
@keyframes particle-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: var(--end-transform); opacity: 0; }
}

/* ─── CHROME COLUMN CONTEXT ─── */
.home-hero-chrome {
  position: relative;
  z-index: 2;
}
.chrome-visual {
  position: relative;
  z-index: 2;
}

/* ─── FLOATING DATA CARDS ─── */
.hero-data-card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(15,20,28,0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  min-width: 110px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  will-change: transform;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms var(--ease);
}
.hero-data-card:hover {
  border-color: rgba(0,197,102,0.3);
}

.hero-card-symbol,
.hero-card-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.hero-card-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hero-card-change {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.hero-card-change.pos { color: var(--green); }
.hero-card-change.neg { color: var(--red-bright); }

.hero-card-1 { top: 8%;    left: -10%;  animation: orbit-1 32s ease-in-out infinite; }
.hero-card-2 { top: 20%;   right: -8%;  animation: orbit-2 36s ease-in-out infinite; }
.hero-card-3 { bottom: 18%; left: -6%;  animation: orbit-3 40s ease-in-out infinite; }
.hero-card-4 { bottom: 8%;  right: -12%; animation: orbit-4 34s ease-in-out infinite; min-width: 140px; }

/* Orbit pauses while user hovers the scene; inline JS transform takes over */
.home-hero.is-hovered .hero-data-card { animation-play-state: paused; }

@keyframes orbit-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(20px, -12px) rotate(0.5deg); }
  50%      { transform: translate(36px, 4px) rotate(0deg); }
  75%      { transform: translate(14px, 18px) rotate(-0.5deg); }
}
@keyframes orbit-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-18px, 14px) rotate(-0.5deg); }
  50%      { transform: translate(-30px, -6px) rotate(0deg); }
  75%      { transform: translate(-10px, -20px) rotate(0.5deg); }
}
@keyframes orbit-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(24px, -16px) rotate(0.5deg); }
  50%      { transform: translate(8px, -28px) rotate(0deg); }
  75%      { transform: translate(-14px, -8px) rotate(-0.5deg); }
}
@keyframes orbit-4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-22px, -14px) rotate(-0.5deg); }
  50%      { transform: translate(-6px, -30px) rotate(0deg); }
  75%      { transform: translate(16px, -10px) rotate(0.5deg); }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .hero-data-card { min-width: 95px; padding: 8px 12px; font-size: 10px; }
  .hero-card-price { font-size: 12px; }
  .hero-card-1 { left: -5%; }
  .hero-card-2 { right: -3%; }
  .hero-card-3 { left: -2%; }
  .hero-card-4 { right: -5%; }
}

@media (max-width: 900px) {
  .hero-data-card { display: none; }
  .hero-light-streak { width: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-data-card,
  .hero-light-streak,
  .hero-grid,
  .hero-particle { animation: none !important; }
}