/* ==========================================================================
   PRISMA · motion layer
   Micro-interactions and the glass header. Loaded after prisma.css.
   Rules from DESIGN.md §9: transitions 180–200ms, reveals ≤14px and ≤900ms,
   once, and everything off under prefers-reduced-motion.
   Vocabulary borrowed from motion-primitives / Watermelon UI (in-view,
   text reveal, magnetic, spotlight), implemented without React.
   ========================================================================== */

:root{
  --m-fast:180ms;
  --m-base:220ms;
  --m-reveal:720ms;
  --m-ease:cubic-bezier(.22,.61,.36,1);
  --m-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1–2. Header pill ------------------------------------------------
   The header is the dark pill (prisma.css). Hover/active states are tonal
   pills, not underlines. Only the transitions live here. */
.prisma-nav__list a, .prisma-service-menu summary, .prisma-nav__burger{transition:background var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease)}

.prisma-theme-toggle{transition:border-color var(--m-fast) var(--m-ease), background var(--m-fast) var(--m-ease)}
.prisma-theme-toggle:hover{border-color:rgba(255,255,255,.6)}
.prisma-theme-toggle span[aria-hidden]{display:inline-block; transition:transform 420ms var(--m-ease-out)}
.prisma-theme-toggle[aria-pressed="true"] span[aria-hidden]{transform:rotate(180deg)}

/* ---------- 3. Links, buttons, arrows ------------------------------------ */
.text-link .prisma-icon,
.prisma-btn .prisma-icon,
.service-row>.prisma-icon,
.related-grid .prisma-icon{transition:transform var(--m-fast) var(--m-ease)}
.text-link:hover .prisma-icon,
.prisma-btn:hover .prisma-icon{transform:translate(2px,-2px)}
.related-grid a:hover .prisma-icon{transform:translateX(4px)}
.text-link{text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.22em; text-decoration-thickness:1px; transition:text-decoration-color var(--m-base) var(--m-ease)}
.text-link:hover{text-decoration-color:currentColor}
.prisma-btn{transition:background var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease)}
.prisma-btn:hover{box-shadow:0 8px 20px rgba(16,19,34,.12)}
.prisma-btn:active{transform:translateY(0); box-shadow:none}
.prisma-btn[data-magnetic]{will-change:transform}

/* ---------- 4. Cards: lift + spotlight ----------------------------------- */
.route, .service-deliverables article, .price-panel, .note-panel{position:relative; overflow:hidden}
.route{transition:background var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease)}
.route:hover{transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,19,34,.05), 0 12px 28px rgba(16,19,34,.07)}
:root[data-theme="dark"] .route:hover{box-shadow:0 12px 28px rgba(0,0,0,.35)}
[data-spotlight]::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(60,86,121,.09), transparent 62%);
  transition:opacity var(--m-base) var(--m-ease);
}
[data-spotlight]:hover::before{opacity:1}
:root[data-theme="dark"] [data-spotlight]::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(163,195,229,.12), transparent 62%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) [data-spotlight]::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(163,195,229,.12), transparent 62%)}
  :root:not([data-theme]) .route:hover{box-shadow:0 12px 28px rgba(0,0,0,.35)}
}
.service-row{transition:padding var(--m-base) var(--m-ease), margin var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease)}

/* ---------- 5. FAQ open/close ------------------------------------------- */
.prisma-faq summary{transition:color var(--m-fast) var(--m-ease)}
.prisma-faq summary:hover{color:var(--accent)}
.prisma-faq summary:after{transition:transform 320ms var(--m-ease-out)}
.prisma-faq details[open] summary:after{transform:rotate(180deg)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .prisma-faq details::details-content{
    height:0; overflow:clip;
    transition:height 320ms var(--m-ease-out), content-visibility 320ms allow-discrete;
  }
  .prisma-faq details[open]::details-content{height:auto}
}

/* ---------- 6. In-view reveal ------------------------------------------- */
/* A one-shot animation, not a transition, so it never slows the hover
   transforms that follow. Hidden state only exists when JS is running. */
@keyframes prisma-reveal{from{opacity:0; transform:translateY(14px)}}
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal].is-in{animation:prisma-reveal var(--m-reveal) var(--m-ease-out) both; animation-delay:calc(var(--i,0) * 70ms)}
/* Hero copy arrives on load, staggered, before anything else. */
.js .hero-copy>[data-reveal].is-in{animation-delay:calc(120ms + var(--i,0) * 90ms)}

/* ---------- 7. Hero canvas ---------------------------------------------- */
/* One canvas behind the whole hero: the living gradient spans the section and
   mutes from left to right; the 3D A is placed over the right column by
   measuring .hero-brand-visual. The CSS extrusion stays as the no-WebGL
   fallback and is hidden once the canvas is live. */
.hero-brand-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0}
.hero .prisma-wrap{position:relative; z-index:1}
.hero.has-webgl .hero-brand-object{display:none}
.hero.has-webgl .hero-brand-shadow{opacity:.5}
.hero.has-webgl{background:none}

/* ---------- 7b. Illustrations --------------------------------------------
   Desktop only (they are display:none under 800px). Three layers:
   entrance through the reveal system, a slow idle float on the <img> so the
   wrapper's own rotation is untouched, and a pointer parallax on the wrapper
   via the `translate` property, which composes with its rotate transform. */
@keyframes prisma-reveal-art{from{opacity:0; transform:translateY(18px) scale(.96)}}
@keyframes prisma-float-a{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-9px) rotate(1.2deg)}}
@keyframes prisma-float-b{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(-1deg)}}
.js .process-art[data-reveal].is-in, .js .services-toolkit-art[data-reveal].is-in{animation-name:prisma-reveal-art; animation-duration:900ms}
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  .process-art-object img, .services-toolkit-art img{animation:prisma-float-a 7s ease-in-out infinite; will-change:transform}
  .process-art-file-text img{animation-name:prisma-float-b; animation-duration:8.5s; animation-delay:-2.2s}
  .process-art-tick img{animation-duration:6.5s; animation-delay:-4s}
  .process-art-key img{animation-name:prisma-float-b; animation-duration:7.5s; animation-delay:-1.4s}
  .process-art-chat-bubble img{animation-delay:-3s}
  .services-toolkit-art img{animation-duration:9s; animation-delay:-5s}
  .process-art-object{translate:calc(var(--px,0) * var(--depth,6px)) calc(var(--py,0) * var(--depth,6px)); transition:translate 700ms cubic-bezier(.16,1,.3,1)}
  .process-art-chat-bubble{--depth:10px} .process-art-file-text{--depth:6px} .process-art-tick{--depth:14px} .process-art-key{--depth:12px}
  .trust-art .process-art-file-text{--depth:7px}
  .services-toolkit-art img{translate:calc(var(--px,0) * 8px) calc(var(--py,0) * 8px); transition:translate 700ms cubic-bezier(.16,1,.3,1)}
}

/* ---------- 8. Reduced motion: everything static, everything visible ------ */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important; animation:none !important}
  .prisma-btn[data-magnetic]{transform:none !important}
  [data-spotlight]::before{display:none}
  .route:hover{transform:none}
}

/* ---------- 9. Mobile tap targets (WCAG 2.5.8: 44px minimum) -------------- */
@media (max-width:800px){
  .footer-links a{display:flex; align-items:center; min-height:44px; padding:0}
  .footer-bottom a{display:inline-flex; align-items:center; min-height:44px}
  .text-link{min-height:44px; align-items:center}
  .prisma-faq details{padding:12px 0}
  .prisma-faq summary{min-height:44px; align-items:center; padding-block:6px}
  .service-back{min-height:44px; align-items:center}
  .workflow-jumps a{display:inline-flex; align-items:center; min-height:44px; padding-bottom:0}
  .prisma-service-menu__panel li a{min-height:44px; align-items:center}
  .related-grid a{min-height:52px; align-items:center}
  .contact-details a{min-height:44px; align-items:center; margin:4px 0}
  .prisma-nav__list a{min-height:44px; display:flex; align-items:center}
}

/* ---------- 10. Print and non-scrolling contexts: never hide content ------ */
@media print{
  [data-reveal]{opacity:1 !important; animation:none !important; transform:none !important}
  .hero-brand-canvas{display:none !important}
  .hero.has-webgl .hero-brand-object{display:block}
}

/* ---------- 11. Mobile weight: decorative illustrations are desktop-only ---
   They are aria-hidden and loading="lazy"; display:none keeps them out of the
   viewport, so browsers never request them. The WebGL hero is gated in
   prisma-3d.js and never downloads on phones either. */
@media (max-width:800px){
  .process-art, .services-toolkit-art{display:none}
  .process-heading-layout{grid-template-columns:1fr}
}
/* Phones: the hero is copy and gradient only, so the route cards reach the fold. */
@media (max-width:540px){
  .hero-brand-visual{display:none}
  .hero .eyebrow{font-size:.8rem}
  .home .wp-block-post-content>.hero{padding-bottom:calc(var(--header-h) + 24px)}
}