/* ============================================================
   v11 · gamified motion layer  (loaded last → wins)
   Playful spring on hovers, tactile press, shine on CTAs,
   reward pop on stat pills. transform/opacity only. a11y-safe.
   ============================================================ */

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

  /* --- bouncy timing so every existing lift feels playful --- */
  .btn, .go, .card, .dcard, .pillstat, .metapill, .dstat, .chip,
  .flipbtn, .quiz__play-btn, .quiz__start, .typebtn{
    transition-timing-function: cubic-bezier(.34, 1.4, .64, 1) !important;
  }

  /* --- tactile press: snap down fast, no bounce on the way in --- */
  .btn:active, .go:active, .card:active, .pillstat:active, .metapill:active,
  .flipbtn:active, .quiz__play-btn:active, .quiz__start:active, .typebtn:active{
    transform: scale(.94) !important;
    transition-duration: .12s !important;
    transition-timing-function: cubic-bezier(.22, 1, .32, 1) !important;
  }

  /* --- shine sweep across the primary CTAs (CTAs are pseudo-free) --- */
  .btn-coral, .quiz__play-btn{ position: relative; overflow: hidden; }
  .btn-coral::after, .quiz__play-btn::after{
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
    transform: translateX(-135%);
    transition: transform .7s cubic-bezier(.22, 1, .32, 1);
  }

  /* --- reward pop: a little overshoot-wobble on gamified stat pills --- */
  @keyframes v11-pop{
    0%{ transform: scale(1) rotate(0); }
    35%{ transform: scale(1.13) rotate(-3deg); }
    70%{ transform: scale(.98) rotate(1.4deg); }
    100%{ transform: scale(1) rotate(0); }
  }

  @media (hover: hover) and (pointer: fine){
    .btn-coral:hover::after, .quiz__play-btn:hover::after{ transform: translateX(135%); }
    .metapill:hover, .pillstat:hover, .dstat:hover{
      animation: v11-pop .5s cubic-bezier(.34, 1.4, .64, 1);
    }
  }
}

  /* --- ambient "breathing" so the page feels alive at rest ---
     box-shadow only → never fights the hover/press transforms --- */
  @keyframes v11-cta-breathe{
    0%,100%{ box-shadow:0 10px 24px -10px rgba(221, 87, 28,.5); }
    50%{ box-shadow:0 16px 42px -8px rgba(221, 87, 28,.8); }
  }
  .btn-coral{ animation:v11-cta-breathe 3s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce){
  .btn-coral::after, .quiz__play-btn::after{ display: none; }
  .btn-coral{ animation:none !important; }
}