/* Homepage motion: the hero entrance, one-time scroll reveals and hover polish.
   index.html only, loaded last. Everything is opacity and the individual
   `translate` property: `translate` composes with an element's existing
   `transform`, so the phones keep their exact angles and offsets, and nothing
   here changes layout, so there is no shift.

   Nothing waits on JavaScript to be visible:
   - the hero entrance is pure CSS and always ends fully shown;
   - scroll reveals hide content only under html.js-reveal, which a small
     inline script adds after its observer is running. No script, an old
     browser or reduced motion: no class, so everything simply shows. */

/* ── hero entrance, desktop ───────────────────────────────────────────────
   Copy rises first, then the side phones, then the front phone settles last.
   Replaces styles.css's older hero fade (40px, 0.8s, up to 0.6s late) on
   desktop only; phones keep the hero they had until the mobile redesign. */
@keyframes hp-rise{
  from{opacity:0;translate:0 var(--rise,14px)}
  to{opacity:1;translate:0 0}
}
/* The phones float up as one group: fading the group as a whole means the
   front phone can never look see-through over the two behind it, so the fade
   can be as slow and soft as the copy's. The front phone adds a small lift of
   its own (movement only, no fade) and settles into the foreground last. */
@keyframes hp-lift{
  from{translate:0 var(--lift,14px)}
  to{translate:0 0}
}
@media (min-width:981px){
  body.hp .hero-eyebrow,body.hp .hero .hero-title,body.hp .hero .lead,body.hp .hero-buttons,
  body.hp .hero-note,body.hp .hero-benefits{
    animation:hp-rise .55s cubic-bezier(.22,.72,.26,1) both}
  body.hp .hero-eyebrow{--rise:10px;animation-delay:0ms}
  body.hp .hero .hero-title{--rise:18px;animation-delay:90ms}
  body.hp .hero .lead{--rise:16px;animation-delay:180ms}
  body.hp .hero-buttons{--rise:14px;animation-delay:260ms}
  body.hp .hero-note{--rise:12px;animation-delay:300ms}
  body.hp .hero-benefits{--rise:12px;animation-delay:340ms}
  body.hp .hero-stack{--rise:36px;animation:hp-rise .95s cubic-bezier(.16,1,.3,1) 160ms both}
  body.hp .hero-stack .hs-centre{--lift:16px;animation:hp-lift 1s cubic-bezier(.16,1,.3,1) 260ms both}
}

/* ── one-time scroll reveals ──────────────────────────────────────────────
   The homepage's existing .animate-on-scroll blocks (How It Works heading,
   the feature showcase rows, pricing plans and the closing panel), with a
   gentler rise. styles.css hid them with opacity:0 whatever happened, so a
   failed script left them blank; here they are visible unless the reveal
   script is confirmed running. */
body.hp .animate-on-scroll{opacity:1}
body.hp .animate-on-scroll.animated{animation:none}
html.js-reveal body.hp .animate-on-scroll{
  transition:opacity .5s ease-out,translate .55s cubic-bezier(.22,.72,.26,1)}
html.js-reveal body.hp .animate-on-scroll:not(.animated){opacity:0;translate:0 16px}

/* How It Works: the four columns arrive a beat apart. */
html.js-reveal body.hp .hiw-step:nth-child(2){transition-delay:70ms}
html.js-reveal body.hp .hiw-step:nth-child(3){transition-delay:140ms}
html.js-reveal body.hp .hiw-step:nth-child(4){transition-delay:210ms}
html.js-reveal body.hp .hiw-cta{transition-delay:280ms}

/* ── hover polish ─────────────────────────────────────────────────────── */
body.hp .btn-primary{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
body.hp .btn-primary:hover{background-color:#F3F0FF}
body.hp .btn-grad{background-size:160% 100%;background-position:0 0;
  transition:transform .2s ease,background-position .25s ease,box-shadow .2s ease}
body.hp .btn-grad:hover{background-position:100% 0;box-shadow:0 8px 22px rgba(102,126,234,.4)}
body.hp .btn-quiet,body.hp .btn-ghost{transition:transform .2s ease,border-color .2s ease,color .2s ease,background-color .2s ease}
body.hp .btn-quiet:hover,body.hp .btn-ghost:hover{background-color:#FAF9FF}
body.hp .plan{transition:border-color .25s ease,box-shadow .25s ease}
body.hp .plan:hover{border-color:#CFC6F0;box-shadow:0 18px 44px -20px rgba(76,60,160,.28)}
body.hp .plan-pro:hover{box-shadow:0 26px 64px rgba(102,126,234,.22)}
body.hp section a:not([class]){transition:color .2s ease}

/* ── reduced motion: static ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body.hp .hero-eyebrow,body.hp .hero .hero-title,body.hp .hero .lead,body.hp .hero-buttons,
  body.hp .hero-note,body.hp .hero-benefits,body.hp .hero-stack,body.hp .hero-stack .db-iphone{animation:none}
  body.hp .animate-on-scroll{transition:none;translate:none;opacity:1}
}