/* ═══════════════════════════════════════════════════
   ELAAMART — Premium Animation System (Apple-inspired)
═══════════════════════════════════════════════════ */

:root {
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.23, 1,    0.32, 1);
  --ease-expo:     cubic-bezier(0.16, 1,    0.3,  1);
  --ease-back:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart:cubic-bezier(0.25, 1,    0.5,  1);
}

/* ──────────────────────────────────────
   Scroll Reveal — data-reveal attribute
────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity  0.75s var(--ease-smooth),
    transform 0.75s var(--ease-smooth);
}
[data-reveal="up"]    { transform: translate3d(0, 48px, 0); }
[data-reveal="down"]  { transform: translate3d(0,-32px, 0); }
[data-reveal="left"]  { transform: translate3d(48px,0, 0); }
[data-reveal="right"] { transform: translate3d(-48px,0,0); }
[data-reveal="scale"] { transform: scale3d(0.88, 0.88, 1); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].revealed {
  opacity: 1;
  transform: translate3d(0,0,0) scale3d(1,1,1);
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }

/* ──────────────────────────────────────
   Stagger grid children
────────────────────────────────────── */
.stagger-grid > * {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity  0.6s var(--ease-smooth),
    transform 0.6s var(--ease-smooth);
}
.stagger-grid.revealed > *:nth-child(1)  { transition-delay:  0ms; }
.stagger-grid.revealed > *:nth-child(2)  { transition-delay: 60ms; }
.stagger-grid.revealed > *:nth-child(3)  { transition-delay:120ms; }
.stagger-grid.revealed > *:nth-child(4)  { transition-delay:180ms; }
.stagger-grid.revealed > *:nth-child(5)  { transition-delay:240ms; }
.stagger-grid.revealed > *:nth-child(6)  { transition-delay:300ms; }
.stagger-grid.revealed > *:nth-child(7)  { transition-delay:360ms; }
.stagger-grid.revealed > *:nth-child(8)  { transition-delay:420ms; }
.stagger-grid.revealed > *:nth-child(9)  { transition-delay:480ms; }
.stagger-grid.revealed > *:nth-child(10) { transition-delay:540ms; }
.stagger-grid.revealed > *:nth-child(11) { transition-delay:600ms; }
.stagger-grid.revealed > *:nth-child(12) { transition-delay:660ms; }
.stagger-grid.revealed > * {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* ──────────────────────────────────────
   Hero text entrance
────────────────────────────────────── */
.hero-animate {
  animation: heroEntrance 1.1s var(--ease-expo) both;
}
.hero-animate-2 {
  animation: heroEntrance 1.1s var(--ease-expo) 0.15s both;
}
.hero-animate-3 {
  animation: heroEntrance 1.1s var(--ease-expo) 0.3s both;
}
@keyframes heroEntrance {
  from { opacity:0; transform: translate3d(0, 40px, 0); }
  to   { opacity:1; transform: translate3d(0, 0,    0); }
}

/* ──────────────────────────────────────
   Glow pulse on hover
────────────────────────────────────── */
.glow-hover {
  transition: box-shadow 0.4s var(--ease-smooth);
}
.glow-hover:hover {
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.4),
    0 8px 32px rgba(124,58,237,0.25),
    0 24px 64px rgba(124,58,237,0.15);
}

/* ──────────────────────────────────────
   Magnetic button effect (JS-powered)
────────────────────────────────────── */
.magnetic { transition: transform 0.3s var(--ease-smooth); }

/* ──────────────────────────────────────
   Shimmer loading skeleton
────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position:-200% 0; }
}

/* ──────────────────────────────────────
   Gradient border animation
────────────────────────────────────── */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #7c3aed, #06b6d4, #ec4899, #7c3aed);
  background-size: 300% 300%;
  animation: gradientSpin 4s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
}
.gradient-border:hover::before { opacity: 1; }
@keyframes gradientSpin {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ──────────────────────────────────────
   Floating badge animation
────────────────────────────────────── */
.float-badge {
  animation: floatBadge 3s ease-in-out infinite;
}
@keyframes floatBadge {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* ──────────────────────────────────────
   Card tilt effect class (JS-powered)
────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease;
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.tilt-card:hover .tilt-shine { opacity: 1; }

/* ──────────────────────────────────────
   Page transition
────────────────────────────────────── */
.page-enter {
  animation: pageEnter 0.5s var(--ease-smooth) both;
}
@keyframes pageEnter {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ──────────────────────────────────────
   Number ticker
────────────────────────────────────── */
.ticker { display: inline-block; }

/* ──────────────────────────────────────
   Animated gradient text
────────────────────────────────────── */
.gradient-text-animate {
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 30%, #67e8f9 60%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 4s linear infinite;
}
@keyframes textShine {
  to { background-position: 200% center; }
}

/* ──────────────────────────────────────
   Ripple effect on buttons
────────────────────────────────────── */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ──────────────────────────────────────
   Animated background noise
────────────────────────────────────── */
.noise-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ──────────────────────────────────────
   Beam / spotlight effect
────────────────────────────────────── */
.spotlight {
  position: relative;
  overflow: hidden;
}
.spotlight::after {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%; left: -25%;
  background: radial-gradient(ellipse at var(--sx,50%) var(--sy,50%),
    rgba(124,58,237,0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  transition: opacity 0.3s;
  opacity: 0;
}
.spotlight:hover::after { opacity: 1; }

/* ──────────────────────────────────────
   Orb pulse
────────────────────────────────────── */
@keyframes orbPulse {
  0%,100% { transform: scale(1)   rotate(0deg);  opacity: 0.35; }
  33%     { transform: scale(1.08) rotate(4deg);  opacity: 0.45; }
  66%     { transform: scale(0.95) rotate(-3deg); opacity: 0.28; }
}
.orb { animation: orbPulse 14s ease-in-out infinite alternate !important; }
.orb-1 { animation-duration: 18s !important; }
.orb-2 { animation-duration: 22s !important; animation-delay: -6s  !important; }
.orb-3 { animation-duration: 16s !important; animation-delay: -10s !important; }
.orb-4 { animation-duration: 24s !important; animation-delay: -4s  !important; }

/* ──────────────────────────────────────
   Toast upgraded
────────────────────────────────────── */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  animation: toastIn 0.45s var(--ease-spring);
}
@keyframes toastIn {
  from { transform: translateY(80px) scale(0.92); opacity:0; }
  to   { transform: translateY(0)    scale(1);    opacity:1; }
}

/* ──────────────────────────────────────
   Smooth underline link
────────────────────────────────────── */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width 0.3s var(--ease-smooth);
}
.link-underline:hover::after { width: 100%; }

/* ──────────────────────────────────────
   Balance display pulse on update
────────────────────────────────────── */
@keyframes balancePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.balance-pop { animation: balancePop 0.5s var(--ease-spring); }

/* ──────────────────────────────────────
   Success checkmark draw
────────────────────────────────────── */
.check-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: drawCheck 0.6s var(--ease-smooth) 0.3s forwards;
}
.check-tick {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: drawCheck 0.4s var(--ease-smooth) 0.8s forwards;
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}