/* ==========================================================================
   Scroll scenes (assets/js/scenes.js).
   Base styles are the static fallback (no JS / reduced motion); the
   .scenes-on class on <html> switches on the scroll-driven versions.
   ========================================================================== */

/* ------------------------------------------- Dot-to-fullscreen scene */
.zoom-scene { position: relative; background: var(--accent); }
.zoom-stage { position: relative; overflow: hidden; display: grid; place-items: center; padding-block: clamp(5rem, 14vw, 9rem); }
.zoom-dot, .zoom-hint { display: none; }
.zoom-copy { position: relative; z-index: 1; width: min(100% - 2.5rem, 1100px); text-align: center; }
.zoom-kicker {
    margin-bottom: 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c7d3f3;
}
.zoom-text {
    margin-inline: auto;
    max-width: 17ch;
    color: #fff;
    font-size: clamp(2.1rem, 5.8vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.zoom-text em.accent { font-style: normal; color: #c7d3f3; }

.scenes-on .zoom-scene { height: 320vh; background: var(--bg); }
.scenes-on .zoom-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 0;
}
.scenes-on .zoom-dot {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
    will-change: transform;
}
.scenes-on .zoom-dot::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    animation: zoom-ping 2.2s var(--ease) infinite;
}
/* the dot is now full-size and scaled down: hide the ring once it starts growing */
.scenes-on .zoom-dot::after { inset: 0; }
@keyframes zoom-ping { 0% { transform: scale(0.7); opacity: 0.8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.scenes-on .zoom-hint {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(50% + 46px);
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.scenes-on .zoom-kicker { opacity: 0; }
.scenes-on .zoom-text .zw { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }

/* ------------------------------------------------ Hero parallax exit */
.scenes-on .hero--studio .hero-title,
.scenes-on .hero--studio .hero-copy,
.scenes-on .hero--studio .hero-art,
.scenes-on .hero--studio .hero-grid { will-change: translate, opacity; }

/* --------------------------------------- Scale-in blocks on scroll */
.scenes-on [data-scene-scale] { will-change: scale; transform-origin: 50% 100%; }
.scenes-on .zoom-dot::after { display: none; }