:root {
  color-scheme: dark;
  background: #08090c;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #08090c;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.page {
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.page-section {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #08090c;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  content-visibility: auto;
  contain-intrinsic-size: auto 56.25vw;
}

.section-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.site-layer {
  position: absolute;
  z-index: var(--layer-z, 1);
  top: var(--layer-y, 0%);
  left: var(--layer-x, 0%);
  width: var(--layer-width, 10%);
  line-height: 0;
  pointer-events: none;
}

.site-layer img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

img.is-image-unavailable {
  visibility: hidden;
}

.site-layer--language-control {
  z-index: calc(var(--layer-z, 1) + 10);
  cursor: pointer;
  pointer-events: auto;
  transition: filter 180ms ease;
}

.site-layer--language-control:hover:not(.is-language-selected) {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.site-layer--language-control:focus-visible,
.site-layer--music-platform:focus-visible,
.site-layer--character-link:focus-visible,
.site-layer--next-page-button:focus-visible,
.site-layer--contact-link:focus-visible,
.site-layer--event-ticket-link:focus-visible,
.site-layer--return-top:focus-visible {
  z-index: 100;
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.site-layer--language-control.is-language-selected {
  filter: invert(1) contrast(1.08);
}

.site-layer--rise,
.site-layer--from-right,
.site-layer--fade,
.site-layer--profile-character-enter,
.site-layer--profile-text-enter,
.site-layer--ticket-enter-left,
.site-layer--ticket-enter-right,
.site-layer--ticket-text-reveal,
.site-layer--story-logo-reveal,
.site-layer--story-button-reveal,
.site-layer--story-copy-reveal,
.site-layer--character-enter-left,
.site-layer--character-enter-right,
.site-layer--next-page-reveal,
.site-layer--return-top {
  opacity: 0;
}

.page-section.is-active-page .site-layer--rise {
  animation: layer-rise-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
  will-change: transform, opacity;
}

.page-section.is-active-page .site-layer--rise-delayed {
  animation-delay: 280ms;
}

.page-section.is-active-page .site-layer--fade {
  animation: layer-fade-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity;
}

.page-section.is-active-page .site-layer--fade-delay-1 { animation-delay: 80ms; }
.page-section.is-active-page .site-layer--fade-delay-2 { animation-delay: 150ms; }
.page-section.is-active-page .site-layer--fade-delay-3 { animation-delay: 220ms; }
.page-section.is-active-page .site-layer--fade-delay-4 { animation-delay: 290ms; }
.page-section.is-active-page .site-layer--fade-delay-5 { animation-delay: 360ms; }

.page-section.is-active-page .site-layer--from-right {
  animation: layer-from-right-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both;
  will-change: transform, opacity;
}

@keyframes layer-rise-in {
  from { opacity: 0; transform: translate3d(0, 14%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes layer-from-right-in {
  from { opacity: 0; transform: translate3d(16%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes layer-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-section.is-active-page .site-layer--profile-character-enter {
  animation: profile-character-enter 860ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
  will-change: transform, opacity;
}

.page-section.is-active-page .site-layer--profile-text-enter {
  animation: profile-text-enter 780ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
  will-change: transform, opacity;
}

@keyframes profile-character-enter {
  from { opacity: 0; transform: translate3d(22%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes profile-text-enter {
  from { opacity: 0; transform: translate3d(-14%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.page-section.is-active-page .site-layer--ticket-enter-left {
  animation: ticket-enter-from-left 820ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
  will-change: transform, opacity;
}

.page-section.is-active-page .site-layer--ticket-enter-right {
  animation: ticket-enter-from-right 820ms cubic-bezier(0.22, 1, 0.36, 1) 130ms both;
  will-change: transform, opacity;
}

.page-section.is-active-page .site-layer--ticket-text-reveal {
  animation: ticket-text-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) 460ms both;
  will-change: transform, opacity;
}

@keyframes ticket-enter-from-left {
  from { opacity: 0; transform: translate3d(-115%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ticket-enter-from-right {
  from { opacity: 0; transform: translate3d(115%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ticket-text-reveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.page-section.is-active-page .site-layer--story-copy-reveal {
  animation: story-copy-reveal 780ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
  will-change: transform, opacity;
}

.page-section.is-active-page .site-layer--story-logo-reveal {
  animation: story-logo-reveal 680ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both;
  will-change: transform, opacity;
}

.page-section.is-active-page .site-layer--story-button-reveal {
  animation: story-button-reveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 560ms both;
  will-change: transform, opacity;
}

@keyframes story-copy-reveal {
  from { opacity: 0; transform: translate3d(-7%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes story-logo-reveal {
  from { opacity: 0; transform: translate3d(10%, 0, 0) scale(0.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes story-button-reveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.site-layer--music-platform,
.site-layer--contact-link,
.site-layer--event-ticket-link,
.site-layer--next-page-button,
.site-layer--return-top {
  cursor: pointer;
  pointer-events: auto;
}

.site-layer--music-platform {
  clip-path: polygon(43% 7%, 90% 7%, 96% 10%, 63% 82%, 53% 96%, 46% 100%, 18% 100%, 8% 94%, 11% 82%, 38% 12%);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

.site-layer--music-platform:hover {
  z-index: 100;
  filter: brightness(1.14) saturate(1.08) drop-shadow(0 18px 15px rgba(0, 0, 0, 0.45));
  transform: perspective(900px) translate3d(0, -14px, 0) rotateX(2deg) scale(1.025);
}

.site-layer--character-link {
  cursor: pointer;
  pointer-events: none;
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms ease;
}

.site-layer--character-link::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: auto;
  clip-path: var(--character-hit-clip, inset(4% 10%));
}

.site-layer--character-link img {
  pointer-events: none;
}

.site-layer--character-link:hover {
  z-index: 100;
  filter: brightness(1.12) saturate(1.06) drop-shadow(0 18px 15px rgba(0, 0, 0, 0.55));
  transform: perspective(900px) translate3d(0, -12px, 0) rotateX(1.5deg) scale(1.018);
}

.page-section.is-active-page .site-layer--character-enter-left {
  animation: character-enter-from-left 800ms linear both;
}

.page-section.is-active-page .site-layer--character-enter-right {
  animation: character-enter-from-right 800ms linear both;
}

.page-section.is-active-page .site-layer--next-page-reveal {
  animation: next-page-button-reveal 1600ms linear both;
}

@keyframes character-enter-from-left {
  from { opacity: 0; translate: -20% 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes character-enter-from-right {
  from { opacity: 0; translate: 20% 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes next-page-button-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.site-layer--next-page-button {
  z-index: 200;
  clip-path: circle(49% at 50% 50%);
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.46));
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

.site-layer--next-page-button:hover {
  filter: brightness(1.12) drop-shadow(0 16px 11px rgba(0, 0, 0, 0.6));
  transform: translate3d(0, -6px, 0) scale(1.045);
}

.site-layer--contact-link {
  aspect-ratio: 1;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

.site-layer--contact-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-layer--contact-link:hover {
  z-index: 100;
  filter: brightness(1.16) saturate(1.1) drop-shadow(0 14px 12px rgba(0, 0, 0, 0.48));
  transform: translate3d(0, -10px, 0) scale(1.035);
}

.site-layer--event-ticket-link {
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms ease;
}

.site-layer--event-ticket-link:hover {
  z-index: 100;
  filter: brightness(1.1) saturate(1.08) drop-shadow(0 20px 18px rgba(0, 0, 0, 0.58));
  transform: perspective(1000px) translate3d(0, -12px, 0) rotateX(1.5deg) scale(1.012);
}

.page-section.is-active-page .site-layer--return-top {
  animation:
    return-top-reveal 640ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both,
    return-top-float 2800ms ease-in-out 820ms infinite alternate;
  will-change: transform, opacity;
}

.site-layer--return-top {
  transform-origin: center;
  transition: filter 220ms ease;
}

.site-layer--return-top:hover,
.site-layer--return-top:focus-visible {
  z-index: 100;
  animation-play-state: paused;
  filter: brightness(1.24) drop-shadow(0 14px 12px rgba(255, 255, 255, 0.26));
}

@keyframes return-top-reveal {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes return-top-float {
  from { transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg); }
  to { transform: perspective(900px) translate3d(0, -8px, 0) rotateX(3deg); }
}

.artist-marquee {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.artist-row {
  position: absolute;
  left: 3%;
  display: grid;
  width: 94%;
  aspect-ratio: 6 / 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: clamp(3px, 0.45vw, 9px) solid #070707;
  border-radius: clamp(14px, 1.75vw, 34px);
  background: #070707;
}

.artist-row--top { top: 4%; }
.artist-row--bottom { top: 72%; }

.artist-card {
  min-width: 0;
  opacity: 1;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.3));
}

.artist-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-section.is-active-page .artist-card {
  animation: artist-card-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--artist-delay) both;
}

@keyframes artist-card-reveal {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  48% { opacity: 1; transform: translate3d(0, -13px, 0) scale(1.018); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.site-filing {
  position: absolute;
  z-index: 220;
  right: 0;
  bottom: 2.1%;
  left: 0;
  display: block;
  width: fit-content;
  max-width: 90%;
  margin: auto;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font: 400 clamp(10px, 0.72vw, 14px) / 1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 180ms ease;
}

.site-filing[hidden] {
  display: none;
}

.site-filing:hover,
.site-filing:focus-visible {
  color: #fff;
}

.site-filing:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .page { scroll-behavior: auto; }

  .site-layer,
  .artist-card,
  .page-section.is-active-page .site-layer,
  .page-section.is-active-page .artist-card {
    animation: none !important;
    opacity: 1;
  }
}