/* =============================================================
   Motion (CSS side) — ported from the ORIGO motion system.
   Tokens mirror js/motion.js. Layout stays in styles.css.
   ============================================================= */
:root {
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-display: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Faded only while the motion system loads (class set by js/flag.js, removed once every reveal
   has set its own start state, or after 4s as a failsafe). Opacity only: content stays focusable. */
html.is-motion [data-motion] { opacity: 0; }

/* SplitText line masks (clip-path so tight leading never cuts ascenders/descenders) */
.split-line-mask { overflow: visible !important; clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }

/* Lenis base rules */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }



/* ---------- Cards ---------- */
.step, .plan, .tile { transition: transform .8s var(--ease-display), box-shadow .8s var(--ease-display); }
@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-1rem); box-shadow: 0 3rem 6rem rgba(0,0,0,.1); }
  .plan:hover { transform: translateY(-.8rem); }
  .tile:hover { transform: translateY(-.8rem); }
  .tile:hover .tile_link span { transform: translateX(.6rem); }
  .step:hover .step_icon svg { transform: rotate(-12deg) scale(1.06); }
  .pager button:hover { transform: scale(1.08); }
}
.step_icon svg { transition: transform .8s var(--ease-display); }

/* ---------- Menu ---------- */
.nav-menu_link { transition: opacity .5s var(--ease-out), color .5s var(--ease-out); }
.nav-menu_list:hover .nav-menu_link:not(:hover) { opacity: .25; }
.nav-menu_link:hover { color: var(--green); }


/* ---------- Custom cursor (precise pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor :is(input, textarea, select) { cursor: text !important; }
}
.cursor_component { position: fixed; top: 0; left: 0; z-index: 100; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; pointer-events: none; mix-blend-mode: difference; will-change: transform; visibility: hidden; opacity: 0; }
.cursor_dot { position: absolute; inset: 0; border-radius: 50%; background: #fff; transform: scale(.125); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.is-motion [data-motion] { opacity: 1; }
  .step, .plan, .tile, .tile_link span, .step_icon svg { transition: none !important; }
  .step:hover, .plan:hover, .tile:hover { transform: none !important; }
}


/* ---------- Buttons + text links: word roll (js/hover.js, after deepbook-v2-wip) ----------
   Each word carries a copy of itself one line below; hover steps the words up one line in turn. */
.roll_text { display: inline-block; overflow: hidden; position: relative; height: 1.4em; line-height: 1.25em; padding-bottom: .15em; margin-bottom: -.15em; vertical-align: middle; font-kerning: none; white-space: nowrap; }
.roll_word { display: inline-block; vertical-align: top; text-shadow: 0 1.25em currentColor; will-change: transform; }
.btn .roll_text, .plan_btn .roll_text { vertical-align: baseline; }

/* ---------- Logo marquee (js/app.js doubles the list; -50% is exactly one copy) ---------- */
.marquee_track { animation: marquee 34s linear infinite; }
.marquee:hover .marquee_track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee_track, .hub_lines path, .hub_core::before, .hub_core::after { animation: none; }
}