/* =====================================================================
   Sunshine Speech Therapy · motion system
   One calm language for the whole site. Loaded after site.css.
   Rules: transform + opacity only, no springs, no overshoot, no rotation,
   no loops; phones are never hidden behind a scroll trigger; everything
   stops for prefers-reduced-motion.
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* calm deceleration */
  --ease-io: cubic-bezier(.65, 0, .35, 1);      /* symmetrical, for lines and fades */
  --t-press: 160ms;
  --t-hover: 260ms;
  --t-reveal: 760ms;
  --t-hero: 950ms;
  --rise: 12px;
  --stagger: 70ms;
}

/* ---------- smooth scroll (Lenis on desktop, see site.js) ---------- */
html.lenis { scroll-behavior: auto; }

/* ---------- top of every page: a quiet, ordered entrance ---------- */
@keyframes m-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes m-settle { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

.page-hero .crumbs, .page-hero .eyebrow, .page-hero h1, .page-hero .lede, .page-hero .btn-row, .page-hero .article-meta,
.hero .eyebrow, .hero h1, .hero .lede, .hero .btn-row, .hero-meta li {
  animation: m-rise var(--t-hero) var(--ease-out) both;
}
.page-hero .eyebrow, .hero .eyebrow { animation-delay: 60ms; }
.page-hero h1, .hero h1 { animation-delay: 130ms; }
.page-hero .lede, .hero .lede { animation-delay: 200ms; }
.page-hero .btn-row, .page-hero .article-meta, .hero .btn-row { animation-delay: 270ms; }
.hero-meta li:nth-child(1) { animation-delay: 330ms; } .hero-meta li:nth-child(2) { animation-delay: 380ms; } .hero-meta li:nth-child(3) { animation-delay: 430ms; }
.page-hero__art img { animation: m-settle 1.1s var(--ease-out) 180ms both; }
.page-hero__art::before { animation: m-fade 1.1s var(--ease-out) 80ms both; }
.hero-photo { animation: m-settle 1.1s var(--ease-out) 100ms both; }
.hero-trust { animation: m-rise var(--t-hero) var(--ease-out) 360ms both; }
.trust__logos li { animation: m-rise 700ms var(--ease-out) both; }
.squiggle::after { animation: squiggle-draw 900ms var(--ease-io) 500ms both; }

/* sun rays (page hero art + call-to-action band): a calm fan-out, no bounce */
.hero-sun .rays path, .page-hero__sun .rays path { animation: m-ray 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
.js .cta-band.is-in .rays path { animation: m-ray 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
.sun-core { animation: m-core 900ms var(--ease-out) both; }
.js .cta-band.is-in .sun-core { animation: m-core 900ms var(--ease-out) 80ms both; }
@keyframes m-ray { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes m-core { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }

/* ---------- sections: rise once on desktop (site.js adds .is-in) ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.reveal, .js .steps.reveal { opacity: 1; transform: none; }
/* polaroids keep their tilt; they only rise */
.js .polaroid.reveal { transform: translateY(var(--rise)) rotate(var(--tilt)); }
.js .polaroid.reveal.is-in { transform: rotate(var(--tilt)); }

/* stagger groups must not flatten their children's own transforms (tilt, hover lift) */
.js .polaroids.stagger > .polaroid { transform: translateY(var(--rise)) rotate(var(--tilt)); }
.js .polaroids.stagger.is-in > .polaroid { transform: rotate(var(--tilt)); }
.js .polaroids.stagger.is-in > .polaroid:hover { transform: translateY(-4px); transition-duration: 520ms; transition-delay: 0s; }
.js .stagger.is-in > .card--link:hover, .js .stagger.is-in > a.card:hover { transform: translateY(-4px); transition-duration: 420ms; transition-delay: 0s; }

/* steps: the dotted line draws, then each step settles in turn */
.js .steps::before { transition: transform 1.1s var(--ease-io) .15s; }
.js .step { transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.js .steps.is-in .step:nth-child(2) { transition-delay: 160ms; } .js .steps.is-in .step:nth-child(3) { transition-delay: 320ms; }
.steps.is-in .step__num { animation: m-settle 700ms var(--ease-out) both; }
.steps.is-in .step:nth-child(2) .step__num { animation-delay: 160ms; } .steps.is-in .step:nth-child(3) .step__num { animation-delay: 320ms; }

/* ---------- touch and hover: small, quick, consistent ---------- */
.btn { transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
.btn:active { transition-duration: var(--t-press); }
.btn .arrow, .text-link .arrow { transition: transform var(--t-hover) var(--ease-out); }

/* text links: the underline draws in from the left */
.text-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 360ms var(--ease-out), color var(--t-hover); }
.text-link:hover { text-decoration: none; background-size: 100% 1.5px; }

/* cards: lift with the brand's offset shadow, art eases in a touch */
.card, .svc-card, .concern { transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), border-color var(--t-hover); }
.card--link:hover .card__icon { transform: translateY(-2px); }
.card__icon { transition: transform 420ms var(--ease-out); }
.polaroid { transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out); }
.brand img { transition: transform 420ms var(--ease-out); }
a.hero-note { transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover); }

/* header settles a shadow in once you scroll */
.site-header { transition: box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out), background-color 400ms var(--ease-out); }

/* services menu: items follow the panel in, 35ms apart */
.mega.is-open { transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
.mega li, .mega__foot { opacity: 0; transform: translateY(5px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.mega.is-open li, .mega.is-open .mega__foot { opacity: 1; transform: none; }
.mega.is-open li:nth-child(1) { transition-delay: 30ms; } .mega.is-open li:nth-child(2) { transition-delay: 60ms; }
.mega.is-open li:nth-child(3) { transition-delay: 90ms; } .mega.is-open li:nth-child(4) { transition-delay: 120ms; }
.mega.is-open li:nth-child(5) { transition-delay: 150ms; } .mega.is-open li:nth-child(6) { transition-delay: 180ms; }
.mega.is-open li:nth-child(7) { transition-delay: 210ms; } .mega.is-open li:nth-child(8) { transition-delay: 240ms; }
.mega.is-open li:nth-child(n+9), .mega.is-open .mega__foot { transition-delay: 270ms; }
.no-js .mega li, .no-js .mega__foot { opacity: 1; transform: none; }

/* phone menu: the list follows the sheet in */
.mobile-menu > nav > ul > li, .mobile-menu > .btn, .mobile-menu .menu-note { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.menu-open .mobile-menu > nav > ul > li, .menu-open .mobile-menu > .btn, .menu-open .mobile-menu .menu-note { opacity: 1; transform: none; }
.menu-open .mobile-menu > nav > ul > li:nth-child(1) { transition-delay: 40ms; } .menu-open .mobile-menu > nav > ul > li:nth-child(2) { transition-delay: 70ms; }
.menu-open .mobile-menu > nav > ul > li:nth-child(3) { transition-delay: 100ms; } .menu-open .mobile-menu > nav > ul > li:nth-child(4) { transition-delay: 130ms; }
.menu-open .mobile-menu > nav > ul > li:nth-child(5) { transition-delay: 160ms; } .menu-open .mobile-menu > nav > ul > li:nth-child(6) { transition-delay: 190ms; }
.menu-open .mobile-menu > nav > ul > li:nth-child(n+7), .menu-open .mobile-menu > .btn, .menu-open .mobile-menu .menu-note { transition-delay: 220ms; }

/* questions and menus: open smoothly where the browser can animate to height:auto */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion details::details-content, .mobile-menu details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 420ms var(--ease-out), content-visibility 420ms allow-discrete;
  }
  .accordion details[open]::details-content, .mobile-menu details[open]::details-content { block-size: auto; }
}
.accordion summary::after, .mobile-menu summary::after { transition: transform 360ms var(--ease-out), background-color var(--t-hover); }

/* booking sheet: rises from slightly below, backdrop fades */
.sheet[open] { animation: m-rise 380ms var(--ease-out); }
.sheet[open]::backdrop { animation: m-fade 380ms var(--ease-out); }

/* images below the fold fade in as they arrive (space is already reserved) */
img.img-wait { opacity: 0; }
img.img-in { opacity: 1; transition: opacity 600ms var(--ease-out); }

/* ---------- phones: scroll-linked settle, can never hide content ---------- */
/* Content stays visible (site.css forces it); this only adds a gentle 14px settle
   tied to scroll position, where the browser supports scroll-driven animations. */
@supports (animation-timeline: view()) {
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .section-head, .js .reveal, .js .stagger > *, .js .step, .accordion details, .cta-band .wrap > * {
      animation: m-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes m-scroll { from { translate: 0 14px; } to { translate: 0 0; } }

/* ---------- phone booking pill (same shape as the Bespoke site): small, centred, slides up ---------- */
@media (max-width: 760px) {
  .mobile-bar {
    left: 50%; right: auto; width: max-content; max-width: calc(100% - 24px);
    bottom: max(14px, env(safe-area-inset-bottom)); padding: 5px; gap: 4px; justify-content: center;
    border-radius: 999px; background: var(--teal-ink); box-shadow: 0 16px 36px -12px rgba(0, 60, 75, .5);
    transform: none; translate: -50% 140%; opacity: 0;
    transition: translate 500ms var(--ease-out), opacity 300ms var(--ease-out);
  }
  .mobile-bar.is-visible { transform: none; translate: -50% 0; opacity: 1; }
  .mobile-bar__text { display: grid; place-items: center; height: 44px; padding: 0 12px 0 16px; white-space: nowrap;
    font-size: .86rem; font-weight: 600; letter-spacing: .01em; line-height: 1; color: #fff; }
  .mobile-bar .btn { --btn-bg: var(--orange); --btn-fg: var(--ink); min-height: 44px; height: 44px; padding: 0 22px; border: 0; box-shadow: none;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .mobile-bar .btn:hover, .mobile-bar .btn:active { transform: none; box-shadow: none; }
  body.has-mobile-bar .site-footer { padding-bottom: 96px; }
}
@media (max-width: 340px) { .mobile-bar__text { font-size: .8rem; padding: 0 8px 0 12px; } }

/* ---------- reduced motion: no movement anywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  .mega li, .mega__foot, .mobile-menu > nav > ul > li, .mobile-menu > .btn, .mobile-menu .menu-note { opacity: 1 !important; transform: none !important; }
  img.img-wait { opacity: 1 !important; }
  .mobile-bar { transition: opacity 200ms; }
  .text-link { transition: none; }
}