/* ============================================
   TRIVEXA — Animation System
   Cinematic motion design engine
   ============================================ */

/* ── Scroll Reveal States ── */
[data-reveal] {
  opacity: 0;
  transition: all var(--duration-slow) var(--ease-out);
  will-change: transform, opacity;
}

[data-reveal].revealed { opacity: 1; }

[data-reveal="fade-up"] { transform: translateY(40px); }
[data-reveal="fade-up"].revealed { transform: translateY(0); }

[data-reveal="fade-in"] { transform: none; }

[data-reveal="slide-left"] { transform: translateX(-60px); }
[data-reveal="slide-left"].revealed { transform: translateX(0); }

[data-reveal="slide-right"] { transform: translateX(60px); }
[data-reveal="slide-right"].revealed { transform: translateX(0); }

[data-reveal="scale-in"] { transform: scale(0.92); }
[data-reveal="scale-in"].revealed { transform: scale(1); }

/* Stagger Delays */
[data-delay="1"] { transition-delay: 100ms; }
[data-delay="2"] { transition-delay: 200ms; }
[data-delay="3"] { transition-delay: 300ms; }
[data-delay="4"] { transition-delay: 400ms; }
[data-delay="5"] { transition-delay: 500ms; }
[data-delay="6"] { transition-delay: 600ms; }
[data-delay="7"] { transition-delay: 700ms; }
[data-delay="8"] { transition-delay: 800ms; }

/* ── Keyframe Animations ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes dash {
  to { stroke-dashoffset: 0; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes border-glow {
  0%, 100% { border-color: rgba(212,175,55,0.12); }
  50% { border-color: rgba(212,175,55,0.3); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* ── Chart Animation ── */
.chart-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 2.5s ease-out forwards 0.5s;
}

/* ── Hover Glow ── */
.hover-glow {
  position: relative;
}

.hover-glow::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), transparent, rgba(212,175,55,0.1));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: -1;
}

.hover-glow:hover::before { opacity: 1; }

/* ── Page Transition ── */
.page-transition {
  animation: fade-in-up 0.6s var(--ease-out) both;
}

/* ── Loading State ── */
.loading-screen {
  position: fixed; inset: 0;
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.loading-screen.hidden {
  opacity: 0; 
  visibility: hidden;
  pointer-events: none;
}

.loading-logo {
  font-size: 2.2rem; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--text-primary);
  animation: glow-pulse 1.5s ease-in-out infinite;
}

.loading-logo span { color: var(--gold); }

/* ── Gradient border animation for premium cards ── */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212,175,55,0.3), transparent 40%, transparent 60%, rgba(212,175,55,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.gradient-border:hover::before {
  opacity: 1;
}

/* ── Text shimmer for premium headings ── */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-highlight) 25%,
    var(--gold) 50%,
    var(--gold-highlight) 75%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}