@font-face{font-family:"Aglet Sans";src:url("../fonts/AgletSans-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Aglet Sans";src:url("../fonts/AgletSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:optional}
@font-face{font-family:"FF DIN Round Pro";src:url("../fonts/FFDINRoundPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional}
:root{
  --ink:#1b130f;
  --sun:#efc07a;
  --terra:#c46a45;
  --display:"Aglet Sans",system-ui,sans-serif;
  --sans:"FF DIN Round Pro",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#f3ebe0;color:var(--ink);font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html.is-in,html.is-in body{background:#1b130f;color:#f6efe3;font-family:var(--sans)}
img{display:block;max-width:100%}
button,a{font:inherit;color:inherit}

.gate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7eee4,#edd4bc)}
.gate.is-out{display:none}
.gate-card{width:min(440px,90vw);padding:40px 36px 34px;background:#fffaf3;border:1px solid rgba(27,19,15,.1);text-align:center}
.gate-mark{width:64px;height:64px;margin:0 auto 12px;object-fit:contain}
.gate-kicker{font-family:var(--display);letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#8a5a3c}
.gate-card h1{font-family:var(--display);font-weight:900;font-size:40px;margin:8px 0 10px}
.gate-sub{font-size:16px;color:#5c4a3f;margin-bottom:22px;line-height:1.45}
.gate-label{display:block;text-align:left;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8a5a3c;margin-bottom:8px}
.gate-input{width:100%;padding:14px 16px;border:1px solid rgba(27,19,15,.18);background:#fff;font-size:18px;outline:none}
.gate-btn{margin-top:16px;width:100%;padding:14px;border:0;background:var(--terra);color:#fff;font-family:var(--display);font-weight:900;font-size:17px;cursor:pointer}
.gate-err{margin-top:12px;color:#a33;font-size:14px}

.intro{position:fixed;inset:0;z-index:40;background:linear-gradient(180deg,#f7eee4,#f0d9c4);display:flex;flex-direction:column;align-items:center;justify-content:center}
.intro[hidden]{display:none}
.intro.is-out{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s}
.intro-stage{position:relative;width:min(1100px,92vw);aspect-ratio:16/9}
.intro-still,.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.intro-video{opacity:0}
.intro-video.is-live{opacity:1}
.intro-bar{margin-top:24px;text-align:center;width:min(640px,90vw)}
.intro-kicker{font-family:var(--display);font-size:18px;letter-spacing:.22em;text-transform:uppercase;color:#8a5a3c}
.intro-title{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,60px);margin:8px 0 16px}
.progress{height:4px;background:rgba(27,19,15,.14);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--terra)}
.intro-pct{margin-top:12px;font-size:16px;letter-spacing:.18em;color:#8a5a3c}
.skip{position:absolute;top:28px;right:32px;background:none;border:0;letter-spacing:.16em;text-transform:uppercase;font-size:15px;color:#8a5a3c;cursor:pointer}

.stage{position:relative;min-height:100svh;overflow:hidden}
.stage[hidden]{display:none}
.worlds{position:absolute;inset:0}
.world-still,.world-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.world-still.is-on,.world-vid.is-on{opacity:1}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,6,.78) 0%,rgba(12,8,6,.5) 42%,rgba(12,8,6,.18) 100%),linear-gradient(180deg,rgba(12,8,6,.4) 0%,transparent 30%,rgba(12,8,6,.55) 100%)}
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:28px clamp(28px,4vw,64px)}
.mark{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;font-size:26px}
.mark img{width:40px;height:40px;object-fit:contain}
.badge{font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#3a2415;background:var(--sun);padding:8px 16px;border-radius:999px}
.panel{position:relative;z-index:2;margin:8vh clamp(28px,5vw,72px) 0;max-width:760px;padding:40px 44px 36px;background:rgba(14,10,8,.78);border:1px solid rgba(246,239,227,.14)}
.eyebrow{font-size:15px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--sun);margin-bottom:16px}
.panel h1{font-family:var(--display);font-weight:900;font-size:clamp(52px,6.4vw,88px);line-height:1.04;color:#f8f1e6}
.panel em{font-style:italic;color:var(--sun)}
.sub{margin:22px 0 30px;font-size:22px;line-height:1.45;color:#f0e6d6;max-width:560px}
.cta{display:inline-flex;padding:16px 32px;border-radius:999px;background:var(--sun);color:#3a2415;font-family:var(--display);font-weight:700;font-size:18px;text-decoration:none}
.world-line{margin-top:22px;font-size:16px;color:rgba(240,230,214,.78)}
.ticks{position:absolute;z-index:2;left:clamp(28px,5vw,72px);bottom:32px;display:flex;gap:22px}
.ticks button{background:rgba(14,10,8,.55);border:1px solid rgba(246,239,227,.2);color:#f6efe3;letter-spacing:.16em;text-transform:uppercase;font-size:14px;cursor:pointer;padding:10px 16px}
.ticks button.is-on{background:var(--sun);color:#3a2415;border-color:var(--sun)}
@media(max-width:720px){.panel{margin-top:6vh;padding:28px 22px}.ticks{left:22px;right:22px;flex-wrap:wrap;gap:10px}}