/* =========================================================================
   KicksCTRL motion layer — tokens + CSS-only choreography.
   Reusable on any KicksCTRL page: link this file, then load motion.js.
   Rule: the finished state is always the default. Motion only ever starts
   from a hidden state when JS (or a supported CSS timeline) is present.
   ========================================================================= */

/* --- 1. Motion tokens ---------------------------------------------------- */
:root {
  --dur-micro: 160ms;   /* hovers, focus, toggles */
  --dur-ui: 320ms;      /* menu items, tabs, form states */
  --dur-reveal: 700ms;  /* section + line reveals */
  --ease-out-machined: cubic-bezier(0.2, 0, 0, 1);
  /* Critically damped spring (ζ = 1, ω = 10): x(t) = 1 − (1 + ωt)·e^(−ωt). No overshoot. */
  --ease-spring: linear(0, 0.0902 5%, 0.2642 10%, 0.4422 15%, 0.594 20%, 0.7127 25%, 0.8009 30%, 0.8641 35%, 0.9084 40%, 0.9389 45%, 0.9596 50%, 0.9826 60%, 0.9927 70%, 0.997 80%, 1);
  --stagger: 50ms;
}

/* Cross-document transitions to blog / booking (ignored where unsupported) */
@view-transition { navigation: auto; }

/* --- 2. Theme switch: circular wipe from the toggle --------------------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: kcCircle 640ms var(--ease-out-machined) both; }
@keyframes kcCircle {
  from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); }
  to   { clip-path: circle(150vmax at var(--vt-x, 100%) var(--vt-y, 0)); }
}

/* --- 3. Focus: visible 2px ring everywhere ------------------------------ */
#root :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* --- 4. Cards: lift 2px, border steps to ink, swatch grows into a bar ---- */
.kc-tab {
  position: relative;
  border: 1px solid var(--line);
  transition: transform var(--dur-micro) var(--ease-out-machined), border-color var(--dur-micro) var(--ease-out-machined);
}
.kc-tab:hover, .kc-blog:hover .kc-tab { transform: translateY(-2px); border-color: var(--text); }
.kc-tab .kc-bar {
  position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: 3px !important;
  transform: scaleX(0.06); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.kc-tab:hover .kc-bar, .kc-blog:hover .kc-tab .kc-bar { transform: scaleX(1); }

/* Take-back flow: steps light as the hairline reaches them (JS adds data-dim) */
[data-kc-step] .kc-k { transition: color var(--dur-ui) var(--ease-out-machined); }
[data-kc-step][data-dim] .kc-k { color: var(--text-subtle) !important; }
[data-kc-step][data-dim] .kc-bar { transform: scaleX(0); }
[data-kc-step]:not([data-dim]) .kc-k { color: var(--text) !important; }

/* --- 5. Photos: greyscale → colour (400ms); touch: colour at viewport centre */
.kc-photo { filter: grayscale(1) contrast(1.05); transition: filter 400ms var(--ease-out-machined); }
.kc-photo:hover, [data-kc-wipe]:hover .kc-photo, .kc-blog:hover .kc-photo, .kc-photo.is-centre { filter: none; }

/* --- 6. Section rule: 2px ink line draws from the left on enter --------- */
.kc-rule { transform-origin: left; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kc-rule { animation: kcRule linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes kcRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 7. Forms: 2px ink underline draws from left on focus --------------- */
#root label span:has(> input), #root label span:has(> select) {
  background-image: linear-gradient(var(--text), var(--text)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0% 2px !important;
  transition: background-size var(--dur-ui) var(--ease-spring), border-color var(--dur-micro) var(--ease-out-machined) !important;
}
#root label span:has(> input:focus), #root label span:has(> select:focus) { background-size: 100% 2px !important; }
.kc-progress { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--text); transform-origin: left; animation: kcProg 520ms var(--ease-out-machined) forwards; }
@keyframes kcProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kc-slide-in { display: block; animation: kcSlide var(--dur-ui) var(--ease-spring) both; }
@keyframes kcSlide { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Split lines never re-wrap inside their mask (prevents clipped words) */
.kc-line { white-space: nowrap; }
/* Long single words in split headings: shrink rather than clip */
[data-kc-split] { overflow-wrap: normal; }

/* --- 8. Screen-reader-only text (used where visuals count/split) ------- */
.kc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 9. Reduced motion: final states, 150ms opacity only ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important; animation-iteration-count: 1 !important;
    transition-duration: 150ms !important; transition-property: opacity, color, background-color, border-color !important;
    scroll-behavior: auto !important;
  }
  .kc-tab:hover, .kc-blog:hover .kc-tab { transform: none; }
  ::view-transition-new(root) { animation: none; }
}