@charset "UTF-8";
.intro-countdown[hidden] { display: none; }

.intro-countdown {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  background: radial-gradient(ellipse at center, #1d3a49 0%, #091d2b 75%);
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-align: center;
  cursor: pointer;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.intro-countdown::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid #cbb37866;
  pointer-events: none;
}
.intro-countdown.is-hidden { opacity: 0; visibility: hidden; }
.intro-countdown p { margin: 0; }

.intro-countdown__lead {
  font-size: clamp(28px, 4vw, 64px);
  letter-spacing: .5em;
  padding-left: .5em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.intro-countdown__main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms ease;
}
.intro-countdown.is-lead .intro-countdown__lead { opacity: 1; transform: none; }
.intro-countdown.is-count .intro-countdown__main { opacity: 1; }

.intro-countdown__remaining,
.intro-countdown__unit { font-size: clamp(28px, 3.6vw, 60px); line-height: 1; }
.intro-countdown__number {
  display: inline-block;
  min-width: 2.4ch;
  color: #ebd39b;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(140px, 22vw, 340px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: .9;
}
.intro-countdown.is-complete .intro-countdown__number,
.intro-countdown.is-complete .intro-countdown__unit { animation: intro-settle 900ms ease-out both; }
@keyframes intro-settle {
  0% { transform: scale(1.25); text-shadow: 0 0 60px #ebd39bcc; }
  100% { transform: scale(1); text-shadow: 0 0 24px #ebd39b55; }
}

@media (max-width: 750px) {
  .intro-countdown::before { inset: 12px; }
  .intro-countdown__number { min-width: 2.2ch; }
}


/* panel kept after intro */

.hero-countdown {
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 2.5%;
  box-sizing: border-box;
  width: 20%;
  max-width: 340px;
  height: 22%;
  max-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #cbb378;
  background: linear-gradient(135deg, rgba(29, 58, 73, .96), rgba(9, 29, 43, .96));
  box-shadow: 0 8px 30px #061b3433, inset 0 0 0 5px #112c3d, inset 0 0 0 6px #cbb37866;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.hero-countdown:hover { filter: brightness(1.12); }
.hero-countdown:focus-visible { outline: 3px solid #ebd39b; outline-offset: -4px; }
.hero-countdown p { margin: 0; }
.hero-countdown__lead { font-size: clamp(11px, 1.2vw, 22px); line-height: 1.5; letter-spacing: .25em; }
.hero-countdown__main { display: flex; align-items: baseline; justify-content: center; gap: 4px; white-space: nowrap; }
.hero-countdown__remaining, .hero-countdown__unit { font-size: clamp(15px, 1.6vw, 30px); line-height: 1; }
.hero-countdown__number {
  display: inline-block;
  color: #ebd39b;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(40px, 5.5vw, 106px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1;
}
.hero-countdown.is-complete .hero-countdown__number { animation: countdown-settle 650ms ease-out both; }
@keyframes countdown-settle {
  0% { transform: scale(1.12); text-shadow: 0 0 24px #ebd39b99; }
  100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
@media (max-width: 750px) {
  .hero-countdown { right: 12px; bottom: 16px; width: 184px; height: auto; padding: 13px 12px 16px; }
  .hero-countdown__lead { font-size: 14px; }
  .hero-countdown__main { gap: 4px; }
  .hero-countdown__remaining, .hero-countdown__unit { font-size: 20px; }
  .hero-countdown__number { font-size: 68px; }
  .main .hero .image .scroll { left: 20px; right: auto; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-countdown.is-complete .hero-countdown__number { animation: none; }
}

.hero-countdown { transition: opacity 800ms ease 300ms; }
html.is-intro .hero-countdown { opacity: 0; }

/* slot reels */
.intro-countdown__number { display: inline-flex; min-width: 0; height: 1.1em; overflow: hidden; line-height: 1.1em; }
.intro-countdown__reel { display: block; width: .62em; overflow: hidden; transition: width 500ms ease, opacity 400ms ease; }
.intro-countdown__reel.is-off { width: 0; opacity: 0; }
.intro-countdown__strip { display: block; will-change: transform; }
.intro-countdown__strip span { display: block; height: 1.1em; text-align: center; }
.intro-countdown__number { margin: 0 .1em; }
@media (max-width: 750px) {
  .intro-countdown__number { font-size: clamp(80px, 28vw, 140px); }
}