/* First-load splash. Timings are as tuned; selectors are scoped to #splash
   so they do not restyle the pray-view rosary. */
:root{
  --ink:#070605;          /* warm black, not neutral black */
  --cream:#F2E8D5;        /* ivory, faintly candle-warm */

  /* how far the resting halo drifts, up and down. keep it barely there */
  --halo-float:.045em;

  /* air between the top of the R and the underside of the halo,
     as a fraction of the type size */
  --halo-gap:.13;

  /* one dial for the whole sequence. 1 = as tuned (~6.7s).
     0.8 is noticeably brisker; 1.2 is very slow. */
  --t:1;
}

#splash{
  position:fixed;
  inset:0;
  z-index:99;
  display:grid;
  place-items:center;
  background:var(--ink);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow:hidden;
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
}

#splash .mark{
  position:relative;
  display:inline-block;
  color:var(--cream);
  font-family:inherit;
  font-weight:300;
  font-size:clamp(28px,8vw,44px);
  line-height:1;
}

/* the R is not drawn — it is lit, from the halo downward */
#splash .letter-r{
  display:inline-block;
  opacity:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.28) 68%,transparent 84%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.28) 68%,transparent 84%);
  -webkit-mask-size:100% 300%;
          mask-size:100% 300%;
  -webkit-mask-position:0 100%;
          mask-position:0 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  will-change:mask-position,opacity;
}
#splash.run .letter-r{
  animation:illuminate calc(2.2s * var(--t)) cubic-bezier(.3,.02,.22,1) calc(3.5s * var(--t)) both;
}

/* the halo's resting place — everything happens inside this box */
#splash .halo-slot{
  position:absolute;
  left:calc(var(--r-center,.3em) + var(--halo-x,0px));
  bottom:var(--halo-lift,1.14em);   /* measured in JS from the R's cap height */
  width:.66em; height:.66em;
  transform:translate(-50%,50%);
  perspective:1100px;
}

/* the rosary: a ring of beads whose cord becomes the halo */
#splash .rosary{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  opacity:0;
  transform:translateY(var(--rosary-drop,.53em)) scale(5.500);
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
#splash.run .rosary{
  animation:
    appear  calc(.7s * var(--t)) ease-out calc(.25s * var(--t)) both,
    ascend  calc(2.55s * var(--t)) linear calc(.95s * var(--t)) both,
    recede  calc(.45s * var(--t)) ease-in calc(3.15s * var(--t)) both,
    smear   calc(1.1s * var(--t)) ease-in-out calc(1.1s * var(--t)) both;
}

/* the pendant doesn't ride round with the loop — it hangs off it.
   .pendant unwinds the spin exactly; .pendant-swing does the swaying. */
#splash.run .pendant{
  animation:release calc(.44s * var(--t)) linear calc(1.33s * var(--t)) both;
}
#splash.run .pendant-swing{
  animation:sway calc(1.53s * var(--t)) ease-in-out calc(.25s * var(--t)) both;
}

#splash .rosary .cord{
  fill:none;
  stroke:var(--cream);
  stroke-width:0.7;
  opacity:.45;
}
#splash.run .rosary .cord{
  animation:tauten calc(2.4s * var(--t)) linear calc(1.1s * var(--t)) both;
}

#splash .rosary .beads{ fill:var(--cream) }
#splash .rosary .rule{ stroke:var(--cream); stroke-width:1.6; fill:none }
#splash.run .loop{
  animation:release calc(.5s * var(--t)) linear calc(1.27s * var(--t)) both;
}

/* the halo at rest — the logo's own ellipse, uniform weight */
#splash .halo-flat{
  position:absolute;
  left:0; top:50%;
  width:100%; height:.21em;
  transform:translateY(-50%);
  overflow:visible;
  opacity:0;
  will-change:transform,opacity;
}
#splash .halo-flat ellipse{
  fill:none;
  stroke:var(--cream);
  stroke-width:5.8;   /* in viewBox units, so the weight tracks the type size */
}
#splash.run .halo-flat{
  animation:
    splash-settle  calc(.5s * var(--t)) ease-out calc(3.2s * var(--t)) both,
    breathe calc(3.3s * var(--t)) ease-in-out calc(3.5s * var(--t)) both;
}

@keyframes appear{ from{opacity:0} to{opacity:1} }
@keyframes smear{
  0%{ filter:blur(0) } 30%{ filter:blur(.55px) } 55%{ filter:blur(.9px) } 100%{ filter:blur(0) }
}
@keyframes ascend{
  0%  { transform:translateY(calc(var(--rosary-drop,.53em) * 1.000)) scale(5.500) rotateX(0.0deg) rotateZ(0deg) }
  8%  { transform:translateY(calc(var(--rosary-drop,.53em) * 0.875)) scale(4.939) rotateX(0.4deg) rotateZ(3deg) }
  16% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.757)) scale(4.405) rotateX(1.5deg) rotateZ(22deg) }
  24% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.645)) scale(3.901) rotateX(3.7deg) rotateZ(76deg) }
  32% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.540)) scale(3.430) rotateX(7.4deg) rotateZ(180deg) }   /* the cross reaches twelve; it is one ring by now */
  45% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.384)) scale(2.728) rotateX(16.3deg) rotateZ(357deg) }
  58% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.250)) scale(2.122) rotateX(29.6deg) rotateZ(462deg) }
  72% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.131)) scale(1.588) rotateX(46.6deg) rotateZ(518deg) }
  85% { transform:translateY(calc(var(--rosary-drop,.53em) * 0.048)) scale(1.216) rotateX(62.9deg) rotateZ(537deg) }
  100%{ transform:translateY(0) scale(1.000) rotateX(74.0deg) rotateZ(540deg) }
}

/* the chain is dragged back as the turn takes hold, whips past, then
   centrifugal force lays it straight out along the radius */
@keyframes sway{
  0%  { transform:translate(60px,115px) rotate(0deg)   translate(-60px,-115px) }
  18% { transform:translate(60px,115px) rotate(2.5deg) translate(-60px,-115px) }
  30% { transform:translate(60px,115px) rotate(-3deg)  translate(-60px,-115px) }
  47% { transform:translate(60px,115px) rotate(-22deg) translate(-60px,-115px) }
  65% { transform:translate(60px,115px) rotate(-13deg) translate(-60px,-115px) }
  80% { transform:translate(60px,115px) rotate(5deg)   translate(-60px,-115px) }
  100%{ transform:translate(60px,115px) rotate(0deg)   translate(-60px,-115px) }
}
@keyframes recede{ from{opacity:1} to{opacity:0} }
@keyframes tauten{
  0%  { opacity:.45; stroke-width:0.7 }
  28% { opacity:1;   stroke-width:5.2 }   /* one ring, at the half turn */
  60% { opacity:1;   stroke-width:4.4 }
  100%{ opacity:1;   stroke-width:5.8 }   /* matching the halo it hands over to */
}
@keyframes release{ from{opacity:1} to{opacity:0} }
@keyframes splash-settle{ from{opacity:0} to{opacity:1} }

/* two slow rises, small enough that you feel it rather than see it */
@keyframes breathe{
  0%  { transform:translateY(-50%) }
  25% { transform:translateY(calc(-50% - var(--halo-float,.013em))) }
  50% { transform:translateY(-50%) }
  75% { transform:translateY(calc(-50% - var(--halo-float,.013em))) }
  100%{ transform:translateY(-50%) }
}
@keyframes illuminate{
  from{ opacity:0; -webkit-mask-position:0 100%; mask-position:0 100% }
  10%{ opacity:1 }
  to{ opacity:1; -webkit-mask-position:0 0%; mask-position:0 0% }
}

/* exit: dissolve into the home screen — no scale, so the page is revealed
   through the dark rather than pushed away */
#splash.leaving{
  pointer-events:none;
  animation:leave calc(2.6s * var(--t)) cubic-bezier(.37,0,.12,1) forwards;
}
#splash.leaving .mark{
  animation:markRecede calc(1.85s * var(--t)) cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes leave{ to{ opacity:0 } }
@keyframes markRecede{ to{ opacity:0 } }
#splash.gone{ display:none }
html.splash-seen #splash{ display:none }


/* ───────────── reduced motion: the mark, lit and still ───────────── */
@media (prefers-reduced-motion:reduce){
  #splash.run .rosary,
  #splash.run .pendant,
  #splash.run .pendant-swing,
  #splash.run .loop,
  #splash.run .rosary .cord,
  #splash.run .parts,
  #splash.run .halo-flat,
  #splash.run .letter-r{ animation:none !important }
  #splash .rosary{ display:none }
  #splash.run .halo-flat{ opacity:1; transform:translateY(-50%) }
  #splash.run .letter-r{ opacity:1; -webkit-mask-image:none; mask-image:none }
  #splash.leaving{ animation:fadeOnly .5s linear forwards }
  @keyframes fadeOnly{ to{opacity:0} }
}