/* src/css/tier0.css — the CSS half of the Tier 0 controllers. Shipped ONLY at Tier 0 (the pipeline
 * links it, §7f); at Tier 1 webflow.js runs the Interactions and this file does not exist.
 *
 * ⚠️ MECHANISM ONLY. Webflow owns the look: these rules are the motion states Webflow's
 *    Interactions used to apply inline — never resting design. Every value here is copied out of
 *    the export's IX2 data and is checked by `npm run behaviours` against config/behaviours.mjs:
 *    if the Designer retimes an Interaction, the gate fails until this file is updated with it.
 *
 * ⚠️ Every selector keys off a data-sx-* hook the pipeline injects only at Tier 0, never a Webflow
 *    class — so a class rename in the Designer cannot break a controller, and at Tier 1 (no
 *    hooks) nothing here can match even if the file were loaded.
 */

/* ── `a` Container entrance animation — 27 elements on the public pages ────────────────────────
 * IX2: initial translateY 25px + opacity 0; on scroll into view (offset 0%, once) → translateY 0 +
 * opacity 1 over 400ms, easing "" = LINEAR (IX2's applyEasing returns the position unchanged for
 * an empty easing — read in the export's webflow.js, 2026-10-26).
 * Hidden only under `.w-mod-js` (Webflow's own head script adds it), so a visitor without JS sees
 * the content — which Webflow's baked-in inline `opacity:0` never allowed. */
.w-mod-js [data-sx-reveal] {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
  transition: opacity 400ms linear, transform 400ms linear;
}
.w-mod-js [data-sx-reveal].sx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-sx-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── a-5 / a-6 card flip — the 7 .work-card-wrapper on the home page ───────────────────────────
 * IX2: a-5 (first click) rotateY 0 → 180deg over 500ms "ease"; a-6 (second click) → 0 over 500ms
 * "ease". a-5's 500ms first group is its INITIAL STATE (useFirstGroupAsInitialState — IX2 skips it
 * on trigger), so there is no pause before the flip. IX2 easing "ease" = cubic-bezier(.25,.1,.25,1)
 * (its own definition, read in the export's webflow.js).
 * transform-style: preserve-3d is what IX2 set inline alongside the rotation; the site CSS does not
 * set it on the wrapper, and without it both faces render flat. The faces' backface-visibility and
 * the back face's rotateY(180deg) are Webflow's own (site CSS). */
[data-sx-flip] {
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-sx-flip][aria-pressed="true"] {
  transform: rotateY(180deg);
}
[data-sx-flip]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  [data-sx-flip] {
    transition: none;
  }
}

/* ── a-2 / a-3 accordion — 5 Knowledge Base cards (2 pages) + 5 .accordion-light on the home page ─
 * IX2, read from the export:
 *   open  (a-2, first group = initial state): panel height 0 → auto 1200ms outExpo · icon rotate
 *         0 → 180deg 600ms outExpo · stripe-1 opacity → 0 300ms outExpo · stripe-2 bg, icon border
 *         → rgb(52,52,52) and the .light icon bg → rgb(255,108,69), all 300ms outExpo
 *   close (a-3): panel → 0 600ms outExpo · icon → 0 350ms ease · stripe-1 → 1 350ms ease ·
 *         stripe-2 bg + icon border → rgb(111,109,102), .light icon bg → rgb(242,233,220), 300ms outExpo
 * ⚠️ The colours are LITERAL RGB in IX2 — its swatch ids are "@var_…", and IX2 only reads a CSS
 *    variable for ids starting "--". So, faithfully: after a close the stripe is rgb(111,109,102),
 *    LIGHTER than the #0a0c0c it loads with (site CSS). A Webflow slip, reported to the Designer;
 *    reproduced here because parity is the bar until the canvas changes.
 * outExpo is IX2's 1 − 2^(−10t) — sampled into linear() below, with a cubic-bezier fallback.
 * The panel's height is animated by src/js/tier0.js (CSS cannot transition to `auto`); the end
 * states below are what it hands back to. Panel closed only under .w-mod-js: no-JS visitors read
 * every answer. */
:root {
  --sx-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sx-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --sx-out-expo: linear(0, 0.2929, 0.5, 0.6464, 0.75, 0.8232, 0.875, 0.9116, 0.9375, 0.9558, 0.9688, 0.9779, 0.9844, 0.989, 0.9922, 0.9945, 0.9961, 0.9972, 0.998, 0.9986, 1);
  }
}
.w-mod-js [data-sx-acc="panel"] {
  height: 0;
}
[data-sx-accordion][data-sx-open="true"] [data-sx-acc="panel"] {
  height: auto;
}
[data-sx-accordion] [data-sx-acc="trigger"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* close timings (the transition on the state being ENTERED is the one that runs) */
[data-sx-accordion] [data-sx-acc="icon"] {
  transition: transform 350ms var(--sx-ease);
}
[data-sx-accordion] [data-sx-acc="stripe1"] {
  transition: opacity 350ms var(--sx-ease);
}
[data-sx-accordion][data-sx-open] [data-sx-acc="stripe2"] {
  transition: background-color 300ms var(--sx-out-expo);
}
[data-sx-accordion][data-sx-open] [data-sx-acc="box"] {
  transition: border-color 300ms var(--sx-out-expo), background-color 300ms var(--sx-out-expo);
}
[data-sx-accordion][data-sx-open="false"] [data-sx-acc="stripe2"] {
  background-color: rgb(111, 109, 102);
}
[data-sx-accordion][data-sx-open="false"] [data-sx-acc="box"] {
  border-color: rgb(111, 109, 102);
}
[data-sx-accordion][data-sx-open="false"] [data-sx-acc="box"][data-sx-fill] {
  background-color: rgb(242, 233, 220);
}
/* open */
[data-sx-accordion][data-sx-open="true"] [data-sx-acc="icon"] {
  transform: rotate(180deg);
  transition: transform 600ms var(--sx-out-expo);
}
[data-sx-accordion][data-sx-open="true"] [data-sx-acc="stripe1"] {
  opacity: 0;
  transition: opacity 300ms var(--sx-out-expo);
}
[data-sx-accordion][data-sx-open="true"] [data-sx-acc="stripe2"] {
  background-color: rgb(52, 52, 52);
}
[data-sx-accordion][data-sx-open="true"] [data-sx-acc="box"] {
  border-color: rgb(52, 52, 52);
}
[data-sx-accordion][data-sx-open="true"] [data-sx-acc="box"][data-sx-fill] {
  background-color: rgb(255, 108, 69);
}
@media (prefers-reduced-motion: reduce) {
  [data-sx-accordion] [data-sx-acc] {
    transition: none !important;
  }
}