/* ============================================================
   motion.css — animation DNA extracted from
   britainsfavouritebutterfly.co.uk (everglow theme)
   Dependency-free. Pair with motion.js for the JS behaviours.
   ============================================================ */

:root {
  /* Durations — the site's timing scale. --dur-micro (175ms) is the
     signature value: used ~77x on every hover/color/fill transition. */
  --dur-instant: 125ms;
  --dur-micro:   175ms;  /* hovers, color, background, fill, text-decoration */
  --dur-snug:    250ms;  /* image hovers (filter + opacity) */
  --dur-base:    500ms;  /* content reveals (opacity / transform) */
  --dur-hero:    750ms;  /* staggered hero fades (700–800ms range) */
  --dur-slow:    1000ms; /* slow ambience */
  --dur-scroll:  1200ms; /* programmatic smooth-scroll */

  /* Easings. --ease-standard is the house default (CSS `ease-out`).
     The cubic-beziers mirror the JS easing functions in motion.js so
     CSS and JS motion feel identical. */
  --ease-standard:     ease-out;
  --ease-out-cubic:    cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --ease-shake:        cubic-bezier(0.360, 0.070, 0.190, 0.970);

  /* Smoothing time-constants (ms) for motion.js approach()/Smoothed */
  --tau-bank: 220;
  --tau-rot:  240;
  --tau-lift: 250;
}

/* ---- Micro-interaction utility -------------------------------------
   Drop `.t-micro` on anything interactive: hover state changes ride
   the 175ms ease-out house curve. */
.t-micro {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color     var(--dur-micro) var(--ease-standard),
    color            var(--dur-micro) var(--ease-standard),
    fill             var(--dur-micro) var(--ease-standard),
    text-decoration-color var(--dur-micro) var(--ease-standard);
}

/* Image hover: desaturate→saturate / fade, 250ms */
.t-media {
  transition: filter var(--dur-snug) var(--ease-standard),
              opacity var(--dur-snug) var(--ease-standard);
}

/* ---- Reveal-on-scroll ----------------------------------------------
   Mark elements with `data-reveal`; motion.js adds `.is-visible` when
   they enter the viewport (one-shot). Add `data-reveal-delay="150"`
   for staggered hero sequences. */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Keyframes (ported verbatim) ----------------------------------- */

/* SVG line-draw loop (animate stroke-dashoffset on a path) */
@keyframes dashOffsetLoop1 { from { stroke-dashoffset: 590 } to { stroke-dashoffset: 0 } }
@keyframes dashOffsetLoop2 { from { stroke-dashoffset: 140 } to { stroke-dashoffset: 0 } }
.line-draw-1 { animation: dashOffsetLoop1 1s linear infinite }
.line-draw-2 { animation: dashOffsetLoop2 1s linear infinite }

/* Attention shake — damped rotation, the only bespoke CSS bezier */
@keyframes shake {
  0%   { transform: rotate(0) }
  15%  { transform: rotate(10deg) }
  30%  { transform: rotate(-10deg) }
  45%  { transform: rotate(7deg) }
  60%  { transform: rotate(-7deg) }
  75%  { transform: rotate(5deg) }
  85%  { transform: rotate(-5deg) }
  92%  { transform: rotate(2.5deg) }
  100% { transform: rotate(0) }
}
.shake { animation: shake .5s var(--ease-shake) both }

/* SpinKit bounce loader (three children, staggered -0.32s / -0.16s) */
@keyframes sk-bouncedelay { 0%, 80%, 100% { transform: scale(0) } 40% { transform: scale(1) } }
.sk-bounce > * { animation: sk-bouncedelay 1.4s infinite ease-in-out both }
.sk-bounce > :nth-child(1) { animation-delay: -0.32s }
.sk-bounce > :nth-child(2) { animation-delay: -0.16s }

/* Rotating spinner */
@keyframes spinner { to { transform: rotate(360deg) } }
.spinner { animation: spinner 1.3s linear infinite }

/* ---- Marquee scaffold (motion.js drives the transform) ------------- */
.marquee-container { overflow: hidden; position: relative }
.marquee-track { display: inline-flex; white-space: nowrap; will-change: transform }

/* ---- Responsible default the original site lacks ------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none }
}