html {
  font-size: max(calc(100vw / 90), calc(100vh / 50.625));
}

:root{
  --clr-red-700: #CD0505;
  --clr-red-800: #8C0000;
  --clr-orange-600: #EB5A00;
  --clr-amber-500: #FF9B00;
  --clr-white: #F3F5F7;

  --glass-bg: rgba(255,255,255,0.12);
  --glass-brd: rgba(255,255,255,0.28);
  --glass-sd: rgba(0,0,0,0.20);
}

* { box-sizing: border-box; }

body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--clr-red-700);
  color: var(--clr-white);
  min-height:100vh;
  overflow:hidden;
}

.site-header{
  position: fixed;
  top: 0;
  left: 6.25rem;
  right: 6.25rem;
  width: auto;
  height:4rem;
  border-radius: 0 0 2.5rem 2.5rem;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(100%) blur(2.5rem);
  backdrop-filter: saturate(100%) blur(2.5rem);
  border: 0.063rem solid var(--glass-brd);
  z-index:100;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 4.25rem;
  padding-right: 4.25rem;
  width: 100%;
  box-sizing: border-box;
}

.header-left, .header-right{
  display:flex; align-items:center;
}

.logo{ height:2rem; object-fit:contain; aspect-ratio:129/40; }

.sep{
  width:0; border-left:0.2rem solid var(--clr-white); opacity:.25;
  border-radius: 10rem;
  height:1rem;
}
.sep-lg{ height:2rem; margin:0 1.5rem; }
.sep-sm{ height:1rem; margin:0 1rem; }

.menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.menu > li{ display:flex; align-items:center; }

.nav a{
  color:#F3F5F7; text-align:center;
  font-size:0.75rem; line-height:0.75rem; font-weight:900; text-transform:uppercase;
  text-decoration:none;
}
.nav a:hover { text-decoration: none; }

.header-right > .sep.sep-sm{ margin:0 1rem; }

.search-pill{
  width:8rem; height:1.5rem; flex-shrink:0;
  border-radius:10rem; background:#F3F5F7;
  display:flex; align-items:center;
  padding-left: 0.6rem; padding-right: 0.6rem;
  gap: 0.4rem;
}

.search-icon{height:0.75rem; flex-shrink:0; aspect-ratio:1/1; }

.search-sep{
  width:0; height:0.5rem;
  border-left:0.125rem solid var(--clr-red-700);
  border-radius: 10rem;
  opacity:.5;
}

.search-text{
  color: var(--clr-red-700); text-align:center; font-size:.75rem; line-height:.75rem;
  font-weight:400;
  opacity:.5;
}

.locale{ display:flex; align-items:center; gap:.25rem; }
.lang-text{
  color:#F3F5F7; text-align:center; font-size:0.75rem; line-height:0.75rem;
  font-weight:900; text-transform:uppercase;
}
.dropdown-icon{
  height:0.5rem; flex-shrink:0; aspect-ratio:3/2; opacity:.5;
}

@media (max-aspect-ratio: 16/12) {
  .nav { display:none; }
}

.stage{
  position: fixed;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 90rem;
  height: 50.625rem;
  overflow:hidden;
  background: var(--clr-red-700);
}

.bg-layer{ position:absolute; inset:0; background: var(--clr-red-700); }

.grad{ position:absolute; left:0; width: 100%; }
.grad-1{
  bottom: 0rem; height: 20rem;
  background: linear-gradient(180deg, rgba(205, 5, 5, 0) 0%, var(--clr-red-700) 100%);
}

.art-text{
  position:absolute; height: 25rem; object-fit: contain; aspect-ratio: 29 / 27;
  left: 6.25rem; bottom: 6.25rem;
}

.art-hero{
  position:absolute; height: 42.5rem; object-fit: contain; aspect-ratio: 4 / 5;
  left: 50%; transform: translateX(-50%);
  bottom: 0rem;
}

.grad-2{
  bottom: 0rem; height: 10rem;
  background: linear-gradient(180deg, rgba(205, 5, 5, 0) 0%, var(--clr-red-700) 100%);
}

.corner-icon{
  position:absolute; height: 4rem; object-fit: contain; aspect-ratio: 57 / 80;
  right: 6.25rem; bottom: 6.25rem;
}

:focus-visible{
  outline: 0.125rem solid #fff;
  outline-offset: 0.25rem;
  border-radius: 0.5rem;
}

.nav a{
  position: relative;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-0.2rem;
  height:0.2rem;
  background: rgba(255,255,255,0.25);
  border-radius:10rem;
  transform: scaleX(0);
  transform-origin: var(--underline-origin, left) center;
  transition: transform 350ms ease;
}

.nav a.is-underline::after{
  transform: scaleX(1);
}

.bg-layer { position: absolute; inset: 0; z-index: 0; }
.grad-1   { position: absolute; left: 0; width: 100%; z-index: 2; }
.grad-2   { position: absolute; left: 0; width: 100%; z-index: 4; }

.intro-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50rem;
  height: 15.5rem;
  flex-shrink: 0;
  aspect-ratio: 100 / 31;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
}

body { opacity: 1; transition: opacity 350ms ease; }
body.intro-fade-out { opacity: 0; }