/* ============================================================
   SELR AI — MOTION
   The site's movement, as a drop-in layer. Pairs with motion.js.

   Load tokens.css first (it defines the curves and durations), or
   this file falls back to the same literal values.

   Every value MEASURED off www.selrai.com.au. Sources:
   references/02-motion.md, references/07-motion-graphics.md.

   THE THREE CURVES, and they have distinct jobs:
     standard   cubic-bezier(.4,0,.2,1)    fades, fills, inputs
     symmetric  cubic-bezier(.44,0,.56,1)  colour and text
     overshoot  cubic-bezier(.22,1,.36,1)  structural opens, reveals

   THE TWO STAGGERS:
     20ms between WORDS in a heading
     50ms between sibling elements
   Both are fast. Slowing them to feel "premium" is the most common
   way Selr motion goes wrong.
   ============================================================ */

:root {
  --selr-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --selr-ease-sym:   cubic-bezier(0.44, 0, 0.56, 1);
  --selr-ease-over:  cubic-bezier(0.22, 1, 0.36, 1);
  /* The hero spring (k825 d84 m3.2) is ζ=0.82 — 1.16% overshoot, i.e.
     invisible. It reads as a clean decelerate, so this is its curve. */
  --selr-ease-hero:  cubic-bezier(0.16, 1, 0.3, 1);

  --selr-dur-fast: 200ms;
  --selr-dur-base: 300ms;
  --selr-dur-move: 400ms;
  --selr-dur-slow: 550ms;

  --selr-stagger:      50ms;
  --selr-stagger-word: 20ms;
}

/* ------------------------------------------------------------
   1. THE HEADING REVEAL — the signature.
   Four properties move together. The blur is what makes it read
   like a camera pulling focus instead of a generic slide-up.
   ------------------------------------------------------------ */

@keyframes selr-word-in {
  from { opacity: .001; filter: blur(5px); transform: translateY(2px) scale(.9); }
  to   { opacity: 1;    filter: blur(0);   transform: none; }
}

.selr-word {
  display: inline-block;
  will-change: opacity, filter, transform;
}

/* Hold everything invisible until the observer says go, so nothing
   flashes un-animated on a slow connection. */
[data-selr-in="words"] .selr-word { opacity: .001; }
[data-selr-in="words"].selr-in-run .selr-word,
[data-selr-in="words"].selr-in-done .selr-word {
  animation: selr-word-in 660ms var(--selr-ease-over) both;
}

/* The paragraph under a heading is ONE unit. Never split it per letter —
   the site's own markup looks like a typewriter and is not one. */
.selr-reveal-block { animation: selr-word-in 860ms var(--selr-ease-over) both; }

/* ------------------------------------------------------------
   2. ENTRANCE TIERS
   Opacity starts at 0.001, never true zero — the site's convention,
   and it avoids a repaint flash.
   ------------------------------------------------------------ */

@keyframes selr-in-hero {
  from { opacity: .001; transform: translateY(50px) scale(.9); }
  to   { opacity: 1;    transform: none; }
}
@keyframes selr-in-body {
  from { opacity: .001; transform: translateY(40px); }
  to   { opacity: 1;    transform: none; }
}
@keyframes selr-in-chrome {
  from { opacity: .001; transform: translateY(10px) scale(.9); }
  to   { opacity: 1;    transform: none; }
}

[data-selr-in]:not([data-selr-in="words"]) { opacity: .001; }

[data-selr-in="hero"].selr-in-run   { animation: selr-in-hero   700ms var(--selr-ease-hero) both; }
[data-selr-in="chrome"].selr-in-run { animation: selr-in-chrome 460ms var(--selr-ease-over) both; }
/* Everything that is not hero/chrome/words is the body tier. Written as a
   :not() rather than [data-selr-in="body"] so an unknown or bare value still
   animates instead of sitting invisible at opacity .001 — React renders a bare
   attribute as "true", which matched nothing. motion.js also normalises it. */
[data-selr-in].selr-in-run:not([data-selr-in="hero"]):not([data-selr-in="chrome"]):not([data-selr-in="words"]) {
  animation: selr-in-body 500ms var(--selr-ease) both;
}

.selr-in-done { opacity: 1 !important; animation: none !important; }

/* ------------------------------------------------------------
   3. HOVER & PRESS — restrained on purpose.
   Images zoom 1.03. Controls press 0.98. NOTHING lifts, and nothing
   casts a shadow: the site has no elevation system at all.
   ------------------------------------------------------------ */

.selr-media { overflow: hidden; }
.selr-media img { display: block; width: 100%; transition: transform var(--selr-dur-slow) var(--selr-ease-over); }
.selr-media:hover img { transform: scale(1.03); }

.selr-press { transition: transform var(--selr-dur-fast) var(--selr-ease); }
.selr-press:active { transform: scale(.98); }

/* The one rotation the site actually uses: a 360deg icon spin on hover. */
.selr-spin svg { transition: transform var(--selr-dur-slow) var(--selr-ease-over); }
.selr-spin:hover svg { transform: rotate(360deg); }

/* Inline links: 4 properties move together over 600ms. */
.selr-link {
  text-decoration: underline;
  text-decoration-color: var(--selr-purple, #6736E2);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 600ms var(--selr-ease),
              text-decoration-color 600ms var(--selr-ease),
              text-decoration-thickness 600ms var(--selr-ease),
              text-underline-offset 600ms var(--selr-ease);
}
.selr-link:hover { text-underline-offset: 4px; text-decoration-thickness: 3px; }

/* ------------------------------------------------------------
   4. THE AMBIENT RAIL
   Drift is driven by motion.js. This is only the track.
   ------------------------------------------------------------ */

.selr-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--selr-canvas, #F7F5EF);
  border-radius: var(--selr-r-card, 30px);
  padding: 10px;
}
.selr-rail::-webkit-scrollbar { display: none; }
.selr-rail > * { flex: none; }

/* ------------------------------------------------------------
   5. ACCORDION — grid-template-rows 0fr -> 1fr.
   A true auto height: no max-height guess, no jump.
   ------------------------------------------------------------ */

.selr-acc {
  border: 1px solid var(--selr-glass-hair, rgba(227,227,227,.45));
  border-radius: var(--selr-r-card, 30px);
  background: var(--selr-surface, #FFFFFA);
  overflow: hidden;
}
.selr-acc-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 20px; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--selr-ink, #242424);
}
.selr-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--selr-ease-over);
}
/* The direct child is the CLIPPER and must carry no padding of its own:
   at 0fr its height collapses to 0 but padding still occupies space, which
   leaves a visible sliver on a closed panel. min-height:0 is needed too,
   or the track resolves to the item's min-content height instead of 0.
   Put the padding on .selr-acc-body inside it. */
.selr-acc-panel > * { overflow: hidden; min-height: 0; padding: 0; }
.selr-acc-body { padding: 0 20px 16px; font-size: 15px; color: var(--selr-ink-muted, #616161); }
.selr-acc.is-open .selr-acc-panel { grid-template-rows: 1fr; }
.selr-acc.is-open { background: #FFFFFF; }

/* Plus rotates 180deg into a cross: one bar fades out as it turns. */
.selr-acc-ico {
  margin-left: auto; position: relative; width: 14px; height: 14px; flex: none;
  transition: transform 450ms var(--selr-ease-over);
}
.selr-acc-ico::before,
.selr-acc-ico::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--selr-ink, #242424); border-radius: 2px;
}
.selr-acc-ico::before { width: 14px; height: 2px; }
.selr-acc-ico::after  { width: 2px; height: 14px; transition: opacity 450ms var(--selr-ease-over); }
.selr-acc.is-open .selr-acc-ico { transform: rotate(180deg); }
.selr-acc.is-open .selr-acc-ico::after { opacity: 0; }

/* ------------------------------------------------------------
   6. NAV SELECTOR — the purple pill that follows the pointer.
   ------------------------------------------------------------ */

.selr-nav { display: flex; align-items: center; gap: 6px; }
.selr-nav > a { position: relative; z-index: 1; }
.selr-nav-pill {
  position: absolute; top: 0; left: 0; z-index: 0;
  border-radius: var(--selr-r-pill, 40px);
  background: var(--selr-purple, #6736E2);
  opacity: 0; transform: scale(.4);
  transition: transform var(--selr-dur-move) var(--selr-ease-over),
              width var(--selr-dur-move) var(--selr-ease-over),
              height var(--selr-dur-move) var(--selr-ease-over),
              opacity var(--selr-dur-base) var(--selr-ease);
}
.selr-nav.is-tracking .selr-nav-pill { opacity: 1; }
.selr-nav.is-tracking > a:hover,
.selr-nav.is-tracking > a:focus-visible { color: var(--selr-surface, #FFFFFA); }

/* ------------------------------------------------------------
   7. LIGHTBOX
   ------------------------------------------------------------ */

.selr-lb {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(10,10,10,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--selr-dur-base) var(--selr-ease);
}
.selr-lb.is-open { opacity: 1; pointer-events: auto; }
.selr-lb-frame {
  height: min(88vh, 760px); aspect-ratio: 9 / 16;
  border-radius: var(--selr-r-field, 20px); overflow: hidden; background: #000;
}
.selr-lb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.selr-lb-x {
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
  border-radius: 100%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background-color var(--selr-dur-base) var(--selr-ease);
}
.selr-lb-x:hover { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------
   8. REDUCED MOTION
   Everything arrives, nothing moves. Entrances resolve to their
   end state rather than being skipped, so no content is hidden.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .selr-word,
  [data-selr-in],
  [data-selr-in="words"] .selr-word,
  .selr-reveal-block {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .selr-media img, .selr-press, .selr-spin svg, .selr-link,
  .selr-acc-panel, .selr-acc-ico, .selr-acc-ico::after,
  .selr-nav-pill, .selr-lb, .selr-lb-x { transition: none !important; }
  .selr-media:hover img, .selr-spin:hover svg { transform: none; }
}