/* ── SCROLL REVEAL BASE ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* Stagger delays */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }
.reveal-d6 { transition-delay: 0.6s; }

/* ── VIDEO MODAL ── */
#video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
#video-modal.active { display: flex; animation: fadeIn 0.3s ease; }
.modal-box {
  position: relative;
  width: 90%;
  max-width: 880px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.modal-box video { width: 100%; display: block; }
#modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
#modal-close:hover { background: rgba(200,168,75,0.8); }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── HAMBURGER ANIMATION ── */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ENTRANCE ── */
.hero-content h1    { animation: slideUp 0.9s ease 0.2s both; }
.hero-content p     { animation: slideUp 0.9s ease 0.4s both; }
.hero-btns          { animation: slideUp 0.9s ease 0.6s both; }
@keyframes slideUp  { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

/* ── HERO 3D SCENE ── */
@keyframes heroSpinZ {
  to { transform: rotate(360deg); }
}
@keyframes heroCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
  50%      { transform: translate(-50%, -50%) scale(1.07); opacity: 0.92; }
}
@keyframes heroChipFloat {
  0%, 100% { transform: translate3d(0, 0, 0)         rotateX(0deg); }
  50%      { transform: translate3d(0, -13px, 30px)  rotateX(5deg); }
}
@keyframes heroDotBlink {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes heroFloorFlow {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 0 0; }
}
@keyframes heroScanSweep {
  0%   { transform: translateY(-120%); opacity: 0; }
  12%  { opacity: 0.55; }
  88%  { opacity: 0.2; }
  100% { transform: translateY(340%);  opacity: 0; }
}

/* ── PULSE RING (play button) ── */
.play-circle { position: relative; }
.play-circle::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  animation: ring 2s ease-out infinite;
}
@keyframes ring { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.5)} }

/* ── STAT NUMBER HIGHLIGHT ── */
.g-num, .big, .market-card .big {
  background: linear-gradient(135deg, var(--color-accent), #e8c870);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Override for hover states that need white */
.glance-cell:hover .g-num {
  background: none;
  -webkit-text-fill-color: var(--color-white);
}