/* ============================================================
   AIRDROP.WORLD — shared design system
   Dark editorial (Buyers Club tokens) × immersive world grammar
   ============================================================ */

:root{
  --bg:#0B0C10;
  --bg2:#101219;
  --black:#050507;
  --card:#14161F;
  --card2:#1A1D28;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --text:#ECEAE3;
  --muted:#868C99;
  --dim:#5B616E;
  --signal:#3D63FF;
  --signal2:#5B7BFF;
  --glow:rgba(61,99,255,.5);
  --amber:#F5A524;
  --red:#E0574B;
  --mint:#3DD4A0;
  --display:"Anton",sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"Space Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--black);color:var(--text);font-family:var(--body)}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--signal);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- film grain ---- */
.grain{position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-4%)}
  30%{transform:translate(4%,2%)}50%{transform:translate(-2%,5%)}
  70%{transform:translate(5%,-3%)}90%{transform:translate(-4%,1%)}}

/* ---- preloader ---- */
#loader{position:fixed;inset:0;z-index:200;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transition:opacity .8s ease,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.squares{position:relative;width:110px;height:110px}
.squares span{position:absolute;inset:0;border:1.5px solid var(--text);animation:sq 3.2s linear infinite}
.squares span:nth-child(2){animation-delay:-.4s;opacity:.85}
.squares span:nth-child(3){animation-delay:-.8s;opacity:.7}
.squares span:nth-child(4){animation-delay:-1.2s;opacity:.55}
.squares span:nth-child(5){animation-delay:-1.6s;opacity:.4}
@keyframes sq{from{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.72)}to{transform:rotate(360deg) scale(1)}}
#loadpct{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--muted)}
#loader .mark{width:230px;height:76px;object-fit:cover;object-position:center 52%;opacity:0;transition:opacity .6s}
#loader.reveal .mark{opacity:1}
#loader.reveal .squares,#loader.reveal #loadpct{opacity:0;transition:opacity .4s}

/* ---- top bar ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:rgba(5,5,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar .mark{width:104px;height:34px;object-fit:cover;object-position:center 52%}
.topbar .wordmark{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
.topbar .wordmark b{color:var(--text);font-weight:700}

/* ---- tick nav ---- */
.ticknav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.ticks{display:flex;align-items:flex-end;gap:14px}
.tick{width:1.5px;height:14px;background:rgba(255,255,255,.35);cursor:pointer;border:none;padding:0;
  transition:height .3s,background .3s}
.tick:hover{background:var(--text)}
.tick.active{height:24px;background:var(--signal2);box-shadow:0 0 12px var(--glow)}
.ticklabel{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;
  transition:opacity .3s}

/* ---- chapters ---- */
.chapter{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line)}
.chapter .bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.chapter .bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.42)}
.chapter .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,5,7,.85),rgba(5,5,7,.35) 40%,rgba(5,5,7,.92))}
.chapter .inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:120px 26px}

.ghostnum{position:absolute;z-index:1;right:-2%;top:6%;
  font-family:var(--display);font-size:clamp(160px,34vw,480px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);user-select:none;will-change:transform}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--signal2);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.eyebrow:before{content:"";display:block;width:34px;height:1px;background:var(--signal2)}

.chtitle{font-family:var(--body);font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(44px,9vw,120px);line-height:.92;letter-spacing:-.01em;margin-bottom:30px}
.chtitle .thin{color:transparent;-webkit-text-stroke:1.5px var(--text)}

.chdesc{max-width:56ch;font-size:clamp(15px,1.6vw,19px);line-height:1.7;color:var(--muted);margin-bottom:40px}
.chdesc b,.chdesc strong{color:var(--text);font-weight:600}

.enter{display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--text);
  border:1px solid var(--line2);padding:16px 30px;border-radius:999px;background:transparent;cursor:pointer;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.enter .arr{transition:transform .3s}
.enter:hover{border-color:var(--signal);box-shadow:0 0 24px var(--glow);transform:translateY(-2px)}
.enter:hover .arr{transform:translateX(6px)}
.enter .sub{color:var(--dim);letter-spacing:.14em}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ---- welcome ---- */
#welcome{background:var(--black)}
#welcome .inner{text-align:center;padding-top:150px}
#welcome .mark-lg{width:min(460px,84vw);height:auto;aspect-ratio:2.9/1;object-fit:cover;object-position:center 52%;margin:0 auto 40px;filter:drop-shadow(0 0 60px rgba(91,123,255,.18))}
.bigtitle{font-family:var(--body);font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(40px,8.4vw,110px);line-height:.95;letter-spacing:-.01em}
.bigtitle em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--text)}
.manifesto{max-width:52ch;margin:34px auto 0;color:var(--muted);font-size:clamp(15px,1.7vw,19px);line-height:1.75}
.manifesto .tag{display:block;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal2)}
.scrollcue{margin:64px auto 0;width:1px;height:64px;background:linear-gradient(var(--text),transparent);
  animation:cue 2s ease infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- ring interstitial ---- */
.ring{min-height:70vh;display:flex;align-items:center;justify-content:center;background:var(--black);
  border-bottom:1px solid var(--line);overflow:hidden}
.ring svg{width:min(720px,92vw);height:auto;overflow:visible}
.ring textPath{font-family:var(--body);font-weight:900;font-stretch:125%;font-size:34px;letter-spacing:.12em;fill:var(--text)}
.ring .rot{transform-origin:center;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- records chamber collage ---- */
.collage{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;opacity:.5}
.collage img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.5)}

/* ---- outro ---- */
#contact{background:var(--black);text-align:center}
#contact .inner{padding-bottom:170px}
.contactrow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.contactrow .enter{padding:14px 26px}
.finetag{margin-top:70px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}

/* ---- overlay (live app embeds) ---- */
#overlay{position:fixed;inset:0;z-index:150;background:rgba(5,5,7,.92);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:26px}
#overlay.open{display:flex}
.ovframe{position:relative;width:min(1240px,96vw);height:min(820px,88vh);background:var(--card);
  border:1px solid var(--line2);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px rgba(0,0,0,.6)}
.ovframe.phone{width:430px;max-width:94vw}
.ovhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.ovhead .t{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text)}
.ovhead .hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.ovhead .hint b{color:var(--mint);font-weight:700}
.ovclose{border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;padding:8px 16px;border-radius:999px;
  transition:border-color .3s}
.ovclose:hover{border-color:var(--red);color:var(--red)}
.ovbody{flex:1;position:relative}
.ovbody iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.ovload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--muted)}
.ovlink{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.ovlink:hover{color:var(--signal2)}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- mobile ---- */
@media (max-width:720px){
  .topbar .wordmark:last-child{display:none}
  .ticklabel{display:none}
  .ticks{gap:11px}
  .chapter .inner{padding:100px 20px}
  .ghostnum{right:-8%;top:2%}
  .collage{grid-template-columns:repeat(2,1fr)}
  .ovframe.phone{width:94vw}
}