/* Scroll polish: native scrolling with one lightweight visual rhythm. */
:root {
  --polish-progress: 0;
  --polish-speed: 0;
  --polish-ease: cubic-bezier(.18,.72,.18,1);
}

html {
  scrollbar-color: rgba(21,62,59,.58) transparent;
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(21,62,59,.58);
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover { background-color: rgba(21,62,59,.82); }

body.scroll-polish::after {
  content: "";
  position: fixed;
  z-index: 34;
  inset: -35vh -25vw;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--polish-glow-x,50%) 28%,
      rgba(255,255,255,.18), transparent 24%),
    linear-gradient(112deg,transparent 38%,rgba(255,255,255,.08) 48%,transparent 58%);
  mix-blend-mode: soft-light;
  opacity: var(--polish-overlay-opacity,.07);
  translate: 0 var(--polish-overlay-y,0);
  will-change: opacity,translate;
}

.progress {
  height: 4px;
  background: linear-gradient(90deg,#f69131 0%,#ffd87a 46%,#9dd9c3 100%);
  box-shadow: 0 0 12px rgba(246,145,49,.46);
  will-change: transform;
}

.header {
  transition:
    height .42s var(--polish-ease),
    background-color .42s ease,
    box-shadow .42s ease,
    backdrop-filter .42s ease;
}
.header.scrolled {
  background: rgba(250,249,242,.88);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 1px rgba(21,62,59,.1),0 12px 40px rgba(21,62,59,.055);
}

.scroll-chapter {
  position: relative;
  isolation: isolate;
}
.scroll-sheen {
  position: absolute;
  z-index: 18;
  inset: -25% -55%;
  pointer-events: none;
  background: linear-gradient(108deg,
    transparent 38%,
    rgba(255,255,255,.11) 47%,
    rgba(255,255,255,.035) 51%,
    transparent 60%);
  opacity: var(--polish-sheen-opacity,0);
  translate: var(--polish-sheen-x,-18%) 0;
  mix-blend-mode: soft-light;
  will-change: translate,opacity;
}

.scroll-polish [data-polish-media] {
  translate: 0 var(--polish-y,0px);
  will-change: translate;
}
.scroll-polish .story-photo > img,
.scroll-polish .field-demand-photo img,
.scroll-polish .evidence-photo img,
.scroll-polish .developer-person img,
.scroll-polish .wear-banner > img {
  scale: 1.035;
}
.scroll-polish .research-visual > img,
.scroll-polish .structure-display > img,
.scroll-polish .comfort-art img,
.scroll-polish .color-stage > img,
.scroll-polish .contact-hats img {
  translate: var(--polish-x,0px) var(--polish-y,0px);
}

.js.scroll-polish:not(.motion-off) .reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0,46px,0) scale(.987);
  transition:
    opacity .9s var(--polish-ease) var(--reveal-delay,0ms),
    transform 1.15s var(--polish-ease) var(--reveal-delay,0ms),
    filter 1s var(--polish-ease) var(--reveal-delay,0ms);
}
.js.scroll-polish:not(.motion-off) .reveal.visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0) scale(1);
}
.js.scroll-polish:not(.motion-off) .reveal:not(.visible) {
  will-change: opacity,transform,filter;
}

.scroll-polish .flow-bridge-inner,
.scroll-polish .section-top,
.scroll-polish .research-top {
  translate: 0 var(--polish-heading-y,0px);
  will-change: translate;
}

.scroll-polish .underline-link,
.scroll-polish .header-contact,
.scroll-polish .contact-button,
.scroll-polish .detail-trigger {
  transition:
    color .28s ease,
    background-color .28s ease,
    border-color .28s ease,
    transform .42s var(--polish-ease),
    box-shadow .42s var(--polish-ease);
}
.scroll-polish .header-contact:hover,
.scroll-polish .contact-button:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 28px rgba(21,62,59,.16);
}

@media (max-width:760px) {
  body.scroll-polish::after {
    inset: -25vh -70vw;
  }
  .scroll-sheen { mix-blend-mode: soft-light; }
  .js.scroll-polish:not(.motion-off) .reveal {
    filter: blur(4px);
    transform: translate3d(0,30px,0) scale(.992);
    transition-duration: .78s,.96s,.82s;
  }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  body.scroll-polish::after,
  .scroll-sheen { display: none; }
  .scroll-polish [data-polish-media],
  .scroll-polish .flow-bridge-inner,
  .scroll-polish .section-top,
  .scroll-polish .research-top {
    translate: none !important;
  }
  .js.scroll-polish .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}