/* ============================================================
   MAWHĒRIKI MOTION — six reusable text-animation effects
   Vanilla CSS + JS, no build step. Brand-locked tokens.
   Pair with assets/motion.js.
============================================================ */

/* Shared tokens — fall back to local values if not on a brand page */
:root {
  --motion-accent: var(--hoiho-yellow, #F2C200);
  --motion-muted: var(--paper-mute, #9B9484);
  --motion-text: var(--papa-paper, #F4EFE6);
  --motion-bg: var(--po-black, #0B0B0B);
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   1. REVEAL PARAGRAPH
   Highlighted words fade from muted → accent on scroll-in.
============================================================ */
[data-motion="reveal-paragraph"] {
  color: var(--motion-muted);
  line-height: 1.55;
}
[data-motion="reveal-paragraph"] .rp-word {
  display: inline;
  transition: color 600ms var(--motion-ease);
}
[data-motion="reveal-paragraph"] .rp-word--highlight {
  color: var(--motion-muted);
  font-weight: 600;
  display: inline-block;
  transform: translateY(28px);
  opacity: 0;
  transition:
    color 600ms var(--motion-ease),
    transform 700ms var(--motion-ease),
    opacity 700ms var(--motion-ease);
  will-change: transform, opacity;
}
[data-motion="reveal-paragraph"].is-revealed .rp-word--highlight {
  color: var(--rp-accent, var(--motion-accent));
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   2. SPLIT HEADING
   Words/letters slide up + fade in on scroll, staggered.
============================================================ */
[data-motion="split-heading"] {
  display: block;
  font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--motion-text);
}
[data-motion="split-heading"] .sh-line { display: block; overflow: hidden; }
[data-motion="split-heading"] .sh-line--secondary { color: var(--motion-muted); }
[data-motion="split-heading"] .sh-unit {
  display: inline-block;
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform 700ms var(--motion-ease),
    opacity 700ms var(--motion-ease);
  transition-delay: var(--sh-delay, 0ms);
  will-change: transform, opacity;
}
/* Keep words intact when split by letter — letters animate, but the word stays whole on wrap */
[data-motion="split-heading"] .sh-word { display: inline-block; white-space: nowrap; }
/* Preserve normal spacing between words */
[data-motion="split-heading"] .sh-space { display: inline-block; width: 0.28em; }
[data-motion="split-heading"].is-revealed .sh-unit {
  transform: translateY(0);
  opacity: 1;
}

/* Inline variant — for animating an em inside a larger static heading.
   Inherits the parent heading's sizing/weight but keeps any existing
   colour rules (e.g. yellow em, muted em) intact. */
[data-motion="split-heading"][data-inline="true"] {
  display: inline;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
[data-motion="split-heading"][data-inline="true"] .sh-line {
  display: inline;
  overflow: visible;
}
[data-motion="split-heading"][data-inline="true"] .sh-word {
  display: inline-block;
  white-space: nowrap;
}

/* ============================================================
   3. MARQUEE
   Infinite ticker of pill chips. Pause on hover.
============================================================ */
[data-motion="marquee"] {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
[data-motion="marquee"] .mq-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: mq-scroll var(--mq-duration, 40s) linear infinite;
  animation-direction: var(--mq-direction, normal);
}
[data-motion="marquee"]:hover .mq-track { animation-play-state: paused; }
[data-motion="marquee"] .mq-pill {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 1px solid rgba(244, 239, 230, 0.18);
  border-radius: 999px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--motion-text);
  white-space: nowrap;
  background: rgba(244, 239, 230, 0.03);
}
@keyframes mq-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   4. MAGNETIC LINK
   Translates toward cursor; animated underline wipes in.
============================================================ */
[data-motion="magnetic"] {
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: transform 600ms var(--motion-ease);
  will-change: transform;
}
[data-motion="magnetic"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms var(--motion-ease);
}
[data-motion="magnetic"]:hover::after,
[data-motion="magnetic"]:focus-visible::after { transform: scaleX(1); }
[data-motion="magnetic"]:focus-visible {
  outline: 2px solid var(--motion-accent);
  outline-offset: 6px;
}

/* ============================================================
   5. TYPEWRITER PLACEHOLDER
   Overlay span fakes the cycling placeholder so we can render
   a blinking caret. Hidden when input is focused or has value.
============================================================ */
.tw-field {
  position: relative;
  display: block;
}
.tw-field input[data-motion="typewriter"] {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 14px;
  color: var(--motion-text);
  background: rgba(244, 239, 230, 0.04);
  border: 1px solid rgba(244, 239, 230, 0.18);
  border-radius: 4px;
  outline: none;
}
.tw-field input[data-motion="typewriter"]:focus {
  border-color: var(--motion-accent);
}
.tw-field input[data-motion="typewriter"]::placeholder { color: transparent; }
.tw-overlay {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 14px;
  color: var(--motion-muted);
  pointer-events: none;
  white-space: nowrap;
}
.tw-overlay.is-hidden { display: none; }

/* Override: when a typewriter input sits inside a .field (enquiry form on
   paper section), match the paper-section form styling so typed text is
   readable. */
.field .tw-field input[data-motion="typewriter"] {
  font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
  font-size: 16px;
  color: var(--po-black, #0B0B0B);
  background: var(--papa-paper, #F4EFE6);
  border: 1px solid var(--paper-shade, #E8E1D2);
  border-radius: 0;
  padding: 14px 16px;
}
.field .tw-field input[data-motion="typewriter"]:focus {
  border-color: var(--po-black, #0B0B0B);
}
.field .tw-field .tw-overlay {
  font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
  font-size: 16px;
  color: var(--ink-mute, #5A5A75);
  left: 17px;
}
.field .tw-field .tw-caret {
  background: var(--po-black, #0B0B0B);
}
.tw-caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: -2px;
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ============================================================
   6. GRADIENT TEXT
   Animated gradient fill. Continuous or hover-triggered.
============================================================ */
[data-motion="gradient-text"] {
  background: linear-gradient(
    90deg,
    var(--motion-text) 0%,
    var(--motion-accent) 50%,
    var(--motion-text) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-motion="gradient-text"][data-mode="continuous"] {
  animation: gt-pan 4s linear infinite;
}
[data-motion="gradient-text"][data-mode="hover"] {
  transition: background-position 900ms var(--motion-ease);
}
[data-motion="gradient-text"][data-mode="hover"]:hover {
  background-position: -100% 50%;
}
@keyframes gt-pan {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}

/* ============================================================
   8. TYPE-IN  (body text typewriter — types itself on scroll-in)
   <li data-motion="type-in" data-speed="28">Certificate of authenticity</li>
   Optional: data-delay="0" (ms before start once visible).
============================================================ */
[data-motion="type-in"] {
  position: relative;
}
[data-motion="type-in"] .ti-text { white-space: pre-wrap; }
[data-motion="type-in"] .ti-caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--motion-accent);
  vertical-align: -2px;
  margin-left: 2px;
  animation: tw-blink 1s steps(1) infinite;
}
[data-motion="type-in"].is-done .ti-caret { display: none; }

/* ============================================================
   7. COUNT UP
   Number rolls from zero to target on scroll-in.
   Width is reserved in JS by measuring the final value;
   tabular-nums keeps digits a consistent width while ticking.
============================================================ */
[data-motion="count-up"] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ============================================================
   PREFERS-REDUCED-MOTION — strip animation, keep end state.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-motion="reveal-paragraph"] .rp-word { transition: none; }
  [data-motion="reveal-paragraph"] .rp-word--highlight {
    color: var(--rp-accent, var(--motion-accent));
    transform: none;
    opacity: 1;
    transition: none;
  }

  [data-motion="type-in"] .ti-caret { animation: none; display: none; }

  [data-motion="split-heading"] .sh-unit {
    transform: none;
    opacity: 1;
    transition: none;
  }

  [data-motion="marquee"] .mq-track { animation: none; transform: none; }

  [data-motion="magnetic"] { transform: none !important; transition: none; }
  [data-motion="magnetic"]::after { transition: none; }

  .tw-caret { animation: none; opacity: 1; }
  /* JS also short-circuits the typing loop and shows the first prompt. */

  [data-motion="gradient-text"] { animation: none; transition: none; }
}