/* altar-sanctus.css — altar-server motion layer for the Altar Server Retreat page.
   Pairs with altar-sanctus.js. Everything here is decorative (aria-hidden, no pointer events). */

:root {
  --as-gold: #e8b94a;
  --as-gold-deep: #9c7420;
  --as-wax-1: #d9cdb4;
  --as-wax-2: #fbf6ea;
  --as-wax-3: #c9bb9c;
}

/* ---------- Flame (shared) ---------- */
.as-fl {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: as-flicker 1.7s ease-in-out infinite;
}
.as-fl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 74%, #fff 0 16%, #ffe08a 30%, #ffa53a 60%, rgba(255, 120, 30, 0) 72%);
  filter: blur(.3px);
}
.as-fl::after {
  content: "";
  position: absolute;
  left: -220%;
  right: -220%;
  top: -120%;
  bottom: -80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 90, .38), rgba(255, 170, 70, 0) 62%);
  animation: as-halo 2.3s ease-in-out infinite;
}
@keyframes as-flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  22% { transform: scale(.93, 1.07) rotate(-2.5deg); }
  48% { transform: scale(1.05, .95) rotate(1.8deg); }
  71% { transform: scale(.97, 1.05) rotate(-1deg); }
}
@keyframes as-halo {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

/* ---------- Incense, light shafts & dust (hero) ---------- */
.as-sanctuary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

/* ---------- Candle glow that follows a finger or the mouse ---------- */
.as-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transition: opacity .7s ease;
  background: radial-gradient(circle, rgba(255, 200, 115, .22) 0%, rgba(255, 170, 70, .10) 32%, rgba(255, 150, 50, 0) 66%);
  mix-blend-mode: screen;
  will-change: transform;
}
.as-glow.is-on { opacity: 1; }

/* ---------- Processional candle: burns down as you scroll ---------- */
.as-candle {
  --wax: 1;
  position: fixed;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 36vh;
  transform: translateY(-50%);
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
.as-candle.is-on { opacity: .92; }
.as-candle-wax {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: calc(var(--wax) * (100% - 34px) + 6px);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, var(--as-wax-1), var(--as-wax-2) 45%, var(--as-wax-3));
  box-shadow: 0 0 14px rgba(255, 200, 120, .28);
}
.as-candle-wax::after { /* a single drip */
  content: "";
  position: absolute;
  top: 0;
  right: 1px;
  width: 3px;
  height: 14px;
  border-radius: 0 0 3px 3px;
  background: var(--as-wax-2);
  opacity: .9;
}
.as-candle-holder {
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 0;
  height: 8px;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(#f0c75a, var(--as-gold-deep));
}
.as-candle-flame {
  position: absolute;
  left: 50%;
  bottom: calc(8px + var(--wax) * (100% - 34px) + 7px);
  width: 10px;
  height: 18px;
  margin-left: -5px;
}
.as-candle-flame::after { /* wick */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 1.5px;
  height: 5px;
  margin-left: -.75px;
  background: #3a2a18;
}
@media (max-width: 640px) {
  .as-candle { left: 5px; width: 8px; height: 30vh; }
  .as-candle-holder { left: -3px; right: -3px; height: 6px; }
  .as-candle-wax { bottom: 6px; }
  .as-candle-flame { width: 8px; height: 14px; margin-left: -4px; }
}

/* ---------- Candle-lighting divider between sections ---------- */
.as-divider {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 560px;
  height: 64px;
  margin: clamp(20px, 5vw, 48px) auto;
  padding: 0 16px;
  pointer-events: none;
}
.as-line {
  flex: 1;
  height: 1px;
  margin-bottom: 7px;
  transform: scaleX(0);
  transition: transform 1.05s cubic-bezier(.2, .7, .2, 1);
}
.as-line.l { transform-origin: left; background: linear-gradient(90deg, rgba(232, 185, 74, 0), rgba(232, 185, 74, .8)); }
.as-line.r { transform-origin: right; background: linear-gradient(270deg, rgba(232, 185, 74, 0), rgba(232, 185, 74, .8)); }
.as-taper {
  position: relative;
  width: 8px;
  height: 32px;
  margin: 0 14px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(90deg, var(--as-wax-1), var(--as-wax-2) 45%, var(--as-wax-3));
}
.as-taper::before { /* holder */
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  bottom: -6px;
  height: 6px;
  border-radius: 1px 1px 6px 6px;
  background: linear-gradient(#f0c75a, var(--as-gold-deep));
}
.as-taper::after { /* wick */
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 1.5px;
  height: 5px;
  margin-left: -.75px;
  background: #3a2a18;
}
.as-taper .as-flame {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 11px;
  height: 20px;
  margin-left: -5.5px;
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform .55s .95s cubic-bezier(.3, 1.7, .5, 1);
}
.as-spark {
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #fff3c4;
  box-shadow: 0 0 10px 3px rgba(255, 200, 90, .8);
  opacity: 0;
}
.as-spark.l { left: 16px; }
.as-spark.r { left: calc(100% - 16px); }
.as-divider.is-lit .as-line { transform: scaleX(1); }
.as-divider.is-lit .as-flame { transform: scale(1); }
.as-divider.is-lit .as-spark.l { animation: as-spark-l 1s cubic-bezier(.2, .7, .2, 1) forwards; }
.as-divider.is-lit .as-spark.r { animation: as-spark-r 1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes as-spark-l {
  0% { opacity: 0; left: 16px; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; left: 50%; }
}
@keyframes as-spark-r {
  0% { opacity: 0; left: calc(100% - 16px); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; left: 50%; }
}

/* ---------- Sanctus-bell rings when a map light is touched or lit ---------- */
.as-ring {
  position: fixed;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1.5px solid rgba(245, 205, 100, .95);
  border-radius: 50%;
  pointer-events: none;
  z-index: 70;
  box-shadow: 0 0 12px rgba(245, 190, 80, .5);
  animation: as-ring 1.7s cubic-bezier(.15, .6, .3, 1) forwards;
}
@keyframes as-ring {
  0% { transform: scale(.4); opacity: .95; }
  100% { transform: scale(9); opacity: 0; }
}

/* ---------- Rose window behind "Introibo ad altare Dei" ---------- */
.as-rose-host { position: relative; isolation: isolate; overflow: hidden; }
.as-rose {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(118vw, 920px);
  height: min(118vw, 920px);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  opacity: .26;
}
.as-rose g.as-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: as-spin 180s linear infinite;
}
.as-rose path {
  fill: none;
  stroke: var(--as-gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4, .1, .2, 1);
}
.as-rose.is-drawn path { stroke-dashoffset: 0; }
@keyframes as-spin { to { transform: rotate(360deg); } }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .as-fl, .as-fl::after, .as-rose g.as-spin { animation: none; }
  .as-line, .as-taper .as-flame, .as-rose path { transition: none; }
  .as-spark, .as-glow, .as-ring { display: none; }
}