/* Motion system — modelled on arva.com
   (line-reveals .fadeinLines, 0.4s easing, glow labels,
   staggered ScrollTrigger-style reveals, form-control focus glows)
   Everything respects prefers-reduced-motion. JS gates the hidden state. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ping: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 0.15s ease-in-out;          /* form-control pace */
  --t-link: 0.4s;                        /* arva's link/button pace */
}

/* ---------- Enter-state gating (JS adds .js to <html>) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Flat utility panels (wide bars) fade in place — sliding them reads as a glitch */
.js .reveal--fade { transform: none; }

/* Headline line reveal (arva .fadeinLines) */
.js .split-lines { visibility: hidden; }
.js .split-lines.is-ready { visibility: visible; }
.js .split-lines .line {
  display: inline-block; vertical-align: top; overflow: hidden;
  margin-right: 0.24em;
}
.js .split-lines .line:last-child { margin-right: 0; }
.js .split-lines .line > span {
  display: block; transform: translateY(110%);
  transition: transform 0.75s var(--ease-out);
}
.js .split-lines.is-in .line > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .split-lines .line > span { opacity: 1; transform: none; transition: none; }
  .js .split-lines { visibility: visible; }
}

/* ---------- Buttons (arva .btnarrow: label + arrow, 0.4s) ---------- */
.btn { transition: var(--t-link); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
.btn .btn__arrow {
  display: inline-block; margin-left: 10px;
  transition: transform 0.3s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost-dark:hover, .btn--outline:hover { background: transparent; box-shadow: none; }

/* ---------- Cards ---------- */
.route-card, .family, .evidence article, .contact-details > div, .journey__steps li {
  transition: transform var(--t-link), box-shadow var(--t-link), border-color var(--t-link);
}
.route-card:hover, .family:hover, .evidence article:hover, .contact-details > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(34,47,48,0.08);
}

/* Journey steps: dashed connector rule between cards (span only) */
.journey__steps::before {
  content: ""; position: absolute; top: 24px; left: 0; right: 0;
  border-bottom: 1px dashed var(--border-soft); z-index: 0;
}
@media (max-width: 800px) { .journey__steps::before { display: none; } }

/* ---------- Form fields (arva .form-control focus glow) ---------- */
.field input, .field select, .field textarea {
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(206,247,158,0.35);
  outline: none;
}

/* ---------- Ticker: pause on hover ---------- */
.ticker:hover .ticker__track { animation-play-state: paused; }


/* ---------- Hero ambience (arva looping video feel) ---------- */
.hero__field {
  position: absolute; inset: -10%;
  background:
    radial-gradient(60% 40% at 72% 28%, rgba(206,247,158,0.10), transparent 70%),
    radial-gradient(45% 35% at 22% 78%, rgba(68,94,95,0.35), transparent 65%);
  animation: field-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---------- Dashed circle motif — slow orbital spin ---------- */
.motif circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: motif-spin 90s linear infinite;
}
.motif circle:last-child {
  animation-duration: 60s;
  animation-direction: reverse;
}
@keyframes motif-spin { to { transform: rotate(360deg); } }
@keyframes field-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero__field { animation: none; } }

/* Status chip pulse (used sparingly: development stage) */
.chip-pulse { position: relative; padding-left: 28px; }
.chip-pulse::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--lime);
}
.chip-pulse::after {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--lime); opacity: 0.5;
  animation: chip-ping 2.6s var(--ease-ping) infinite;
}
@keyframes chip-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chip-pulse::after { animation: none; opacity: 0; } }

/* ---------- Header state on scroll ---------- */
.site-header { transition: box-shadow var(--t-link), background var(--t-link); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(34,47,48,0.10); background: rgba(247,247,245,0.92); backdrop-filter: blur(8px); }