/* Homepage campaign: gloss hero, marquee bands, color-blocked sections, and scroll choreography. */

.section-cinematic-hero {
  position: relative;
  z-index: 3;
}

.section-gloss-marquee {
  overflow-x: clip;
  position: relative;
  z-index: 4;
}

/* The sculpture drips over the next section's background but passes behind its words and products. */
.section-cinematic-hero ~ .shopify-section .section-shell {
  position: relative;
  z-index: 5;
}

/* Once the hero scrolls away the sculpture is scenery: its controls step aside. */
[data-scrolled="true"] .gloss-stage--hero .gloss-stage__controls,
[data-scrolled="true"] .gloss-stage--hero .gloss-stage__hint,
[data-scrolled="true"] .gloss-stage--hero .gloss-stage__grab {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ---------- Hero ---------- */

.cinematic-hero {
  --hero-header: 4.25rem;
  --hero-gutter: 1rem;
  --disc: min(70vw, 20rem);
  --disc-x: 57%;
  --disc-y: calc(100% - var(--disc) * 0.5 - 5.5rem);
  --drift: 5svh;
  --out: 0;
  background:
    radial-gradient(circle at 1px 1px, rgb(0 0 0 / 16%) 1.5px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
  color: var(--fg);
  isolation: isolate;
  overflow-x: clip;
  position: relative;
}

.cinematic-hero__disc {
  background: var(--color-white);
  border: var(--border);
  border-radius: 50%;
  box-shadow: calc(var(--lift) * 1.5) calc(var(--lift) * 1.5) 0 var(--color-ink);
  block-size: var(--disc);
  inline-size: var(--disc);
  inset-block-start: var(--disc-y);
  inset-inline-start: var(--disc-x);
  position: absolute;
  scale: calc(1 + var(--out) * 0.18);
  translate: -50% -50%;
  z-index: 0;
}

.scheme-white > .cinematic-hero__disc {
  background: var(--color-blush);
}

.cinematic-hero__inner {
  margin-inline: auto;
  max-inline-size: 84rem;
  padding: 1.25rem var(--hero-gutter) calc(var(--disc) + 4.5rem);
  /* The words and the button always sit above the sculpture, and the empty
     parts of this box let pointer and touch input through to it. */
  pointer-events: none;
  position: relative;
  z-index: 3;
}

.cinematic-hero__copy > * {
  pointer-events: auto;
}

.cinematic-hero__copy {
  align-items: start;
  display: grid;
  justify-items: start;
}

.cinematic-hero__eyebrow {
  --sticker-bg: var(--color-hot-pink);
  margin-block-end: 0.9rem;
  rotate: -3deg;
}

.cinematic-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 23.5vw, 9rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.8;
  margin: 0;
  max-inline-size: 3.9em;
  translate: 0 calc(var(--out) * -2.5rem);
}

.cinematic-hero__word {
  display: inline-block;
  transform-origin: 0 100%;
}

.cinematic-hero__supporting {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 1rem 0 0;
  max-inline-size: 21rem;
  position: relative;
  z-index: 3;
}

.cinematic-hero__cta {
  margin-block-start: 1.1rem;
  position: relative;
  z-index: 3;
}

.cinematic-hero__sticker {
  position: absolute;
  z-index: 3;
}

.cinematic-hero__sticker--one {
  --sticker-bg: var(--color-hot-pink);
  inset-block-start: calc(var(--disc-y) - var(--disc) * 0.6);
  inset-inline-start: calc(var(--disc-x) + var(--disc) * 0.2);
  inline-size: 5.75rem;
  font-size: 1.05rem;
  rotate: 12deg;
}

.cinematic-hero__sticker--two {
  --sticker-bg: var(--color-white);
  inset-block-start: calc(var(--disc-y) + var(--disc) * 0.3);
  inset-inline-start: calc(var(--disc-x) + var(--disc) * 0.02);
  rotate: 7deg;
}

/* Optional merchant campaign card */
.cinematic-hero__media {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--lift) var(--lift) 0 var(--shadow-color, var(--color-ink));
  inline-size: clamp(7rem, 30vw, 15rem);
  inset-block-start: calc(var(--disc-y) - var(--disc) * 0.62);
  inset-inline-start: calc(var(--disc-x) + var(--disc) * 0.2);
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  rotate: 6deg;
  z-index: 1;
}

.cinematic-hero__desktop-media,
.cinematic-hero__mobile-fallback,
.cinematic-hero__media picture {
  display: block;
}

.cinematic-hero__mobile-fallback {
  display: block;
}

.cinematic-hero__desktop-media {
  display: none;
}

.cinematic-hero__asset {
  aspect-ratio: 4 / 5;
  block-size: auto;
  inline-size: 100%;
  object-fit: cover;
}

/* ---------- Gloss stage ---------- */

.gloss-stage {
  aspect-ratio: 1;
  pointer-events: none;
  position: absolute;
}

.gloss-stage--hero {
  inline-size: calc(var(--disc) * 1.9);
  inset-block-start: calc(var(--disc-y) - var(--disc) * 0.95);
  inset-inline-start: calc(var(--disc-x) - var(--disc) * 0.95);
  scale: calc(1 - var(--out) * 0.12);
  translate: 0 calc(var(--out) * var(--drift));
  z-index: 2;
}

.gloss-stage__poster,
.gloss-stage__canvas {
  inset: 0;
  position: absolute;
}

.gloss-stage__poster {
  block-size: 100%;
  inline-size: 100%;
  object-fit: contain;
  transition: opacity 500ms linear;
}

.gloss-stage__canvas {
  block-size: 100%;
  inline-size: 100%;
  opacity: 0;
  transition: opacity 500ms linear;
}

.gloss-stage[data-rendered="true"] .gloss-stage__canvas {
  opacity: 1;
}

.gloss-stage[data-rendered="true"] .gloss-stage__poster {
  opacity: 0;
}

.gloss-stage__grab {
  border-radius: 50%;
  cursor: grab;
  inset: 22%;
  pointer-events: auto;
  position: absolute;
  touch-action: pan-y;
}

.gloss-stage__grab:active {
  cursor: grabbing;
}

.gloss-stage__grab[hidden] {
  display: none;
}

.gloss-stage__controls {
  align-items: center;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-pill);
  box-shadow: 4px 4px 0 var(--color-ink);
  display: flex;
  gap: 0.25rem;
  inset-block-start: 75%;
  inset-inline-start: 36%;
  padding: 0.25rem;
  pointer-events: auto;
  position: absolute;
  translate: -50% 0;
  z-index: 4;
}

.gloss-stage__controls[hidden],
.gloss-stage__hint[hidden] {
  display: none;
}

.gloss-stage__button,
.gloss-stage__swatch {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  block-size: 2.75rem;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  inline-size: 2.75rem;
  justify-content: center;
  padding: 0;
  position: relative;
}

.gloss-stage__button svg {
  block-size: 1.35rem;
  inline-size: 1.35rem;
}

.gloss-stage__button:hover {
  background: var(--color-blush);
}

.gloss-stage__button:active {
  background: var(--color-hot-pink);
}

.gloss-stage__divider {
  background: var(--color-ink);
  block-size: 1.5rem;
  inline-size: 2px;
  margin-inline: 0.15rem;
}

.gloss-stage__swatch::before {
  background: var(--swatch);
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  block-size: 1.6rem;
  content: '';
  inline-size: 1.6rem;
  transition: scale 200ms var(--motion-spring);
}

.gloss-stage__swatch[data-gloss-finish="chrome"]::before {
  background: var(--chrome-sheen);
}

.gloss-stage__swatch[aria-pressed="true"]::before {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4.5px var(--color-ink);
  scale: 0.82;
}

.gloss-stage__hint {
  --sticker-bg: var(--color-white);
  font-size: 0.85rem;
  inset-block-start: 63%;
  inset-inline-start: 10%;
  pointer-events: none;
  position: absolute;
  rotate: -8deg;
  transition: opacity 300ms linear, scale 300ms var(--motion-spring);
  z-index: 4;
}

.gloss-stage[data-touched="true"] .gloss-stage__hint {
  opacity: 0;
  scale: 0.6;
}

/* Opening sequence. Pure CSS, and nothing that matters starts invisible: the headline,
   copy, button, and sculpture are on screen from the first frame and settle into place.
   Only the stickers and the sculpture controls pop in afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .cinematic-hero__word {
    animation: hero-word 700ms var(--motion-spring) both;
    animation-delay: calc(var(--i) * 70ms);
  }

  .cinematic-hero__disc {
    animation: hero-disc 700ms var(--motion-spring) both;
  }

  .gloss-stage--hero .gloss-stage__poster,
  .gloss-stage--hero .gloss-stage__canvas {
    animation: hero-sculpture 900ms var(--motion-spring) 80ms both;
  }

  .cinematic-hero__supporting,
  .cinematic-hero__cta {
    animation: hero-rise 520ms var(--motion-easing) 120ms both;
  }

  .cinematic-hero__eyebrow,
  .cinematic-hero__sticker,
  .gloss-stage--hero .gloss-stage__controls {
    animation: sticker-pop 460ms var(--motion-spring) both;
  }

  .cinematic-hero__eyebrow {
    animation-delay: 260ms;
  }

  .cinematic-hero__sticker--one {
    animation-delay: 520ms;
  }

  .cinematic-hero__sticker--two {
    animation-delay: 620ms;
  }

  .gloss-stage--hero .gloss-stage__controls {
    animation-delay: 720ms;
  }
}

@keyframes hero-word {
  from {
    transform: translateY(0.14em) scale(1.08, 0.74) rotate(1.5deg);
  }
}

@keyframes hero-disc {
  from {
    scale: 0.8;
  }
}

@keyframes hero-sculpture {
  from {
    transform: translateY(-7%) scale(0.84) rotate(-12deg);
  }
}

@keyframes sticker-pop {
  from {
    opacity: 0;
    scale: 0;
  }
}

@keyframes hero-rise {
  from {
    translate: 0 0.9rem;
  }
}

@media screen and (min-width: 750px) {
  .cinematic-hero {
    --hero-header: 4.75rem;
    --hero-gutter: 2.5rem;
    --disc: min(38vw, 60svh, 35rem);
    --disc-x: calc(100% - var(--hero-gutter) - var(--disc) * 0.58);
    --disc-y: 48%;
    --drift: 30svh;
    display: grid;
    min-block-size: clamp(31rem, calc(100svh - var(--hero-header) - 3.5rem), 45rem);
  }

  .cinematic-hero__inner {
    align-content: center;
    display: grid;
    inline-size: 100%;
    padding-block: clamp(1.25rem, 3.5vh, 2.25rem) clamp(3.25rem, 9vh, 5rem);
  }

  .cinematic-hero__heading {
    font-size: min(15vw, 27svh, 15.5rem);
  }

  .cinematic-hero__supporting {
    margin-block-start: 1.75rem;
    max-inline-size: 24rem;
  }

  .cinematic-hero__cta {
    margin-block-start: 1.5rem;
  }

  .cinematic-hero__sticker--one {
    font-size: 1.5rem;
    inline-size: 8.5rem;
    inset-block-start: calc(var(--disc-y) - var(--disc) * 0.56);
    inset-inline-start: calc(var(--disc-x) - var(--disc) * 0.56);
    rotate: -14deg;
  }

  .cinematic-hero__sticker--two {
    font-size: 1.1rem;
    inset-inline-start: calc(var(--disc-x) + var(--disc) * 0.2);
  }

  .gloss-stage__controls {
    inset-block-start: 78%;
    inset-inline-start: 50%;
  }

  .gloss-stage__hint {
    inset-block-start: 26%;
    inset-inline-end: 21%;
    inset-inline-start: auto;
    rotate: 10deg;
  }

  .cinematic-hero__desktop-media {
    display: block;
  }

  .cinematic-hero__desktop-media + .cinematic-hero__mobile-fallback {
    display: none;
  }
}

/* ---------- Marquee band ---------- */

.gloss-marquee {
  --skew: 0deg;
  background: var(--bg);
  border-block: var(--border);
  color: var(--fg);
  overflow: hidden;
  padding-block: clamp(0.7rem, 1.6vw, 1.1rem);
  position: relative;
}

.gloss-marquee.scheme-chrome {
  background: var(--chrome-sheen);
}

.gloss-marquee--tilt {
  inline-size: 104%;
  margin-block: -1.4rem;
  margin-inline-start: -2%;
  rotate: -1.6deg;
}

.gloss-marquee__track {
  animation: marquee-run var(--marquee-duration, 30s) linear infinite;
  display: flex;
  inline-size: max-content;
}

.gloss-marquee--reverse .gloss-marquee__track {
  animation-direction: reverse;
}

.gloss-marquee__run {
  align-items: center;
  display: flex;
  flex: none;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-inline-end: clamp(1rem, 2.4vw, 2rem);
  transform: skewX(var(--skew));
}

.gloss-marquee__phrase {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.gloss-marquee__mark {
  background: var(--accent);
  block-size: clamp(1.4rem, 3vw, 2.4rem);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  flex: none;
  inline-size: clamp(1.4rem, 3vw, 2.4rem);
}

@keyframes marquee-run {
  to {
    translate: -50% 0;
  }
}

[data-motion-paused="true"] .gloss-marquee__track {
  animation-play-state: paused;
}

/* ---------- Shared section frame ---------- */

.homepage-campaign {
  background: var(--bg);
  border-block-start: var(--border);
  color: var(--fg);
  overflow-x: clip;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  position: relative;
}

.homepage-campaign__header {
  margin-block-end: clamp(2rem, 5vw, 3.75rem);
}

.homepage-campaign__header--split {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
}

.homepage-campaign__empty {
  background: var(--soft);
  border: var(--line) dashed var(--color-ink);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  font-weight: 600;
  margin: 0;
  padding: var(--space-6);
}

.scheme-pink .button--ink,
.scheme-blush .button--ink {
  --shadow-color: var(--color-white);
}

.scheme-black .section-heading {
  color: var(--color-white);
}

.campaign-link {
  font-weight: 700;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.25em;
}

/* Reveal choreography. Elements are only hidden once the script has armed them,
   and it only arms elements that are still below the fold. */
[data-reveal-state="armed"] {
  opacity: 0;
}

[data-reveal="pop"][data-reveal-state="armed"] {
  scale: 0;
}

[data-reveal="squeeze"] {
  transform-origin: 0 100%;
}

[data-reveal="squeeze"][data-reveal-state="armed"] {
  transform: scale(1.28, 0.42) skewX(-8deg);
}

[data-reveal="deal"][data-reveal-state="armed"] {
  rotate: calc((var(--i, 0) - 1.5) * 7deg);
  translate: calc((1.5 - var(--i, 0)) * 3rem) 6rem;
}

[data-reveal="swing"][data-reveal-state="armed"] {
  rotate: -7deg;
  translate: -3rem 3rem;
}

[data-reveal="swing"][data-reveal-state="armed"]:nth-child(even) {
  rotate: 7deg;
  translate: 3rem 3rem;
}

[data-reveal-state="in"] {
  transition:
    opacity 320ms linear,
    scale 520ms var(--motion-spring),
    rotate 760ms var(--motion-spring),
    translate 760ms var(--motion-spring),
    transform 700ms var(--motion-spring);
  transition-delay: calc(var(--i, 0) * 85ms);
}

[data-float] {
  translate: 0 calc(var(--float, 0) * 1px);
}

/* ---------- Featured products ---------- */

.homepage-campaign--featured {
  padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(4rem, 7vw, 6rem);
}

.featured-products__grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.featured-products__item:nth-child(4n + 1) {
  --placeholder-bg: var(--color-blush);
}

.featured-products__item:nth-child(4n + 2) {
  --card-tilt: 1.2deg;
  --placeholder-bg: var(--color-hot-pink);
}

.featured-products__item:nth-child(4n + 3) {
  --placeholder-bg: var(--color-chrome);
}

.featured-products__item:nth-child(4n + 4) {
  --card-tilt: 1.2deg;
  --placeholder-bg: var(--color-white);
}

/* ---------- Category portals ---------- */

.category-portals__supporting {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  max-inline-size: 26rem;
}

.category-portals__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.category-portal {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: calc(var(--lift) * 1.5) calc(var(--lift) * 1.5) 0 var(--color-ink);
  color: var(--color-ink);
  display: grid;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: translate 180ms var(--motion-easing), box-shadow 180ms var(--motion-easing);
}

.category-portal:hover {
  box-shadow: calc(var(--lift) * 2.2) calc(var(--lift) * 2.2) 0 var(--color-ink);
  translate: -5px -5px;
}

.category-portal:active {
  box-shadow: 0 0 0 var(--color-ink);
  translate: calc(var(--lift) * 1.5) calc(var(--lift) * 1.5);
}

.homepage-campaign--portals {
  padding-block: clamp(5.5rem, 9vw, 7.5rem) clamp(3.5rem, 7vw, 5.5rem);
}

/* A category with no photo yet is a plain tile. It never shows an empty picture frame. */
.category-portal--plain .category-portal__content {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.category-portal__media {
  aspect-ratio: 5 / 4;
  background: var(--color-blush);
  border-block-end: var(--border);
  display: block;
  overflow: hidden;
}

.category-portal:nth-child(even) .category-portal__media {
  background: var(--color-chrome);
}

.category-portal__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  transition: transform 700ms var(--motion-easing);
}

.category-portal__placeholder {
  opacity: 0.35;
}

.category-portal__content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.category-portal__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.5vw, 5.25rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 0.88;
}

.category-portal__action {
  background: var(--color-hot-pink);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-weight: 700;
  padding: 0.45rem 1.1rem;
}

.category-portal:hover .category-portal__image {
  transform: scale(1.06) rotate(-1.5deg);
}

/* ---------- Editorial stories ---------- */

.editorial-story {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.editorial-story__media {
  aspect-ratio: 4 / 5;
  background: var(--soft);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: calc(var(--lift) * 1.5) calc(var(--lift) * 1.5) 0 var(--accent), calc(var(--lift) * 1.5) calc(var(--lift) * 1.5) 0 var(--line) var(--color-ink);
  max-inline-size: 30rem;
  overflow: hidden;
  rotate: -2.5deg;
}

.editorial-story--reverse .editorial-story__media {
  rotate: 2.5deg;
}

.editorial-story__image,
.editorial-story__placeholder {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.editorial-story__placeholder {
  background: radial-gradient(circle at 1px 1px, rgb(0 0 0 / 20%) 1.5px, transparent 0) 0 0 / 16px 16px;
  color: var(--color-ink);
}

.editorial-story__placeholder svg {
  block-size: 100%;
  inline-size: 100%;
  opacity: 0.3;
}

.editorial-story__body {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  margin-block-start: var(--space-6);
  max-inline-size: 34rem;
}

.editorial-story__action {
  margin-block-start: var(--space-8);
}

/* ---------- Inside Lele's Empire ---------- */

.inside-empire {
  padding-block: clamp(4rem, 8vw, 6.5rem) clamp(4.5rem, 9vw, 7.5rem);
}

.inside-empire__shell {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.inside-empire__header {
  display: grid;
  gap: var(--space-6);
}

.inside-empire__supporting {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  margin: 0;
  max-inline-size: 24rem;
}

.inside-empire__action {
  margin-block-start: var(--space-6);
}

/* Small screens: a swipeable row. The centred clip is whole, its neighbours peek in
   from the sides, and nothing sits on top of anything else. */
.inside-empire__deck {
  --clip: min(68vw, 19rem);
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0 -1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.5rem calc((100vw - var(--clip)) / 2) 1rem;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.inside-empire__deck::-webkit-scrollbar {
  display: none;
}

.inside-clip {
  flex: 0 0 var(--clip);
  position: relative;
  scroll-snap-align: center;
  transition: scale 420ms var(--motion-spring);
}

.inside-clip__frame {
  aspect-ratio: 9 / 16;
  background: var(--color-ink);
  border: var(--line) solid var(--fg);
  border-radius: var(--radius-card);
  box-shadow: var(--lift) var(--lift) 0 var(--accent);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: box-shadow 300ms var(--motion-easing), filter 300ms linear;
}

.inside-clip:nth-child(even) .inside-clip__frame {
  box-shadow: var(--lift) var(--lift) 0 var(--color-chrome);
}

/* Contain, never cover: portrait footage keeps every pixel, including its captions. */
.inside-clip__video {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: contain;
}

.inside-clip__toggle {
  align-items: center;
  background: var(--color-white);
  border: var(--line) solid var(--color-ink);
  border-radius: 50%;
  block-size: 3.25rem;
  box-shadow: 3px 3px 0 var(--color-ink);
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  inline-size: 3.25rem;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  transition: translate 140ms var(--motion-easing), box-shadow 140ms var(--motion-easing), background-color 140ms linear;
  z-index: 2;
}

.inside-clip__toggle[hidden] {
  display: none;
}

.inside-clip__toggle:hover {
  background: var(--color-hot-pink);
}

.inside-clip__toggle:active {
  box-shadow: 0 0 0 var(--color-ink);
  translate: 3px 3px;
}

.inside-clip__icon {
  block-size: 1.4rem;
  inline-size: 1.4rem;
}

.inside-clip__icon--pause,
.inside-clip[data-clip-state="playing"] .inside-clip__icon--play {
  display: none;
}

.inside-clip[data-clip-state="playing"] .inside-clip__icon--pause {
  display: block;
}

.inside-clip__progress {
  background: rgb(255 255 255 / 30%);
  block-size: 6px;
  inset-block-end: 0;
  inset-inline: 0;
  position: absolute;
}

.inside-clip__progress span {
  background: var(--color-hot-pink);
  block-size: 100%;
  display: block;
  inline-size: 100%;
  transform: scaleX(var(--clip-progress, 0));
  transform-origin: 0 50%;
}

.inside-clip__details {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding-inline: 0.25rem 0.5rem;
}

.inside-clip__title {
  --sticker-bg: var(--color-white);
  margin-block-start: -1.1rem;
  position: relative;
  rotate: -3deg;
  z-index: 3;
}

.inside-clip__caption {
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0.15rem 0 0;
}

.inside-clip__source {
  align-items: center;
  display: inline-flex;
  font-size: 0.95rem;
  min-block-size: 2.75rem;
}

/* The script marks one clip active at a time. The others stay fully visible and one tap away. */
[data-inside-ready="true"] .inside-clip:not(.is-active) {
  scale: 0.95;
}

[data-inside-ready="true"] .inside-clip:not(.is-active) .inside-clip__frame {
  filter: saturate(0.8) brightness(0.8);
}

[data-inside-ready="true"] .inside-clip:not(.is-active) .inside-clip__frame:hover {
  filter: none;
}

[data-inside-ready="true"] .inside-clip.is-active .inside-clip__frame {
  box-shadow: calc(var(--lift) * 1.5) calc(var(--lift) * 1.5) 0 var(--color-hot-pink);
}

/* ---------- Social proof ---------- */

.social-proof__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.social-proof__review,
.social-proof__pre-review {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--lift) var(--lift) 0 var(--shadow-color, var(--color-ink));
  color: var(--color-ink);
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.social-proof__review:nth-child(odd) {
  rotate: -1.2deg;
}

.social-proof__review:nth-child(even) {
  rotate: 1.2deg;
}

.social-proof__image {
  aspect-ratio: 4 / 3;
  border: var(--border);
  border-radius: 0.75rem;
  inline-size: 100%;
  margin-block-end: var(--space-6);
  object-fit: cover;
}

.social-proof__rating {
  color: var(--color-ink);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.social-proof__star--empty {
  color: var(--color-chrome);
}

.social-proof__review blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 1.02;
  margin: var(--space-4) 0;
}

.social-proof__author {
  font-weight: 700;
  margin: 0;
}

.social-proof__pre-review {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  max-inline-size: 60rem;
  rotate: -1deg;
}

.social-proof__pre-review p {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
}

.social-proof__editorial-image {
  aspect-ratio: 4 / 3;
  border: var(--border);
  border-radius: 0.75rem;
  inline-size: 100%;
  object-fit: cover;
}

/* ---------- Curated social reels (optional section) ---------- */

.social-reels__supporting {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  max-inline-size: 28rem;
}

.social-reels__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.video-tile {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.video-tile__viewport,
.video-tile__media {
  aspect-ratio: 9 / 16;
  background: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--lift) var(--lift) 0 var(--shadow-color, var(--color-ink));
  display: block;
  overflow: hidden;
  position: relative;
}

.video-tile__video,
.video-tile__poster {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.video-tile__control {
  align-items: center;
  background: var(--color-white);
  border: var(--border);
  border-radius: 50%;
  block-size: 3.25rem;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  inline-size: 3.25rem;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  justify-content: center;
  position: absolute;
  transition: background-color var(--motion-duration) var(--motion-easing), transform var(--motion-duration) var(--motion-easing);
  z-index: 2;
}

.video-tile__control:hover {
  background: var(--color-hot-pink);
  transform: scale(1.06);
}

.video-tile__pause-icon,
.video-tile__viewport[data-media-state="playing"] .video-tile__play-icon {
  display: none;
}

.video-tile__viewport[data-media-state="playing"] .video-tile__pause-icon {
  display: inline;
}

.video-tile__viewport[data-media-state="blocked"] .video-tile__control {
  background: var(--color-hot-pink);
}

.video-tile__media--external {
  color: var(--color-white);
  text-decoration: none;
}

.video-tile__external-action {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 700;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  padding: 0.35rem 0.9rem;
  position: absolute;
  z-index: 1;
}

.video-tile__details {
  display: grid;
  gap: var(--space-2);
}

.video-tile__account {
  font-weight: 800;
  text-decoration: none;
}

.video-tile__caption {
  margin: 0;
}

/* ---------- Closing call to action ---------- */

.gloss-finale {
  --disc: min(74vw, 21rem);
  padding-block: clamp(6rem, 11vw, 8.5rem) calc(var(--disc) + 5rem);
}

.gloss-finale::before {
  background: var(--color-white);
  border: var(--border);
  border-radius: 50%;
  box-shadow: calc(var(--lift) * 1.5) calc(var(--lift) * 1.5) 0 var(--color-ink);
  block-size: var(--disc);
  content: '';
  inline-size: var(--disc);
  inset-block-end: 3rem;
  inset-inline-start: 50%;
  position: absolute;
  translate: -50% 0;
  z-index: 0;
}

.gloss-stage--finale {
  inline-size: calc(var(--disc) * 1.9);
  inset-block-end: calc(3rem - var(--disc) * 0.45);
  inset-inline-start: calc(50% - var(--disc) * 0.95);
  z-index: 1;
}

.gloss-finale__inner {
  display: grid;
  justify-items: start;
  position: relative;
  z-index: 1;
}

.gloss-finale__heading {
  font-family: var(--font-display);
  font-size: clamp(4.75rem, 25vw, 9rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.8;
  margin: 0;
  max-inline-size: 4.4em;
}

.gloss-finale__supporting {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600;
  margin: clamp(1.5rem, 3vw, 2.75rem) 0 0;
  max-inline-size: 24rem;
}

.gloss-finale__cta {
  margin-block-start: var(--space-6);
}

.gloss-finale__sticker {
  --sticker-bg: var(--color-blush);
  inset-block-end: calc(3rem + var(--disc) * 0.72);
  inset-inline-start: calc(50% + var(--disc) * 0.18);
  position: absolute;
  rotate: 12deg;
  z-index: 2;
}

/* ---------- Private list ---------- */

.homepage-campaign--private-list {
  isolation: isolate;
}

.private-list__media,
.private-list__shade {
  inset: 0;
  position: absolute;
}

.private-list__media {
  z-index: -2;
}

.private-list__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.private-list__shade {
  display: none;
  z-index: -1;
}

.private-list__media + .private-list__shade {
  background: var(--bg);
  display: block;
  opacity: 0.72;
}

.private-list__inner {
  display: grid;
  justify-items: start;
}

.private-list__body {
  font-size: 1.15rem;
  margin-block-start: var(--space-6);
  max-inline-size: 34rem;
}

.private-list__form {
  inline-size: min(100%, 40rem);
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

.private-list__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.private-list__input {
  background: var(--color-white);
  border: var(--line) solid var(--fg);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-weight: 600;
  min-block-size: 3.5rem;
  padding-inline: 1.4rem;
}

.private-list__input::placeholder {
  color: var(--color-muted);
}

.private-list__button {
  min-block-size: 3.5rem;
}

.scheme-black .private-list__button {
  border-color: var(--color-white);
  --shadow-color: var(--color-white);
}

@media screen and (min-width: 750px) {
  .featured-products__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .category-portals__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-portal:nth-child(odd) {
    rotate: -1.4deg;
  }

  .category-portal:nth-child(even) {
    margin-block-start: 3.5rem;
    rotate: 1.4deg;
  }

  .editorial-story {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }

  .editorial-story--reverse .editorial-story__media {
    justify-self: end;
    order: 2;
  }

  .editorial-story--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }

  .inside-empire__header {
    align-items: end;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .inside-empire__aside {
    justify-self: end;
    padding-block-end: 0.75rem;
  }

  /* Wide screens: three clips side by side on a stagger, each whole and each with its own control. */
  .inside-empire__deck {
    align-items: start;
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
    grid-template-columns: repeat(3, minmax(0, 19rem));
    justify-content: center;
    margin: 0;
    overflow: visible;
    padding: 0;
  }

  .inside-clip:nth-child(3n + 1) {
    rotate: -1.5deg;
  }

  .inside-clip:nth-child(3n + 2) {
    margin-block-start: clamp(1.5rem, 4vw, 3.5rem);
  }

  .inside-clip:nth-child(3n + 3) {
    margin-block-start: 0.75rem;
    rotate: 1.5deg;
  }

  [data-inside-ready="true"] .inside-clip.is-active {
    scale: 1.03;
  }

  .social-proof__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .social-reels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-proof__pre-review:has(img) {
    grid-template-columns: minmax(15rem, 0.8fr) 1.2fr;
  }

  .gloss-finale {
    --disc: min(36vw, 30rem);
    padding-block: clamp(6.5rem, 10vw, 8.5rem) clamp(5rem, 8vw, 7rem);
  }

  .gloss-finale::before {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-start: auto;
    right: 7vw;
    translate: 0 -50%;
  }

  .gloss-stage--finale {
    inset-block-end: auto;
    inset-block-start: calc(50% - var(--disc) * 0.95);
    inset-inline-start: auto;
    right: calc(7vw - var(--disc) * 0.45);
  }

  .gloss-finale__heading {
    font-size: min(15.5vw, 15.5rem);
  }

  .gloss-finale__sticker {
    font-size: 1.5rem;
    inline-size: 8.5rem;
    inset-block-end: auto;
    inset-block-start: calc(50% - var(--disc) * 0.6);
    inset-inline-start: auto;
    right: calc(7vw - 1.5rem);
  }

  .private-list__fields {
    flex-direction: row;
  }

  .private-list__input {
    flex: 1;
  }
}

@media screen and (min-width: 990px) {
  .social-reels__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-hero__cta:hover {
    transform: none;
    translate: none;
  }

  .category-portal:hover .category-portal__image {
    transform: none;
  }

  .video-tile__control:hover {
    transform: none;
  }

  .gloss-marquee__track {
    animation: none;
  }

  .button:hover,
  .product-card:hover,
  .category-portal:hover {
    rotate: none;
    translate: none;
  }
}

[data-reduced-motion="true"] .cinematic-hero__cta:hover {
  transform: none;
  translate: none;
}

[data-reduced-motion="true"] .category-portal:hover .category-portal__image {
  transform: none;
}

[data-reduced-motion="true"] .video-tile__control:hover {
  transform: none;
}

[data-reduced-motion="true"] .gloss-marquee__track {
  animation: none;
}

/* ---------- Gloss drip seam ---------- */

.gloss-drip {
  block-size: 0;
  inset-block-start: 100%;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.gloss-drip__drop {
  background: var(--bg);
  block-size: calc(var(--h) * (0.4 + var(--out, 0) * 0.85));
  border: var(--border);
  border-block-start: 0;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  inline-size: var(--w);
  inset-block-start: 0;
  inset-inline-start: var(--x);
  position: absolute;
}

.gloss-drip__drop--wide::after {
  background: var(--drip-shine, rgb(255 255 255 / 80%));
  block-size: 42%;
  border-radius: var(--radius-pill);
  content: '';
  inline-size: 0.45rem;
  inset-block-end: 22%;
  inset-inline-start: 22%;
  position: absolute;
}

.scheme-white > .gloss-drip {
  --drip-shine: var(--color-blush);
}

.scheme-black > .gloss-drip {
  --drip-shine: var(--color-hot-pink);
}

@media screen and (max-width: 749px) {
  .gloss-drip__drop {
    scale: 0.8;
    transform-origin: 50% 0;
  }

  .gloss-drip__drop:nth-child(3) {
    display: none;
  }
}

/* ---------- Brand story wall ---------- */

.empire-story {
  padding-block: clamp(4rem, 8vw, 6.5rem) clamp(4.5rem, 9vw, 7.5rem);
}

.empire-story__shell {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.empire-story__heading {
  font-size: clamp(3rem, 7.2vw, 6.5rem);
}

.empire-story__body {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  margin-block-start: var(--space-6);
  max-inline-size: 30rem;
}

.empire-story__accounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.empire-story__wall {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3rem);
}

.empire-story__column {
  align-content: start;
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.25rem);
  justify-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-tile {
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 22rem;
}

.story-tile__figure {
  margin: 0;
}

.story-tile__frame {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--lift) var(--lift) 0 var(--shadow-color, var(--color-ink));
  overflow: hidden;
}

/* Instagram's own embed, framed to its account header, 4:5 cover, and "View more on
   Instagram" row. The like and comment bar below that is cropped. */
.story-tile__frame--embed {
  block-size: calc(98px + (100cqi - var(--line) * 2) * 1.25 + var(--line) * 2);
}

.story-tile__embed {
  block-size: calc(100% + 18rem);
  border: 0;
  display: block;
  inline-size: 100%;
}

.story-tile__video,
.story-tile__image {
  block-size: auto;
  display: block;
  inline-size: 100%;
}

.story-tile__label {
  margin: -1.1rem 0 0 0.75rem;
  position: relative;
  rotate: -3deg;
  z-index: 2;
}

.story-tile__caption {
  display: grid;
  font-size: 1rem;
  font-weight: 500;
  gap: 0.25rem;
  justify-items: start;
  line-height: 1.4;
  margin-block-start: 0.75rem;
}

.story-tile__caption p {
  margin: 0;
}

.story-tile__caption .campaign-link {
  align-items: center;
  display: inline-flex;
  min-block-size: 2.75rem;
}

.story-tile--still {
  max-inline-size: 19rem;
}

.story-tile--still .story-tile__figure {
  rotate: 2.5deg;
}

.story-tile--still .story-tile__frame {
  box-shadow: var(--lift) var(--lift) 0 var(--color-hot-pink), var(--lift) var(--lift) 0 var(--line) var(--color-ink);
}

.story-tile--quote .story-tile__figure {
  background: var(--tile-bg, var(--color-hot-pink));
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--lift) var(--lift) 0 var(--color-ink);
  color: var(--tile-fg, var(--color-ink));
  padding: 1.5rem 1.5rem 1rem;
  rotate: -2deg;
}

.story-tile--white {
  --tile-bg: var(--color-white);
}

.story-tile--black {
  --tile-bg: var(--color-ink);
  --tile-fg: var(--color-white);
  --focus-ring: var(--color-white);
}

.story-tile--chrome {
  --tile-bg: var(--chrome-sheen);
}

.story-tile--black .story-tile__figure {
  box-shadow: var(--lift) var(--lift) 0 var(--color-hot-pink);
}

.story-tile__quote {
  margin: 0;
}

.story-tile__quote p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 12.5cqi, 2.9rem);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 0.96;
  margin: 0;
  quotes: '\201C' '\201D';
  text-wrap: balance;
}

.story-tile__quote p::before {
  content: open-quote;
}

.story-tile__quote p::after {
  content: close-quote;
}

.empire-story__column:nth-child(2) .story-tile--quote .story-tile__figure {
  rotate: 2deg;
}

.empire-story__column:nth-child(2) .story-tile--still .story-tile__figure {
  rotate: -2.5deg;
}

@media screen and (min-width: 750px) {
  .empire-story__wall {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .empire-story__column:nth-child(2) {
    margin-block-start: clamp(3rem, 7vw, 6rem);
  }
}

@media screen and (min-width: 1200px) {
  .empire-story__shell {
    align-items: start;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr);
  }

  .empire-story__intro {
    inset-block-start: 7rem;
    position: sticky;
  }

  .empire-story--text-only .empire-story__shell {
    grid-template-columns: minmax(0, 1fr);
  }
}