/* Edinburgh Gardening Services · effects.css
   PROVISIONAL. The motion set is a proposal awaiting Harris's approval (see md/README.md).
   Everything here is progressive: the page is complete with this file removed.
   Transform and opacity only. Reduced motion gets no movement at all.

   Hero load sequence
   - FX/SPLIT (Considered, LOAD): the heading reveals line by line from behind a mask.
   - The intro, buttons and proof bar follow with a short fade and rise. */

@media (prefers-reduced-motion:no-preference){
  .hero-title .hl{overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
  .hero-title .hl > span{display:inline-block;transform:translateY(105%);animation:fx-split-in 900ms var(--ease-out-expo) forwards}
  .hero-title .hl:nth-child(2) > span{animation-delay:90ms}
  .hero-body .lead,.hero-body .actions,.hero-bar{opacity:0;transform:translateY(16px);animation:fx-rise-in 800ms var(--ease-out-expo) forwards}
  .hero-body .lead{animation-delay:280ms}
  .hero-body .actions{animation-delay:380ms}
  .hero-bar{animation-delay:480ms}
}
@keyframes fx-split-in{to{transform:none}}
@keyframes fx-rise-in{to{opacity:1;transform:none}}

/* FX/RISE on the plan, step and review cards, FX/DRAW on the plan dividers (Quiet, SCROLL).
   The hidden state only exists once rise.js has added .fx-rise, so the page
   is complete without JavaScript. */
@media (prefers-reduced-motion:no-preference){
  .fx-rise [data-rise]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out-expo),transform 700ms var(--ease-out-expo);transition-delay:var(--rise-delay, 0ms)}
  .fx-rise [data-rise].is-in{opacity:1;transform:none}
  .fx-rise .plan .plan-price::after{transform:scaleX(0);transition:transform 900ms var(--ease-out-expo);transition-delay:calc(var(--rise-delay, 0ms) + 250ms)}
  .fx-rise .plan.is-in .plan-price::after{transform:scaleX(1)}
}

/* FX/EXPAND on the FAQ (Quiet, CLICK). Native <details>, no JavaScript.
   block-size is animated, the kit's documented exception for this effect: a panel
   cannot open to its own content height with transform. Engines without
   ::details-content get the native instant open, which is the floor, not a fault. */
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    :root{interpolate-size:allow-keywords}
    .faq-item::details-content{block-size:0;opacity:0;overflow:hidden;transition:block-size 300ms cubic-bezier(.4,0,.2,1),opacity 300ms cubic-bezier(.4,0,.2,1),content-visibility 300ms allow-discrete}
    .faq-item[open]::details-content{block-size:auto;opacity:1}
  }
}

/* The hero's motion carried through every section (Considered, SCROLL).
   As a section comes into view its heading reveals word by word from behind a
   mask, like the hero, then the eyebrow, description and buttons fade and rise.
   reveal.js adds .fx-reveal and wraps the words; without it nothing is hidden. */
@media (prefers-reduced-motion:no-preference){
  .fx-reveal .rv-h .rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.12em;margin-bottom:-0.12em}
  .fx-reveal .rv-h .rw > span{display:inline-block;transform:translateY(105%);transition:transform 900ms var(--ease-out-expo);transition-delay:calc(80ms + var(--i, 0) * 45ms)}
  .fx-reveal .is-revealed .rv-h .rw > span{transform:none}
  .fx-reveal .rv-fade{opacity:0;transform:translateY(16px);transition:opacity 800ms var(--ease-out-expo),transform 800ms var(--ease-out-expo);transition-delay:var(--d, 0ms)}
  .fx-reveal .is-revealed .rv-fade{opacity:1;transform:none}
}