/* Full-screen slides with scroll snapping (homepage and 3D-belevingen).
   slides.js marks the slide on screen with .is-active and fires `slidechange`.
   Pages opt in with <html class="snap-page js-slides"> and .slide sections. */
html.snap-page { scroll-snap-type: y mandatory; }
/* The slide dots are the navigation here, so the scrollbar is hidden.
   Scrolling (wheel, touch, keyboard) keeps working. */
html.snap-page { scrollbar-width: none; }
html.snap-page::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { html.snap-page { scroll-behavior: smooth; } }
.snap-page .site-header { position: fixed; top: 0; left: 0; right: 0; }
.slide { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-height, 84px) + 28px) 0 44px; overflow-x: clip; scroll-snap-align: start; scroll-snap-stop: always; transition: padding .6s cubic-bezier(.2,.75,.25,1); }
.slide > .container { width: 89%; }
.studio-page .slide h2 { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.06; }

/* Content appears when its slide arrives, and leaves when it goes. The
   first slide is shown straight away: it should never wait for a script. */
.js-slides .reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.js-slides .slide:not(.is-active):not(#start) .reveal { opacity: 0; transform: translateY(26px); transition-duration: .3s; transition-delay: 0s; }

.slide-dots { position: fixed; z-index: 900; top: 50%; right: 18px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-50%); }
.slide-dots a { display: grid; place-items: center; width: 22px; height: 22px; }
.slide-dots span { display: block; width: 7px; height: 7px; border-radius: 4px; background: #8b958b; opacity: .65; transition: height .35s cubic-bezier(.2,.75,.25,1), background .3s, opacity .3s; }
.slide-dots a:hover span { opacity: 1; }
.slide-dots a[aria-current] span { height: 20px; background: var(--studio-green); opacity: 1; }

/* Light slides: green, black and white. */
.slide--light { background: #f4f6f2; color: #0d140f; color-scheme: light; --studio-text: #0d140f; --studio-muted: #4b564c; --studio-line: #d9e0d5; }
.studio-page .slide--light .eyebrow { color: #178c05; }
.studio-page .slide--light h1 span, .studio-page .slide--light h2 span { color: inherit; background: linear-gradient(180deg, transparent 60%, #30ff0b 60%, #30ff0b 90%, transparent 90%); padding-inline: .06em; }

/* Live indicator: a ring that grows and fades (transform/opacity only). */
.live-dot { position: relative; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--studio-green); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--studio-green); opacity: .5; animation: live-ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
.js-slides .slide:not(.is-active) .live-dot::after { animation: none; opacity: 0; }
.eyebrow .live-dot { margin-right: 10px; vertical-align: 1px; }
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* "Scroll" pill at the bottom of a first slide. */
.scroll-cue { position: absolute; left: 50%; bottom: 26px; display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 16px; border: 1px solid var(--studio-line); border-radius: 999px; background: #0b120dcc; color: #c9ccc9; font-size: 14px; white-space: nowrap; transform: translateX(-50%); transition: border-color .2s, background .2s; }
.scroll-cue strong { color: #8fff74; font-weight: 600; }
.scroll-cue:hover { border-color: #30ff0b; }
.slide--light .scroll-cue { border-color: #0d140f; background: #0d140f; color: #e6ebe5; }
.slide--light .scroll-cue strong { color: #30ff0b; }
.slide--light .scroll-cue:hover { background: #1a241c; }
.scroll-cue-arrow { width: 9px; height: 9px; margin: -4px 0 0 2px; border-right: 2px solid var(--studio-green); border-bottom: 2px solid var(--studio-green); transform: rotate(45deg); animation: cue-bob 1.6s ease-in-out infinite; }
@keyframes cue-bob { 50% { translate: 0 4px; } }

@media (max-width: 900px) {
    .slide { padding-top: calc(var(--header-height, 100px) + 20px); padding-bottom: 32px; }
}
@media (max-width: 640px) {
    .slide-dots { display: none; }
    .scroll-cue { bottom: 16px; padding: 9px 14px; font-size: 12px; gap: 9px; }
    .studio-page .slide h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .js-slides .reveal, .slide { transition: none; }
    .live-dot::after, .scroll-cue-arrow { animation: none; }
}