/* ===========================================================================
   Ability Access — motion layer.  Loaded AFTER global.css.
   - FOUC-safe reveal states, gated on html.js:not(.motion-ready) so:
       • no JS  → nothing is ever hidden (class never added)
       • JS ok  → motion.ts adds .motion-ready, GSAP takes over reveals
       • JS slow/broken → the failsafe animation reveals everything after 3s
   - prefers-reduced-motion fully reveals + disables all motion.
   =========================================================================== */

/* ---- initial reveal states (only while JS present & motion not yet ready) ---- */
html.js:not(.motion-ready) [data-reveal],
html.js:not(.motion-ready) [data-stagger] > *,
html.js:not(.motion-ready) [data-stagger-item] {
  opacity: 0;
  animation: aa-reveal-failsafe .01s linear 3s forwards;
}
html.js:not(.motion-ready) [data-reveal="fade-up"],
html.js:not(.motion-ready) [data-stagger] > *,
html.js:not(.motion-ready) [data-stagger-item] { transform: translateY(var(--reveal-distance)); }
html.js:not(.motion-ready) [data-reveal="fade-down"]  { transform: translateY(calc(-1 * var(--reveal-distance))); }
html.js:not(.motion-ready) [data-reveal="fade-left"]  { transform: translateX(var(--reveal-distance)); }
html.js:not(.motion-ready) [data-reveal="fade-right"] { transform: translateX(calc(-1 * var(--reveal-distance))); }
html.js:not(.motion-ready) [data-reveal="zoom"]       { transform: scale(.94); }
html.js:not(.motion-ready) [data-reveal="blur-up"]    { transform: translateY(var(--reveal-distance)); filter: blur(8px); }
@keyframes aa-reveal-failsafe { to { opacity: 1; transform: none; filter: none; } }

/* ---- reusable keyframes ---- */
@keyframes aa-float       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes aa-pulse-ring  { 0% { transform: scale(.55); opacity: .5; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes aa-shimmer     { to { background-position: 200% 0; } }
@keyframes aa-spin        { to { transform: rotate(360deg); } }
@keyframes aa-header-drop { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes aa-line-in     { from { transform: translateY(110%); } to { transform: none; } }
@keyframes aa-hero-in     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.aa-float { animation: aa-float var(--dur-5) var(--ease-in-out) infinite; }

/* ---- sticky header (state toggled by motion.ts) ---- */
.site-header {
  transition: background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              -webkit-backdrop-filter var(--dur-2) var(--ease-out),
              backdrop-filter var(--dur-2) var(--ease-out);
}
.site-header .container { transition: height var(--dur-2) var(--ease-out); }
.brand-logo { transition: height var(--dur-2) var(--ease-out); }
.site-header.is-stuck {
  position: fixed;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-2);
  border-bottom: 1px solid var(--line);
  animation: aa-header-drop var(--dur-2) var(--ease-out);
}
.site-header.is-stuck .container { height: 68px; }
.site-header.is-stuck .brand-logo { height: 44px; }
.site-header.is-stuck .ndis-badge img { width: 42px; }
.site-header.is-stuck .ndis-badge span { font-size: 12px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: #fff; }
}

/* ===========================================================================
   REDUCED MOTION — reveal everything, disable all motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-stagger] > *,
  html.js [data-stagger-item] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .aa-float, .site-header.is-stuck { animation: none !important; }
  html.js .steps-row[data-draw]::before { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}