@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg:#050711; --white:#eef1ff; --muted:#727992; --line:rgba(190,201,255,.16); --pulse:#b3c1ff; --signal:#e6ff7a; --mono:'DM Mono',monospace; --sans:'Space Grotesk',ui-sans-serif,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--white); }
body { overflow:hidden; font-family:var(--sans); }
body::before { content:''; position:fixed; inset:-8%; z-index:0; background:linear-gradient(90deg,rgba(5,7,17,.97) 0%,rgba(5,7,17,.74) 46%,rgba(5,7,17,.86) 100%),url('/og-aahaan-signal-20260919.png') center/cover; filter:saturate(.8) contrast(1.08); opacity:.25; transform:scale(1.04); animation:image-breathe 18s ease-in-out infinite alternate; }
#signal-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:1; opacity:1; mix-blend-mode:screen; }
.field { position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle at 50% 46%,rgba(111,136,255,.12),transparent 25%),radial-gradient(circle at 18% 15%,rgba(230,255,122,.05),transparent 23%); }
.field::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(185,198,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(185,198,255,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(circle at center,black,transparent 70%); }
.field i { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.6; animation:blink 4s ease-in-out infinite; }
.field i:nth-child(1){left:13%;top:23%;animation-delay:-1s}.field i:nth-child(2){left:82%;top:18%;animation-delay:-2.4s}.field i:nth-child(3){left:76%;top:76%;animation-delay:-.7s}.field i:nth-child(4){left:21%;top:69%;animation-delay:-3.2s}.field i:nth-child(5){left:62%;top:11%;animation-delay:-1.5s}.field i:nth-child(6){left:91%;top:49%;animation-delay:-2s}
main { width:min(1180px,calc(100% - 56px)); min-height:100vh; margin:auto; position:relative; z-index:3; display:flex; flex-direction:column; }
header { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:var(--muted); font:10px var(--mono); letter-spacing:.07em; }
.sigil { display:flex; gap:12px; align-items:center; color:var(--white); text-decoration:none; }.sigil b { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--pulse); border-radius:50%; font-size:15px; font-weight:400; }.sigil span,.quiet { text-transform:lowercase; }
.quiet { display:flex; align-items:center; gap:9px; }.quiet::before,.live-mark { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(230,255,122,.08); animation:blink 2.4s ease-in-out infinite; }
.center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; }
.halo { width:min(56vw,420px); aspect-ratio:1; border-radius:50%; position:absolute; opacity:.6; animation:drift 10s ease-in-out infinite; }.ring { position:absolute; border:1px solid var(--line); border-radius:50%; inset:0; }.r1 { transform:rotate(25deg) scaleY(.31); animation:spin 18s linear infinite; }.r2 { inset:12%; transform:rotate(-53deg) scaleY(.34); animation:spin 13s linear infinite reverse; }.r3 { inset:27%; border-color:rgba(230,255,122,.24); transform:rotate(70deg) scaleY(.45); animation:spin 8s linear infinite; }.core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:86px; height:86px; border:1px solid var(--signal); border-radius:50%; display:grid; place-items:center; color:var(--signal); font:32px var(--sans); background:rgba(7,9,18,.78); box-shadow:0 0 70px rgba(230,255,122,.11); }
.clock { position:absolute; inset:3% 0 2%; z-index:0; display:grid; grid-template-rows:30% 70%; align-items:center; width:100%; height:auto; margin:0; color:rgba(206,216,255,.23); font-family:var(--mono); letter-spacing:-.075em; user-select:none; opacity:.62; pointer-events:none; }.clock span { align-self:end; padding-bottom:clamp(14px,2vh,28px); font-size:clamp(22px,3.6vw,54px); line-height:.8; letter-spacing:.08em; color:rgba(206,216,255,.28); transform:scaleY(1.12); }.clock strong { align-self:start; padding-top:clamp(16px,2vh,30px); font-size:clamp(38px,7.2vw,108px); line-height:.78; font-weight:400; white-space:nowrap; text-shadow:0 0 28px rgba(130,160,255,.11); transform:scaleY(1.48); transform-origin:top center; }
.micro { display:flex; align-items:center; gap:9px; margin:0 0 24px; color:var(--signal); font:10px var(--mono); letter-spacing:.12em; }.micro .live-mark { animation:none; }
h1 { margin:0; font-size:clamp(42px,6.4vw,86px); line-height:.98; letter-spacing:-.07em; font-weight:600; position:relative; z-index:1; } h1 em { font-style:normal; color:var(--signal); }
.sub { margin:26px 0 0; color:var(--muted); font-size:15px; line-height:1.65; position:relative; z-index:1; }.center>*:not(.halo) { animation:reveal .9s cubic-bezier(.2,.8,.2,1) both; }.center h1 { animation-delay:.1s; }.center .sub { animation-delay:.2s; }
footer { display:flex; align-items:center; gap:18px; padding:22px 0 29px; color:#555e77; font:10px var(--mono); letter-spacing:.04em; text-transform:lowercase; }.line { height:1px; flex:1; background:var(--line); }
@keyframes spin { to { transform:rotate(385deg) scaleY(.31); } } @keyframes drift { 50% { transform:translateY(-10px) rotate(3deg); } } @keyframes blink { 50% { opacity:.1; transform:scale(2); } } @keyframes reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes image-breathe { to { transform:scale(1.09) translate(-1%,1%); } }
@media(max-width:650px) { main { width:calc(100% - 36px); } header { height:76px; }.quiet { font-size:0; }.quiet::before { width:6px; height:6px; }.clock { inset:7% 0 4%; opacity:.48; }.clock span { font-size:clamp(17px,5vw,30px); }.clock strong { font-size:clamp(29px,7.8vw,58px); transform:scaleY(1.32); }.micro { font-size:8px; }.halo { width:92vw; } h1 { font-size:clamp(39px,12vw,64px); }.sub { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { body::before,.halo,.ring,.field i,.center>* { animation:none; } }