/* Clublio — coming soon
   Palette: ink black / electric sky / white */

:root{
  --ink:#000000;
  --ink-2:#08090b;
  --sky:#38bdf8;
  --sky-hot:#7dd8ff;
  --sky-deep:#0284c7;
  --white:#ffffff;
  --muted:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.10);
  --pad:clamp(20px, 4vw, 56px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:inherit;text-decoration:none}

/* ---------- Loader ---------- */
.loader{
  position:fixed;inset:0;z-index:90;
  background:var(--ink);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--pad);
  transition:transform 1s var(--ease), opacity .6s ease .35s;
}
.loader.done{transform:translateY(-101%);opacity:0;pointer-events:none}
.loader__bar{position:relative;flex:1;height:2px;background:rgba(255,255,255,.12);margin-right:24px}
.loader__bar span{position:absolute;inset:0 100% 0 0;background:var(--sky);transition:right .2s linear}
.loader__num{
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(48px,10vw,120px);line-height:.8;letter-spacing:-.02em;
}

/* ---------- Background layers ---------- */
.fx,.glow,.grid,.grain,.vignette{position:fixed;inset:0;pointer-events:none}
.fx{z-index:0;width:100%;height:100%}
.glow{
  z-index:1;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
    rgba(56,189,248,.20), rgba(56,189,248,.06) 40%, transparent 70%);
  transition:background .18s linear;
}
.grid{
  z-index:1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(70px,9vw,120px) clamp(70px,9vw,120px);
  mask-image:radial-gradient(circle at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 20%, transparent 78%);
}
.vignette{
  z-index:2;
  background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.85) 100%);
}
.grain{
  z-index:3;opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

/* ---------- Layout shell ---------- */
.shell{
  position:relative;z-index:5;
  height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto auto;
  padding:var(--pad);
  padding-bottom:clamp(16px,2.4vh,34px);
  gap:clamp(12px,2vh,28px);
}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand__mark{width:22px;height:22px;fill:var(--sky);flex:none;
  filter:drop-shadow(0 0 14px rgba(56,189,248,.55));
  transition:transform .5s var(--ease)}
.brand:hover .brand__mark{transform:translateX(4px) skewX(-10deg)}
.brand__word{font-weight:800;letter-spacing:.24em;font-size:13px}
.nav__meta{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;
}
.nav__sep{opacity:.35}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sky);
  box-shadow:0 0 0 0 rgba(56,189,248,.7);animation:pulse 2s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(56,189,248,0)}
  100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}
}

/* ---------- Hero ---------- */
.hero{
  align-self:center;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.4vh,30px);
  min-height:0;
  /* lift the composition off the ticker so the type reads higher on screen */
  padding-bottom:clamp(16px,4.5vh,64px);
}
.eyebrow{
  margin:0;display:flex;align-items:center;gap:14px;
  font-size:clamp(10px,1.1vw,12px);letter-spacing:.32em;text-transform:uppercase;
  color:var(--sky);
}
.rule{display:block;width:clamp(36px,7vw,90px);height:1px;background:linear-gradient(90deg,var(--sky),transparent)}

.title{margin:0;font-family:"Anton",Impact,"Haettenschweiler",sans-serif;font-weight:400}
.line{display:block;overflow:hidden;padding:.08em 0;margin:-.08em 0}
.line__in{
  display:block;
  /* scale by width AND height so the type never crowds the nav in short windows */
  font-size:clamp(48px, min(15.5vw, 19vh), 260px);
  line-height:.84;
  letter-spacing:-.02em;
  text-transform:uppercase;
  transform:skewX(-7deg);
  transform-origin:left bottom;
}
.line:nth-child(2) .line__in{margin-left:clamp(14px,11vw,220px)}
.line__in.outline{
  color:transparent;
  -webkit-text-stroke:clamp(1px,.16vw,2.5px) var(--sky);
  text-shadow:0 0 60px rgba(56,189,248,.35);
}

.pitch{max-width:46ch}
.pitch p{
  margin:0;color:var(--muted);
  font-size:clamp(14px,1.5vw,19px);line-height:1.5;
}

.stats{display:flex;gap:clamp(22px,5vw,72px);flex-wrap:wrap;padding-top:clamp(4px,1.4vh,14px)}
.stat{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line);padding-left:14px}
.stat b{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(24px,3.2vw,44px);line-height:1;color:var(--white);
}
.stat:nth-child(2) b{color:var(--sky)}
.stat span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---------- Right side rail ---------- */
.rail{
  position:fixed;top:0;bottom:0;right:calc(var(--pad) - 6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  pointer-events:none;z-index:6;
}
.rail__line{width:1px;flex:1;background:linear-gradient(var(--line),transparent)}
.rail__line:last-child{background:linear-gradient(transparent,var(--line))}
.rail__text{
  writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(255,255,255,.30);white-space:nowrap;
}
@media (max-width:900px){.rail{display:none}}

/* ---------- Ticker ---------- */
.ticker{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(10px,1.6vh,18px) 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:slide 26s linear infinite}
.ticker__track span{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(16px,2.2vw,30px);letter-spacing:.02em;text-transform:uppercase;
  color:rgba(255,255,255,.14);
  padding-right:24px;
}
.ticker__track i{font-style:normal;color:var(--sky);margin:0 24px;font-size:.55em;transform:translateY(-.15em)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:clamp(6px,1.4vh,16px);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.foot__r{color:rgba(255,255,255,.28)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(115%) skewY(4deg)}
.line__in.reveal{transform:translateY(110%) skewX(-7deg)}
body.ready .reveal{
  opacity:1;transform:translateY(0) skewY(0);
  transition:transform 1.15s var(--ease), opacity .8s ease;
}
body.ready .line__in.reveal{transform:translateY(0) skewX(-7deg)}
body.ready .reveal[data-d="0"]{transition-delay:.05s}
body.ready .reveal[data-d="1"]{transition-delay:.14s}
body.ready .reveal[data-d="2"]{transition-delay:.24s}
body.ready .reveal[data-d="3"]{transition-delay:.42s}
body.ready .reveal[data-d="4"]{transition-delay:.52s}

/* ---------- Responsive ---------- */

/* short desktop windows: compress the stack instead of letting it overrun the nav */
@media (min-width:641px) and (max-height:780px){
  .hero{gap:clamp(10px,1.7vh,20px);padding-bottom:clamp(12px,2.6vh,30px)}
  .pitch p{font-size:16px}
  .stats{padding-top:2px}
  .stat b{font-size:clamp(24px,2.6vw,34px)}
  .ticker{padding:8px 0}
  .foot{padding-top:8px}
}

@media (max-width:640px){
  :root{--pad:20px}
  body{overflow:auto}
  .shell{height:auto;min-height:100dvh;gap:0;padding-bottom:clamp(20px,3vh,28px)}

  /* poster composition: type sits low, ticker + credit anchor the base */
  .hero{align-self:end;padding-bottom:clamp(34px,8vh,64px);gap:clamp(16px,2.8vh,26px)}

  .nav__meta span:not(.dot):nth-last-child(-n+2){display:none}
  .nav__meta{font-size:10px;letter-spacing:.18em}
  .brand__word{font-size:12px;letter-spacing:.2em}

  .eyebrow{font-size:9.5px;letter-spacing:.2em;gap:10px}
  .rule{width:28px}

  .line__in{font-size:clamp(56px,24.5vw,130px)}
  .line:nth-child(2) .line__in{margin-left:10px}

  .pitch p{font-size:15px;line-height:1.45}
  .stats{gap:18px}
  .stat{padding-left:10px}
  .stat b{font-size:26px}
  .stat span{font-size:9px;letter-spacing:.16em}

  .ticker{padding:11px 0;margin-top:2px}
  .ticker__track span{font-size:17px}
  .ticker__track i{margin:0 16px}

  .foot{gap:6px;padding-top:clamp(14px,2.4vh,22px)}
  .foot__c{font-size:9.5px;letter-spacing:.1em}
  .foot__r{display:none}
}

@media (max-width:400px){
  .foot__rights{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}