/* ============================================================
   ASTRAL SYNC · shared base (Concept A & B)
   ============================================================ */
:root{
  --ink:#050505;
  --ink-2:#0a0a0e;
  --paper:#ede8df;
  --paper-dim:rgba(237,232,223,.55);
  --paper-faint:rgba(237,232,223,.28);
  --gold:#c9a227;
  --gold-hi:#e8c766;
  --void:#6d4ac8;
  --void-deep:#241a45;
  --live:#3ddc84;
  --hair:rgba(237,232,223,.14);
  --serif:'Cormorant Garamond','Noto Serif KR','Noto Serif JP',serif;
  --sans:'Space Grotesk','Noto Sans KR','Noto Sans JP',sans-serif;
  --mono:'DM Mono','Noto Sans KR','Noto Sans JP',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#0a0a0a}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}

/* ---------- film grain overlay ---------- */
.grain{
  position:fixed;inset:-100%;z-index:2000;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 8s steps(5) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  30%{transform:translate(3%,-12%)}50%{transform:translate(-9%,4%)}
  70%{transform:translate(7%,8%)}90%{transform:translate(-4%,3%)}
}

/* ---------- custom cursor (dot + action ring) ---------- */
#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:3000;border-radius:50%}
#cursor-dot{width:6px;height:6px;background:var(--gold-hi);transform:translate(-50%,-50%)}
#cursor-ring{
  width:34px;height:34px;border:1px solid rgba(201,162,39,.55);
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s;
}
#cursor-ring span{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#0a0a0a;
  opacity:0;transition:opacity .2s;white-space:nowrap;text-transform:uppercase;
}
#cursor-ring.is-active{width:74px;height:74px;background:var(--gold-hi);border-color:var(--gold-hi)}
#cursor-ring.is-active span{opacity:1}
@media (hover:none),(pointer:coarse){#cursor-dot,#cursor-ring{display:none}}

/* ---------- preloader ---------- */
#loader{
  position:fixed;inset:0;z-index:5000;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
#loader .loader-mark{
  font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);letter-spacing:.5em;
  color:var(--paper-dim);text-transform:uppercase;padding-left:.5em;
}
#loader .loader-pct{
  font-family:var(--serif);font-size:clamp(64px,10vw,140px);line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
#loader .loader-bar{width:min(280px,50vw);height:1px;background:var(--hair);position:relative;overflow:hidden}
#loader .loader-bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ---------- shared atoms ---------- */
.mono-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--paper-dim);
}
.btn-gold{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:#0a0a0a;background:var(--gold);padding:16px 30px;
  position:relative;overflow:hidden;transition:color .35s;
}
.btn-gold::before{
  content:"";position:absolute;inset:0;background:var(--gold-hi);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.btn-gold:hover::before{transform:translateY(0)}
.btn-gold>*{position:relative;z-index:1}
.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper);padding:15px 28px;border:1px solid var(--hair);
  transition:border-color .35s,color .35s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;
  box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* placeholder art frames */
.ph{
  position:relative;overflow:hidden;background:
    repeating-linear-gradient(135deg,rgba(237,232,223,.03) 0 2px,transparent 2px 14px),
    linear-gradient(160deg,#101018,#0a0a10 60%,#0d0b16);
  border:1px solid var(--hair);
}
.ph::after{
  content:attr(data-label);
  position:absolute;left:14px;bottom:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--paper-faint);text-transform:uppercase;
}
.ph .ph-cross{position:absolute;inset:0;opacity:.5;
  background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(237,232,223,.08) 50%,transparent calc(50% + .5px)),
             linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(237,232,223,.08) 50%,transparent calc(50% + .5px));}

/* split-text mask lines */
.mask-line{display:block;overflow:hidden}
.mask-line>span{display:block;transform:translateY(110%)}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}