/* =============================================
   True North Spa — Animations
   ============================================= */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.82); }
}
@keyframes scrollLine {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1) translateY(20px); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes gridPan {
  0%   { background-position: 0 0; }
  100% { background-position: 64px 64px; }
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* === SCROLL REVEAL === */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
              transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal-up    { transform: translateY(44px); }
.reveal-left  { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-up.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1; transform: none;
}

/* Staggered delays */
[data-delay="0"]   { transition-delay: 0ms !important; }
[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }
[data-delay="500"] { transition-delay: 500ms !important; }
[data-delay="600"] { transition-delay: 600ms !important; }
[data-delay="700"] { transition-delay: 700ms !important; }

/* === HERO ENTRY === */
.hero-badge    { animation: fadeUp 0.8s ease both 0.3s; }
.hero-title    { animation: fadeUp 0.8s ease both 0.5s; }
.hero-subtitle { animation: fadeUp 0.8s ease both 0.68s; }
.hero-actions  { animation: fadeUp 0.8s ease both 0.84s; }
.hero-trust    { animation: fadeUp 0.8s ease both 1.0s; }
.hero-banner-bg img { animation: bannerZoom 1.2s ease both 0s; }

@keyframes bannerZoom {
  from { transform: scale(1.06); opacity: 0.7; }
  to   { transform: scale(1);    opacity: 1; }
}

/* === STAT SHIMMER === */
.stat-number.animating {
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(232,172,69,0.9) 40%, rgba(255,255,255,0.9) 80%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 1.5s ease-in-out;
}

/* === WHATSAPP RING === */
.whatsapp-float::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.6);
  animation: pulseRing 2.5s ease-out infinite;
}

/* === HAMBURGER === */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === SCROLL INDICATOR HIDE === */
.scroll-indicator.hidden { opacity: 0; transition: opacity 0.4s ease; }

/* === BUTTON RIPPLE === */
.btn-primary, .btn-course, .btn-submit {
  position: relative; overflow: hidden;
}
.btn-primary::after, .btn-course::after, .btn-submit::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.14);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s ease;
}
.btn-primary:hover::after, .btn-course:hover::after, .btn-submit:hover::after {
  transform: scaleX(1); transform-origin: left;
}