/* Scroll UX — matsuri2026 scroll.css (adapted for teaser) */

:root {
  --scroll-theme-dur: 1.2s var(--ease-out);
  --scroll-reveal-dur: 1.4s;
}

html.is-smooth-scroll {
  --scroll-theme-dur: 1.6s var(--ease-out);
  --scroll-reveal-dur: 1.75s;
}

html.is-smooth-scroll {
  scroll-behavior: auto !important;
}

html.is-hash-jumping {
  scroll-behavior: auto !important;
}

html.is-hash-jumping [data-reveal] {
  transition: none !important;
}

body[data-theme="base"] {
  --scroll-fg: var(--fog);
  --scroll-dot-active: var(--accent-light);
}

body[data-theme="lift"] {
  --scroll-fg: var(--fog-muted);
  --scroll-dot-active: var(--accent);
}

body[data-theme] {
  transition: background-color var(--scroll-theme-dur), color var(--scroll-theme-dur);
}

.scroll-dots {
  position: fixed;
  inset-inline-end: clamp(0.9rem, 2.5vw, 1.75rem);
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 20;
  display: grid;
  gap: 0.8rem;
  pointer-events: auto;
}

.scroll-dots__item {
  display: block;
  inline-size: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--scroll-fg, var(--fog));
  background-color: transparent;
  opacity: 0.35;
  transition:
    opacity var(--scroll-theme-dur),
    background-color var(--scroll-theme-dur),
    border-color var(--scroll-theme-dur),
    scale 0.4s var(--ease-out);
}

.scroll-dots__item.is-active {
  opacity: 1;
  background-color: var(--scroll-dot-active, var(--accent-light));
  border-color: var(--scroll-dot-active, var(--accent-light));
  scale: 1.5;
}

@media (max-width: 640px) {
  .scroll-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-dots__item {
    transition: none !important;
  }
}