@font-face { font-family: Sora; font-weight: 400; font-display: swap; src: url(../fonts/sora-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Sora; font-weight: 600; font-display: swap; src: url(../fonts/sora-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Sora; font-weight: 700; font-display: swap; src: url(../fonts/sora-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Sora; font-weight: 800; font-display: swap; src: url(../fonts/sora-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url(../fonts/roboto-latin-500-normal.woff2) format('woff2'); }

:root {
  --yellow: #FFC72C;
  --black: #0b0b0b;
  --white: #FAF8F8;
  --fg: #FAF8F8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--fg);
  font-family: Roboto, system-ui, sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- logo ---------- */
#logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  transform-origin: 0 0;
  display: block;
  pointer-events: none;
  will-change: transform;
  width: min(72vw, 640px);
  transform: translate3d(calc((100vw - min(72vw, 640px)) / 2), calc((100vh - min(72vw, 640px) * 0.265) / 2), 0);
  opacity: 0;
  transition: opacity .6s ease;
}
body.ready #logo { opacity: 1; }

#logo .tilt { position: relative; will-change: transform; }
#logo img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
#logo img.lb { position: absolute; inset: 0; opacity: 0; }

/* ---------- burger + menu ---------- */
.burger {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 0;
}
.burger span {
  display: block;
  width: 28px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform .35s cubic-bezier(.7, 0, .2, 1), background .25s;
}
.burger:hover span:nth-child(2) { transform: scaleX(.65); transform-origin: right; }
body.menu-open .burger span { background: var(--white); }
body.menu-open .burger span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg) scaleX(1); }
.burger:focus-visible, .menu a:focus-visible, .btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(11, 11, 11, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s .4s;
  touch-action: auto;
}
body.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.menu ul { list-style: none; margin: 0; padding: 0 24px; }
.menu li { overflow: hidden; }
.menu a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: .12em 0;
  font: 800 clamp(2.6rem, 9vw, 6.5rem)/1.05 Sora, sans-serif;
  letter-spacing: -.035em;
  color: var(--white);
  text-decoration: none;
  transform: translateY(110%);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), color .2s;
}
.menu a i { font: 600 .9rem Sora, sans-serif; letter-spacing: .1em; color: var(--yellow); font-style: normal; }
.menu a:hover { color: var(--yellow); }
body.menu-open .menu a { transform: none; }
body.menu-open .menu li:nth-child(2) a { transition-delay: .06s; }
body.menu-open .menu li:nth-child(3) a { transition-delay: .12s; }

/* ---------- scenes ---------- */
.stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

.scene {
  --w: 0;
  --d: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 7vw, 120px) 8vh;
  opacity: var(--w);
  transform: translate3d(0, calc(var(--d) * -70px), 0);
  visibility: hidden;
  will-change: opacity, transform;
}
.scene.left { align-items: flex-start; text-align: left; }
.scene.right { align-items: flex-end; text-align: left; }
.scene.center { align-items: center; text-align: center; padding-bottom: 0; }

.inner { width: min(560px, 44vw); }
.inner.wide { width: min(980px, 100%); }
.scene.center .inner { width: min(980px, 100%); }
.scene.testi .inner { width: min(520px, 40vw); }

.eyebrow {
  margin: 0 0 1.1rem;
  font: 600 .85rem/1 Sora, sans-serif;
  letter-spacing: .22em;
  color: var(--yellow);
}

h2 {
  margin: 0;
  font: 800 clamp(2.3rem, 4.8vw, 4.6rem)/1.02 Sora, sans-serif;
  letter-spacing: -.035em;
}
h2.big { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.y { color: var(--yellow); }

.lede {
  margin: 1.3rem 0 0;
  max-width: 38ch;
  font: 400 clamp(1rem, 1.35vw, 1.22rem)/1.6 Roboto, sans-serif;
  opacity: .74;
}
.scene.center .lede { margin-left: auto; margin-right: auto; }
.fine { margin: 2.4rem 0 0; font: 400 .8rem Roboto, sans-serif; opacity: .45; }

.word {
  --k: clamp(0, calc((var(--w) - var(--i) / var(--n, 1) * .35) * 3), 1);
  display: inline-block;
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * .55em), 0);
  filter: blur(calc((1 - var(--k)) * 7px));
}

.cta-row { margin-top: 2.2rem; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  padding: 1rem 1.7rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--black);
  font: 700 1rem/1 Sora, sans-serif;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(255, 199, 44, .28); }
.btn.ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(250, 248, 248, .5); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--yellow); color: var(--yellow); }
.btn[hidden] { display: none; }

/* ---------- phones and portrait ---------- */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .scene { padding: 0 22px 8vh; }
  .scene.left, .scene.right { align-items: flex-start; justify-content: flex-end; padding-bottom: 25vh; }
  .scene.left .inner, .scene.right .inner, .scene.testi .inner { width: 100%; }
  .scene.testi { justify-content: flex-start; padding-top: 17vh; padding-bottom: 0; }
  .burger { top: 8px; right: 8px; }
  .lede { max-width: 32ch; }
}

@media (prefers-reduced-motion: reduce) {
  .word { filter: none; }
}