/* ============================================================
   Halosome — halosome.com · site styles
   Design language: Lumen (docs/design/direction.md). Token values are
   mirrored from lumen/system/src/theme.css — zero-build site, so re-sync
   by hand if the canon changes. Every page loads this file + halo.js.
   ============================================================ */
:root{
  --font-sans:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-display:"Outfit",var(--font-sans);
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease-lumen:cubic-bezier(.22,1,.36,1);
}
/* Day — the eye-white */
html[data-mode="light"]{
  --bg:#FCF8F3;--fg:#3B302A;--mutfg:#7A6A62;--border:#F2EBE2;
  --primary:#EA580C;--glow:#E89200;--primary-text:#A8430A;--grain-o:.04;
}
/* Night — warm espresso */
html[data-mode="dark"]{
  --bg:#1F1815;--fg:#EAE0D6;--mutfg:#AE9E8E;--border:rgba(255,255,255,.08);
  --primary:#FF8A33;--glow:#FCC22E;--primary-text:#FF8A33;--grain-o:.05;
}
*{box-sizing:border-box;margin:0;}
html,body{height:100%;}
body{
  font-family:var(--font-sans);background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;min-height:100svh;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}

/* grain — warmth, not decoration */
.grain{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:var(--grain-o);
  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='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ── the one screen ──────────────────────────────────── */
main{display:grid;place-items:center;align-content:center;gap:clamp(28px,4.5vh,48px);
  padding:clamp(24px,5vh,56px) 24px 0;}
.stagewrap{position:relative;display:grid;place-items:center;}
.bloom{position:absolute;width:min(78vmin,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 11%,transparent) 0%,transparent 62%);}
.striae{position:absolute;width:min(68vmin,660px);aspect-ratio:1;border-radius:50%;opacity:.5;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 4.2deg,color-mix(in srgb,var(--primary) 7%,transparent) 4.2deg 5.4deg);
  -webkit-mask-image:radial-gradient(circle,transparent 34%,#000 48%,transparent 68%);
  mask-image:radial-gradient(circle,transparent 34%,#000 48%,transparent 68%);
  animation:rotate 240s linear infinite;}
@keyframes rotate{to{transform:rotate(360deg)}}
.stage{position:relative;width:min(50vmin,440px);height:min(50vmin,440px);}
.stage.small{width:min(28vmin,200px);height:min(28vmin,200px);}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.stage svg{width:100%;height:100%;animation:breathe 5s ease-in-out infinite;}

.line{position:relative;text-align:center;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.03em;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.2;text-wrap:balance;}
.line em{font-style:normal;color:var(--primary-text);display:block;font-weight:500;}
.small{font-family:var(--font-mono);font-size:12px;color:var(--mutfg);letter-spacing:.03em;text-align:center;}
.small a{color:var(--primary-text);}

/* ── footer — a whisper ──────────────────────────────── */
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px clamp(20px,4vw,40px) 26px;font-family:var(--font-mono);font-size:11px;
  color:var(--mutfg);letter-spacing:.03em;}
footer .brand{font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--fg);}
footer a:hover{color:var(--primary-text);}

/* ── arrival ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(12px);
  animation:arrive 1.1s var(--ease-lumen) forwards;animation-delay:var(--d,0s);}
@keyframes arrive{to{opacity:1;transform:none}}

@media(max-height:560px){.stage{width:min(38vmin,300px);height:min(38vmin,300px);}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
}