/* Motion layer, ported from the Lawn Artist Site Kit (premium2): custom cursor,
   Lenis smooth scroll, headings that roll up line by line, content that rises in.
   Everything here is gated on html.js-anim, which is only set when motion is
   allowed, so with scripts off or reduced motion the page just renders normally. */

/* Lenis recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Custom cursor: dot + eased ring (mouse/trackpad only) ---- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea { cursor: text !important; }
.cur, .cur-r {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; will-change: translate, scale; mix-blend-mode: difference;
  opacity: 0; transition: opacity 200ms ease;
}
html.cursor-in .cur, html.cursor-in .cur-r { opacity: 1; }
.cur { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.cur-r {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255,255,255,0.7);
  /* Position is set by JS on `translate`; the hover growth uses `scale`, so no layout work per frame */
  transition: opacity 200ms ease, scale 300ms cubic-bezier(.22,1,.36,1), background-color 300ms ease, border-color 300ms ease;
}
.cur-r.hot { scale: 1.65; background: rgba(255,255,255,0.12); border-color: transparent; }

/* ---- Rise-in reveals ----
   Uses CSS animations on the independent `translate` property, so it never
   fights the hover transforms/transitions already on bubbles and buttons. */
@keyframes ocg-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes ocg-line { from { transform: translateY(110%); } to { transform: none; } }

.js-anim [data-reveal]:not(.in) { opacity: 0; }
.js-anim [data-reveal].in { animation: ocg-rise 1s cubic-bezier(.16,1,.3,1) both; }

/* Headings: hidden until split into lines, then each line rolls up from a mask */
.js-anim [data-split]:not(.split-ready) { opacity: 0; }
.split-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split-line > span { display: block; transform: translateY(110%); }
.split-line.in > span { animation: ocg-line 1s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal], .js-anim [data-split] { opacity: 1 !important; animation: none !important; }
  .cur, .cur-r { display: none; }
}