/* Scrollsmith
   Nothing is hidden until JS confirms it is running (html.ss-on). */

/* ============ ENTER ============ */
html.ss-on [data-anim] {
  --ss-dur: 900ms; --ss-delay: 0ms; --ss-dist: 40px; --ss-ease: cubic-bezier(.16,1,.3,1);
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--ss-dur);
  transition-delay: var(--ss-delay);
  transition-timing-function: var(--ss-ease);
  will-change: opacity, transform;
}
html.ss-on [data-anim="fade"]:not(.ss-in)        { opacity: 0; }
html.ss-on [data-anim="fade-up"]:not(.ss-in)     { opacity: 0; transform: translate3d(0, var(--ss-dist), 0); }
html.ss-on [data-anim="fade-down"]:not(.ss-in)   { opacity: 0; transform: translate3d(0, calc(var(--ss-dist) * -1), 0); }
html.ss-on [data-anim="fade-left"]:not(.ss-in)   { opacity: 0; transform: translate3d(var(--ss-dist), 0, 0); }
html.ss-on [data-anim="fade-right"]:not(.ss-in)  { opacity: 0; transform: translate3d(calc(var(--ss-dist) * -1), 0, 0); }
html.ss-on [data-anim="scale"]:not(.ss-in)       { opacity: 0; transform: scale(.92); }
html.ss-on [data-anim="scale-up"]:not(.ss-in)    { opacity: 0; transform: translate3d(0, calc(var(--ss-dist) * .6), 0) scale(.92); }
html.ss-on [data-anim="blur-up"]:not(.ss-in)     { opacity: 0; transform: translate3d(0, calc(var(--ss-dist) * .7), 0); filter: blur(8px); }
html.ss-on [data-anim="clip-up"]:not(.ss-in)     { clip-path: inset(100% 0 0 0); transform: translate3d(0, calc(var(--ss-dist) * .4), 0); }
html.ss-on [data-anim="clip-down"]:not(.ss-in)   { clip-path: inset(0 0 100% 0); }
html.ss-on [data-anim="clip-left"]:not(.ss-in)   { clip-path: inset(0 100% 0 0); }
html.ss-on [data-anim="clip-right"]:not(.ss-in)  { clip-path: inset(0 0 0 100%); }
html.ss-on [data-anim="rotate-up"]:not(.ss-in)   { opacity: 0; transform: translate3d(0, var(--ss-dist), 0) rotate(2deg); transform-origin: left bottom; }
html.ss-on [data-anim="flip-up"]:not(.ss-in)     { opacity: 0; transform: perspective(800px) rotateX(-18deg) translate3d(0, calc(var(--ss-dist) * .5), 0); transform-origin: center top; }
html.ss-on [data-anim].ss-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); will-change: auto; }

/* Split text units inherit the enter variant; lines clip for a mask reveal */
/* words and chars are inline-block so transforms apply; whitespace between them is preserved by real text nodes */
html.ss-on .ss-split .ss-word,
html.ss-on .ss-split .ss-char { display: inline-block; }
html.ss-on .ss-split-lines .ss-word { display: inline-block; }
/* line mode: each line clips its content so words rise into a mask */
html.ss-on .ss-split-lines .ss-line { display: block; overflow: hidden; padding-bottom: .06em; }
html.ss-on .ss-split-lines .ss-line.ss-unit[data-anim="fade-up"]:not(.ss-in),
html.ss-on .ss-split-lines .ss-line.ss-unit[data-anim="clip-up"]:not(.ss-in) { opacity: 1; }
html.ss-on .ss-split-lines .ss-line.ss-unit[data-anim="fade-up"]:not(.ss-in) .ss-word { transform: translate3d(0, 115%, 0); transition: transform var(--ss-dur) var(--ss-ease); }
html.ss-on .ss-split-lines .ss-line.ss-unit.ss-in .ss-word { transform: none; }

/* ============ SCRUB (driven by --ss-p, 0 to 1) ============ */
html.ss-on .ss-scrub, html.ss-on .ss-expand, html.ss-on .ss-collapse, html.ss-on .ss-shrink { --ss-p: 0; --ss-dist: 60px; will-change: transform, opacity; }

html.ss-on [data-scrub="fade"]        { opacity: var(--ss-p); }
html.ss-on [data-scrub="fade-up"]     { opacity: var(--ss-p); transform: translate3d(0, calc(var(--ss-dist) * (1 - var(--ss-p))), 0); }
html.ss-on [data-scrub="fade-down"]   { opacity: var(--ss-p); transform: translate3d(0, calc(var(--ss-dist) * (var(--ss-p) - 1)), 0); }
html.ss-on [data-scrub="fade-left"]   { opacity: var(--ss-p); transform: translate3d(calc(var(--ss-dist) * (1 - var(--ss-p))), 0, 0); }
html.ss-on [data-scrub="fade-right"]  { opacity: var(--ss-p); transform: translate3d(calc(var(--ss-dist) * (var(--ss-p) - 1)), 0, 0); }
html.ss-on [data-scrub="scale"]       { opacity: var(--ss-p); transform: scale(calc(.85 + .15 * var(--ss-p))); }
html.ss-on [data-scrub="blur"]        { opacity: var(--ss-p); filter: blur(calc(10px * (1 - var(--ss-p)))); }
html.ss-on [data-scrub="rotate"]      { opacity: var(--ss-p); transform: translate3d(0, calc(var(--ss-dist) * (1 - var(--ss-p))), 0) rotate(calc(3deg * (1 - var(--ss-p)))); transform-origin: left bottom; }
html.ss-on [data-scrub="clip-up"]     { clip-path: inset(calc(100% * (1 - var(--ss-p))) 0 0 0); }

html.ss-on [data-expand="height"]     { transform: scaleY(var(--ss-p)); transform-origin: top; }
html.ss-on [data-expand="width"]      { transform: scaleX(var(--ss-p)); transform-origin: left; }
html.ss-on [data-expand="scale"]      { transform: scale(var(--ss-p)); }
html.ss-on [data-expand="clip"]       { clip-path: inset(calc(50% * (1 - var(--ss-p))) calc(50% * (1 - var(--ss-p))) round calc(24px * (1 - var(--ss-p)))); }

html.ss-on [data-collapse="height"]   { transform: scaleY(calc(1 - var(--ss-p))); transform-origin: top; opacity: calc(1 - var(--ss-p)); }
html.ss-on [data-collapse="width"]    { transform: scaleX(calc(1 - var(--ss-p))); transform-origin: left; opacity: calc(1 - var(--ss-p)); }
html.ss-on [data-collapse="scale"]    { transform: scale(calc(1 - .5 * var(--ss-p))); opacity: calc(1 - var(--ss-p)); }
html.ss-on [data-collapse="clip"]     { clip-path: inset(calc(50% * var(--ss-p)) calc(50% * var(--ss-p)) round calc(24px * var(--ss-p))); }

html.ss-on [data-shrink] {
  --ss-shrink: .12; --ss-radius: 32px;
  transform: scale(calc(1 - var(--ss-shrink) * var(--ss-p)));
  border-radius: calc(var(--ss-radius) * var(--ss-p));
  overflow: hidden;
  transform-origin: center top;
}

/* Scrubbed split text: each unit lights up in turn as --ss-p rises */
html.ss-on .ss-split-scrub .ss-word,
html.ss-on .ss-split-scrub .ss-char { opacity: clamp(.15, calc(var(--ss-p) * (var(--ss-n) + 2) - var(--ss-i)), 1); transition: none; }

/* ============ STACK ============ */
html.ss-on [data-stack] { --ss-stack-top: 8vh; --ss-stack-scale: .06; }
html.ss-on .ss-stack-card {
  --ss-p: 0;
  position: sticky;
  top: var(--ss-stack-top);
  transform: scale(calc(1 - var(--ss-stack-scale) * var(--ss-p)));
  filter: brightness(calc(1 - .25 * var(--ss-p)));
  transform-origin: center top;
  will-change: transform;
}

/* ============ HORIZONTAL ============ */
/* Desktop: section grows tall, first child pins, track slides */
html.ss-on .ss-h-pin { position: relative; }
html.ss-on .ss-h-pin > .ss-h-view { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; align-items: center; }
html.ss-on .ss-h-pin .ss-h-track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; }

/* Touch / narrow: native swipe row with snap. Also used when JS is off. */
.ss-h-snap .ss-h-view { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ss-h-snap .ss-h-view::-webkit-scrollbar { display: none; }
.ss-h-snap .ss-h-track { display: flex; flex-wrap: nowrap; width: max-content; }
.ss-h-snap .ss-h-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.ss-h-stack .ss-h-track { display: flex; flex-direction: column; }

/* ============ PIN ============ */
html.ss-on .ss-pin { position: sticky; top: var(--ss-pin-top, 0px); }

/* ============ MARQUEE ============ */
.ss-marquee { overflow: hidden; white-space: nowrap; --ss-marquee-dur: 20s; --ss-marquee-dir: normal; }
.ss-marquee .ss-marquee-track { display: flex; width: max-content; animation: ss-marquee var(--ss-marquee-dur) linear infinite; animation-direction: var(--ss-marquee-dir); will-change: transform; }
.ss-marquee .ss-marquee-group { display: flex; flex: 0 0 auto; align-items: center; }
.ss-marquee-pause:hover .ss-marquee-track { animation-play-state: paused; }
@keyframes ss-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(calc(var(--ss-marquee-w) * -1), 0, 0); } }

/* ============ PROGRESS ============ */
html.ss-on [data-progress] { --ss-p: 0; transform: scaleX(var(--ss-p)); transform-origin: left center; will-change: transform; }

/* ============ COLOR SWAP ============ */
/* JS sets background-color inline and --ss-text on the section; text elements inside pick it up. */
html.ss-on .ss-colorswap { --ss-text: inherit; transition: none; }
html.ss-on .ss-colorswap,
html.ss-on .ss-colorswap :where(h1,h2,h3,h4,h5,h6,p,span,a,li,blockquote,strong,em,small,label,figcaption,div) {
  color: var(--ss-text);
}

/* ============ PARALLAX ============ */
html.ss-on [data-parallax] { will-change: transform; }

/* ============ OFF STATES ============ */
html.ss-no-enter [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-anim], .ss-scrub, .ss-expand, .ss-collapse, [data-shrink], [data-parallax], .ss-stack-card, .ss-split .ss-word, .ss-split .ss-char {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important;
  }
  .ss-marquee .ss-marquee-track { animation: none !important; }
  [data-progress] { transform: none !important; }
}
html.ss-off [data-anim], html.ss-off [data-scrub], html.ss-off [data-expand], html.ss-off [data-collapse], html.ss-off [data-shrink] {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important;
}