/* MOT-1 + NAV-1 + VT-1 · round 2 (2026-10-05, Micki: medium; B1–B7 as recommended) — the ONE motion layer for the main site.
   LIVE since 2026-10-05 as uploads/sid/sid-motion.css, enqueued by main-site-mu/sid-motion.php on public pages
   (never /dash/*, /kiosk/, /action/*). See docs/main-site/MOT1-NAV1-VT1-PROTOTYPE.md.
   Rules: transform/opacity only · nothing hidden unless JS armed it below the fold · everything time-based sits inside
   (prefers-reduced-motion: no-preference) · no colour, size or layout change (the only static change is the sticky
   header sitting 12 px from the top instead of 30 px, plus its hairline). */

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --sid-ease-out: cubic-bezier(.2, 0, 0, 1);      /* enter / settle (= the toast curve, DESIGN-SYSTEM §3.10) */
  --sid-ease-in-out: cubic-bezier(.4, 0, .2, 1);  /* move between two states */
  --sid-ease-in: cubic-bezier(.4, 0, 1, 1);       /* leave */
  --sid-dur-1: 120ms;   /* press */
  --sid-dur-2: 200ms;   /* hover, header state (= --sid-t-standard) */
  --sid-dur-3: 300ms;   /* reveal, accordion, header slide */
  --sid-dur-4: 520ms;   /* the duo-heading wipe (signature, once) */
  --sid-dur-vt: 220ms;  /* page transition */
  --sid-mo-rise: 12px;  /* reveal travel */
  --sid-mo-stagger: 50ms;
  --sid-mo-lift: -3px;  /* card hover (SPEC §3.x canon -2..-5) */
  --sid-mo-press: .97;
  --sid-mo-vt-rise: 0px;
}

/* ── NAV-1 · scroll-aware header (static part: applies with reduced motion too — a state, not a movement) ── */
/* Blocksy pins the middle row as [data-sticky*=yes] after ~180 px. Condensed = closer to the top + hairline + softer depth. */
.ct-header [data-sticky*="yes"] { --header-sticky-offset: 12px; }
body[data-header] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
  --theme-box-shadow: 0 0 0 1px rgba(15, 26, 23, .06), 0 8px 24px rgba(15, 26, 23, .10);
}

/* GUIDE-1 · reading progress (a position indicator, not a time animation → shown with reduced motion too) */
.sid-progress { position: absolute; left: 36px; right: 36px; bottom: 0; height: 3px; border-radius: 3px; overflow: hidden; pointer-events: none; }
.sid-progress > i { display: block; height: 100%; background: #55a630; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

@media print { .sid-rv { opacity: 1 !important; transform: none !important; } .sid-progress { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* NAV-1 motion: Blocksy's sticky fade gets a short drop-in; mobile hide-on-scroll-down (JS sets html.sid-hdr-hide). */
  .ct-header [data-sticky*="fade"][data-sticky*="yes-start"] { opacity: 0; transform: translateY(-10px); }
  .ct-header [data-sticky*="fade"][data-sticky*="yes-end"] { transition: opacity var(--sid-dur-2) var(--sid-ease-out), transform var(--sid-dur-3) var(--sid-ease-out); }
  .ct-header [data-sticky*="yes"] [data-row*="middle"] { transition: transform var(--sid-dur-3) var(--sid-ease-out), box-shadow var(--sid-dur-2) var(--sid-ease-out); }
  html.sid-hdr-hide .ct-header [data-sticky*="yes"] [data-row*="middle"] { transform: translateY(calc(-100% - 16px)); transition-timing-function: var(--sid-ease-in); }
  html.sid-hdr-hide .ct-header [data-sticky*="yes"] [data-row*="middle"]:focus-within { transform: none; }

  /* MOT-1 · reveal once (JS arms ONLY elements below the fold; un-armed content is never touched) */
  html.sid-mo .sid-rv { opacity: .001; transform: translate3d(0, var(--sid-mo-rise), 0); }
  html.sid-mo .sid-rv.sid-in {
    opacity: 1; transform: none;
    transition: opacity var(--sid-dur-3) var(--sid-ease-out) var(--sid-d, 0ms), transform var(--sid-dur-3) var(--sid-ease-out) var(--sid-d, 0ms);
  }
  /* Elementor's 1.25 s fadeIn entrance is NEUTRALISED here on desktop/tablet only (html.sid-mo = >= 768 px): content is shown at
     once and only below-the-fold content gets the reveal above. Phones (< 768 px) keep Elementor's own fadeIn — B2 means "no
     reveal of OURS on mobile"; changing phone behaviour is a design decision for Micki. */
  html.sid-mo .elementor-invisible { visibility: visible; }
  html.sid-mo .elementor-element.animated { animation-name: none; }

  /* TEXT-1 · the two-colour heading: the grey half wipes in once, left → right (colour only; text never changes) */
  html.sid-mo .sid-duo {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, currentColor 0 46%, var(--sid-duo-ink, #213631) 54% 100%);
    background-size: 220% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
  }
  html.sid-mo .sid-duo.sid-in { background-position: 0 0; transition: background-position var(--sid-dur-4) var(--sid-ease-in-out) 140ms; }

  /* Buttons: press feedback + the arrow nudge on CTAs with an icon */
  :is(.elementor-button, .ct-button, .wp-element-button, a[class*="btn"], button[class*="btn"], a[class*="-cta"]):active { transform: scale(var(--sid-mo-press)); transition: transform var(--sid-dur-1) var(--sid-ease-out); }
  .elementor-button .elementor-button-icon { transition: transform var(--sid-dur-2) var(--sid-ease-out); }
  .elementor-button:is(:hover, :focus-visible) .elementor-button-icon { transform: translateX(3px); }

  /* Cards: one hover lift + press for EVERY clickable list card (SPEC "hover is a promise"; same list as motion.js CARD) */
  :is(.ef-card, .ev-card, .ssf-card, .vf-card, .vl-card, .bp-card, .eb-sugg-card, .vb-rc, article.entry-card) { transition: transform var(--sid-dur-2) var(--sid-ease-out), box-shadow var(--sid-dur-2) var(--sid-ease-out); }
  @media (hover: hover) and (pointer: fine) {
    :is(.ef-card, .ev-card, .ssf-card, .vf-card, .vl-card, .bp-card, .eb-sugg-card, .vb-rc, article.entry-card):hover { transform: translateY(var(--sid-mo-lift)); box-shadow: var(--sid-shadow-card-hover, 0 16px 40px rgba(0, 0, 0, .12)); }
  }
  :is(.ef-card, .ev-card, .ssf-card, .vf-card, .vl-card, .bp-card, .eb-sugg-card, .vb-rc, article.entry-card):active { transform: translateY(0) scale(.99); transition-duration: var(--sid-dur-1); }
  /* MAIN-E (#4, 2026-10-16): Elementor link-containers that are clickable cards carry the CSS class sid-lift (set per element in
     Elementor). Same lift + card-hover shadow as the list above, plus keyboard parity: :focus-visible lifts like hover. Kept out of
     the list above on purpose: that list mirrors motion.js CARD (card cover -> detail header), which these cards do not join.
     .e-con raises specificity over Elementor's own .e-con transition/transform rules. */
  .e-con.sid-lift { transition: transform var(--sid-dur-2) var(--sid-ease-out), box-shadow var(--sid-dur-2) var(--sid-ease-out), background var(--sid-dur-2) var(--sid-ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .e-con.sid-lift:hover { transform: translateY(var(--sid-mo-lift)); box-shadow: var(--sid-shadow-card-hover, 0 16px 40px rgba(0, 0, 0, .12)); }
  }
  .e-con.sid-lift:focus-visible { transform: translateY(var(--sid-mo-lift)); box-shadow: var(--sid-shadow-card-hover, 0 16px 40px rgba(0, 0, 0, .12)); }
  .e-con.sid-lift:active { transform: translateY(0) scale(.99); transition-duration: var(--sid-dur-1); }

  /* Accordions / FAQ: the answer settles in (opacity + 4 px); the height change itself stays instant (no layout animation) */
  .cb-faq-item.open .cb-faq-a, details[open] > :not(summary) { animation: sid-settle var(--sid-dur-3) var(--sid-ease-out) both; }
  .cb-faq-ic { transition: transform var(--sid-dur-2) var(--sid-ease-out); }
  @keyframes sid-settle { from { opacity: 0; transform: translateY(-4px); } }

  /* VT-1 · soft page transitions (same-origin, both pages must carry this file — /dash/ and the kiosk do not) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: sid-vt-out var(--sid-dur-vt) var(--sid-ease-in) both; }
  ::view-transition-new(root) { animation: sid-vt-in var(--sid-dur-vt) var(--sid-ease-out) both; }
  @keyframes sid-vt-out { to { opacity: 0; } }
  @keyframes sid-vt-in { from { opacity: 0; transform: translateY(var(--sid-mo-vt-rise)); } }
  /* the header pill holds still while the page changes underneath */
  .ct-header [data-row*="middle"] > .ct-container { view-transition-name: sid-header; }
  ::view-transition-group(sid-header) { animation-duration: var(--sid-dur-vt); animation-timing-function: var(--sid-ease-out); }
  /* every card → detail pair: card cover → detail header (names are set by motion.js on the clicked card / the new header only).
     A header without a cover (gradient only) is still the target: the photo morphs into the gradient box. */
  ::view-transition-group(sid-cover) { animation-duration: calc(var(--sid-dur-vt) * 1.6); animation-timing-function: var(--sid-ease-in-out); }
  ::view-transition-old(sid-cover), ::view-transition-new(sid-cover) { height: 100%; object-fit: cover; overflow: clip; }
}