/* ═══════════════════════════════════════════
   ANIMATIONS & REVEAL EFFECTS
═══════════════════════════════════════════ */

/* ── Reveal on scroll ── */
[data-reveal], [data-reveal-right] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal-right] {
  transform: translateX(40px);
}
[data-reveal].visible,
[data-reveal-right].visible {
  opacity: 1;
  transform: none;
}

/* ── Staggered children ── */
[data-reveal]:nth-child(1) { transition-delay: 0.1s; }
[data-reveal]:nth-child(2) { transition-delay: 0.2s; }
[data-reveal]:nth-child(3) { transition-delay: 0.3s; }
[data-reveal]:nth-child(4) { transition-delay: 0.4s; }

/* ── Page Load Hero ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,189,0,0.2); }
  50%       { box-shadow: 0 0 60px rgba(255,189,0,0.5); }
}

.hero-badge    { animation: fadeSlideRight 0.6s ease both; animation-delay: 0.3s; opacity: 0; }
.hero-title    { animation: fadeSlideUp 0.8s ease both; animation-delay: 0.5s; opacity: 0; }
.hero-sub      { animation: fadeSlideUp 0.8s ease both; animation-delay: 0.7s; opacity: 0; }
.hero-ctas     { animation: fadeSlideUp 0.8s ease both; animation-delay: 0.9s; opacity: 0; }
.hero-stats    { animation: fadeSlideUp 0.8s ease both; animation-delay: 1.1s; opacity: 0; }
.hero-visual   { animation: scaleIn 1s ease both; animation-delay: 0.6s; }
.scroll-indicator { animation: fadeSlideUp 0.8s ease both; animation-delay: 1.4s; opacity: 0; }

/* ── Phone screen line animation ── */
.rate-row {
  animation: fadeSlideRight 0.5s ease both;
}
.rate-row:nth-child(1) { animation-delay: 1.2s; opacity: 0; }
.rate-row:nth-child(2) { animation-delay: 1.4s; opacity: 0; }
.rate-row:nth-child(3) { animation-delay: 1.6s; opacity: 0; }
.rate-row:nth-child(4) { animation-delay: 1.8s; opacity: 0; }

/* ── Float cards ── */
.float-card { animation: scaleIn 0.5s ease both; }
.float-card--1 { animation-delay: 1.6s; opacity: 0; }
.float-card--2 { animation-delay: 1.8s; opacity: 0; }

/* ── Number counting animation ── */
.metric-num { transition: all 0.3s; }

/* ── Loading shimmer for rates ── */
.rate-loading {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-4) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  height: 20px;
}

/* ── Card hover glow ── */
.feature-card:hover,
.service-card--dark:hover {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ── Rotating logo on hover ── */
.logo-mark:hover svg {
  animation: spin-slow 0.6s ease;
}

/* ── Navbar slide down ── */
.navbar {
  animation: fadeSlideUp 0.6s ease both;
  animation-direction: reverse;
}
.navbar {
  animation: fadeSlideDown 0.6s ease both;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Active states ── */
.btn-primary:active {
  transform: scale(0.97) !important;
}
.btn-ghost:active {
  transform: scale(0.97);
}
.sim-swap:active {
  transform: scale(0.9) rotate(180deg);
}

/* ── Page transition ── */
.page-entering {
  animation: fadeSlideUp 0.5s ease both;
}

/* ── Security card hover ── */
.security-card-3d:hover .sec-card--front {
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: transform 0.4s ease;
}
.security-card-3d:hover .sec-card--mid {
  transform: rotate(-5deg) translateX(-5px);
  transition: transform 0.4s ease;
}
.security-card-3d:hover .sec-card--back {
  transform: rotate(-8deg) translateX(-10px);
  transition: transform 0.4s ease;
}

/* ── Service grid stagger ── */
.services-grid .service-card:nth-child(1) { transition-delay: 0s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.2s; }

/* ── Focus visible ── */
*:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* ── Smooth section transitions ── */
section { position: relative; }

/* ── Toast slide ── */
@keyframes toastIn {
  from { transform: translateX(-50%) translateY(80px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.toast.show {
  animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Rate price pulse on update ── */
@keyframes priceUpdate {
  0%   { color: var(--yellow); }
  100% { color: var(--text-primary); }
}
.price-updated {
  animation: priceUpdate 1s ease forwards;
}

/* ── Orb animation ── */
.hero-orb--1 {
  animation: orbFloat1 8s ease-in-out infinite;
}
.hero-orb--2 {
  animation: orbFloat2 10s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-40px, -30px) scale(1.08); }
}