/*
 * Site-wide age gate chrome.
 * Homepage: single combined entry screen inside .the-splash.
 * Interior pages: standalone #chichi-age-gate.
 */

html.age-gate-pending {
  overflow: hidden;
}

/* Allow scroll once the user dismisses the entry step. */
html.age-gate-exiting {
  overflow: visible;
}

html.age-gate-exiting .the-splash,
html.splash-exit-complete .the-splash,
.the-splash.-leave-active {
  pointer-events: none !important;
}

/*
 * Homepage chrome hiding during age gate + post-splash boot is handled by
 * #chichi-home-boot-cover (age-gate-boot.js, z-index 45, below .the-splash).
 * Splash shell stays transparent so ::before backdrop-filter can blur hero video.
 */
html.age-gate-pending.age-gate-homepage,
html.age-gate-pending.age-gate-homepage body {
  background-color: var(--color-black, #030303);
}

/*
 * Boot cover (z-index 45) sits above hero video but below .the-splash (50).
 * During entry, backdrop-filter on .the-splash__inner would blur opaque black
 * instead of the video — hide the cover until the gate clears.
 */
html.age-gate-pending.age-gate-homepage #chichi-home-boot-cover {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/*
 * Age gate — keep hero MP4 stable behind blur; never flash a mid-film still
 * while the video buffer spins up. Stuck/failed playback uses
 * chichi-video-fallback.jpg.
 */
html.age-gate-pending.age-gate-homepage .hero .hero__bg,
html.age-gate-pending.age-gate-homepage .hero .hero__bg-featured-chapter {
  background-color: var(--color-black, #030303);
}

html.age-gate-pending.age-gate-homepage
  .hero:not(.-video-fallback)
  video:not([data-chichi-video-active="1"]) {
  opacity: 0 !important;
}

html.age-gate-pending.age-gate-homepage
  .hero:not(.-video-fallback)
  video[data-chichi-video-active="1"] {
  opacity: 1 !important;
  transition: opacity 120ms ease;
}

/* Interior / legal: hide page chrome until the gate mounts and resolves. */
html.age-gate-pending:not(.age-gate-homepage) body > *:not(#chichi-age-gate):not(script):not(style):not(link) {
  visibility: hidden !important;
}

html.age-gate-pending #chichi-age-gate,
html.age-gate-pending #chichi-age-gate * {
  visibility: visible !important;
}

#chichi-age-gate {
  inset: 0;
  position: fixed;
  z-index: 200;
  color: var(--color-white, #fff);
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
}

#chichi-age-gate .age-gate__bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#chichi-age-gate .age-gate__bg.--purple {
  background: var(--color-purple, #6a15ff);
}

#chichi-age-gate .age-gate__bg.--black {
  background: var(--color-black, #030303);
  opacity: 0;
}

#chichi-age-gate .age-gate__panel {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: var(--color-black-30, #0303034d);
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

@-moz-document url-prefix() {
  #chichi-age-gate .age-gate__panel {
    background-color: #030303e0;
  }
}

#chichi-age-gate .age-gate__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  left: 50%;
  position: absolute;
  row-gap: 32px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 40px));
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.age-gate__title {
  margin: 0;
  color: var(--color-white, #fff);
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 30px;
  text-transform: uppercase;
}

@media (min-width: 64em) {
  .age-gate__title {
    font-size: 30px;
    letter-spacing: var(--sans-letter-spacing);
    line-height: 36px;
  }
}

.age-gate__support,
.age-gate__decline-msg {
  margin: 0;
  color: var(--color-white, #fff);
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 26px;
  max-width: 640px;
  text-align: center;
}

@media (min-width: 64em) {
  .age-gate__support,
  .age-gate__decline-msg {
    font-size: 22px;
    line-height: 30px;
  }
}

.age-gate__decline-msg {
  font-weight: 500;
}

#chichi-age-gate .age-gate__enter,
.the-splash .age-gate__enter {
  mix-blend-mode: normal;
}

#chichi-age-gate .age-gate__decline {
  bottom: 32px;
  left: 0;
  margin-inline: auto;
  position: absolute;
  right: 0;
  mix-blend-mode: normal;
}

@media (min-width: 90em) {
  #chichi-age-gate .age-gate__decline {
    bottom: clamp(32px, 2.2222222222vw, 38.2222222222px);
  }
}

#chichi-age-gate.-age-declined .age-gate__actions,
#chichi-age-gate.-age-declined .age-gate__decline,
.the-splash__entry-step.-age-declined .entry-step__enter-night,
.the-splash__entry-step.-age-declined .entry-step__enter-muted,
.the-splash__entry-step.-age-declined .entry-step__decline,
.the-splash__entry-step.-age-declined .the-splash__entry-wordmark-wrap,
.the-splash__entry-step.-age-declined .the-splash__entry-wordmark,
.the-splash__entry-step.-age-declined .the-splash__entry-welcome,
.the-splash__entry-step.-age-declined .the-splash__entry-age {
  display: none !important;
}

/*
 * Homepage first-time combined entry screen
 */
html.splash-return-session .the-splash {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

html.age-gate-pending.age-gate-homepage .the-splash__bg.-bg-purple {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%) !important;
}

html.age-gate-pending.age-gate-homepage .the-splash__bg.-bg-black {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html.age-gate-pending.age-gate-homepage .the-splash__logo,
html.age-gate-pending.age-gate-homepage .the-splash__ring-cursor {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Nuxt sound-choice UI is bypassed — our entry step replaces it entirely. */
html.age-gate-pending.age-gate-homepage .the-splash__sound-choice {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/*
 * Persistent blur for the first-time entry screen.
 * Scoped to age-gate-pending so return visits stay sharp.
 */
html.age-gate-pending.age-gate-homepage .the-splash .the-splash__inner::before {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: var(--color-black-30, #0303034d);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

@-moz-document url-prefix() {
  html.age-gate-pending.age-gate-homepage .the-splash .the-splash__inner::before {
    background-color: #030303e0;
  }
}

.the-splash__entry-step {
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.the-splash__entry-step.-is-leaving {
  opacity: 0;
  pointer-events: none;
}

.the-splash__entry-step.-assets-loading .entry-step__enter-night,
.the-splash__entry-step.-assets-loading .entry-step__enter-muted {
  cursor: wait;
  opacity: 0.55;
}

.the-splash__entry-step.-assets-loading .entry-step__enter-night[aria-disabled="true"],
.the-splash__entry-step.-assets-loading .entry-step__enter-muted[aria-disabled="true"] {
  pointer-events: none;
}

.the-splash__entry-panel {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.the-splash__entry-panel .btn {
  mix-blend-mode: normal;
}

.the-splash__entry-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  left: 50%;
  position: absolute;
  row-gap: 32px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 40px));
}

/* Match .site-header logo: difference blend + invert on black wordmark. */
.the-splash__entry-wordmark-wrap {
  color: var(--color-white, #fff);
  line-height: 0;
  margin: 0 auto 16px;
  mix-blend-mode: difference;
}

.the-splash__entry-wordmark {
  color: var(--color-black, #030303);
  display: block;
  fill: currentColor;
  filter: invert(1);
  height: auto;
  width: min(260px, 56vw);
}

.the-splash__entry-step .the-splash__abstract {
  margin: 0;
  color: var(--color-white, #fff);
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 30px;
  max-width: 640px;
  text-align: center;
}

@media (max-width: 63.99em) {
  .the-splash__entry-step .the-splash__abstract {
    width: calc(100vw - 40px);
  }
}

@media (min-width: 64em) {
  .the-splash__entry-step .the-splash__abstract {
    font-size: 30px;
    line-height: 36px;
  }
}

@media (min-width: 90em) {
  .the-splash__entry-step .the-splash__abstract {
    font-size: clamp(30px, 2.0833333333vw, 35.8333333333px);
    line-height: clamp(36px, 2.5vw, 43px);
  }
}

.the-splash__entry-age {
  font-size: 22px;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 30px;
}

@media (min-width: 90em) {
  .the-splash__entry-age {
    font-size: clamp(22px, 1.5277777778vw, 26.2777777778px);
    line-height: clamp(30px, 2.0833333333vw, 35.8333333333px);
  }
}

.the-splash__entry-step .btn {
  align-items: center;
  border: none;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font: inherit;
  gap: 4px;
  overflow: hidden;
  padding: 0 2px;
  position: relative;
  transition: background-color var(--timing-default, 0.4s) ease-out;
  white-space: nowrap;
  width: fit-content;
}

.the-splash__entry-step .entry-step__enter-night {
  background-color: var(--color-white, #fff);
  color: var(--color-black, #030303);
}

.the-splash__entry-step .entry-step__enter-night .btn__text {
  color: var(--color-black, #030303);
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 44px;
  text-transform: uppercase;
}

@media (min-width: 90em) {
  .the-splash__entry-step .entry-step__enter-night .btn__text {
    font-size: clamp(50px, 3.4722222222vw, 59.7222222222px);
    line-height: clamp(44px, 3.0555555556vw, 52.5555555556px);
  }
}

@media (max-width: 63.99em) {
  .the-splash__entry-step .entry-step__enter-night .btn__text {
    font-size: 16px;
    letter-spacing: var(--sans-letter-spacing);
    line-height: 20px;
  }
}

.the-splash__entry-step .entry-step__enter-muted {
  background: transparent;
  border: none;
  color: var(--color-white, #fff);
  cursor: pointer;
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 20px;
  padding: 4px 8px;
  text-decoration: underline;
  text-transform: none;
  text-underline-offset: 0.2em;
}

@media (min-width: 90em) {
  .the-splash__entry-step .entry-step__enter-muted {
    font-size: clamp(16px, 1.1111111111vw, 19.1111111111px);
    line-height: clamp(20px, 1.3888888889vw, 23.8888888889px);
  }
}

.the-splash__entry-step .entry-step__decline {
  background: transparent;
  bottom: 32px;
  color: var(--color-white, #fff);
  left: 0;
  margin-inline: auto;
  opacity: 1;
  position: absolute;
  right: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.the-splash__entry-step .entry-step__decline .btn__text {
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing);
  line-height: 27px;
  text-transform: none;
}

@media (min-width: 90em) {
  .the-splash__entry-step .entry-step__decline {
    bottom: clamp(32px, 2.2222222222vw, 38.2222222222px);
  }

  .the-splash__entry-step .entry-step__decline .btn__text {
    font-size: clamp(22px, 1.5347222222vw, 26.3736111111px);
    line-height: clamp(27px, 1.8888888889vw, 32.4888888889px);
  }
}

.the-splash__entry-step .age-gate__decline-msg {
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  .the-splash__entry-step .entry-step__enter-night:not([aria-disabled="true"]):hover,
  .the-splash__entry-step .entry-step__enter-night:not([aria-disabled="true"]):focus-visible {
    background-color: transparent;
    color: var(--color-white, #fff);
  }

  .the-splash__entry-step
    .entry-step__enter-night:not([aria-disabled="true"]):hover
    .btn__text,
  .the-splash__entry-step
    .entry-step__enter-night:not([aria-disabled="true"]):focus-visible
    .btn__text {
    color: var(--color-white, #fff);
  }

  html.age-gate-pending.age-gate-homepage
    .the-splash__entry-step
    .entry-step__enter-night:focus-visible {
    background-color: var(--color-white, #fff);
    color: var(--color-black, #030303);
  }

  html.age-gate-pending.age-gate-homepage
    .the-splash__entry-step
    .entry-step__enter-night:focus-visible
    .btn__text {
    color: var(--color-black, #030303);
  }

  .the-splash__entry-step .entry-step__enter-muted:hover,
  .the-splash__entry-step .entry-step__enter-muted:focus-visible {
    background-color: var(--color-white, #fff);
    color: var(--color-black, #030303);
    opacity: 1;
  }

  .the-splash__entry-step .entry-step__decline:not([aria-disabled="true"]):hover,
  .the-splash__entry-step .entry-step__decline:not([aria-disabled="true"]):focus-visible {
    background-color: var(--color-white, #fff);
    color: var(--color-black, #030303);
    opacity: 1;
  }
}

/*
 * Hero video fallback — decorative MP4 failed (Safari codec / autoplay).
 * JPG for <video poster>; AVIF via image-set where supported.
 */
.hero.-video-fallback .hero__bg-featured-chapter,
.hero.-video-fallback .hero__bg {
  background-color: var(--color-black, #030303);
  background-image: url("/pages/homepage/hero/chichi-video-fallback.jpg");
  background-image: image-set(
    url("/pages/homepage/hero/chichi-video-fallback.avif") type("image/avif"),
    url("/pages/homepage/hero/chichi-video-fallback.jpg") type("image/jpeg")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero.-video-fallback .hero__bg-featured-chapter .responsive-video,
.hero.-video-fallback .hero__bg .responsive-video {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}