/* ============================================================
   MANTHONY — underground portal
   Hand-built, no framework. Dark, minimal, photographic.
   ============================================================ */

/* ---- Fonts (self-hosted, latin) ---- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/space-grotesk-400.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/space-grotesk-500.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/space-grotesk-700.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/space-mono-400.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/space-mono-700.woff2") format("woff2");}

/* ---- Tokens ---- */
:root{
  --bg:#0B0B0C;
  --ink:#F2F0EC;
  --ink-dim:rgba(242,240,236,.60);
  --ink-faint:rgba(242,240,236,.34);
  --ember:#D24B2A;
  --line:rgba(242,240,236,.16);
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --pad:clamp(20px,3.6vw,54px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
a{color:inherit;text-decoration:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   STAGE — full viewport
   ============================================================ */
.stage{position:fixed;inset:0;overflow:hidden;background:var(--bg);}

/* ---- Hero video ---- */
.hero{position:absolute;inset:0;z-index:0;}
.hero__vid{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.04);          /* hide sub-pixel edges / loop seams */
  will-change:transform;
  background:var(--bg);
}

/* ---- Scrim: vignette + directional darkening for legibility ---- */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 70% 18%,rgba(11,11,12,0) 38%,rgba(11,11,12,.62) 100%),
    linear-gradient(to top,rgba(11,11,12,.92) 4%,rgba(11,11,12,.42) 34%,rgba(11,11,12,.10) 60%,rgba(11,11,12,.30) 100%),
    linear-gradient(to right,rgba(11,11,12,.66) 0%,rgba(11,11,12,.10) 46%,rgba(11,11,12,0) 70%);
}

/* ---- Film grain ---- */
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.11;mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ============================================================
   VEIL — foreground content grid
   ============================================================ */
.veil{position:absolute;inset:0;z-index:3;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:var(--pad);
}

/* ---- Top bar ---- */
.topbar{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim);}
.meta .dot{color:var(--ember);}
.info-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-dim);background:none;border:0;cursor:pointer;
  padding:4px 0;position:relative;transition:color .35s var(--ease);
}
.info-btn::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ember);transition:right .4s var(--ease);}
.info-btn:hover,.info-btn:focus-visible{color:var(--ink);outline:none;}
.info-btn:hover::after,.info-btn:focus-visible::after{right:0;}

/* ---- Brand block (bottom-left) ---- */
.brand{align-self:end;max-width:min(640px,86vw);
  opacity:0;transform:translateY(14px);
}
body.ready .brand{animation:rise 1.1s .15s var(--ease) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}

.brand__mark{display:block;width:clamp(232px,33vw,452px);height:auto;margin-bottom:18px;}
.brand__claim{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(14px,1.5vw,18px);letter-spacing:.06em;
  color:var(--ink-dim);margin-bottom:22px;
}
.rule{height:1px;width:64px;background:var(--line);margin-bottom:20px;}

/* ---- Links ---- */
.links{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;}
.links a{position:relative;padding:6px 0;color:var(--ink);transition:color .35s var(--ease);}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ember);transition:right .4s var(--ease);}
.links a:hover,.links a:focus-visible{color:var(--ember);outline:none;}
.links a:hover::after,.links a:focus-visible::after{right:0;}
.links .sep{margin:0 clamp(12px,2vw,24px);color:var(--ink-faint);}

/* ============================================================
   LOADER — crafted entrance
   ============================================================ */
.loader{position:fixed;inset:0;z-index:50;background:var(--bg);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s;}
.loader__bar{width:min(180px,40vw);height:1px;background:var(--line);position:relative;overflow:hidden;}
.loader__bar::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:var(--ember);animation:load 1.4s var(--ease) forwards;}
@keyframes load{0%{transform:scaleX(0);}70%{transform:scaleX(.7);}100%{transform:scaleX(1);}}
body.ready .loader{opacity:0;visibility:hidden;}

/* ============================================================
   INFO overlay
   ============================================================ */
.info{position:fixed;inset:0;z-index:40;
  background:rgba(8,8,9,.976);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
  display:grid;place-items:center;padding:var(--pad);overflow-y:auto;}
.info.open{opacity:1;visibility:visible;}
.info__panel{max-width:560px;width:100%;transform:translateY(10px);transition:transform .55s var(--ease);}
.info.open .info__panel{transform:none;}
.info__mark{width:200px;height:auto;margin-bottom:26px;opacity:.96;}
.info__bio{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.7vw,18px);line-height:1.62;color:var(--ink);margin-bottom:30px;}
.info__bio .lead{color:var(--ember);}
.facts{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;margin-bottom:30px;}
.facts dt{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.18em;}
.facts dd{color:var(--ink-dim);}
.info__close{position:fixed;top:var(--pad);right:var(--pad);
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  background:none;border:0;color:var(--ink-dim);cursor:pointer;transition:color .3s var(--ease);}
.info__close:hover,.info__close:focus-visible{color:var(--ember);outline:none;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:560px){
  .hero__vid{object-position:50% 50%;}
  .brand__mark{margin-bottom:14px;}
  .links{font-size:11px;letter-spacing:.16em;gap:9px 18px;}
  .links .sep{display:none;}        /* clean wrap: no leading slash on a new line */
  .meta{font-size:10px;letter-spacing:.26em;}
  .info__panel{padding-top:8px;}
}


/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero__vid{transform:scale(1.04);}
  .brand{opacity:1;transform:none;animation:none;}
  .loader__bar::after{animation:none;transform:scaleX(1);}
  *{transition-duration:.001ms !important;}
}

/* ============================================================
   v03 — "abgespaced" overrides (cold · centered · glitch)
   ============================================================ */
:root{ --ember:#5FC6D2; }                 /* cold cyan accent replaces warm */

/* cooler, higher-contrast, more degraded visual */
.hero__vid{ filter:grayscale(.5) contrast(1.1) brightness(.88) saturate(.9); }
.grain{ opacity:.17; }

/* centered vignette: focus the orb, darken top/bottom for legibility */
.scrim{
  background:
    radial-gradient(circle at 50% 45%, rgba(11,11,12,0) 26%, rgba(11,11,12,.5) 66%, rgba(11,11,12,.93) 100%),
    linear-gradient(to bottom, rgba(11,11,12,.72) 0%, rgba(11,11,12,.12) 22%, rgba(11,11,12,.12) 58%, rgba(11,11,12,.9) 100%);
}

/* CRT scanlines */
.scan{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 2px 3px);
  animation:scan 8s linear infinite;
}
@keyframes scan{ from{background-position:0 0;} to{background-position:0 6px;} }

/* top bar: cryptic tag (left) · wordmark masthead (center) · INFO (right) */
.topbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.tag{ justify-self:start; font-family:var(--mono);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-faint); }
.info-btn{ justify-self:end; }
.brand__mark{ justify-self:center; width:clamp(152px,17vw,232px); margin:0;
  opacity:0; transition:opacity 1s var(--ease); }
body.ready .brand__mark{ opacity:1; animation:glitch 7s steps(1,end) 2s infinite; }

/* links sit at the bottom-center; the orb owns the middle */
.brand{ align-self:end;justify-self:center;text-align:center;max-width:min(720px,94vw); }
.rule{ margin:0 auto 18px; }
.links{ justify-content:center; }
@keyframes glitch{
  0%,90%,100%{ transform:translate(0,0); filter:none; }
  91%{ transform:translate(-1px,0);  filter:drop-shadow(2px 0 rgba(255,46,64,.75)) drop-shadow(-2px 0 rgba(70,210,228,.75)); }
  93%{ transform:translate(1.5px,0); filter:drop-shadow(-3px 0 rgba(255,46,64,.65)) drop-shadow(3px 0 rgba(70,210,228,.65)); }
  95%{ transform:translate(-1px,0);  filter:drop-shadow(2px 0 rgba(255,46,64,.5))  drop-shadow(-2px 0 rgba(70,210,228,.5)); }
  96%{ transform:translate(0,0); filter:none; }
}

@media (prefers-reduced-motion:reduce){
  .scan{ animation:none; }
  body.ready .brand__mark{ animation:none; }
  .snd.on .snd__eq i{ animation:none; height:8px; }
}

/* SOUND toggle — sits in the top bar (left), mirroring INFO on the right */
.snd{ justify-self:start;
  display:inline-flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .35s var(--ease); padding:4px 0; }
.snd:hover,.snd:focus-visible{ color:var(--ink); outline:none; }
.snd__eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.snd__eq i{ width:2px; height:4px; background:currentColor; opacity:.75; transition:height .2s var(--ease); }
.snd.on{ color:var(--ember); }
.snd.on .snd__eq i{ animation:eq .9s ease-in-out infinite; }
.snd.on .snd__eq i:nth-child(2){ animation-delay:.18s; }
.snd.on .snd__eq i:nth-child(3){ animation-delay:.36s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:12px; } }

/* About portrait — blended into the panel (no box): emerges from black at the
   top and dissolves into the bio at the bottom, like the v01 hero. The booth
   photo's own dark sides/top melt into the near-black panel; a bottom mask
   feathers the only lit edge so there is no pasted-on rectangle. */
.info__photo{ display:block; width:100%; height:clamp(240px,44vh,360px);
  object-fit:cover; object-position:50% 20%; margin:0 0 4px; border:0;
  filter:contrast(1.04) brightness(.98) saturate(.96);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 15%, #000 56%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 15%, #000 56%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite:intersect; }