/* pp-motion (2026-10-08): depth + staging layer. Additive; transform/opacity only
   (pp-polish rank 16 removed filter:blur from reveals for a reason - keep it that way).
   The landing first-paint stagger lives inline in <head> (#pp-motion-head) so it applies
   from the first frame; everything else is here. */

/* 1. Depth background canvas - under all content, never catches a tap */
#ppMotionBg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;}

/* Pointer parallax on the landing mark and title (desktop, fine pointer only).
   --ppx/--ppy are -0.5..0.5, lerped by pp-motion.js. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  #introText .intro-rise:first-child{transform:translate3d(calc(var(--ppx,0) * 10px),calc(var(--ppy,0) * 10px),0);will-change:transform;}
  #introText .intro-rise.d1{transform:translate3d(calc(var(--ppx,0) * 4px),calc(var(--ppy,0) * 4px),0);}
}

/* 2. Landing -> questionnaire veil + exit */
#ppMotionVeil{position:fixed;inset:0;z-index:9990;background:var(--bg-0);opacity:0;pointer-events:none;transition:opacity .26s cubic-bezier(.16,1,.3,1);}
#ppMotionVeil.on{opacity:1;transition-duration:.12s;transition-timing-function:cubic-bezier(.4,0,.6,1);}
@media (prefers-reduced-motion: no-preference){
  #introText,#introButtons,#introBetaTag,#infographicWrap{transition:opacity .14s ease-out,transform .14s ease-out;}
  body.pp-m-leaving #introText,body.pp-m-leaving #introButtons,body.pp-m-leaving #introBetaTag,body.pp-m-leaving #infographicWrap{opacity:0;transform:translate3d(0,-8px,0);}
}

/* 3. Answer feedback: press on pointer-down, pop + gold ring after the re-render */
@media (prefers-reduced-motion: no-preference){
  .likert button{transition:transform .12s cubic-bezier(.16,1,.3,1),border-color var(--dur-1,140ms) ease,background var(--dur-1,140ms) ease,box-shadow var(--dur-1,140ms) ease;}
  .likert button:active{transform:scale(.93)!important;}
  .likert button.pp-m-just{animation:ppMPop .24s cubic-bezier(.16,1,.3,1) both,ppMRing .46s ease-out both;}
  @keyframes ppMPop{0%{transform:scale(.84);}55%{transform:scale(1.06);}100%{transform:scale(1);}}
  @keyframes ppMRing{0%{box-shadow:0 0 0 0 var(--gold,#e2b45c);}100%{box-shadow:0 0 0 12px rgba(226,180,92,0);}}
  body.light-mode .likert button.pp-m-just{animation-name:ppMPop,ppMRingLight;}
  @keyframes ppMRingLight{0%{box-shadow:0 0 0 0 #8a6a1e;}100%{box-shadow:0 0 0 12px rgba(138,106,30,0);}}
}

/* 4. Thinker modal (and every .modal-overlay): a real entrance and a mirrored exit.
   The base rules toggle display:none, so transitions never ran; keyframes do. */
@media (prefers-reduced-motion: no-preference){
  .modal-overlay.active{animation:ppMFade .2s ease-out both;}
  .modal-overlay.active .modal{animation:ppMModal .32s cubic-bezier(.16,1,.3,1) both;}
  .modal-overlay.active.pp-m-closing{animation:ppMFadeOut .17s ease-out both;}
  .modal-overlay.active.pp-m-closing .modal{animation:ppMModalOut .17s cubic-bezier(.4,0,.7,1) both;}
  @keyframes ppMFade{from{opacity:0;}to{opacity:1;}}
  @keyframes ppMFadeOut{from{opacity:1;}to{opacity:0;}}
  @keyframes ppMModal{from{opacity:0;transform:translate3d(0,16px,0) scale(.965);}to{opacity:1;transform:none;}}
  @keyframes ppMModalOut{from{opacity:1;transform:none;}to{opacity:0;transform:translate3d(0,16px,0) scale(.965);}}
  @media (max-width:768px){
    /* full-screen sheet on phones: rise only, no scale */
    @keyframes ppMModal{from{opacity:0;transform:translate3d(0,22px,0);}to{opacity:1;transform:none;}}
    @keyframes ppMModalOut{from{opacity:1;transform:none;}to{opacity:0;transform:translate3d(0,22px,0);}}
  }
}

/* Reduced motion: nothing above moves; the canvas draws one static frame from JS. */
@media (prefers-reduced-motion: reduce){
  #ppMotionVeil{display:none!important;}
  .likert button.pp-m-just,.modal-overlay.active,.modal-overlay.active .modal{animation:none!important;}
}

/* Length picker (2026-10-08, Eli): number and "Questions" share one font, size and weight;
   only the number carries a faint glow. */
body #ppLenPicker.length-picker .lp-n,
body #ppLenPicker.length-picker .lp-q{
  font-family:var(--ff-display)!important;font-size:1.3rem!important;font-weight:700!important;
  letter-spacing:0.02em!important;line-height:1.2!important;opacity:1!important;
}
body #ppLenPicker.length-picker .lp-n{text-shadow:0 0 7px rgba(226,180,92,.2);}
body.light-mode #ppLenPicker.length-picker .lp-n{text-shadow:0 0 6px rgba(138,102,20,.12);}
@media (max-width:768px){
  body #ppLenPicker.length-picker .lp-n,
  body #ppLenPicker.length-picker .lp-q{font-size:1.1rem!important;}
}