/* Uprooted motion layer: shared by the landing page and the quiz.
   Everything is opt-in through classes motion.js adds, so the page still reads fine without JS,
   and nothing runs for people who ask for reduced motion. */

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

  /* ---- scroll reveal ---- */
  .m-rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
  .m-rv.m-in{opacity:1;transform:none}
  .m-rv.m-left{transform:translateX(-30px)}
  .m-rv.m-right{transform:translateX(30px)}
  .m-rv.m-left.m-in,.m-rv.m-right.m-in{transform:none}

  /* ---- hero entrance ---- */
  @keyframes m-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes m-fade{from{opacity:0}to{opacity:1}}
  .m-hero .pill,.m-hero h1,.m-hero .intro,.m-hero .hero-facts,.m-hero .hero-stage,.m-hero .hero-bottom{animation:m-up 1s cubic-bezier(.2,.7,.2,1) both}
  .m-hero .pill{animation-delay:.05s}
  .m-hero h1{animation-delay:.15s}
  .m-hero .intro{animation-delay:.3s}
  .m-hero .hero-facts{animation-delay:.42s}
  .m-hero .hero-stage{animation-delay:.55s}
  .m-hero .hero-bottom{animation-delay:.75s}

  /* headline accent: the italic phrase settles in a beat later */
  @keyframes m-em{from{opacity:0;letter-spacing:.02em}to{opacity:1;letter-spacing:inherit}}
  .m-hero h1 em{display:inline-block;animation:m-em 1.4s .55s cubic-bezier(.2,.7,.2,1) both}

  /* result preview card floats, hand note sways */
  @keyframes m-float{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-10px)}}
  .result-preview{animation:m-float 6s ease-in-out 1.6s infinite}
  @keyframes m-sway{0%,100%{transform:rotate(10deg)}50%{transform:rotate(6deg) translateY(-4px)}}
  .hand-note{animation:m-sway 5s ease-in-out infinite}

  /* play button breathes */
  @keyframes m-ring{0%{box-shadow:0 0 0 0 #fffdf680,0 8px 30px #0e231c30}100%{box-shadow:0 0 0 22px #fffdf600,0 8px 30px #0e231c30}}
  .video-play{animation:m-ring 2.4s ease-out infinite}

  /* ---- buttons ---- */
  .button{position:relative;overflow:hidden}
  .button span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .button:hover span{transform:translate(3px,-3px) rotate(8deg)}
  .button:after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff40,transparent);transform:skewX(-20deg);pointer-events:none}
  .hero-bottom .button:after,.final-cta .button:after,.results .button:after,.pattern-conversion .button:after{animation:m-shine 4.5s ease-in-out 2s infinite}
  @keyframes m-shine{0%,70%{left:-60%}100%{left:130%}}
  nav .nav-cta{transition:background .25s,color .25s,border-color .25s}
  nav .nav-cta:hover{background:var(--forest);color:#fff;border-color:var(--forest)}

  /* ---- cards lift on hover ---- */
  .quotes figure,.moments article,.steps article,.shift-grid article,.result-list article,.pattern-tabs button,.qz-card,.about-image img{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s}
  .quotes figure:hover,.moments article:hover,.steps article:hover{transform:translateY(-5px);box-shadow:0 18px 38px #1b322318}
  .shift-grid article:hover{transform:translateY(-4px)}
  .pattern-tabs button:hover{transform:translateY(-3px);border-color:var(--sage)}
  .moments article>span{transition:background .3s,color .3s}
  .moments article:hover>span{background:var(--forest);color:#fff}

  /* Guarded -> Grounded arrow nudges */
  @keyframes m-nudge{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 6px),-50%)}}
  .shift-arrow{animation:m-nudge 2.6s ease-in-out infinite}

  /* pattern panel swaps softly when a tab is chosen */
  @keyframes m-swap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .pattern-panel.m-swap>*{animation:m-swap .55s cubic-bezier(.2,.7,.2,1) both}
  .pattern-panel.m-swap>*+*{animation-delay:.08s}

  /* dark bands: slow drifting glow */
  @keyframes m-drift{0%,100%{background-position:0% 0%}50%{background-position:100% 30%}}
  .final-cta,.statement{background-size:160% 160%;animation:m-drift 18s ease-in-out infinite}

  /* image reveal: soft wipe up */
  .about-image.m-rv,.recognition .reflect.m-rv{clip-path:inset(12% 0 0 0 round 8px);transform:none;transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1),opacity 1s}
  .about-image.m-rv.m-in,.recognition .reflect.m-rv.m-in{clip-path:inset(0 0 0 0 round 8px)}

  /* FAQ answer slides open */
  details[open] p{animation:m-up .45s cubic-bezier(.2,.7,.2,1) both}
  summary:after{transition:transform .3s}
  details[open] summary:after{transform:rotate(180deg)}

  /* ---- quiz ---- */
  @keyframes m-slide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  .qz-card.m-q h2,.qz-card.m-q .qz-sub{animation:m-slide .55s cubic-bezier(.2,.7,.2,1) both}
  .qz-card.m-q .qz-sub{animation-delay:.06s}
  .qz-card.m-q .qz-opt{animation:m-slide .5s cubic-bezier(.2,.7,.2,1) both}
  .qz-card.m-q .qz-opt:nth-child(1){animation-delay:.1s}
  .qz-card.m-q .qz-opt:nth-child(2){animation-delay:.16s}
  .qz-card.m-q .qz-opt:nth-child(3){animation-delay:.22s}
  .qz-card.m-q .qz-opt:nth-child(4){animation-delay:.28s}
  .qz-card.m-q .qz-opt:nth-child(5){animation-delay:.34s}
  @keyframes m-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
  .qz-opt.sel span.k{animation:m-pop .35s ease}
  .qz-opt.sel{transform:translateX(6px)}
  .qz-bar i{transition:width .6s cubic-bezier(.2,.7,.2,1)}
}

@media (prefers-reduced-motion: no-preference) and (max-width:650px){
  .result-preview{animation:none}
  @keyframes m-nudge-v{0%,100%{transform:translate(-50%,-50%) rotate(90deg)}50%{transform:translate(-50%,calc(-50% + 6px)) rotate(90deg)}}
  .shift-arrow{animation-name:m-nudge-v}
}