/* The supplied flat mark moves independently of the content and stays at the edge. */
.brand-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
}
.brand-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(620px, 57vw, 66svh);
  max-width: none;
  height: auto;
  filter: invert(1) brightness(.83);
  transform: translate3d(calc(-50% + var(--brand-x, 0px)), calc(-50% + var(--brand-y, 0px)), 0) scale(var(--brand-scale, 1));
  opacity: var(--brand-opacity, 1);
  will-change: transform, opacity;
}
.brand-backdrop.is-docked .brand-mark { will-change: auto; }
.shop-page .brand-mark {
  --brand-x: 50vw;
  --brand-y: 12svh;
  --brand-scale: .66;
  --brand-opacity: .09;
  will-change: auto;
}
.opening { height: 155svh; min-height: 1060px; }
.opening-stage { height: 100svh; min-height: 620px; max-height: none; background: #242527; }
.hero-heading { top: auto; bottom: 16%; z-index: 5; }
.hero-heading h1 { font-size: clamp(30px, 3vw, 43px); margin: 12px 0; }
.hero-heading > p:last-child { font-size: 14px; }
.hero-word {
  top: auto;
  bottom: 16%;
  left: auto;
  right: var(--space);
  transform: none;
  font-size: clamp(48px, 5vw, 74px);
  line-height: 1;
  letter-spacing: -.025em;
  color: #b7b8ba;
  opacity: .8;
}
.hero-word > span { font-size: 12px; top: 4px; right: -12px; }
.hero-bottom > p { display: none; }

/* The first version's hue and light follow the same angle as the flat photo's turn. */
.story-gem {
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0) rotate(calc(var(--rotate, 0deg) + var(--gem-spin, 0deg))) scale(calc(1 - var(--gather) * .12));
  filter: hue-rotate(var(--gem-hue, -2.5deg)) saturate(1.35) brightness(var(--gem-light, 1.03)) drop-shadow(0 16px 18px #09091640);
  transition: none;
  will-change: transform, filter;
}
.story-gem > img, .story-gem > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fireworks-story:not(.motion-visible) .story-gem { will-change: auto; }
.fireworks-copy { z-index: 6; }
.fireworks-description { max-width: 34em; }
.shop-art > img { filter: drop-shadow(0 35px 25px #0004); }

@media (max-width: 800px) {
  .brand-mark { width: min(72vw, 61svh); }
  .hero-heading h1 { font-size: 34px; }
  .hero-word { font-size: 54px; }
}
@media (max-width: 600px) {
  .brand-mark { width: min(88vw, 52svh); top: 45%; }
  .opening { height: 145svh; min-height: 960px; }
  .opening-stage { min-height: 640px; }
  .hero-heading { top: auto; bottom: 16%; }
  .hero-heading h1 { font-size: 31px; }
  .hero-heading .eyebrow { font-size: 12px; letter-spacing: 1.2px; }
  .hero-heading > p:last-child { font-size: 13px; }
  .hero-word { font-size: 42px; bottom: 16.5%; right: calc(var(--space) + 7px); }
  .hero-bottom .edition { font-size: 12px; }
}
@media (max-width: 370px) {
  .hero-heading h1 { font-size: 28px; }
  .hero-heading > p:last-child { font-size: 12px; }
  .hero-word { font-size: 34px; bottom: 20%; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .story-gem { will-change: auto; }
  .opening { height: auto; min-height: 0; }
  .story-gem { animation: none; transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(.88); filter: drop-shadow(0 16px 18px #09091640); }
}