@font-face {
  font-family: "Instrument Serif";
  src: url("assets/instrument-serif.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  color: #f8f5ff;
  background: #0b0b1c;
  font-family: system-ui, sans-serif;
  --inset: clamp(12px, 2.2vw, 30px);
  --load-time: 3100ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #e9ddff; outline-offset: 5px; }

.scene, .scene::before, .scene::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scene {
  overflow: hidden;
  background: #101023;
}

.scene::before {
  content: "";
  background: url("assets/conan.gif") right 44% / auto max(112%, 69vw) no-repeat;
  filter: brightness(1.58) saturate(1.14);
}

.scene::after {
  content: "";
  background:
    linear-gradient(90deg, #101022 0%, #121127ed 17%, #18132d81 49%, transparent 82%),
    linear-gradient(0deg, #080817 0%, #0c0a1b1a 40%, #0c0a1b10 67%, #0b0b1c86 100%),
    linear-gradient(125deg, #7761b628, transparent 68%);
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
}

.screen { grid-area: 1 / 1; }

.welcome, .loading {
  display: grid;
  place-items: center;
  padding: 28px;
  background: #0e0b22a6;
}

.welcome {
  background: radial-gradient(ellipse at center, #18122a44, #0b0a1bce 85%);
  backdrop-filter: blur(4px);
}

.enter-button {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  width: clamp(112px, 15vw, 140px);
  aspect-ratio: 1;
  border: 1px solid #e9ddff;
  border-radius: 50%;
  color: #211532;
  background: #f3ecff;
  font-size: .86rem;
  font-weight: 700;
  box-shadow: 0 0 0 12px #ecd8ff23, 0 0 0 26px #ecd8ff0d, 0 0 70px #ba91ff60;
  transition: transform 240ms var(--ease), background 240ms;
  animation: enter-in 740ms var(--ease) both;
}

.play-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.loading {
  background: radial-gradient(ellipse at 50% 46%, #3123477d 0%, #0b091cbd 63%, #080716e8);
  backdrop-filter: blur(7px);
}

.loading-content {
  display: grid;
  justify-items: center;
  width: min(100%, 660px);
  text-align: center;
  animation: loading-scene var(--load-time) linear both;
}

.loading-name, h1 {
  margin: 0;
  padding-right: .045em;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

.loading-name {
  font-size: clamp(6.5rem, 20vw, 12rem);
  line-height: .82;
  text-shadow: 0 0 60px #b991ff8f, 0 12px 35px #100818;
  animation: loading-title var(--load-time) var(--ease) both;
}

.loading-credits {
  position: relative;
  isolation: isolate;
  margin-top: clamp(22px, 5vh, 42px);
}

.loading-credits::after {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 6% -7% -12%;
  background: radial-gradient(ellipse, #bb87ff69, transparent 65%);
  pointer-events: none;
  animation: credit-glow var(--load-time) linear both;
}

.credit-label {
  margin: 0 0 8px;
  color: #dac7ef;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  animation: credit-mark var(--load-time) var(--ease) both;
}

.credit-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 2vw, 22px);
  margin: 0;
  font-size: clamp(1.12rem, 5.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.credit-mask {
  overflow: hidden;
  padding: .08em .04em .2em;
}

.credit-name {
  display: block;
  color: #faf5ff;
  text-shadow: 0 0 24px #b991ff60;
  animation: credit-name var(--load-time) var(--ease) both;
}

.credit-name--left { --entry-x: -20%; --entry-angle: -11deg; }
.credit-name--right {
  --entry-x: 20%;
  --entry-angle: 11deg;
  animation-name: credit-name-right;
}

.credit-cross {
  padding-bottom: .1em;
  color: #dcacff;
  font-size: .66em;
  font-weight: 500;
  text-shadow: 0 0 16px #cb87ffdb;
  animation: credit-mark var(--load-time) var(--ease) both;
}

.loading-track {
  position: relative;
  width: min(190px, 68%);
  height: 2px;
  overflow: hidden;
  margin-top: clamp(19px, 3.5vh, 32px);
  border-radius: 8px;
  background: #ffffff35;
}

.loading-track::after {
  position: absolute;
  content: "";
  inset: 0;
  background: #e6ccff;
  transform-origin: left;
  animation: progress var(--load-time) linear both;
}

.site {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding:
    max(calc(var(--inset) + 15px), env(safe-area-inset-top))
    max(calc(var(--inset) + 15px), env(safe-area-inset-right))
    max(calc(var(--inset) + 15px), env(safe-area-inset-bottom))
    max(calc(var(--inset) + 15px), env(safe-area-inset-left));
  animation: site-in 600ms ease both;
}

.site::before {
  content: "";
  position: absolute;
  inset: var(--inset);
  border: 1px solid #d6c9f44d;
  border-radius: clamp(19px, 3.1vw, 40px);
  pointer-events: none;
}

.topbar { display: flex; align-items: flex-start; justify-content: flex-end; }
.footer { display: flex; align-items: flex-end; }

.certificate, .add-app, .sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}

.certificate {
  min-height: 44px;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid #e1d5ff63;
  background: #241d3d9c;
  backdrop-filter: blur(14px);
  font-size: .79rem;
  font-weight: 600;
}

.certificate-icon {
  position: relative;
  width: 12px;
  height: 14px;
  border: 1px solid #e0ccff;
  border-radius: 2px;
}

.certificate-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 4px;
  inset: 4px auto auto 2px;
  border-block: 1px solid #e0ccff;
}

.hero {
  display: grid;
  justify-items: center;
  gap: clamp(27px, 5vh, 50px);
  padding: 38px 0;
  text-align: center;
}

h1 {
  outline: none;
  color: #fcf8ff;
  font-size: clamp(7rem, 20vw, 19rem);
  line-height: .72;
  text-shadow: 0 0 56px #b693e95c, 0 16px 50px #080514;
}

.add-app {
  min-height: 57px;
  gap: 26px;
  padding: 0 8px 0 24px;
  border: 1px solid #fbf6ff;
  color: #231831;
  background: #f5edff;
  box-shadow: 0 10px 44px #0c061c85;
  font-size: .9rem;
  font-weight: 700;
}

.arrow {
  display: grid;
  place-items: center;
  width: 39px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dcccfa;
  font-size: 1.1rem;
}

.sound {
  width: 44px;
  height: 44px;
  border: 1px solid #e1d5ff63;
  background: #241d3d9c;
}

.sound-bars { display: flex; align-items: center; gap: 3px; }
.sound-bars i { width: 2px; height: 6px; border-radius: 999px; background: #f0e4ff; }
.sound-bars i:nth-child(2) { height: 13px; }
.sound-bars i:nth-child(3) { height: 9px; }
.sound[aria-pressed="false"] .sound-bars { opacity: .6; }
.sound[aria-pressed="true"] i { animation: equalizer 760ms ease-in-out infinite alternate; }
.sound[aria-pressed="true"] i:nth-child(2n) { animation-delay: -480ms; }

@keyframes enter-in {
  from { opacity: 0; transform: scale(.89); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes loading-scene {
  0%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loading-title {
  0% { opacity: 0; transform: translateY(30px) scale(.88); filter: blur(11px); }
  19%, 76% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(7px); }
}

@keyframes credit-name {
  0%, 20% { opacity: 0; transform: translate(var(--entry-x), 115%) rotate(var(--entry-angle)); }
  37%, 72% { opacity: 1; transform: translate(0, 0) rotate(0); }
  91%, 100% { opacity: 0; transform: translate(0, 119%) rotate(calc(var(--entry-angle) * -.6)); }
}

@keyframes credit-name-right {
  0%, 26% { opacity: 0; transform: translate(var(--entry-x), 115%) rotate(var(--entry-angle)); }
  43%, 76% { opacity: 1; transform: translate(0, 0) rotate(0); }
  95%, 100% { opacity: 0; transform: translate(0, 119%) rotate(calc(var(--entry-angle) * -.6)); }
}

@keyframes credit-mark {
  0%, 33% { opacity: 0; transform: translateY(8px) scale(.65); }
  46%, 75% { opacity: 1; transform: translateY(0) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(12px) scale(.85); }
}

@keyframes credit-glow {
  0%, 33% { opacity: 0; transform: scaleX(.45); }
  43% { opacity: 1; }
  62%, 100% { opacity: 0; transform: scaleX(1.14); }
}

@keyframes credit-rise {
  0%, 22% { opacity: 0; transform: translateY(.23em); }
  42%, 74% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(.23em); }
}

@keyframes title-reveal {
  0% { opacity: 0; }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes site-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes equalizer { from { transform: scaleY(.5); } to { transform: scaleY(1.2); } }

@media (hover: hover) {
  .enter-button:hover { transform: scale(1.05); background: #fff; }
  .certificate:hover, .sound:hover { background: #4a3668; }
  .add-app:hover { background: #fff; }
}

@media (max-width: 690px) {
  .scene::before { background-position: 56% center; background-size: cover; }
  .scene::after {
    background:
      linear-gradient(0deg, #080817 0%, #100d21a6 32%, #100d213d 67%, #0b0b1c91 100%),
      linear-gradient(90deg, #14102457, #1410240d);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene::before { background-image: url("assets/conan-still.jpg"); }
  button { transition: none; }
  .enter-button, .site, .sound[aria-pressed="true"] i { animation: none; }
  .loading { --load-time: 2600ms; }
  .loading-name { animation-name: title-reveal; }
  .credit-name, .credit-cross, .credit-label { animation-name: credit-rise; }
  .loading-credits::after, .loading-track { display: none; }
}