/* ================================================
   HabitApex — Apple-Quality Animations v2
   ================================================ */

/* ── Base Keyframes ───────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Apple hero — phone rises from below viewport */
@keyframes heroPhoneRise {
  from { opacity: 0; transform: translateY(60px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Floating device — gentle bob */
@keyframes deviceFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Apple-style loading shimmer on cards */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Glow pulse */
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.05); }
}

/* Badge dot live indicator */
@keyframes liveDot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.6; }
}

/* Scroll down indicator */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0);    opacity: 0.8; }
  50%       { transform: translateY(6px); opacity: 0.3; }
}

/* Horizontal marquee for rank strip */
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Spark burst for interactive demo */
@keyframes sparkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--vx, 20px), var(--vy, -20px)) scale(0.2);
  }
}

.sim-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #60A5FA, #30D158);
  border-radius: 50%;
  pointer-events: none;
  animation: sparkFly 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  z-index: 100;
  box-shadow: 0 0 8px #60A5FA;
}

/* ── GSAP Initial States ──────────────────────── */
[data-gsap="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

[data-gsap="fade-in"] {
  opacity: 0;
  will-change: opacity;
}

[data-gsap="scale-up"] {
  opacity: 0;
  transform: scale(0.88);
  will-change: opacity, transform;
}

[data-gsap="slide-right"] {
  opacity: 0;
  transform: translateX(-50px);
  will-change: opacity, transform;
}

/* Scrub word opacity — Apple statement section */
.scrub-word {
  display: inline-block;
  opacity: 0.12;
  will-change: opacity;
  transition: none;
}

/* ── Apple-Specific UI Animations ────────────── */

/* Bento card hover lift */
.bento-card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast);
  will-change: transform;
}
.bento-card:hover {
  transform: scale(1.015) translateY(-4px);
  box-shadow: var(--shadow-card-dark);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Pill button hover */
.btn-apple {
  transition: background var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast);
}
.btn-apple:hover  { transform: scale(1.02); }
.btn-apple:active { transform: scale(0.97); }

/* Nav link underline */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Rank badge hover scale */
.rank-card {
  transition: transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-fast),
              background var(--dur-fast);
}
.rank-card:hover { 
  transform: translateY(-8px) scale(1.04);
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

/* Privacy badge hover */
.privacy-badge {
  transition: background var(--dur-base), border-color var(--dur-base),
              transform var(--dur-base) var(--ease-out);
}
.privacy-badge:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
}

/* Live dot animate */
.live-dot { animation: liveDot 2s ease infinite; }

/* Hero device float */
.device-float { animation: deviceFloat 6s ease-in-out infinite; }

/* Scroll indicator bounce */
.scroll-indicator { animation: scrollBounce 2s ease infinite; }