/* Grim-style home for SANITY — fog, vignette, center mast, glass CTA */

/* ---------- Brand fonts ---------- */
@font-face{
  font-family:'The Room';
  src:url('../fonts/TheRoom.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  size-adjust:160%;
}

/* ---------- Root scale ---------- */
:root{
  --font-ui:"Gotham","Montserrat","Inter",system-ui,sans-serif;

  --cream:#e9e6db;
  --cream-warm:#e6dcc7;
  --black:#0a0a0c;
  --crimson:#c51f3b;

  /* fluid spaces */
  --s1:clamp(6px,.6vw,10px);
  --s2:clamp(10px,1.2vw,16px);
  --s3:clamp(16px,1.8vw,24px);
  --s4:clamp(22px,2.4vw,32px);
  --s5:clamp(28px,3.2vw,44px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--cream);
  background:var(--black);
  overflow:hidden;
}

/* ---------- Layout ---------- */
.screen{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:var(--s4);
}

/* ---------- Background: “map”, fog, vignette, grain ---------- */
.bg{position:fixed; inset:0; pointer-events:none}
.map{
  /* subtle abstract “mind map” using SVG lines + labels */
  background:
    radial-gradient(60vw 40vw at 50% 75%, rgba(197,31,59,.18), transparent 70%),
    radial-gradient(80vw 60vw at 20% 20%, rgba(45,197,244,.10), transparent 70%),
    radial-gradient(70vw 50vw at 80% 30%, rgba(243,198,46,.08), transparent 70%),
    #09090b;
}
.map::before{
  content:"";
  position:absolute; inset:0;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cg fill='none' stroke='%235a5b60' stroke-opacity='.25' stroke-width='.6'%3E%3Cpath d='M0,120 C160,90 320,150 480,120 C640,90 800,150 960,120 C1120,90 1280,150 1440,120'/%3E%3Cpath d='M0,260 C200,230 400,280 600,260 C800,240 1000,300 1200,260 C1400,220 1600,280 1600,280'/%3E%3Cpath d='M0,420 C220,390 440,450 660,420 C880,390 1100,450 1320,420 C1540,390 1600,440 1600,440'/%3E%3C/g%3E%3Cg fill='%238c8d93' fill-opacity='.18'%3E%3Ctext x='180' y='210' font-size='18' font-family='serif' %3EAMYGDALA%3C/text%3E%3Ctext x='980' y='360' font-size='18' font-family='serif'%3EOBSESSION%3C/text%3E%3Ctext x='640' y='520' font-size='18' font-family='serif'%3ESTATIC%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  filter:blur(.2px);
}

/* Fog: animated fractal noise */
.fog{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' fill='%23ffffff'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
  opacity:.065;
  transform:translateZ(0);
}
.fog-a{ animation: drift 70s linear infinite; }
.fog-b{ animation: drift 95s linear infinite reverse; opacity:.08; filter:blur(2px); }

.vignette{
  background:radial-gradient(1200px 900px at 50% 65%, rgba(10,10,12,0), rgba(10,10,12,.75) 70%, rgba(10,10,12,.92) 100%);
}
.grain{
  position:fixed; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light; opacity:.7;
}

/* ---------- Mast (center) ---------- */
.mast{ display:grid; gap:var(--s2); place-items:center; }

.eyebrow{
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-warm);
  font-size: 18px;
  margin:0;
  opacity:.95;
}

.title-glitch{
  font-family:var(--font-ui);
  font-size:clamp(64px,11vw,180px);
  font-weight:800; letter-spacing:.06em;
  color:var(--crimson);
  text-shadow:0 0 0 var(--crimson), 0 0 18px rgba(197,31,59,.25);
  position:relative; display:inline-block;
  margin:0;
  animation:
    baseMute 4.1s infinite steps(1,end),
    sanityShake 3.2s infinite ease-in-out;
}
.title-glitch::before,
.title-glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  font-family:'The Room',sans-serif;
  font-weight:400; pointer-events:none; opacity:0;
  mix-blend-mode:screen; transform-origin:center;
}
.title-glitch::before{
  color:var(--crimson);
  transform:scale(1.18);
  animation: roomFlash 4.1s infinite steps(1,end);
}
.title-glitch::after{
  color:#2dc5f4;
  transform:translate(2px,-1px) scale(1.18);
  animation: roomFlashAlt 4.1s infinite steps(1,end);
}

.tag{
  margin:var(--s1) 0 var(--s3);
  opacity:.9; color:var(--cream);
  font-size: 16px;
}

/* ---------- Glass CTA ---------- */
.btn{
  --ring:rgba(243,198,46,.35);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; text-decoration:none;
  padding:14px clamp(28px,6vw,56px);
  color:#e9e6db; letter-spacing:.02em; font-weight:500;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.2),
    0 0 30px rgba(197,31,59,.25),
    0 0 8px rgba(255,255,255,.08);
  min-width:clamp(180px,36vw,260px);
  transition: all .25s ease;
}
.btn::before{
  content:""; position:absolute; inset:0 0 auto 0; height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.1));
  border-top-left-radius:inherit; border-top-right-radius:inherit;
  pointer-events:none; mix-blend-mode:screen;
}
.btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); }
.btn:active{ transform:translateY(1px) scale(.98); }

/* ---------- Animations ---------- */
@keyframes drift{
  from{ background-position:0 0; }
  to{ background-position:1200px 800px; }
}
@keyframes pulse{
  0%,100%{ filter:brightness(100%); }
  50%{ filter:brightness(115%); }
}
@keyframes baseMute{
  0%, 7.5%, 7.9%, 12%, 12.2%, 18%, 18.3%, 27%, 27.3%, 100%{opacity:1}
  7.6%, 7.8%, 12.1%, 18.1%, 27.2%{opacity:0}
}
@keyframes roomFlash{
  0%,7.5%,7.9%,12%,12.2%,18%,18.3%,27%,27.3%,100%{opacity:0; transform:scale(1.18) translate(0,0) skewX(0)}
  7.6%,7.8%{opacity:1; transform:scale(1.18) translate(-1px,0) skewX(.3deg)}
  12.1%{opacity:1; transform:scale(1.18) translate(1px,-1px) skewX(-.2deg)}
  18.1%{opacity:1; transform:scale(1.18) translate(.5px,-.5px) skewX(.2deg)}
  27.2%{opacity:1; transform:scale(1.18) translate(-.6px,.4px) skewX(-.2deg)}
}
@keyframes roomFlashAlt{
  0%,12%,12.2%,27%,27.3%,100%{opacity:0; transform:translate(2px,-1px) scale(1.18) skewX(0)}
  12.1%{opacity:1; transform:translate(3px,-1px) scale(1.18) skewX(.4deg)}
  27.2%{opacity:1; transform:translate(1px,-2px) scale(1.18) skewX(-.3deg)}
}
@keyframes sanityShake{
  0%,100%{transform:translate(0,0)}
  12%{transform:translate(.3px,-.2px)}
  13%{transform:translate(-.2px,.3px)}
  40%{transform:translate(.2px,0)}
  55%{transform:translate(-.3px,.2px)}
  73%{transform:translate(.2px,-.3px)}
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:560px){
  .title-glitch{ font-size:clamp(44px,12vw,96px); }
  .cta-wrap { display:flex; justify-content:center; }
  .btn{ min-width:72vw; }
}