html:not(.is-intro) #intro{display:none}
/* The opening. One of four short sequences on the Golden Batch mark on every page arrival,
   then the mark travels into the nav brand slot as the night lifts. The overlay is night from
   the first paint so nothing shows before the mark; if the script never runs it lets go on its
   own after five seconds. */
#intro{position:fixed;inset:0;z-index:600;background:#081726;pointer-events:none;
       animation:opLetGo .4s ease 5s forwards}
@keyframes opLetGo{to{opacity:0;visibility:hidden}}
html.no-intro #intro{display:none}
html.is-intro .nav .brand img{opacity:0}
.op{position:absolute;inset:0;display:grid;place-items:center}
.op__mark{position:relative;width:min(58vw,360px);will-change:transform;opacity:0}
.op__mark img{display:block;width:100%;height:auto}

/* 0 bloom: a conic reveal around the centre, the way the wheel opens */
.op--0 .op__mark{--a:0deg;
  -webkit-mask-image:conic-gradient(from -90deg,#000 calc(var(--a) - 14deg),transparent var(--a));
  mask-image:conic-gradient(from -90deg,#000 calc(var(--a) - 14deg),transparent var(--a))}

/* 1 rise: a soft wipe up the mark, then one sheen crosses it */
.op--1 .op__mark{--p:0%;
  -webkit-mask-image:linear-gradient(0deg,#000 calc(var(--p) - 30%),transparent var(--p));
  mask-image:linear-gradient(0deg,#000 calc(var(--p) - 30%),transparent var(--p))}
.op__sheen{position:absolute;inset:0;display:block;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,244,214,.6) 50%,transparent 62%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* 2 ripple: the mark settles from the front while two rings go out over the water */
.op__ring{position:absolute;left:50%;top:50%;width:min(72vw,460px);aspect-ratio:1;border-radius:50%;
          border:1px solid rgba(224,174,68,.75);opacity:0;pointer-events:none}

/* 3 namaste: Swamiji greets from the left, the mark arrives, one line in Devanagari */
.op--3 .op__mark{transform:translateY(-6vh)}
.op__swami{position:absolute;left:4vw;bottom:0;height:min(62vh,540px);width:auto;opacity:0;
           pointer-events:none}
.op__line{position:absolute;left:50%;top:calc(50% + min(29vw,180px) - 6vh);transform:translateX(-50%);
          margin:0;white-space:nowrap;font-family:Tiro,Zodiak,Georgia,serif;
          font-size:clamp(20px,2.2vw,30px);color:#FFEFC0;letter-spacing:0;opacity:0}
@media (max-width:720px){
  .op--3 .op__mark{transform:translateY(-14vh)}
  .op__swami{height:min(44vh,360px);left:2vw}
  .op__line{top:calc(50% + 29vw - 14vh);font-size:19px}
}