.pure-opening {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  overflow: clip;
}

.pure-opening__layout {
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(24px, 4.4svh, 46px);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.pure-opening__heading {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .pure-opening:is([data-opening-state="ready"], [data-opening-state="playing"]) .pure-opening__heading {
    opacity: 0;
    transform: translateY(16px);
    transition: none;
  }
}

.pure-opening__slogan {
  color: var(--muted);
  font-size: clamp(19px, 2.45vw, 28px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.pure-opening h1 {
  font-size: clamp(31px, 4vw, 46px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.pure-opening__art {
  position: relative;
  width: min(100%, clamp(276px, 54svh, 534px));
  aspect-ratio: 880 / 760;
}

.pure-opening__art img {
  display: block;
  width: 100%;
  height: auto;
}

.pure-opening__light-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask: center / 100% 100% no-repeat;
}

.pure-opening__light {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(109deg,
    transparent 40%, rgb(255 250 240 / .05) 45%, rgb(255 250 240 / .22) 50%,
    rgb(255 250 240 / .06) 54%, transparent 61%);
}

@media (prefers-reduced-motion: no-preference) {
  .pure-opening[data-opening-state="playing"] .pure-opening__light {
    animation: pure-opening-sweep 1440ms cubic-bezier(.32, .02, .53, .98);
  }
}

@keyframes pure-opening-sweep {
  0%, 15% { opacity: 0; transform: translateX(-48%); }
  29%, 76% { opacity: 1; }
  93%, 100% { opacity: 0; transform: translateX(47%); }
}

.pure-opening__purchase {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.5vw, 28px);
  transition: opacity 350ms var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .pure-opening:is([data-opening-state="ready"], [data-opening-state="playing"]) .pure-opening__purchase {
    opacity: 0;
    pointer-events: none;
    transition: none;
  }
}

.pure-opening__purchase .product-price {
  font-size: clamp(18px, 2vw, 23px);
}

@media (max-width: 599px) {
  .pure-opening__art { width: min(100%, clamp(252px, 43svh, 366px)); }
}

@media (max-height: 620px) {
  .pure-opening__layout { padding-block: 20px; }
  .pure-opening__art { width: min(100%, clamp(215px, 50svh, 295px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pure-opening__heading, .pure-opening__purchase { transition: none; }
}