/* ============================================================
   THE DRIV — MOTION LAYER
   Sits on top of style.css and changes only how the page
   ARRIVES. Every animation settles on the design's exact
   resting state, so once motion finishes the page is
   pixel-identical to the approved static design.

   Elements are opted in by anim.js, never by the markup, so
   with JavaScript off nothing is hidden and the page renders
   exactly as designed.
   ============================================================ */

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

  /* ---- 1. reveal: fade + rise, with a letter-spacing morph on display type ---- */
  [data-rv]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),
               transform .9s cubic-bezier(.22,.61,.36,1),
               letter-spacing .9s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d,0ms);
    will-change:opacity,transform;
  }
  [data-rv].in{opacity:1;transform:none;will-change:auto}

  /* display type also tightens as it lands */
  h1[data-rv],h2[data-rv],.h2[data-rv],.pt[data-rv],
  .ccard h3[data-rv],.coach h3[data-rv],.approach h3[data-rv],.teaser h3[data-rv]{
    letter-spacing:.045em;
  }
  .hero h1[data-rv].in,.phero h1[data-rv].in{letter-spacing:normal}
  .h2[data-rv].in{letter-spacing:-.005em}          /* style.css value */
  h2[data-rv].in,.pt[data-rv].in,.ccard h3[data-rv].in,
  .coach h3[data-rv].in,.approach h3[data-rv].in,.teaser h3[data-rv].in{letter-spacing:normal}

  /* ---- 2. imagery morphs out of a slight over-scale ---- */
  .ccard,.coach,.gallery,.teaser{overflow:hidden}   /* no visible change at rest */
  [data-rv-img]{overflow:hidden}
  [data-rv-img] > img{
    transform:scale(1.07);
    transition:transform 1.5s cubic-bezier(.22,.61,.36,1),opacity .9s ease;
    transition-delay:var(--d,0ms);
  }
  [data-rv-img].in > img{transform:none}

  /* hero / page-hero photograph settles on load */
  .hero-bg img,.phero > img{
    transform:scale(1.075);
    transition:transform 2.6s cubic-bezier(.24,.7,.3,1);
  }
  .hero-bg.in img,.phero.in > img{transform:none}

  /* ---- 3. the brand slash draws itself ---- */
  [data-rv-sl]{transform:rotate(24deg) scaleY(0);transform-origin:center;
    transition:transform .7s cubic-bezier(.3,.8,.35,1);transition-delay:var(--d,0ms)}
  [data-rv-sl].in{transform:rotate(24deg) scaleY(1)}
  .method .bigsl{transform:rotate(24deg) scaleY(0);transform-origin:center;
    transition:transform 1.5s cubic-bezier(.3,.8,.35,1)}
  .method .bigsl.in{transform:rotate(24deg) scaleY(1)}
  .pillars .num.in::after,.steps .n.in::after{animation:drawSl .7s cubic-bezier(.3,.8,.35,1) backwards}
  @keyframes drawSl{from{transform:rotate(24deg) scaleY(0)}to{transform:rotate(24deg) scaleY(1)}}

  /* ---- 4. interactive state changes morph instead of snapping ---- */
  .day,.ptab,.pk,.pk button,.row button,.pay button,.btn,.teaser img,
  .ccard img,.coach img,.gallery img{
    transition:background-color .35s ease,color .35s ease,border-color .35s ease,
               outline-color .35s ease,transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
  }
  .ccard:hover img,.coach:hover img,.gallery img:hover{transform:scale(1.035)}
  .pk:hover{transform:translateY(-3px)}
  .row{transition:background-color .35s ease}

  /* ---- 5. time-under-tension counter: a one-shot 1-2-3-4, then back to rest ---- */
  .tempo.in div{animation:count 2.6s cubic-bezier(.4,0,.5,1) backwards}
  .tempo.in div:nth-child(1){animation-delay:.05s}
  .tempo.in div:nth-child(2){animation-delay:.65s}
  .tempo.in div:nth-child(3){animation-delay:1.25s}
  .tempo.in div:nth-child(4){animation-delay:1.85s}
  @keyframes count{
    0%{transform:scale(.94);color:var(--taupe)}
    18%{transform:scale(1);color:var(--onyx)}
    55%{transform:scale(1);color:var(--onyx)}
    100%{transform:scale(1);color:var(--core)}   /* style.css resting colour */
  }

  /* ---- 6. map pin drops in once ---- */
  .pin.in{animation:drop .9s cubic-bezier(.3,1.25,.5,1) backwards}
  @keyframes drop{from{opacity:0;transform:translate(-50%,-150%)}
                  to{opacity:1;transform:translate(-50%,-100%)}}

  /* ---- 7. accordion answers ease open ---- */
  .faq details[open] > p{animation:ansIn .45s ease backwards}
  @keyframes ansIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}