:root {
  color-scheme: dark;
  background: #080a08;
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #080a08;
}

body {
  min-height: 100dvh;
}

.experience {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  place-items: center;
  background:
    radial-gradient(circle at center, #161b14 0%, #080a08 72%);
}

.frame {
  position: relative;
  width: min(100vw, 177.8488vh);
  height: min(100vh, 56.2273vw);
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #0a0d0c;
}

.scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.scene--day {
  z-index: 1;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

.frame.is-arrived .scene--day {
  opacity: 1;
}

.scene--night {
  z-index: 2;
  opacity: 0;
  transition: opacity 4s ease-in-out;
}

.frame.is-night .scene--night {
  opacity: 1;
}

.phrase {
  position: absolute;
  z-index: 4;
  left: 14.5%;
  top: 79%;
  max-width: 48%;
  margin: 0;
  color: #f1e4c4;
  font-size: clamp(1rem, 2.15vw, 2.35rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-wrap: balance;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 10px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateY(0.25rem);
  transition:
    opacity 1.8s ease,
    transform 1.8s ease;
  pointer-events: none;
}

.phrase.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.frame.is-night .phrase {
  left: 9%;
  top: 54%;
  max-width: 42%;
  color: #f0d69b;
}

.discovery {
  position: absolute;
  z-index: 5;
  left: 8%;
  top: 34%;
  width: 37%;
  height: 52%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 45% 48% 38% 42%;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.frame.is-night .discovery {
  left: 8%;
  top: 24%;
  width: 34%;
  height: 55%;
}

.discovery:focus-visible {
  outline: 2px solid rgba(241, 228, 196, 0.78);
  outline-offset: -2px;
}

.disclosure {
  position: absolute;
  z-index: 10;
  right: clamp(0.65rem, 1.2vw, 1.25rem);
  bottom: clamp(0.55rem, 1vw, 1rem);
  max-width: min(32rem, 72vw);
  margin: 0;
  color: #f0e8d7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.6rem, 0.7vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.25;
  text-align: right;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 7px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 2s ease;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.frame.is-arrived .disclosure {
  opacity: 0.56;
}

.frame.is-arrived .disclosure.is-emphasized,
.frame.is-arrived .disclosure:hover,
.frame.is-arrived .disclosure:focus-visible {
  opacity: 0.94;
}

.disclosure:focus-visible {
  outline: 1px solid rgba(240, 232, 215, 0.65);
  outline-offset: 0.3rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript-message {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 1rem;
  margin: 0;
  color: #f1e4c4;
  font-size: 1rem;
  transform: translateX(-50%);
  text-shadow: 0 1px 4px #000;
}

@media (max-width: 700px) {
  .phrase {
    font-size: clamp(0.78rem, 3vw, 1.2rem);
    letter-spacing: 0.02em;
  }

  .discovery:focus-visible {
    outline-width: 1px;
  }

  .frame.is-arrived .disclosure {
    max-width: 82vw;
    font-size: 0.58rem;
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--day,
  .scene--night,
  .phrase,
  .disclosure {
    transition-duration: 0.01ms;
  }
}