/* ==========================================================================
   Motion effects, adapted from "Agency website POC" by Jamie Coulter
   (codepen.io/jcoulterdesign/pen/arQoER):
   - staggered intro (wipe-in headline, growing rule, fades, pop-in)
   - panel wipe from the login form to the hero
   - trailing cursor that grows over clickable things
   Everything only runs when <html> has .fx (set in theme.js unless the visitor prefers reduced motion).
   ========================================================================== */

:root {
  --wipe-ease: cubic-bezier(0.79, -0.01, 0, 0.99);
  --spark-ease: cubic-bezier(0.76, 0.01, 0.21, 1.02);
  --fx-base: 0s;
}
.fx.fx-entering { --fx-base: 0.75s; }  /* wait for the panel to clear after sign-in */

/* ---------- intro ---------- */
@keyframes fx-fade  { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes fx-spark { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -2% -10% 0); } }
@keyframes fx-rule  { from { width: 0; } to { width: 70px; } }
@keyframes fx-pop   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fx-out   { to { opacity: 0; translate: 0 -10px; } }

.fx [data-fx="fade"]  { opacity: 0; }
.fx [data-fx="spark"] { clip-path: inset(-10% 100% -10% 0); }
.fx [data-fx="pop"]   { transform: scale(0); }
.fx [data-fx="rule"]  { width: 0; }

/* start only once the page is visible (home.html stays .locked until sign-in is checked) */
.fx body:not(.locked) [data-fx="fade"]  { animation: fx-fade 1s calc(var(--fx-base) + var(--d, 0s)) ease forwards; }
.fx body:not(.locked) [data-fx="spark"] { animation: fx-spark 1.3s calc(var(--fx-base) + var(--d, 0s)) var(--spark-ease) forwards; }
.fx body:not(.locked) [data-fx="pop"]   { animation: fx-pop 1.1s calc(var(--fx-base) + var(--d, 0s)) var(--wipe-ease) forwards; }
.fx body:not(.locked) [data-fx="rule"]  { animation: fx-rule 1.3s calc(var(--fx-base) + var(--d, 0s)) var(--spark-ease) forwards; }

.fx-rule {
  display: block; height: 2px; width: 70px; margin: 0 0 18px;
  border: 0; background: var(--amber);
}

/* ---------- leaving: everything fades out in turn ---------- */
.fx body.fx-leaving [data-fx] {
  animation: fx-out 0.4s var(--od, 0s) ease forwards !important;
  clip-path: none; transform: none; width: auto;
}
.fx body.fx-leaving .fx-rule { width: 70px; }

/* ---------- the colour panel ---------- */
.fx-panel {
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    var(--cyan);
  transition: clip-path 1s 0.3s var(--wipe-ease), opacity 0.4s;
}
.fx-panel__mark {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font: 800 13px var(--mono); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--on-ink); opacity: 0; transition: opacity 0.4s 0.9s;
}
.fx-panel.is-full .fx-panel__mark { opacity: 1; }

/* ---------- trailing cursor ---------- */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 999;
  width: 18px; height: 18px; border-radius: 40px;
  display: grid; place-items: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--cyan) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 70%, transparent);
  opacity: 0;
  transition:
    transform 1.4s cubic-bezier(0.075, 0.82, 0.165, 1),
    width 0.4s 0.1s, height 0.4s 0.1s,
    opacity 0.6s, background 0.3s;
  will-change: transform;
}
.fx-cursor.is-on { opacity: 1; }
.fx-cursor.is-big { width: 46px; height: 46px; background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.fx-cursor__icon {
  font: 800 9px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transition: opacity 0.3s;
  white-space: nowrap;
}
.fx-cursor.is-big .fx-cursor__icon { opacity: 1; }
.fx-cursor.is-down { transition-duration: 0.15s, 0.2s, 0.2s, 0.6s, 0.3s; width: 30px; height: 30px; }