/* Señor Ade motion kit v2: extra-bouncy, springy, "liquid" feel.
   Uses the individual translate / scale / rotate properties so it layers on top of
   existing transform-based animations and hovers without fighting them.
   Only loaded on non-study pages. Fully off for reduced-motion. */

:root{
  /* Fallback spring (single overshoot) */
  --sa-spring: cubic-bezier(.3, 2.4, .5, 1);
  --sa-soft:   cubic-bezier(.22, 1, .36, 1);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    /* Real damped spring: overshoots, then wobbles back */
    --sa-spring: linear(0, 0.0193, 0.0744, 0.1606, 0.2721, 0.4027, 0.5461, 0.6958, 0.8456, 0.9898, 1.1233, 1.2419, 1.3422, 1.4218, 1.4792, 1.514, 1.5265, 1.5181, 1.4906, 1.4465, 1.3888, 1.3207, 1.2456, 1.1669, 1.0879, 1.0117, 0.9408, 0.8776, 0.8239, 0.781, 0.7497, 0.7304, 0.7228, 0.7264, 0.7401, 0.7626, 0.7924, 0.8279, 0.8672, 0.9085, 0.9502, 0.9905, 1.0282, 1.0618, 1.0906, 1.1136, 1.1306, 1.1413, 1.1459, 1.1445, 1.1377, 1.1262, 1.1108, 1.0923, 1.0717, 1.05, 1.0281, 1.0067, 0.9868, 0.9689, 0.9535, 0.9411, 0.9318, 0.9259, 1);
  }
}

@media (prefers-reduced-motion: no-preference){

  /* ---------- Scroll reveal: big springy pop-in ---------- */
  .sa-reveal{ opacity:0; translate:0 72px; scale:.7; rotate:-4deg; will-change:translate,scale,rotate,opacity; }
  .sa-reveal.sa-in{
    opacity:1; translate:0 0; scale:1; rotate:0deg;
    transition:
      opacity .3s ease var(--sa-d, 0s),
      translate .9s var(--sa-spring) var(--sa-d, 0s),
      scale .9s var(--sa-spring) var(--sa-d, 0s),
      rotate .9s var(--sa-spring) var(--sa-d, 0s);
  }

  /* ---------- Buttons: jelly hover + squish press ---------- */
  .btn, .pill, .igcse-toggle-btn, .oauth-btn, .btn-submit, .back-btn, .course-cta, .tab, .btn-print{
    transition:
      translate .38s var(--sa-spring),
      scale .38s var(--sa-spring),
      rotate .38s var(--sa-spring),
      box-shadow .25s ease,
      background-color .2s ease,
      border-color .2s ease,
      color .2s ease;
  }
  .btn:hover, .pill:hover, .igcse-toggle-btn:hover, .oauth-btn:hover, .btn-submit:hover, .back-btn:hover, .course-cta:hover, .btn-print:hover{ translate:0 -12px; scale:1.17; rotate:-2.5deg; }
  .tab:hover{ translate:0 -8px; scale:1.15; }
  .btn:active, .pill:active, .igcse-toggle-btn:active, .oauth-btn:active, .btn-submit:active, .back-btn:active, .course-cta:active, .tab:active{
    translate:0 4px; scale:1.2 .62; rotate:0deg; transition-duration:.08s;
  }

  /* ---------- Cards: big spring lift ---------- */
  .course-card, .how-card, .review-card, .greet-card, .pk-tile,
  .card, .stat-card, .course-row, .faq-item, .thread-card, .lb-header, .doc-header, .empty-state{
    transition:
      translate .48s var(--sa-spring),
      scale .48s var(--sa-spring),
      rotate .48s var(--sa-spring),
      border-color .2s ease,
      box-shadow .3s ease;
  }
  .course-card:hover, .how-card:hover, .review-card:hover, .stat-card:hover, .thread-card:hover, .faq-item:hover, .course-row:hover{
    translate:0 -24px; scale:1.065; rotate:-1.3deg;
  }
  .course-card:active, .thread-card:active, .stat-card:active{ scale:.9; translate:0 -1px; rotate:0deg; transition-duration:.1s; }

  /* Idle life: icons and stamps gently bounce on their own */
  @keyframes saIdleHop{ 0%,80%,100%{ translate:0 0; scale:1; } 86%{ translate:0 -12px; scale:1.14 .88; } 92%{ translate:0 0; scale:.92 1.1; } 96%{ translate:0 -4px; scale:1.03; } }
  .stat-icon, .course-card .stamp, .how-card .icon, .lb-header .icon, .empty-state .icon{ animation:saIdleHop 4.5s ease-in-out infinite; }
  .how-card:nth-child(2) .icon, .course-card:nth-child(2) .stamp{ animation-delay:.8s; }
  .how-card:nth-child(3) .icon, .course-card:nth-child(3) .stamp{ animation-delay:1.6s; }
  .how-card:nth-child(4) .icon, .course-card:nth-child(4) .stamp{ animation-delay:2.4s; }

  @keyframes saStampWiggle{
    0%{ rotate:0deg; scale:1; }
    30%{ rotate:-26deg; scale:1.34; }
    55%{ rotate:18deg; scale:.9; }
    78%{ rotate:-8deg; scale:1.1; }
    100%{ rotate:0deg; scale:1; }
  }
  .course-card:hover .stamp{ animation:saStampWiggle .8s var(--sa-soft); }
  .stat-card:hover .stat-icon, .lb-header:hover .icon, .empty-state:hover .icon{ animation:saStampWiggle .8s var(--sa-soft); }

  /* ---------- Nav + links: bounce ---------- */
  .nav-links a, .nav-right a, .footer-links a{ display:inline-block; transition:translate .35s var(--sa-spring), scale .35s var(--sa-spring), color .15s; }
  .nav-links a:hover, .nav-right a:hover, .footer-links a:hover{ translate:0 -11px; scale:1.18; }

  /* ---------- Idle bobbing on the main call-to-action (draws the eye, playful) ---------- */
  @keyframes saBob{ 0%,70%,100%{ translate:0 0; scale:1; } 76%{ translate:0 -26px; scale:1.1 .92; } 82%{ translate:0 0; scale:.94 1.08; } 88%{ translate:0 -10px; scale:1.04; } 94%{ translate:0 0; scale:1; } }
  .hero-ctas .btn-primary{ animation:saBob 4s ease-in-out 2s infinite; }
  @keyframes saFloatY{ 0%,100%{ translate:0 0; } 50%{ translate:0 -18px; } }
  .hero-grid > div:last-child, .hero-visual, .hero-mock{ animation:saFloatY 5s ease-in-out infinite; }
  .hero-ctas .btn-primary:hover{ animation:none; }

  /* ---------- Liquid backdrop ---------- */
  @keyframes saBlobMorph{
    0%   { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; rotate:0deg;   scale:1; }
    33%  { border-radius:63% 37% 40% 60% / 55% 62% 38% 45%; rotate:60deg;  scale:1.12; }
    66%  { border-radius:38% 62% 55% 45% / 62% 38% 62% 38%; rotate:140deg; scale:.93; }
    100% { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; rotate:220deg; scale:1; }
  }
  .hero-blob{ animation:saBlobMorph 16s ease-in-out infinite alternate; }

  /* ---------- Jelly pulse on tap/click ---------- */
  @keyframes saJelly{
    0%  { scale:1 1; }
    22% { scale:1.45 .55; }
    42% { scale:.7 1.35; }
    60% { scale:1.22 .84; }
    78% { scale:.96 1.05; }
    100%{ scale:1 1; }
  }
  .sa-jelly{ animation:saJelly .7s var(--sa-soft); }

  /* ---------- Progress bars: stretchy fill with overshoot ---------- */
  .progress-fill, .bar-fill, [class*="progress"] > i{ transition:width .7s var(--sa-spring); }

  /* ---------- Chevrons / toggles spring open ---------- */
  .chev{ transition:transform .55s var(--sa-spring); }

  /* ---------- Calm zones: study / grading areas stay still ---------- */
  :is(.game-panel, .result-box, .writing-row, .card-collapsible, .quiz, .activity, .exercise) :is(.btn, .pill, .back-btn, .btn-submit, .course-cta):is(:hover, :active){
    translate:none; scale:none;
  }

  /* ---------- Soft page entrance ---------- */
  @keyframes saPageIn{ from{ opacity:0; translate:0 22px; scale:.985; } to{ opacity:1; translate:0 0; scale:1; } }
  body{ animation:saPageIn .45s var(--sa-spring); }
  /* Squish out when leaving */
  html.sa-leaving body{ animation:saPageOut .26s cubic-bezier(.5,0,.9,.4) forwards; }
  @keyframes saPageOut{ to{ opacity:0; translate:0 -18px; scale:.97 1.02; } }

  /* Confetti pieces */
  .sa-confetti{ position:fixed; z-index:10000; pointer-events:none; display:block; line-height:1; will-change:transform,opacity; }

  /* Cursor blob (desktop mouse only; JS creates it) */
  .sa-blob{ position:fixed; left:0; top:0; width:28px; height:28px; border-radius:50%; pointer-events:none; z-index:9999;
    background:radial-gradient(circle at 35% 35%, rgba(255,201,60,.75), rgba(255,107,91,.45)); mix-blend-mode:multiply; opacity:0;
    transition:opacity .25s ease, scale .5s var(--sa-spring), background-color .2s; }
  .sa-blob-big{ scale:2.1; }
  .sa-blob-calm{ opacity:.0 !important; }
  [data-theme="dark"] .sa-blob{ mix-blend-mode:screen; }

  /* Click ripples */
  .sa-ripple{ position:fixed; z-index:9998; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
    border:3px solid rgba(255,107,91,.7); animation:saRipple .7s cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes saRipple{ from{ scale:1; opacity:.9; } to{ scale:7; opacity:0; border-width:1px; } }

  /* Earned badges pop in with a spring and shimmer */
  @keyframes saBadgePop{ 0%{ scale:.2; rotate:-25deg; opacity:0; } 60%{ opacity:1; } 100%{ scale:1; rotate:0deg; opacity:1; } }
  .badge.earned .badge-icon{ animation:saBadgePop 1s var(--sa-spring) both, saIdleHop 5s ease-in-out 1.5s infinite; }
  .badge.earned:nth-child(2) .badge-icon{ animation-delay:.08s, 2s; } .badge.earned:nth-child(3) .badge-icon{ animation-delay:.16s, 2.5s; }
  .badge.earned:nth-child(4) .badge-icon{ animation-delay:.24s, 3s; } .badge.earned:nth-child(5) .badge-icon{ animation-delay:.32s, 3.5s; }
  .badge.earned:hover .badge-icon{ animation:saStampWiggle .8s var(--sa-soft); }
  .streak-chip .flame{ display:inline-block; animation:saIdleHop 3.5s ease-in-out infinite; }
  .mascot-buddy:hover{ scale:1.3; rotate:-14deg; transition:scale .5s var(--sa-spring), rotate .5s var(--sa-spring); }
}
@media (prefers-reduced-motion: reduce){
  .sa-reveal{ opacity:1 !important; translate:none !important; scale:none !important; rotate:none !important; }
}

/* ---- Mobile / touch polish ---- */
@media (max-width:640px){
  /* 16px inputs stop iOS Safari from zooming the page when a field is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; }
}
@media (hover:none){
  /* Touch screens have no hover: stop cards/buttons staying "lifted" after a tap (the press squish still works) */
  .btn:hover, .pill:hover, .igcse-toggle-btn:hover, .oauth-btn:hover, .btn-submit:hover, .back-btn:hover, .course-cta:hover, .btn-print:hover, .tab:hover,
  .course-card:hover, .how-card:hover, .review-card:hover, .stat-card:hover, .thread-card:hover, .faq-item:hover, .course-row:hover,
  .nav-links a:hover, .nav-right a:hover, .footer-links a:hover{ translate:none; scale:none; rotate:none; }
}