/* Bonah — motion system. Everything is gated on html.js so content is always visible without JS. */

@keyframes bn-drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vmax, 10vmax, 0) scale(1.15); } }
@keyframes bn-drift-2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12vmax, -8vmax, 0) scale(1.2); } }
@keyframes bn-drift-3 { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(-6vmax, 5vmax, 0) scale(1.25); } }

/* ---- reveal-on-scroll ---- */
.js [data-reveal] { opacity: 0; transition: opacity 1s var(--bn-ease), transform 1.1s var(--bn-ease), filter 1s var(--bn-ease), clip-path 1.2s var(--bn-ease); transition-delay: var(--delay, 0ms); will-change: opacity, transform; }
.js [data-reveal="up"], .js [data-reveal=""] { transform: translateY(46px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="blur"] { transform: translateY(24px); filter: blur(14px); }
.js [data-reveal="scale"] { transform: scale(.94) translateY(30px); }
.js [data-reveal="left"] { transform: translateX(-60px); }
.js [data-reveal="right"] { transform: translateX(60px); }
.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transform: translateY(20px); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); will-change: auto; }

/* ---- cursor (fine pointers only; created by JS) ---- */
.bn-cursor { position: fixed; inset: 0 auto auto 0; z-index: 300; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .3s; mix-blend-mode: normal; }
.bn-cursor.is-on { opacity: 1; }
.bn-cursor__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--bn-accent); transform: rotate(45deg); border-radius: 1px; }
.bn-cursor__ring { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid var(--bn-accent); border-radius: 50%; transition: width .35s var(--bn-ease), height .35s var(--bn-ease), margin .35s var(--bn-ease), background-color .3s, border-color .3s; }
.bn-cursor.is-hover .bn-cursor__ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: color-mix(in srgb, var(--bn-accent) 18%, transparent); }
.bn-cursor.is-down .bn-cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@media (hover: hover) and (pointer: fine) { .has-cursor, .has-cursor a, .has-cursor button, .has-cursor [role="button"] { cursor: none; } }

/* ---- theme switch (View Transitions circular reveal) ---- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; clip-path: circle(0 at var(--tx, 50%) var(--ty, 50%)); }
html.bn-vt-run::view-transition-new(root) { animation: bn-vt-reveal .85s var(--bn-ease) both; }
@keyframes bn-vt-reveal { from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 50%)); } to { clip-path: circle(150vmax at var(--tx, 50%) var(--ty, 50%)); } }

/* ---- scroll-driven enhancements (progressive) ---- */
@supports (animation-timeline: view()) {
	.bn-bento__no, .bn-phase__no, .bn-pack__letter { animation: none; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
	.js [data-reveal], .js .bn-w > span { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
	.bn-hero__swoosh path { stroke-dashoffset: 0 !important; }
	.bn-marquee__row { overflow-x: auto; }
	.bn-marquee__track { animation: none !important; flex-wrap: wrap; white-space: normal; }
	.bn-marquee__track[aria-hidden="true"] { display: none; }
	.bn-statement .sw { opacity: 1 !important; }
	.bn-cursor { display: none !important; }
	.bn-phase { position: static; }
}