/* motion.css — HearFlow landing motion tokens + reduced-motion baseline. */

:root {
  --motion-fast:        180ms;
  --motion-base:        280ms;
  --motion-slow:        720ms;
  --motion-page:       1200ms;
  --motion-curve-loop: 6000ms;
  --ease-out-quart:    var(--easing); /* alias of the page's existing --easing token */
  --ease-in-out-soft:  cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Reveal primitive: pre-state. Cleared by JS on viewport entry. */
.js [data-motion="reveal"] { opacity: 0; transform: translateY(14px); }
.js [data-motion="reveal"].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-slow) var(--ease-out-quart),
              transform var(--motion-slow) var(--ease-out-quart);
}

/* Reduced-motion: skip transitions, render end-state. */
@media (prefers-reduced-motion: reduce) {
  .js [data-motion="reveal"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-motion="caret"] .hf-caret-underline { animation: none !important; }
  [data-motion="orb"] { animation: none !important; }
}

/* ─── Caret primitive: karaoke underline ──────────────────────────────────── */
[data-motion="caret"] {
  position: relative;
  display: inline-block;
}
[data-motion="caret"] .hf-caret-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 3px;
  background: var(--paper-deep, #B5CDDC);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
}
[data-motion="caret"] .hf-caret-word--active {
  color: var(--ink);
  transition: color var(--motion-fast) var(--ease-out-quart);
}

/* ─── Curved-text-path footer ─────────────────────────────────────────────── */
.hf-curved-path {
  position: relative;
  width: 100%;
  height: 80px;
  margin: 48px 0 0;
  overflow: hidden;
}
.hf-curved-path svg { width: 100%; height: 100%; display: block; }
.hf-curved-path text {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-faint, rgba(15, 27, 45, 0.55));
}

/* ─── Orb (fixed bottom-right) ────────────────────────────────────────────── */
.hf-orb {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 64px;
  height: 64px;
  z-index: 90;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
.hf-orb svg,
.hf-orb .lottie-host { width: 100%; height: 100%; }
.hf-orb[data-pulsing] { animation: hf-orb-pulse 3s ease-in-out infinite; }
.hf-orb:hover[data-pulsing] { animation-duration: 1.2s; }
@keyframes hf-orb-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.04); opacity: 0.92; }
}

/* ─── Page-transition wash ────────────────────────────────────────────────── */
.hf-page-wash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--paper-soft) 50%, transparent);
  transform: translateX(-100%);
}
.hf-page-wash.is-sweeping {
  animation: hf-wash-sweep 280ms var(--ease-out-quart) forwards;
}
@keyframes hf-wash-sweep {
  to { transform: translateX(100%); }
}

/* ─── A/B comparison block (index.html only) ──────────────────────────────── */
.hf-compare {
  padding: 80px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.hf-compare__header { text-align: center; margin-bottom: 48px; }
.hf-compare__header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.hf-compare__header p { color: var(--ink-soft); font-size: 18px; }

.hf-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 700px) { .hf-compare__grid { grid-template-columns: 1fr; } }

.hf-compare__card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-base) var(--ease-out-quart),
              transform var(--motion-base) var(--ease-out-quart);
}
.hf-compare__card[data-active] {
  box-shadow: 0 0 0 2px var(--paper-deep, #B5CDDC), var(--shadow-card);
  transform: translateY(-2px);
}
.hf-compare__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.hf-compare__text {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.4;
  margin: 16px 0 24px;
}
.hf-compare__player {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hf-compare__play {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  cursor: pointer;
}
.hf-compare__bar {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.hf-compare__bar-fill {
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 100ms linear;
}

/* ─── Demo-video scroller (index.html only) ───────────────────────────────── */
.hf-demos {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.hf-demos__header { text-align: center; margin-bottom: 48px; }
.hf-demos__header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.hf-demos__header p { color: var(--ink-soft); font-size: 18px; }

.hf-demos__rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) { .hf-demos__rail { grid-template-columns: 1fr; } }

.hf-demos__clip { display: flex; flex-direction: column; gap: 16px; }
.hf-demos__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--paper-soft);
  cursor: pointer;
}
.hf-demos__frame img,
.hf-demos__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hf-demos__caption {
  font-size: 16px;
  color: var(--ink-soft);
  text-align: center;
}

/* ─── Personal-words section (index.html only) ────────────────────────────── */
.hf-words {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
  padding: 100px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .hf-words { grid-template-columns: 1fr; gap: 40px; }
}
.hf-words__copy h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.hf-words__copy p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 480px;
}
.hf-words__visual {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform: translateY(0);
  transition: transform var(--motion-slow) var(--ease-out-quart),
              box-shadow var(--motion-slow) var(--ease-out-quart);
}
.hf-words__visual.is-revealed {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset,
              0 28px 80px -32px rgba(15, 27, 45, 0.42);
}
.hf-words__visual img { width: 100%; height: auto; display: block; }