/* ==========================================================
   NULL SAINTS
   Depth, glass, render. The object carries the page.
   ========================================================== */

:root{
  --void:   #04050A;
  --void-2: #070911;
  --void-3: #0A0D17;

  --ink:    #F0F2F7;
  --ink-2:  #99A0B2;
  --ink-3:  #5C6377;

  --crimson:     #E01030;
  --crimson-hot: #FF3550;
  --crimson-deep:#7A0A1E;

  --gold:     #C9A227;
  --gold-lit: #EBD79A;

  /* glass */
  --g-face:   linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 46%, rgba(255,255,255,.032));
  --g-edge:   rgba(255,255,255,.10);
  --g-lip:    rgba(255,255,255,.22);
  --g-shadow: 0 24px 60px -26px rgba(0,0,0,.95), 0 2px 10px -4px rgba(0,0,0,.7);

  --display: 'Chakra Petch', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', Consolas, monospace;
  --jp:      'Noto Sans JP', sans-serif;

  --edge: clamp(18px, 4.6vw, 76px);
  --wrap: 1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.68;
  overflow-x:clip;
  position:relative;
}

::selection{ background: var(--crimson); color:#fff; }
img{ max-width:100%; height:auto; display:block; }

.noise{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>");
}

/* ---------- glass ---------- */

.glass{
  position:relative;
  background: var(--g-face);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border:1px solid var(--g-edge);
  border-radius:5px;
  box-shadow: var(--g-shadow);
  overflow:hidden;
}
/* specular lip along the top edge */
.glass::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, var(--g-lip), transparent);
  pointer-events:none;
}

/* ---------- nav ---------- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding: 14px var(--edge);
  background:linear-gradient(to bottom, rgba(4,5,10,.88), rgba(4,5,10,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:700;
  font-size:13px; letter-spacing:.2em;
}
.nav-mark{ width:28px; height:28px; filter:drop-shadow(0 0 10px rgba(224,16,48,.55)); }
.nav-links{ display:flex; gap:clamp(14px,2.4vw,30px); margin-left:auto; }
.nav-links a{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.14em; color:var(--ink-3); text-decoration:none;
  transition:color .25s ease;
}
.nav-links a:hover{ color:var(--ink); }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  padding:13px 26px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 12px 30px -14px rgba(0,0,0,.9);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease, transform .15s ease;
}
.btn:hover{
  border-color: rgba(255,53,80,.55);
  background:linear-gradient(160deg, rgba(224,16,48,.28), rgba(224,16,48,.08));
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 0 44px -8px rgba(224,16,48,.55);
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:9px 18px; font-size:11px; }
.btn-lg{ padding:16px 34px; font-size:13px; }

/* ---------- hero ---------- */

.hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center;
  padding: clamp(96px,13vh,150px) 0 clamp(60px,9vh,110px);
}

.hero-far{
  position:absolute; inset:-6%;
  background-size:cover; background-position:50% 44%;
  filter: blur(26px) saturate(.55) brightness(.42);
  opacity:.5;
  transform:scale(1.08);
}
@media (max-width:899px){ .hero-far{ background-image:url('/img/cathedral-1100.webp'); } }
@media (min-width:900px){ .hero-far{ background-image:url('/img/cathedral-2200.webp'); } }

.hero-bloom{
  position:absolute; top:42%; left:50%;
  width:min(1000px,115vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(224,16,48,.30) 0%,
    rgba(224,16,48,.10) 30%,
    rgba(4,5,10,0) 66%);
  pointer-events:none;
}
.hero-vign{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(4,5,10,.55) 100%),
    linear-gradient(to bottom, rgba(4,5,10,.5), transparent 26%, transparent 66%, var(--void) 100%);
}

.hero-inner{
  position:relative; z-index:3;
  width:100%; max-width:860px; margin:0 auto;
  padding:0 var(--edge);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.2em; color:var(--ink-3);
  margin-bottom:10px;
}
.live{
  width:6px; height:6px; border-radius:50%;
  background:var(--crimson-hot);
  box-shadow:0 0 12px var(--crimson-hot);
  animation:live 2.2s ease-in-out infinite;
}
@keyframes live{ 0%,100%{opacity:.3; transform:scale(.85)} 50%{opacity:1; transform:scale(1)} }

.wordmark{
  font-family:var(--display); font-weight:700;
  font-size:clamp(42px,7.4vw,92px);
  line-height:.94; letter-spacing:.015em;
  text-transform:uppercase;
  text-shadow:0 0 70px rgba(224,16,48,.3);
}
.wm-accent{
  background:linear-gradient(96deg, var(--ink) 8%, var(--gold-lit) 50%, var(--crimson-hot) 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.kana{
  font-family:var(--jp); font-size:12px; letter-spacing:.56em;
  color:var(--crimson); opacity:.85; margin-top:16px;
}

.lede{
  margin-top:22px; max-width:52ch;
  font-size:16px; line-height:1.76; color:var(--ink-2);
}

.hero-actions{
  margin-top:30px;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
}
.hero-note{
  margin-top:16px;
  font-family:var(--mono); font-size:10px; font-weight:300;
  letter-spacing:.14em; line-height:1.9; color:var(--ink-3);
}

.stats{
  margin-top:34px; width:min(560px,100%);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stats > div{
  padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.stats > div + div{ border-left:1px solid rgba(255,255,255,.07); }
.s-k{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.s-v{
  font-family:var(--display); font-weight:600;
  font-size:16px; letter-spacing:.04em; color:var(--ink);
}
.s-v.hot{ color:var(--crimson-hot); }

/* the mark: flat, frontal, still. Only the light breathes. */
.hero-mark{
  position:relative;
  width:min(400px, 78vw);
  margin: 8px 0 6px;
}
.halo-glow{
  position:absolute; inset:-16%;
  background:radial-gradient(circle, rgba(224,16,48,.38), rgba(224,16,48,.08) 44%, transparent 68%);
  filter:blur(24px);
  pointer-events:none;
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.55 }
  50%    { opacity:1 }
}
.halo-img{
  position:relative;
  width:100%;
  mix-blend-mode:screen;
  filter: contrast(1.08) saturate(1.05);
}

.scroll-hint{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:4;
}
.scroll-hint span{
  display:block; width:1px; height:48px;
  background:linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  animation:hint 2.4s ease-in-out infinite;
}
@keyframes hint{ 0%,100%{opacity:.2; transform:scaleY(.55)} 50%{opacity:.9; transform:scaleY(1)} }

/* ---------- bands ---------- */

.band{ position:relative; padding:clamp(78px,10vw,148px) 0; overflow:hidden; }
.band-dark{ background:var(--void-2); }

.band-bloom{
  position:absolute; top:8%; left:-10%;
  width:min(760px,90vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(224,16,48,.17), transparent 62%);
  pointer-events:none;
}
.band-bloom-r{ left:auto; right:-12%; top:22%; }

.wrap{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:0 var(--edge); }
.wrap-mid{ max-width:720px; text-align:center; }

.kicker{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--crimson-hot);
  margin-bottom:16px;
}
.kicker-c{ text-align:center; }

.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.06; letter-spacing:.004em;
  margin-bottom:clamp(38px,4.6vw,62px);
}
.h2-c{ margin-bottom:20px; }

/* ---------- cards ---------- */

.cards{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.card{
  padding:clamp(24px,2.8vw,34px);
  display:flex; flex-direction:column;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.card:hover{
  border-color:rgba(255,53,80,.32);
  transform:translateY(-3px);
  box-shadow:var(--g-shadow), 0 0 50px -18px rgba(224,16,48,.45);
}
.c-idx{
  font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.3em; color:var(--gold); opacity:.75; margin-bottom:20px;
}
.card h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(20px,2.3vw,24px);
  letter-spacing:.03em; margin-bottom:13px;
}
.card p{ font-size:14.5px; color:var(--ink-2); line-height:1.74; }
.c-state{
  margin-top:auto; padding-top:22px;
  font-family:var(--mono) !important; font-size:9.5px !important;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3) !important;
}
.c-state.hot{ color:var(--crimson-hot) !important; }

/* ---------- rules ---------- */

.rules{ display:grid; gap:clamp(12px,1.5vw,16px); }
.rule{
  display:grid; grid-template-columns:70px minmax(0,1fr);
  gap:clamp(12px,2vw,26px);
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,32px);
  align-items:start;
  transition:border-color .3s ease;
}
.rule:hover{ border-color:rgba(255,53,80,.28); }
.r-n{
  font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:.02em; color:var(--crimson); opacity:.9;
}
.rule h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(18px,2.1vw,22px); letter-spacing:.02em;
  margin-bottom:8px;
}
.rule p{ font-size:14.5px; color:var(--ink-2); max-width:64ch; }

/* ---------- hardware ---------- */

.gear{
  display:grid; gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
.unit{
  padding:clamp(22px,2.6vw,30px);
  min-height:210px; display:flex; flex-direction:column;
  transition:border-color .35s ease, transform .35s ease;
}
.unit:hover{ border-color:rgba(255,53,80,.3); transform:translateY(-3px); }
.u-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:auto; }
.u-id{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--ink-3); }
.pill{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  border:1px solid rgba(255,255,255,.12); border-radius:99px;
  padding:4px 10px;
}
.pill.on{ color:var(--crimson-hot); border-color:rgba(255,53,80,.4); }
.unit h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(19px,2.2vw,23px); letter-spacing:.04em;
  margin:26px 0 9px;
}
.unit p{ font-size:14px; color:var(--ink-2); line-height:1.7; }

.fineprint{
  margin-top:28px;
  font-family:var(--mono); font-size:10.5px; font-weight:300;
  letter-spacing:.06em; color:var(--ink-3); max-width:64ch;
}

/* ---------- register ---------- */

.band-reg{ background:var(--void-2); text-align:center; }
.reg-bloom{
  position:absolute; bottom:-46%; left:50%; transform:translateX(-50%);
  width:min(1000px,130vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(224,16,48,.26), transparent 62%);
  pointer-events:none;
}
.reg-lede{
  font-size:16px; color:var(--ink-2);
  max-width:44ch; margin:0 auto 36px;
}

.reg-form{ max-width:520px; margin:0 auto; padding:8px; border-radius:6px; }
.field{ display:flex; gap:8px; align-items:stretch; }
.field input[type=email]{
  flex:1; min-width:0;
  background:transparent; border:0; outline:0; color:var(--ink);
  font-family:var(--body); font-size:15px; font-weight:300;
  padding:12px 14px;
}
.field input::placeholder{ color:var(--ink-3); }
.field .btn{ flex:0 0 auto; }
.field .btn:disabled{ opacity:.45; cursor:default; }

.hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  border:0; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; opacity:0; pointer-events:none;
}

.consent{
  margin-top:16px;
  font-family:var(--mono); font-size:10px; font-weight:300;
  letter-spacing:.06em; color:var(--ink-3); line-height:1.75;
}
.form-msg{
  margin-top:10px; min-height:22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
}
.form-msg.ok{ color:var(--gold-lit); }
.form-msg.err{ color:var(--crimson-hot); }

.posts{ margin-top:46px; display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.post{
  display:inline-flex; gap:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  border:1px solid rgba(255,255,255,.09); border-radius:99px;
  padding:8px 15px;
}
.post em{ font-style:normal; color:var(--crimson); }

/* ---------- footer ---------- */

.foot{ padding:34px 0 42px; border-top:1px solid rgba(255,255,255,.06); }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-mark{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.2em; }
.foot-kana{ font-family:var(--jp); font-size:10px; letter-spacing:.4em; color:var(--ink-3); }
.foot-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3); }

/* ---------- reveal ---------- */

.js .reveal{
  opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .halo-glow,.live,.scroll-hint span{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- narrow ---------- */

@media (max-width:980px){
  .scroll-hint{ display:none; }
}

@media (max-width:720px){
  .nav-links{ display:none; }
  .nav-brand span{ font-size:12px; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats > div:nth-child(3){ border-left:0; }
  .stats > div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.07); }
  .rule{ grid-template-columns:1fr; gap:8px; }
  .field{ flex-direction:column; }
  .foot-in{ flex-direction:column; align-items:flex-start; }
}