:root{
  --black:#050505;
  --white:#f5f5f2;
  --orange:#ff5a00;
  --muted:#a9a9a5;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  letter-spacing:.01em;
  position:relative;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url('background.png') center center/cover no-repeat;
  transform:scale(1.03);
  filter:grayscale(1) contrast(1.05) brightness(.78);
  opacity:.5;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.58) 100%);
}
main,footer{position:relative;z-index:1}
.shell{width:min(1180px,calc(100% - 48px));margin:0 auto}
.hero{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:transparent;
}
.hero-media{display:none}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.36) 54%,rgba(0,0,0,.5) 100%),linear-gradient(0deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,.12) 36%,transparent 58%);
}
.hero-content{position:relative;z-index:1;padding:56px 0 88px}
.logo{width:min(270px,58vw);display:block;margin-bottom:48px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.eyebrow,.kicker{font-size:.74rem;font-weight:800;letter-spacing:.22em;color:var(--orange);text-transform:uppercase}
h1,h2{font-family:Impact,'Arial Narrow','Arial Black',Arial,Helvetica,sans-serif;font-weight:900;line-height:.84;letter-spacing:-.025em;margin:0;text-transform:uppercase;text-shadow:0 6px 18px rgba(0,0,0,.28)}
h1{font-size:clamp(4rem,11vw,9.4rem);max-width:920px}
h1 span,h2 span{color:var(--orange)}
.lede{font-size:clamp(1.08rem,2vw,1.5rem);line-height:1.45;max-width:660px;color:#ededeb;margin:30px 0 12px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero-note{font-size:1rem;line-height:1.5;max-width:560px;color:#d8d8d4;margin:0 0 22px;text-transform:none}
.text-link{color:#fff;text-decoration:none;text-transform:uppercase;font-weight:800;font-size:.82rem;letter-spacing:.18em;border-bottom:1px solid #fff;padding-bottom:8px}
.section{
  padding:140px 0;
  border-top:1px solid var(--line);
  background:rgba(5,5,5,.24);
  backdrop-filter:blur(1px);
}
.intro{display:grid;grid-template-columns:180px 1fr;gap:36px}
.intro h2,.list h2,.tickets h2{font-size:clamp(4rem,9vw,8rem)}
.intro p{grid-column:2;max-width:760px;font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.5;color:#f0efea}
.intro .accent-line{color:#fff;font-weight:800}
.statement{
  padding:150px 0;
  background:rgba(8,8,8,.28);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(2px);
}
.statement .shell{position:relative}
.statement h2{font-size:clamp(4.5rem,10vw,9rem);max-width:1000px}
.statement p{max-width:560px;font-size:1.25rem;line-height:1.55;color:#efeee8;margin-top:34px}
.colon-mark{position:absolute;right:4vw;top:0;display:flex;flex-direction:column;gap:18px;opacity:.95}
.colon-mark span{display:block;width:54px;height:54px;border-radius:50%;background:var(--orange)}
.list-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:80px;margin-top:26px;align-items:end}
.list-grid>div>p{font-size:1.15rem;line-height:1.6;max-width:540px;color:#efeee8}
.signup{
  border-top:1px solid rgba(255,255,255,.22);
  padding:18px 20px 20px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
}
.signup label{display:block;border-bottom:1px solid rgba(255,255,255,.18);padding:22px 0}
.signup label span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#bdbdb7;margin-bottom:10px}
.signup input{width:100%;background:transparent;border:0;outline:0;color:#fff;font-size:1.2rem;padding:0}
.signup input::placeholder{color:#7c7c78}
.signup button,.ticket-button{width:100%;margin-top:22px;padding:18px 20px;background:var(--orange);color:#fff;border:0;font-weight:900;letter-spacing:.1em;cursor:pointer}
.form-note{font-size:.78rem!important;color:#b9b9b5!important;margin-top:12px!important}
.tickets{
  padding:140px 0;
  background:#080808;
  color:#fff;
  border-top:1px solid var(--line);
}
.ticket-grid{display:grid;grid-template-columns:180px 1fr;gap:36px}
.tickets .kicker{color:var(--orange)}
.tickets p{max-width:650px;font-size:1.2rem;line-height:1.55;color:#f3f3ef}
.ticket-button{max-width:340px;background:var(--orange);color:#fff;opacity:1;cursor:not-allowed}
footer{
  padding:48px 0 60px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-top:1px solid var(--line);
  background:#050505;
}
.footer-logo{width:140px}
footer p{font-size:.72rem;letter-spacing:.18em;color:#d1d1cc}
@media(max-width:760px){
  .shell{width:min(100% - 30px,1180px)}
  body::before{background-position:58% center}
  .hero-content{padding:34px 0 54px}
  .logo{margin-bottom:34px;width:210px}
  h1{font-size:clamp(3.6rem,18vw,6rem)}
  .section,.statement,.tickets{padding:90px 0}
  .intro,.ticket-grid,.list-grid{grid-template-columns:1fr;gap:24px}
  .intro p{grid-column:1}
  .intro h2,.list h2,.tickets h2,.statement h2{font-size:clamp(3.5rem,17vw,6.5rem)}
  .colon-mark{right:10px;top:-35px;gap:10px}
  .colon-mark span{width:30px;height:30px}
  .list-grid{margin-top:18px}
  .signup{padding:12px 16px 18px}
  footer{align-items:center}
}


/* Desktop consistency */
@media (min-width: 761px) {
  .shell{
    width:min(1180px,calc(100% - 64px));
  }

  .hero-content{
    max-width:1080px;
  }

  .logo{
    width:clamp(210px,18vw,270px);
    height:auto;
  }

  h1{
    font-size:clamp(5.5rem,8.2vw,9rem);
  }

  .intro h2,
  .list h2,
  .tickets h2{
    font-size:clamp(4.75rem,7.4vw,7.6rem);
  }

  .statement h2{
    font-size:clamp(5.25rem,8.2vw,8.4rem);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .shell{
    width:min(100% - 48px,980px);
  }

  .intro,
  .ticket-grid{
    grid-template-columns:140px 1fr;
    gap:28px;
  }

  .list-grid{
    grid-template-columns:1.1fr .9fr;
    gap:48px;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .hero{
    min-height:760px;
  }

  .hero-content{
    padding:38px 0 54px;
  }

  .logo{
    width:220px;
    margin-bottom:28px;
  }

  h1{
    font-size:clamp(5rem,7vw,7.4rem);
  }

  .lede{
    margin-top:22px;
    font-size:1.12rem;
  }

  .hero-note{
    margin-bottom:18px;
  }
}

@media (min-width: 1600px) {
  .shell{
    width:min(1280px,calc(100% - 96px));
  }

  .hero-content{
    max-width:1180px;
  }
}


/* Motion system */
.hero-animate{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1);
}

.page-loaded .hero-logo{
  opacity:1;
  transform:translateY(0);
  transition-delay:.08s;
}

.page-loaded .hero-title{
  opacity:1;
  transform:translateY(0);
  transition-delay:.20s;
}

.page-loaded .hero-copy{
  opacity:1;
  transform:translateY(0);
  transition-delay:.34s;
}

.page-loaded .hero-copy-2{
  opacity:1;
  transform:translateY(0);
  transition-delay:.44s;
}

.page-loaded .hero-cta{
  opacity:1;
  transform:translateY(0);
  transition-delay:.54s;
}

.reveal{
  opacity:0;
  transform:translateY(44px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
}

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

body::before{
  animation:ambientDrift 22s ease-in-out infinite alternate;
  will-change:transform;
}

.text-link,
.signup button,
.ticket-button{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

.text-link:hover{
  transform:translateX(5px);
}

.signup button:hover,
.ticket-button:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(255,90,0,.22);
}

.logo{
  transition:transform .35s ease, filter .35s ease;
}

.logo:hover{
  transform:scale(1.015);
}

@keyframes ambientDrift{
  0%{transform:scale(1.03) translate3d(0,0,0)}
  100%{transform:scale(1.07) translate3d(-0.6%, -0.4%, 0)}
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

  .hero-animate,
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}


/* Animated 5:01 logo clock */
.logo-svg{
  overflow:visible;
}

.minute-hand,
.hour-hand{
  transform-box:view-box;
  transform-origin:665px 346px;
}

.page-loaded .minute-hand{
  animation:minuteTo501 2.15s cubic-bezier(.2,.75,.18,1) .18s both;
}

.page-loaded .hour-hand{
  animation:hourTo501 2.15s cubic-bezier(.2,.75,.18,1) .18s both;
}

@keyframes minuteTo501{
  0%{transform:rotate(0deg)}
  72%{transform:rotate(1095deg)}
  100%{transform:rotate(1086deg)}
}

@keyframes hourTo501{
  0%{transform:rotate(0deg)}
  72%{transform:rotate(522deg)}
  100%{transform:rotate(510.5deg)}
}

@media (prefers-reduced-motion: reduce){
  .minute-hand{transform:rotate(6deg)!important}
  .hour-hand{transform:rotate(150.5deg)!important}
}