*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vh { height: calc(var(--vh, 1vh) * 100); }

/* reveal */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].in { opacity: 1; transform: none; }
/* Clip the children, not the observed element: a fully clipped target never reports as intersecting. */
.js [data-reveal="clip"] { opacity: 1; transform: none; transition: none; }
.js [data-reveal="clip"] > * { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); transition-delay: var(--d, 0s); }
.js [data-reveal="clip"].in > * { clip-path: inset(0 0 0 0); }

/* line-by-line headline reveal */
.js .lines > span { display: block; overflow: hidden; }
.js .lines > span > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.2s cubic-bezier(.2,.75,.1,1); transition-delay: var(--d, 0s); }
.js .lines.in > span > span { transform: none; }

/* parallax media */
.px { overflow: hidden; position: relative; }
.px > img, .px > picture > img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* marquee */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; width: max-content; animation: marquee var(--speed, 40s) linear infinite; }
.marquee__track > * { flex: none; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* slow hero zoom */
@keyframes slowzoom { from { transform: scale(1.14); } to { transform: scale(1); } }

/* horizontal scrollers */
.scroller { display: grid; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

/* mobile action bar */
.actionbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; text-decoration: none; font-weight: 600; letter-spacing: .02em; }
@media (min-width: 900px) { .actionbar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .marquee__track { animation: none !important; }
  .js [data-reveal], .js [data-reveal="clip"] > *, .js .lines > span > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
