/* ══════════════════════════════════════════════════════════════
   SUTRA — opening reveal (the logo writes itself) + page transitions
   Pure CSS: if JavaScript never runs, the animation still finishes
   and the overlay ends up hidden, so the site is never blocked.
   ══════════════════════════════════════════════════════════════ */

.curtain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:var(--bg-0,#0b0a08);
  display:flex; align-items:center; justify-content:center;
}
.curtain .cur-mark{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }

.curtain .cur-draw{ position:relative; display:block; width:min(340px,58vw); height:min(170px,29vw); }

/* The logo is a PNG, so it is painted through a mask: the gold "ink" is a gradient
   that sweeps left to right, which reads as the signature being written. */
.curtain .cur-logo{
  position:absolute; inset:0;
  -webkit-mask:url('sutramain.png') center/contain no-repeat; mask:url('sutramain.png') center/contain no-repeat;
  background-image:linear-gradient(90deg,
    var(--gold,#c9a24d) 0 44%,
    rgba(201,162,77,.55) 49%,
    rgba(201,162,77,0) 53%);
  background-size:230% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
}

/* the nib: a small gold glow riding the front of the stroke */
.curtain .cur-pen{
  position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,200,.95) 0 22%, rgba(201,162,77,.55) 45%, rgba(201,162,77,0) 70%);
  opacity:0; filter:blur(.4px);
}

.curtain .cur-rule{ display:block; width:0; height:1px; background:rgba(201,162,77,.55); }

/* ── the writing ── */
@keyframes sutra-ink{ from{ background-position:100% 0; } to{ background-position:0 0; } }
@keyframes sutra-nib{
  0%   { opacity:0; left:2%;  top:56%; }
  8%   { opacity:1; }
  25%  { left:26%; top:40%; }
  45%  { left:47%; top:58%; }
  65%  { left:66%; top:38%; }
  85%  { left:86%; top:44%; }
  96%  { opacity:1; left:99%; top:33%; }
  100% { opacity:0; left:100%; top:32%; }
}
@keyframes sutra-mark-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes sutra-glow{ 0%{ filter:none; } 50%{ filter:drop-shadow(0 0 14px rgba(201,162,77,.45)); } 100%{ filter:none; } }
@keyframes sutra-rule{ 0%{ width:0; opacity:0; } 35%{ opacity:1; } 100%{ width:min(240px,42vw); opacity:1; } }
@keyframes sutra-fade-out{ to{ opacity:0; } }
@keyframes sutra-gone{ to{ visibility:hidden; } }

html.has-curtain .curtain .cur-mark{ animation:sutra-mark-in .7s ease both; }
html.has-curtain .curtain .cur-logo{
  animation:sutra-ink 2.1s cubic-bezier(.45,.05,.3,1) .25s both,
            sutra-glow 1.1s ease 2.3s both,
            sutra-fade-out .7s ease 3.5s both;
}
html.has-curtain .curtain .cur-pen{ animation:sutra-nib 2.1s cubic-bezier(.45,.05,.3,1) .25s both; }
html.has-curtain .curtain .cur-rule{
  animation:sutra-rule 1s cubic-bezier(.2,.6,.2,1) 2.3s both, sutra-fade-out .6s ease 3.5s both;
}
html.has-curtain .curtain{ animation:sutra-fade-out 1s cubic-bezier(.4,0,.2,1) 3.7s both, sutra-gone 0s linear 4.75s both; }

/* the page eases up as the overlay lifts */
@keyframes sutra-page-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
html.has-curtain body > .hdr, html.has-curtain body > #main, html.has-curtain body > .ftr{
  animation:sutra-page-in 1.1s cubic-bezier(.2,.6,.2,1) 3.8s both;
}

/* ── later pages in the same visit: a short fade, no logo ── */
html.curtain-quick .curtain .cur-mark{ display:none; }
html.curtain-quick .curtain{ animation:sutra-fade-out .5s ease .05s both, sutra-gone 0s linear .6s both; }
html.curtain-quick body > .hdr, html.curtain-quick body > #main, html.curtain-quick body > .ftr{
  animation:sutra-page-in .55s cubic-bezier(.2,.6,.2,1) .1s both;
}

/* ── leaving a page: fade to black, then the browser navigates ── */
html.curtain-leave .curtain{ animation:none; visibility:visible; opacity:0; transition:opacity .38s ease; }
html.curtain-leave .curtain .cur-mark{ display:none; }
html.curtain-leave.curtain-closing .curtain{ opacity:1; }

/* Never let the overlay trap the page: if anything goes wrong it is inert and invisible. */
html:not(.has-curtain) .curtain{ display:none; }

@media (prefers-reduced-motion:reduce){
  html.has-curtain .curtain, html.has-curtain .curtain *{ animation:none !important; visibility:hidden !important; }
  html.has-curtain body > .hdr, html.has-curtain body > #main, html.has-curtain body > .ftr{ animation:none !important; }
  html.curtain-leave .curtain{ visibility:hidden !important; }
}