/* Series and Collection are scroll-led product scenes. CSS starts in the complete
   state so content remains understandable without JavaScript. */
.h-section.s3-series,
.h-section.s3-collection {
  position: relative;
  height: 210svh;
  padding: 0;
  overflow: visible;
  scroll-margin-top: 0;
}

.s3-series {
  --s3-series-progress: 1;
  --s3-core: 1;
  --s3-swap: 1;
  background: #e9e7f5;
}
.s3-series::before { content: none; }

.s3-collection {
  --s3-owned: 1;
  --s3-extra: 1;
  --s3-collection-progress: 1;
  background: #fff8f3;
}

.s3-sticky {
  position: sticky;
  top: 0;
  display: flex;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.s3-series .s3-sticky {
  background:
    radial-gradient(ellipse 45% 65% at 82% 38%, #fbdfe8a8, transparent 80%),
    radial-gradient(ellipse 40% 65% at 7% 85%, #d2d6f9, transparent 80%),
    #e9e7f5;
}

.s3-collection .s3-sticky {
  background:
    radial-gradient(ellipse 39% 55% at 23% 49%, #eee6fc, transparent 82%),
    radial-gradient(ellipse 50% 70% at 88% 85%, #fce4e5, transparent 83%),
    #fff8f3;
}

.s3-series .s3-sticky::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#fff7 1px, transparent 1px), linear-gradient(90deg, #fff7 1px, transparent 1px);
  background-size: 84px 84px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 85%, transparent);
  opacity: .34;
  pointer-events: none;
}

.s3-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: clamp(98px, 13.5vh, 130px) 0 24px;
}

.s3-topline,
.s3-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #5d6880;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.s3-topline {
  padding-bottom: 11px;
  border-bottom: 1px solid #38426834;
}

.s3-bottomline {
  min-height: 42px;
  border-top: 1px solid #38426834;
}

.s3-bottomline > span:first-child { color: #3f4e6c; }
.s3-bottomline > span:last-child { font-size: 9px; white-space: nowrap; }
.s3-progress { width: min(20vw, 200px); height: 2px; background: #263c6933; }
.s3-progress i { display: block; height: 100%; width: 100%; background: #335da5; transform: scaleX(var(--s3-series-progress, var(--s3-collection-progress))); transform-origin: left; }

.s3-main {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: center;
  flex: 1;
  min-height: 0;
  gap: clamp(28px, 4vw, 70px);
}

.s3-copy { position: relative; z-index: 2; max-width: 530px; }
.s3-copy h2 {
  margin: 0 0 27px;
  font-size: clamp(4rem, 5.6vw, 6.5rem);
  line-height: .99;
  letter-spacing: -.078em;
}
.s3-copy h2 em { color: #66749f; }
.s3-copy > p:not(.h-a11y-story) { max-width: 420px; margin: 0; color: #53617a; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.65; }

.s3-narrative {
  position: relative;
  height: 24px;
  margin-top: 33px;
  padding-left: 18px;
  border-left: 2px solid #6284bd;
  color: #334f82;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.s3-narrative span { position: absolute; top: 5px; left: 18px; white-space: nowrap; }
.s3-narrative-first { opacity: calc(1 - var(--s3-swap)); }
.s3-narrative-full { opacity: var(--s3-swap); }

.s3-series-field {
  position: relative;
  height: clamp(360px, 58vh, 540px);
  min-width: 0;
}
.s3-series-field::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80%, 550px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9f3b8, #ffffff13 65%, transparent 73%);
  content: "";
  transform: translate(-50%, -50%);
}
.s3-series-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid #ffffffb5; border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.s3-series-orbit-one { width: 87%; height: 80%; }
.s3-series-orbit-two { width: 64%; height: 106%; transform: translate(-50%, -50%) rotate(23deg); opacity: .65; }
.s3-series-core {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #52648a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1.55;
  text-align: center;
  opacity: var(--s3-core);
  transform: translate(-50%, -50%);
}
.s3-specimen {
  --s3-p: 1;
  position: absolute;
  z-index: 1;
  width: clamp(104px, 12vw, 158px);
  aspect-ratio: 1;
  border: 4px solid #fffaf7;
  border-radius: 50%;
  background: #dddbe8;
  box-shadow: 0 0 0 9px #ffffff40, 0 22px 45px #343e7552;
  opacity: calc(.13 + .87 * var(--s3-p));
  transform: translate(-50%, -50%) translateY(calc((1 - var(--s3-p)) * 42px)) scale(calc(.72 + .28 * var(--s3-p)));
  filter: saturate(calc(.45 + .55 * var(--s3-p)));
  will-change: transform, opacity;
}
.s3-specimen .h-figure-portrait { overflow: hidden; border-radius: 50%; }
.s3-specimen small {
  position: absolute;
  right: -7px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #253e70;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .03em;
}
.s3-specimen-0 { top: 25%; left: 17%; }
.s3-specimen-1 { top: 22%; left: 50%; }
.s3-specimen-2 { top: 25%; left: 83%; }
.s3-specimen-3 { top: 75%; left: 17%; }
.s3-specimen-4 { top: 78%; left: 50%; }
.s3-specimen-5 { top: 75%; left: 83%; }

.s3-collection .s3-main { grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); }
.s3-collection .s3-copy { grid-column: 2; grid-row: 1; }
.s3-collection .s3-collection-field { grid-column: 1; grid-row: 1; }
.s3-collection .h-figure-portrait { background-image: url('/assets/woodland-figures-matte.webp'); }

.s3-collection-field {
  --s3-main-size: clamp(190px, 19vw, 260px);
  position: relative;
  height: clamp(390px, 56vh, 520px);
  min-width: 0;
}
.s3-collection-halo {
  position: absolute;
  top: 37%;
  left: 50%;
  width: min(85%, 500px);
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf97c, #eadff361 48%, transparent 68%);
  box-shadow: 0 0 0 58px #ffffff28, 0 0 0 116px #ffffff19;
  transform: translate(-50%, -50%) scale(calc(.82 + .18 * var(--s3-collection-progress)));
}
.s3-copy-figure {
  position: absolute;
  top: 37%;
  left: 50%;
  width: var(--s3-main-size);
  aspect-ratio: 1;
  border: 5px solid #fffaf6;
  border-radius: 50%;
  background: #eddfd9;
  box-shadow: 0 0 0 8px #ffffff70, 0 24px 45px #7046633b;
  transform: translate(-50%, -50%);
}
.s3-copy-figure .h-figure-portrait { border-radius: 50%; }
.s3-copy-figure small {
  position: absolute;
  top: calc(100% + 17px);
  left: 50%;
  color: #394b69;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.s3-copy-main { z-index: 3; }
.s3-copy-main::after {
  position: absolute;
  inset: -5px;
  border: 2px dashed #728caf;
  border-radius: 50%;
  content: "";
  opacity: calc(1 - var(--s3-owned));
}
.s3-copy-main .h-figure-portrait { opacity: calc(.34 + .66 * var(--s3-owned)); filter: grayscale(calc(1 - var(--s3-owned))); }
.s3-copy-extra {
  z-index: 2;
  width: calc(var(--s3-main-size) * .72);
  opacity: var(--s3-extra);
  transform: translate(-50%, -50%) translateY(calc((1 - var(--s3-extra)) * 46px)) scale(calc(.65 + .35 * var(--s3-extra)));
  will-change: transform, opacity;
}
.s3-copy-extra-one { left: 22%; z-index: 1; }
.s3-copy-extra-two { left: 78%; }
.s3-copy-extra small { top: calc(100% + 24px); color: #627087; }

.s3-collection-readout {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
  border-top: 1px solid #43557438;
}
.s3-collection-total { display: flex; align-items: end; gap: 10px; }
.s3-collection-total strong { font-size: clamp(4rem, 6.3vw, 6rem); font-weight: 760; letter-spacing: -.09em; line-height: 1; font-variant-numeric: tabular-nums; }
.s3-collection-total span { padding-bottom: 10px; color: #5b6982; font-size: 9px; font-weight: 800; letter-spacing: .12em; line-height: 1.4; }
.s3-collection-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding-bottom: 10px; }
.s3-collection-status span { padding: 7px 9px; border: 1px solid #ffffffa8; border-radius: 999px; background: #ffffffb7; color: #495974; font-size: 10px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.s3-collection-status b { color: #152e5b; font-weight: 900; }
.s3-collection .s3-bottomline > span:first-child { font-size: 11px; font-weight: 650; letter-spacing: .02em; text-transform: none; }

@media (max-width: 900px) {
  .s3-shell { padding-top: 93px; }
  .s3-copy h2 { font-size: clamp(3.6rem, 6vw, 5rem); }
  .s3-specimen { width: clamp(102px, 14vw, 138px); }
  .s3-collection-field { --s3-main-size: clamp(185px, 23vw, 225px); }
}

@media (max-width: 720px) {
  .h-section.s3-series,
  .h-section.s3-collection { height: 310svh; }
  .s3-shell { padding: 79px 0 14px; }
  .s3-main,
  .s3-collection .s3-main { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; }
  .s3-copy,
  .s3-collection .s3-copy { width: 100%; max-width: none; }
  .s3-copy h2 { margin-bottom: 13px; font-size: clamp(3rem, 10.9vw, 4.45rem); }
  .s3-copy > p:not(.h-a11y-story) { max-width: 580px; font-size: 13px; line-height: 1.52; }
  .s3-narrative { height: 19px; margin-top: 15px; font-size: 10px; }
  .s3-narrative span { top: 3px; }
  .s3-series-field { height: clamp(330px, 47svh, 425px); margin-top: 9px; }
  .s3-specimen { width: clamp(80px, 27vw, 113px); border-width: 3px; box-shadow: 0 0 0 5px #ffffff50, 0 13px 24px #343e7542; }
  .s3-specimen small { right: -5px; width: 24px; height: 24px; font-size: 9px; }
  .s3-series-core { font-size: 9px; }
  .s3-collection .s3-copy,
  .s3-collection .s3-collection-field { grid-column: auto; grid-row: auto; }
  .s3-collection-field { --s3-main-size: clamp(174px, 50vw, 215px); height: clamp(370px, 47svh, 430px); margin-top: 0; }
  .s3-copy-main { top: 30%; }
  .s3-copy-extra { top: 53%; }
  .s3-copy-extra small { top: calc(100% + 18px); }
  .s3-collection-readout { min-height: 72px; }
  .s3-collection-total strong { font-size: 4.4rem; }
  .s3-collection-status { max-width: 225px; }
  .s3-bottomline { min-height: 39px; }
  .s3-bottomline > span:last-child { font-size: 8px; }
  .s3-progress { display: none; }
}

@media (max-width: 380px) {
  .s3-shell { padding-top: 79px; }
  .s3-copy h2 { font-size: 2.9rem; }
  .s3-copy > p:not(.h-a11y-story) { font-size: 12px; }
  .s3-series-field { height: 335px; }
  .s3-specimen { width: 78px; }
  .s3-collection-field { --s3-main-size: 174px; height: 370px; }
  .s3-copy-extra { width: calc(var(--s3-main-size) * .67); }
  .s3-collection-status span { padding: 6px 7px; font-size: 9px; }
  .s3-bottomline { gap: 8px; }
  .s3-bottomline > span:first-child { font-size: 9px; }
  .s3-bottomline > span:last-child { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-section.s3-series,
  .h-section.s3-collection { height: auto; }
  .s3-sticky { position: relative; height: auto; min-height: 760px; }
  .s3-shell { min-height: 760px; }
  .s3-specimen,
  .s3-copy-extra { will-change: auto; }
}

@media (max-width: 640px) and (max-height: 700px) and (prefers-reduced-motion: no-preference) {
  .s3-shell { padding: 70px 0 8px; }
  .s3-topline { padding-bottom: 5px; font-size: 8px; }
  .s3-copy h2 { margin-bottom: 6px; font-size: clamp(2.3rem, 10vw, 2.7rem); }
  .s3-copy > p:not(.h-a11y-story) { font-size: 10px; line-height: 1.35; }
  .s3-narrative { height: 14px; margin-top: 6px; font-size: 8px; }
  .s3-narrative span { top: 1px; }
  .s3-series-field { height: clamp(220px, 45svh, 270px); margin-top: 0; }
  .s3-collection-field { --s3-main-size: 140px; height: clamp(216px, 43svh, 255px); margin-top: 0; }
  .s3-copy-main,
  .s3-copy-extra { top: 34%; }
  .s3-copy-extra small { top: calc(100% + 14px); }
  .s3-collection-readout { min-height: 54px; gap: 7px; }
  .s3-collection-total strong { font-size: 3rem; }
  .s3-collection-total span { padding-bottom: 3px; font-size: 7px; }
  .s3-collection-status { max-width: 195px; gap: 4px; padding-bottom: 3px; }
  .s3-collection-status span { padding: 4px 5px; font-size: 8px; }
  .s3-bottomline { min-height: 31px; }
}