/* ═══════════════════════════════════════════════════════════════
   TRDING.AI · MOTION PACKAGE v1 · 2026-10-06
   8 motion patterns · pure CSS/JS · zero asset load
   Palette ref: --cyan #35C9D6 · --gold #C9A253 · --ink #061422
   ═══════════════════════════════════════════════════════════════ */

/* ─── #1 · TICKER TAPE ─── */
.te-ticker-tape {
  overflow: hidden;
  background: #0F2438;
  border-top: 1px solid rgba(53,201,214,0.4);
  border-bottom: 1px solid rgba(53,201,214,0.4);
  padding: 12px 0;
  position: relative;
  z-index: 10;
}
.te-ticker-tape::before, .te-ticker-tape::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.te-ticker-tape::before { left: 0; background: linear-gradient(to right, #0F2438, transparent); }
.te-ticker-tape::after { right: 0; background: linear-gradient(to left, #0F2438, transparent); }
.te-ticker-track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  animation: te-ticker 32s linear infinite;
  will-change: transform;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
}
.te-ticker-track:hover { animation-play-state: paused; }
.te-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #EDF1F5;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 500;
}
.te-ticker-item .sym { color: #35C9D6; font-size: 17px; }
@keyframes te-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── #2 · SCROLL-FADE REVEAL ─── */
.te-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.te-reveal.te-visible { opacity: 1; transform: translateY(0); }
.te-reveal.te-delay-1 { transition-delay: 0.15s; }
.te-reveal.te-delay-2 { transition-delay: 0.3s; }
.te-reveal.te-delay-3 { transition-delay: 0.45s; }

/* ─── #4 · PULSING HERO NUMBER ─── */
.te-pulse-num {
  display: inline-block;
  position: relative;
  animation: te-pulse 2.4s ease-in-out infinite;
}
.te-pulse-num::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,201,214,0.25) 0%, transparent 70%);
  animation: te-pulse-glow 2.4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes te-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes te-pulse-glow {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ─── #5 · HOVER LIFT + GLOW ─── */
.te-lift {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s, box-shadow 0.4s !important;
  position: relative;
  overflow: hidden;
}
.te-lift:hover {
  transform: translateY(-8px);
  border-color: #35C9D6 !important;
  box-shadow: 0 20px 50px rgba(53,201,214,0.25) !important;
}

/* ─── #6 · ANIMATED GRADIENT BACKGROUND ─── */
.te-animated-gradient {
  position: relative;
  overflow: hidden;
}
.te-animated-gradient::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 30% 50%, rgba(53,201,214,0.12), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(201,162,83,0.08), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(94,227,62,0.06), transparent 50%);
  animation: te-gradient-drift 18s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.te-animated-gradient > * { position: relative; z-index: 1; }
@keyframes te-gradient-drift {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(120deg) scale(1.1); }
  66% { transform: rotate(240deg) scale(0.95); }
}

/* ─── #7 · ROTATING HEADLINE ─── */
.te-rotator {
  display: inline-block;
  position: relative;
  min-height: 1.2em;
  min-width: 180px;
  vertical-align: baseline;
  text-align: left;
}
.te-rotator span {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  white-space: nowrap;
  color: #35C9D6;
  font-style: italic;
}
.te-rotator span.te-active { opacity: 1; transform: translateY(0); }

/* ─── #8 · MOUSE-TRACK SPOTLIGHT ─── */
.te-spotlight {
  position: relative;
  overflow: hidden;
}
.te-spotlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle 400px at var(--te-mx, 50%) var(--te-my, 50%), rgba(53,201,214,0.18), transparent 60%);
  transition: background 0.2s;
  pointer-events: none;
  z-index: 0;
}
.te-spotlight > * { position: relative; z-index: 1; }

/* ─── WORD-POP · staggered word reveal for headlines ─── */
.te-word-pop > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: te-word-pop-in 0.55s cubic-bezier(.2,.7,.2,1) forwards;
}
.te-word-pop > span:nth-child(1) { animation-delay: 0.10s; }
.te-word-pop > span:nth-child(2) { animation-delay: 0.22s; }
.te-word-pop > span:nth-child(3) { animation-delay: 0.34s; }
.te-word-pop > span:nth-child(4) { animation-delay: 0.46s; }
.te-word-pop > span:nth-child(5) { animation-delay: 0.58s; }
.te-word-pop > span:nth-child(6) { animation-delay: 0.70s; }
.te-word-pop > span:nth-child(7) { animation-delay: 0.82s; }
.te-word-pop > span:nth-child(8) { animation-delay: 0.94s; }
@keyframes te-word-pop-in {
  0%   { opacity: 0; transform: translateY(16px); }
  60%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Mobile tap: reduce motion intensity */
@media (prefers-reduced-motion: reduce) {
  .te-ticker-track { animation: none; }
  .te-pulse-num { animation: none; }
  .te-pulse-num::after { animation: none; }
  .te-animated-gradient::before { animation: none; }
  .te-rotator span.te-active { opacity: 1; transform: none; }
  .te-reveal { opacity: 1; transform: none; transition: none; }
  .te-word-pop > span { opacity: 1; transform: none; animation: none; }
}