/* ============================================================
   MAIN.CSS
   Single source of truth for design tokens, CSS reset,
   global utilities, and ALL shared keyframe animations.
   Every section-specific stylesheet imports this file
   indirectly via index.html — never duplicate these rules.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   DESIGN TOKENS  (CSS Custom Properties)
   ──────────────────────────────────────────────────────────── */
:root {

  /* ── Teal palette ── */
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e56;
  --teal-900: #134e4a;

  /* ── Gold / amber palette ── */
  --gold-50:  #fffbeb;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;
  --gold-800: #92400e;
  --gold-900: #78350f;

  /* ── Slate (neutral) palette ── */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ── Base ── */
  --white:          #ffffff;
  --off-white:      #fafafa;
  --whatsapp-green: #25D366;
  --whatsapp-dark:  #128C7E;

  /* ── Semantic colours ── */
  --brand-primary:   var(--teal-600);
  --brand-secondary: var(--gold-500);
  --text-primary:    var(--slate-800);
  --text-secondary:  var(--slate-600);
  --text-muted:      var(--slate-400);
  --surface-white:   var(--white);
  --surface-light:   var(--slate-50);
  --border-light:    var(--slate-200);

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-head:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ── Spacing scale (4-px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-32: 128px;

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Alias set used in section stylesheets */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  28px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-teal: 0 4px 20px rgba(13,148,136,0.25);
  --shadow-gold: 0 4px 20px rgba(245,158,11,0.30);

  /* ── Easing curves ── */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Duration tokens ── */
  --dur-fast:  150ms;
  --dur-std:   250ms;
  --dur-slow:  400ms;
  --dur-xslow: 600ms;

  /* ── Layout ── */
  --container-max: 1200px;
}


/* ────────────────────────────────────────────────────────────
   CSS RESET
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

input, select, textarea { font: inherit; }


/* ────────────────────────────────────────────────────────────
   GLOBAL UTILITIES
   ──────────────────────────────────────────────────────────── */

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip navigation link for keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 10000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--teal-700);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: 0;
}

/* Keyboard focus ring — consistent across all interactive elements */
:focus-visible {
  outline: 2.5px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}


/* ────────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
   Wrapped in prefers-reduced-motion: no-preference so they
   never run when the user has opted into reduced motion.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

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

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

  /* Animated underline / decorative line */
  @keyframes growLine {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Green availability pulse dot (hero) */
  @keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.70); }
  }

  /* Teachers section — availability dot */
  @keyframes ttPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.72); }
  }

  /* Teachers section — label dot */
  @keyframes ttPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
  }

  /* Testimonials CTA band dot */
  @keyframes rvPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.72); }
  }

  /* Pricing CTA band dot */
  @keyframes prPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.70); }
  }

  /* Free trial availability badge dot */
  @keyframes ftPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.72); }
  }

  /* Contact section — world map expanding ring on city dots */
  @keyframes ctMapRing {
    0%   { r: 4;  opacity: 0.80; }
    100% { r: 14; opacity: 0; }
  }

  /* Contact section — badge pulse dot */
  @keyframes ctBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.72); }
  }

  /* Footer section — nav link hover pulse */
  @keyframes foPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.72); }
  }
}


/* ────────────────────────────────────────────────────────────
   SCROLL-ANIMATION BASE SYSTEM
   All section-specific animate classes share this pattern.
   JS adds .is-visible via IntersectionObserver.
   Transition delays are set per-element via CSS custom props:
     style="--wu-delay:90ms"  (etc. for each section prefix)
   ──────────────────────────────────────────────────────────── */

/* Fade-up (default for most elements) */
.wu-animate,
.cs-animate,
.tt-animate,
.tr-animate,
.st-animate,
.pr-animate,
.ft-animate,
.fq-animate,
.ct-animate,
.fo-animate {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}

/* Slide from left */
.ft-animate--left,
.ct-animate--left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}

/* Slide from right */
.ft-animate--right,
.ct-animate--right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}

/* Scale up */
.st-animate--scale,
.fq-animate--scale,
.ct-animate--scale {
  opacity: 0;
  transform: scale(0.92) translateY(16px);
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}

/* Deeper raise for pricing cards */
.pr-animate--card {
  transform: translateY(36px);
}

/* Visible state — transition delays consumed via custom props */
.wu-animate.is-visible { opacity: 1; transform: none; transition-delay: var(--wu-delay, 0ms); }
.cs-animate.is-visible { opacity: 1; transform: none; transition-delay: var(--cs-delay, 0ms); }
.tt-animate.is-visible { opacity: 1; transform: none; transition-delay: var(--tt-delay, 0ms); }
.tr-animate.is-visible { opacity: 1; transform: none; transition-delay: var(--tr-delay, 0ms); }
.st-animate.is-visible { opacity: 1; transform: none; transition-delay: var(--st-delay, 0ms); }
.pr-animate.is-visible,
.pr-animate--card.is-visible { opacity: 1; transform: none; transition-delay: var(--pr-delay, 0ms); }
.ft-animate.is-visible,
.ft-animate--left.is-visible,
.ft-animate--right.is-visible { opacity: 1; transform: none; transition-delay: var(--ft-delay, 0ms); }
.fq-animate.is-visible,
.fq-animate--scale.is-visible { opacity: 1; transform: none; transition-delay: var(--fq-delay, 0ms); }
.ct-animate.is-visible,
.ct-animate--left.is-visible,
.ct-animate--right.is-visible,
.ct-animate--scale.is-visible { opacity: 1; transform: none; transition-delay: var(--ct-delay, 0ms); }
.fo-animate.is-visible { opacity: 1; transform: none; transition-delay: var(--fo-delay, 0ms); }

/* Global reduced-motion override — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .wu-animate, .cs-animate, .tt-animate, .tr-animate,
  .st-animate, .pr-animate, .pr-animate--card,
  .ft-animate, .ft-animate--left, .ft-animate--right,
  .fq-animate, .fq-animate--scale,
  .ct-animate, .ct-animate--left, .ct-animate--right, .ct-animate--scale,
  .fo-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}