/* Memorial foreground composition v17: candles + bell behind, Wang Wang in front. */
.ritual-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: clamp(10px, 1.25vw, 18px);
  contain: paint;
  background:
    radial-gradient(ellipse 42% 46% at 50% 36%, rgb(131 91 52 / 12%), transparent 72%),
    linear-gradient(180deg, #100c09 0%, #090705 58%, #050403 100%);
  box-shadow:
    inset 0 0 0 1px rgb(226 188 118 / 12%),
    inset 0 -72px 110px rgb(0 0 0 / 46%);
}

.ritual-scene::before,
.ritual-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.ritual-scene::before {
  z-index: 1;
  opacity: 0.2;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 1.8%) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 26% 17%, rgb(244 206 135 / 7%), transparent 24%);
  mix-blend-mode: normal;
}

.ritual-scene::after {
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(ellipse 30% 45% at 50% 45%, rgb(255 250 235 / 22%) 0%, rgb(250 224 174 / 11%) 44%, transparent 78%),
    radial-gradient(ellipse 62% 54% at 50% 68%, rgb(229 166 73 / 10%) 0%, transparent 76%);
  filter: none;
  transform: scale(0.78);
  transform-origin: 50% 62%;
}

/* The photographic candle floor stays behind the subject. */
.ritual-scene-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0.08;
  object-fit: cover;
  object-position: center;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
  transform: translateZ(0) scale(1.012);
  will-change: auto;
}

.ritual-candle-reveals {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
}

.ritual-candle-reveal {
  position: absolute;
  top: var(--candle-y);
  left: var(--candle-x);
  display: block;
  width: 8.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff9dc 0 9%, #ffd27b 18%, rgb(230 139 39 / 72%) 42%, rgb(169 65 8 / 22%) 68%, transparent 78%);
  box-shadow: 0 0 12px rgb(239 151 52 / 12%);
  transform: translate3d(-50%, -50%, 0) scale(0.72);
  will-change: auto;
}

.ritual-scene-veil {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0.26;
  background:
    linear-gradient(180deg, rgb(7 5 4 / 24%), transparent 32%, transparent 70%, rgb(7 5 4 / 58%)),
    radial-gradient(ellipse at 50% 68%, transparent 0 30%, rgb(7 5 4 / 14%) 58%, rgb(7 5 4 / 50%) 100%);
  pointer-events: none;
}

.ritual-paw-veil {
  position: absolute;
  z-index: 3;
  top: 68%;
  left: 50%;
  width: 33%;
  aspect-ratio: 1.08;
  border-radius: 50%;
  opacity: 0.94;
  background: radial-gradient(ellipse, rgb(8 6 4 / 98%) 0 44%, rgb(8 6 4 / 76%) 61%, transparent 78%);
  filter: blur(10px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.ritual-paw-aura {
  position: absolute;
  z-index: 4;
  top: 68%;
  left: 50%;
  width: 35%;
  aspect-ratio: 1.08;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgb(255 224 151 / 25%), rgb(210 137 52 / 8%) 48%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.76);
}

.ritual-paw-reveal {
  position: absolute;
  z-index: 4;
  inset: auto -2% -22%;
  display: block;
  width: 104%;
  height: 118%;
  max-width: none;
  opacity: 0;
  object-fit: cover;
  object-position: center bottom;
  filter: brightness(1.04) saturate(0.78);
  mask-image: radial-gradient(ellipse 19% 17% at 50% 52%, #000 0 44%, rgb(0 0 0 / 76%) 64%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* The bell begins the ritual, rises once, then yields the scene completely. */
.light-button {
  position: absolute;
  z-index: 8;
  top: 61%;
  left: 50%;
  display: grid;
  width: clamp(122px, 10vw, 154px);
  height: clamp(146px, 12vw, 184px);
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: #e8bd68;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  filter: saturate(1.04) brightness(1.04) drop-shadow(0 16px 26px rgb(0 0 0 / 64%));
  transform: translate(-50%, -50%);
  transition: filter 180ms ease;
}

.light-button:hover,
.light-button:active {
  filter: saturate(1.1) brightness(1.1) drop-shadow(0 18px 28px rgb(0 0 0 / 68%));
  transform: translate(-50%, -50%);
}

.light-button::before {
  display: none;
}

.light-button::after {
  position: absolute;
  right: 18%;
  bottom: 1%;
  left: 18%;
  height: 9%;
  border-radius: 50%;
  opacity: 0.66;
  background: rgb(213 164 76 / 15%);
  content: "";
  filter: blur(8px);
}

.ritual-bell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ritual-bell-svg-handle {
  fill: none;
  stroke: #a8782e;
  stroke-linecap: round;
  stroke-width: 9;
}

.ritual-bell-svg-body {
  fill: url(#ritual-bronze);
  stroke: #b7873d;
  stroke-width: 1.35;
}

.ritual-bell-svg-light { fill: url(#ritual-bronze-light); }

.ritual-bell-svg-rim {
  fill: url(#ritual-bronze-rim);
  stroke: #b48137;
  stroke-width: 1.2;
}

.ritual-bell-svg-clapper {
  fill: #80531d;
  stroke: #c09145;
  stroke-width: 1.2;
}

.ritual-bell-svg-patina {
  fill: none;
  opacity: 0.22;
  stroke: #263b31;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.ritual-bell-svg-glint {
  fill: none;
  opacity: 0.58;
  stroke: rgb(255 238 187 / 82%);
  stroke-linecap: round;
  stroke-width: 3.2;
}

.ritual-bell-svg-groove {
  fill: none;
  opacity: 0.55;
  stroke: rgb(52 25 7 / 80%);
  stroke-linecap: round;
  stroke-width: 2;
}

/* One source image drives both the portrait reveal and the expanding heaven.
   Because both layers share identical pixels and coordinates, there is no visual cut. */
.ritual-heaven-scene {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: center;
  will-change: auto;
}

.ritual-heaven-vignette {
  position: absolute;
  z-index: 6;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 18% 58% at 55% 52%,
      transparent 0 34%,
      rgb(7 5 4 / 20%) 51%,
      rgb(7 5 4 / 72%) 72%,
      rgb(7 5 4 / 96%) 100%
    );
  pointer-events: none;
  will-change: auto;
}

/* Animate the atmosphere around the gaze, without distorting the memorial portrait. */
.ritual-heaven-aura {
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 23% 34% at 56% 40%, rgb(255 255 246 / 22%), transparent 72%),
    linear-gradient(112deg, transparent 31%, rgb(255 247 222 / 8%) 48%, transparent 65%);
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
  transform: translate3d(-1.2%, 0, 0);
}

/* One-shot cinematic arrival: broad light shafts and a restrained luminous
   perimeter make the final still feel ceremonial without keeping the GPU
   awake after the ritual finishes. */
.ritual-celestial-bloom {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0) scale(0.975);
  transform-origin: 50% 44%;
}

.ritual-celestial-bloom::before,
.ritual-celestial-bloom::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.ritual-celestial-bloom::before {
  inset: -14% -9% -10%;
  background:
    linear-gradient(116deg, transparent 25%, rgb(255 249 225 / 0%) 35%, rgb(255 249 225 / 18%) 47%, transparent 60%),
    linear-gradient(244deg, transparent 25%, rgb(255 246 214 / 0%) 35%, rgb(255 246 214 / 15%) 47%, transparent 60%),
    radial-gradient(ellipse 42% 67% at 50% 39%, rgb(255 255 246 / 28%) 0%, rgb(255 240 198 / 11%) 38%, transparent 74%);
  opacity: 0.88;
  transform: scale(0.94);
}

.ritual-celestial-bloom::after {
  inset: clamp(5px, 0.7vw, 10px);
  border: 1px solid rgb(255 240 198 / 28%);
  border-radius: clamp(7px, 0.9vw, 13px);
  background:
    linear-gradient(90deg, rgb(255 242 206 / 20%), transparent 12% 88%, rgb(255 242 206 / 20%)),
    linear-gradient(180deg, rgb(255 250 229 / 20%), transparent 14% 82%, rgb(236 188 106 / 14%));
  box-shadow:
    inset 0 0 34px rgb(255 245 218 / 20%),
    inset 0 0 112px rgb(239 187 98 / 10%);
}

.ritual-petals {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ritual-petals i {
  position: absolute;
  top: -8%;
  left: var(--petal-x);
  display: block;
  width: clamp(9px, 1vw, 15px);
  aspect-ratio: 0.7;
  border-radius: 75% 18% 70% 24%;
  opacity: 0;
  border: 1px solid rgb(151 94 88 / 24%);
  background: linear-gradient(145deg, rgb(255 246 239 / 98%), rgb(232 179 171 / 94%) 58%, rgb(185 111 115 / 88%));
  box-shadow: 0 1px 5px rgb(91 39 38 / 28%);
  transform: translate3d(-50%, -12px, 0) rotate(18deg);
}

/* The cutout is the only foreground subject; no rectangle, crop or mask. */
.ritual-memory-presence {
  position: absolute;
  z-index: 7;
  inset: 4.5% 0 12%;
  display: flex;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  filter:
    grayscale(0.5)
    brightness(0.32)
    saturate(0.52)
    drop-shadow(0 0 0 rgb(255 255 255 / 0%));
  mask-image: none;
  pointer-events: none;
  transform: translate3d(0, 2.5%, 0) scale(0.92);
  transform-origin: 50% 82%;
}

.ritual-memory-presence::before,
.ritual-memory-presence::after {
  display: none;
}

.ritual-memory-presence img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
}

.ritual-smoke {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ritual-smoke i {
  position: absolute;
  bottom: 15%;
  left: 50%;
  width: clamp(58px, 7.2vw, 96px);
  height: clamp(180px, 25vw, 310px);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse 43% 28% at 46% 80%, rgb(255 251 240 / 48%) 0%, rgb(238 227 207 / 18%) 52%, transparent 100%),
    radial-gradient(ellipse 36% 31% at 63% 53%, rgb(250 244 231 / 34%) 0%, rgb(232 220 199 / 10%) 56%, transparent 100%),
    radial-gradient(ellipse 40% 25% at 38% 27%, rgb(255 252 243 / 26%) 0%, transparent 66%);
  filter: none;
  mix-blend-mode: normal;
  transform: translate(-50%, 28px) scale(0.58) rotate(-4deg);
  transform-origin: 50% 100%;
}

.ritual-smoke i:nth-child(2) {
  left: 46%;
  width: clamp(42px, 5.4vw, 74px);
  transform: translate(-50%, 34px) scale(0.52) rotate(8deg);
}

.ritual-smoke i:nth-child(3) {
  left: 54%;
  width: clamp(38px, 4.8vw, 68px);
  transform: translate(-50%, 40px) scale(0.48) rotate(-10deg);
}

.ritual-return {
  position: absolute;
  z-index: 11;
  right: clamp(9px, 1.2vw, 16px);
  bottom: clamp(9px, 1.2vw, 16px);
  display: inline-flex;
  width: auto;
  max-width: calc(100% - 18px);
  min-height: 32px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid rgb(244 219 168 / 28%);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  background: rgb(18 13 9 / 58%);
  color: rgb(244 229 198 / 78%);
  font-size: clamp(10px, 0.92vw, 12px);
  line-height: 1.15;
  letter-spacing: 0.045em;
  text-align: left;
  opacity: 0;
  transform: translateY(5px);
}

.memorial-ritual.is-lit .ritual-return:not([hidden]) {
  animation: ritual-return-arrive-v34 520ms ease-out forwards;
}

.ritual-return:hover,
.ritual-return:focus-visible {
  color: #f0cf8a;
  opacity: 1;
}

.memorial-ritual.is-lit .ritual-scene-image {
  will-change: opacity, transform;
  animation:
    ritual-scene-awaken-lite-v26 3.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    ritual-vigil-yield-v23 2.4s ease 6.2s forwards;
}

.memorial-ritual.is-lit .ritual-scene-veil {
  animation: ritual-veil-lift-v23 8.8s ease forwards;
}

.memorial-ritual.is-lit .ritual-candle-reveal {
  will-change: opacity, transform;
  animation: ritual-candle-reveal-lite-v26 920ms cubic-bezier(0.22, 0.72, 0.28, 1) var(--candle-delay) forwards;
}

.memorial-ritual.is-lit .ritual-candle-reveals {
  animation: ritual-vigil-yield-v23 2.6s ease 7.2s forwards;
}

.ritual-paw-veil,
.ritual-paw-reveal,
.ritual-paw-aura {
  display: none;
}

.memorial-ritual.is-lit .ritual-scene::after {
  animation: ritual-scene-halo-v17 3.2s ease 5.2s forwards,
    ritual-scene-halo-breathe-lite-v26 12s ease-in-out 8.4s infinite alternate;
}

.memorial-ritual.is-lit .light-button {
  pointer-events: auto;
  animation: ritual-bell-rise-lite-v26 5.7s cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}

/* Once the arrival is complete, remove the bell's composited layer entirely.
   This prevents the legacy resting animation in styles.css from repainting it. */
.memorial-ritual.ritual-complete .light-button,
.memorial-ritual.ritual-complete .ritual-bell {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

.memorial-ritual.is-lit .ritual-heaven-scene {
  will-change: opacity;
  animation: ritual-heaven-continuous-lite-v26 6.8s cubic-bezier(0.22, 1, 0.36, 1) 2.85s forwards;
}

.memorial-ritual.is-lit .ritual-heaven-vignette {
  will-change: opacity;
  animation: ritual-heaven-vignette-lite-v26 6.8s ease 2.85s forwards;
}

.memorial-ritual.is-lit .ritual-heaven-aura {
  will-change: opacity, transform;
  animation:
    ritual-heaven-aura-arrive-lite-v26 2.8s ease 6.1s forwards,
    ritual-heaven-aura-breathe-lite-v26 12s ease-in-out 8.9s infinite alternate;
}

.memorial-ritual.is-lit .ritual-celestial-bloom {
  will-change: opacity, transform;
  animation: ritual-celestial-arrival-v32 2.6s cubic-bezier(0.2, 0.72, 0.24, 1) 7.55s forwards;
}

.memorial-ritual.is-lit .ritual-petals i {
  animation: ritual-petal-fall-v34 2.8s cubic-bezier(0.22, 0.58, 0.36, 1) calc(7.6s + var(--petal-delay)) both;
}

.memorial-ritual.is-lit .ritual-smoke i {
  animation: ritual-incense-drift-lite-v26 9.6s cubic-bezier(0.22, 0.62, 0.32, 1) 2.8s forwards;
}

.memorial-ritual.is-lit .ritual-smoke i:nth-child(2) { animation-delay: 3.55s; }
.ritual-smoke i:nth-child(3) { display: none; }

/* The completed memorial is a still composition. Keeping the two ambient
   loops alive made the browser repaint continuously even while the visitor
   was typing elsewhere on the computer. Preserve the same calm midpoint,
   but release every temporary compositor hint after the ritual. */
.memorial-ritual.ritual-complete .ritual-scene::after {
  opacity: 0.54;
  animation: none !important;
  transform: scale(1.025);
}

.memorial-ritual.ritual-complete .ritual-heaven-aura {
  opacity: 0.54;
  animation: none !important;
  transform: none;
}

.memorial-ritual.ritual-complete .ritual-celestial-bloom {
  opacity: 0.82;
  animation: none !important;
  transform: none;
  will-change: auto;
}

.memorial-ritual.ritual-complete .ritual-scene-image,
.memorial-ritual.ritual-complete .ritual-candle-reveal,
.memorial-ritual.ritual-complete .ritual-heaven-scene,
.memorial-ritual.ritual-complete .ritual-heaven-vignette,
.memorial-ritual.ritual-complete .ritual-heaven-aura {
  will-change: auto;
}

@keyframes ritual-celestial-arrival-v32 {
  0% { opacity: 0; transform: scale(0.975); }
  48% { opacity: 0.58; }
  78% { opacity: 0.9; transform: scale(1.012); }
  100% { opacity: 0.82; transform: scale(1); }
}

@keyframes ritual-petal-fall-v34 {
  0% { opacity: 0; transform: translate3d(-50%, -12px, 0) rotate(18deg); }
  15% { opacity: 0.96; }
  76% { opacity: 0.86; }
  100% { opacity: 0; transform: translate3d(calc(-50% + var(--petal-drift)), 1180%, 0) rotate(var(--petal-turn)); }
}

@keyframes ritual-return-arrive-v34 {
  to { opacity: 0.78; transform: none; }
}

@keyframes ritual-scene-awaken-lite-v26 {
  0%, 12% { opacity: 0.08; transform: scale(1.012); }
  100% { opacity: 0.34; transform: scale(1); }
}

@keyframes ritual-candle-reveal-lite-v26 {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.72); }
  58% { opacity: 0.9; transform: translate3d(-50%, -50%, 0) scale(1.05); }
  100% { opacity: 0.72; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes ritual-bell-rise-lite-v26 {
  0% { top: 61%; opacity: 0.82; transform: translate(-50%, -50%) scale(1); visibility: visible; }
  16% { opacity: 1; }
  30% { top: 55%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { top: 14%; opacity: 0.82; transform: translate(-50%, -50%) scale(0.9); }
  88% { opacity: 0.2; }
  99% { visibility: visible; }
  100% { top: 9%; opacity: 0; transform: translate(-50%, -56%) scale(0.82); visibility: hidden; }
}

@keyframes ritual-heaven-continuous-lite-v26 {
  0%, 8% { opacity: 0.001; }
  25% { opacity: 0.28; }
  52% { opacity: 0.68; }
  82%, 100% { opacity: 1; }
}

@keyframes ritual-heaven-vignette-lite-v26 {
  0%, 34% { opacity: 1; }
  58% { opacity: 0.74; }
  84% { opacity: 0.18; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes ritual-heaven-aura-arrive-lite-v26 {
  from { opacity: 0; transform: translate3d(-1.2%, 0, 0) scale(0.94); }
  to { opacity: 0.74; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ritual-heaven-aura-breathe-lite-v26 {
  from { opacity: 0.52; }
  to { opacity: 0.76; }
}

@keyframes ritual-scene-halo-breathe-lite-v26 {
  from { opacity: 0.56; transform: scale(1.03); }
  to { opacity: 0.72; transform: scale(1.07); }
}

@keyframes ritual-incense-drift-lite-v26 {
  0% { opacity: 0; transform: translate(-50%, 28px) scale(0.58) rotate(-4deg); }
  20% { opacity: 0.28; }
  55% { opacity: 0.17; transform: translate(-53%, -74px) scale(0.92) rotate(5deg); }
  100% { opacity: 0; transform: translate(-48%, -184px) scale(1.34) rotate(-6deg); }
}

@keyframes ritual-scene-awaken-v17 {
  0%, 18% { opacity: 0.13; filter: brightness(0.25) saturate(0.42) contrast(1.1); }
  100% { opacity: 0.34; filter: brightness(0.58) saturate(0.66) contrast(1.04); transform: scale(1); }
}

@keyframes ritual-scene-awaken-v23 {
  0% { opacity: 0.13; filter: brightness(0.25) saturate(0.42) contrast(1.1); }
  100% { opacity: 0.42; filter: brightness(0.68) saturate(0.74) contrast(1.04); transform: scale(1); }
}

@keyframes ritual-vigil-yield-v23 {
  0%, 16% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes ritual-veil-lift-v17 {
  0%, 34% { opacity: 0.26; }
  100% { opacity: 0.08; }
}

@keyframes ritual-veil-lift-v23 {
  0%, 34% { opacity: 0.26; }
  72% { opacity: 0.08; }
  100% { opacity: 0; }
}

@keyframes ritual-candle-reveal-v17 {
  0% { opacity: 0; }
  66% { opacity: 0.96; }
  100% { opacity: 0.84; }
}

@keyframes ritual-candle-reveal-v23 {
  0% { opacity: 0; filter: brightness(0.72) saturate(0.72); }
  58% { opacity: 0.98; filter: brightness(1.18) saturate(1.02); }
  100% { opacity: 0.86; filter: brightness(1.05) saturate(0.96); }
}

@keyframes ritual-paw-reveal-v17 {
  from { opacity: 0; filter: brightness(0.7) saturate(0.54); }
  to { opacity: 0.42; filter: brightness(1.02) saturate(0.72); }
}

@keyframes ritual-paw-aura-v17 {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.76); }
  to { opacity: 0.62; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes ritual-scene-halo-v17 {
  from { opacity: 0; transform: scale(0.78); }
  to { opacity: 0.72; transform: scale(1.05); }
}

@keyframes ritual-scene-halo-breathe-v17 {
  from { opacity: 0.58; transform: scale(1.03); }
  to { opacity: 0.78; transform: scale(1.1); }
}

@keyframes ritual-bell-rise-v17 {
  0% {
    top: 61%;
    opacity: 0.82;
    filter: saturate(1.04) brightness(1.04) drop-shadow(0 16px 26px rgb(0 0 0 / 64%));
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
  }
  18% {
    opacity: 1;
    filter: saturate(1.14) brightness(1.16) drop-shadow(0 18px 30px rgb(219 159 61 / 28%));
  }
  62% {
    top: 13%;
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.9);
  }
  82% { opacity: 0.34; }
  99% { visibility: visible; }
  100% {
    top: 9%;
    opacity: 0;
    filter: saturate(0.88) brightness(0.72) drop-shadow(0 8px 18px rgb(0 0 0 / 30%));
    transform: translate(-50%, -56%) scale(0.82);
    visibility: hidden;
  }
}

@keyframes ritual-bell-rise-v23 {
  0% {
    top: 61%;
    opacity: 0.82;
    filter: saturate(1.04) brightness(1.04) drop-shadow(0 16px 26px rgb(0 0 0 / 64%));
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
  }
  20% {
    opacity: 1;
    filter: saturate(1.14) brightness(1.16) drop-shadow(0 18px 30px rgb(219 159 61 / 28%));
  }
  68% {
    top: 14%;
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.9);
  }
  84% { opacity: 0.28; }
  99% { visibility: visible; }
  100% {
    top: 9%;
    opacity: 0;
    filter: saturate(0.88) brightness(0.72) drop-shadow(0 8px 18px rgb(0 0 0 / 30%));
    transform: translate(-50%, -56%) scale(0.82);
    visibility: hidden;
  }
}

@keyframes ritual-subject-arrive-v23 {
  0%, 8% {
    opacity: 0;
    filter: brightness(0.14) saturate(0.46) contrast(1.1) blur(7px);
    transform: scale(1.035);
  }
  58% {
    opacity: 0.68;
    filter: brightness(0.54) saturate(0.74) contrast(1.06) blur(1.8px);
  }
  100% {
    opacity: 1;
    filter: brightness(0.78) saturate(0.86) contrast(1.03) blur(0);
    transform: scale(1.01);
  }
}

@keyframes ritual-subject-yield-v23 {
  0%, 48% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes ritual-heaven-expand-v23 {
  0% {
    opacity: 0;
    -webkit-mask-size: 34% 74%;
    mask-size: 34% 74%;
    filter: brightness(0.88) saturate(0.88) blur(1px);
    transform: scale(1.012);
  }
  14% { opacity: 1; }
  50% {
    opacity: 1;
    -webkit-mask-size: 88% 124%;
    mask-size: 88% 124%;
    filter: brightness(0.92) saturate(0.9) blur(0.3px);
  }
  78% {
    opacity: 1;
    -webkit-mask-size: 190% 224%;
    mask-size: 190% 224%;
    filter: brightness(0.95) saturate(0.91) blur(0.1px);
  }
  100% {
    opacity: 1;
    -webkit-mask-size: 330% 360%;
    mask-size: 330% 360%;
    filter: brightness(0.97) saturate(0.92) blur(0);
    transform: scale(1);
  }
}

@keyframes ritual-heaven-continuous-v24 {
  0%, 7% {
    opacity: 0;
    filter: brightness(0.16) saturate(0.38) blur(9px);
  }
  28% {
    opacity: 0.62;
    filter: brightness(0.48) saturate(0.68) blur(2.6px);
  }
  50% {
    opacity: 0.86;
    filter: brightness(0.72) saturate(0.82) blur(0.8px);
  }
  76% {
    opacity: 1;
    filter: brightness(0.92) saturate(0.9) blur(0);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(0.95) blur(0);
  }
}

@keyframes ritual-heaven-breathe-v24 {
  from { filter: brightness(0.97) saturate(0.92); }
  to { filter: brightness(1.025) saturate(0.96); }
}

@keyframes ritual-heaven-vignette-v24 {
  0%, 42% { opacity: 1; }
  62% { opacity: 0.82; }
  82% { opacity: 0.28; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes ritual-dog-transition-v21 {
  0%, 10% {
    opacity: 0;
    filter: grayscale(0.5) brightness(0.32) saturate(0.52) drop-shadow(0 0 0 rgb(255 255 255 / 0%));
    transform: translate3d(0, 2.5%, 0) scale(0.92);
  }
  38%, 62% {
    opacity: 1;
    filter:
      grayscale(0.03)
      brightness(1.03)
      saturate(0.94)
      drop-shadow(0 0 5px rgb(255 255 255 / 88%))
      drop-shadow(0 0 18px rgb(255 245 218 / 52%))
      drop-shadow(0 10px 24px rgb(0 0 0 / 40%));
    transform: translate3d(0, 0, 0) scale(0.98);
  }
  100% {
    opacity: 0;
    filter:
      grayscale(0)
      brightness(1.18)
      saturate(0.88)
      blur(2px)
      drop-shadow(0 0 32px rgb(255 249 229 / 78%));
    transform: translate3d(0, -1.6%, 0) scale(1.025);
  }
}

@keyframes ritual-heaven-arrive-v21 {
  0%, 8% {
    opacity: 0;
    filter: brightness(0.12) saturate(0.32) blur(12px);
    transform: scale(1.07);
  }
  50% {
    opacity: 0.54;
    filter: brightness(0.66) saturate(0.72) blur(1.5px);
  }
  100% {
    opacity: 1;
    filter: brightness(0.96) saturate(0.9) blur(0);
    transform: scale(1);
  }
}

@keyframes ritual-heaven-breathe-v22 {
  from {
    filter: brightness(0.95) saturate(0.89);
    transform: translate3d(0, 0, 0) scale(1.004);
  }
  to {
    filter: brightness(1.025) saturate(0.95);
    transform: translate3d(0, -0.34%, 0) scale(1.014);
  }
}

@keyframes ritual-heaven-aura-arrive-v22 {
  from { opacity: 0; transform: translate3d(-1.2%, 0, 0); }
  to { opacity: 0.74; transform: translate3d(0, 0, 0); }
}

@keyframes ritual-heaven-aura-arrive-v23 {
  0% { opacity: 0; filter: blur(12px) brightness(0.82); transform: scale(0.9); }
  62% { opacity: 0.52; }
  100% { opacity: 0.78; filter: blur(7px) brightness(1.08); transform: scale(1); }
}

@keyframes ritual-heaven-aura-breathe-v22 {
  from { opacity: 0.48; filter: blur(9px) brightness(0.94); }
  to { opacity: 0.82; filter: blur(6px) brightness(1.08); }
}

@keyframes ritual-incense-drift-v17 {
  0% { opacity: 0; transform: translate(-50%, 30px) scale(0.56) rotate(-5deg); }
  18% { opacity: 0.34; }
  44% { opacity: 0.24; transform: translate(-54%, -68px) scale(0.92) rotate(7deg); }
  74% { opacity: 0.14; transform: translate(-46%, -148px) scale(1.24) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-52%, -226px) scale(1.58) rotate(9deg); }
}

@media (max-width: 720px) {
  .ritual-scene {
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(var(--gutter) * -1);
    aspect-ratio: 4 / 3;
  }

  .ritual-memory-presence {
    inset: 5.5% 0 15%;
  }

  .ritual-heaven-scene {
    object-position: center center;
  }

  .ritual-heaven-aura {
    background:
      radial-gradient(ellipse 31% 31% at 50% 37%, rgb(255 255 246 / 18%), transparent 74%),
      linear-gradient(112deg, transparent 27%, rgb(255 247 222 / 7%) 49%, transparent 70%);
  }

  .ritual-candle-reveal {
    width: 9.1%;
  }

  .ritual-return {
    right: 8px;
    bottom: 8px;
    min-height: 30px;
    max-width: calc(100% - 16px);
    padding: 5px 8px;
    font-size: 10px;
  }

  .light-button {
    top: 63%;
    width: clamp(92px, 25vw, 108px);
    height: clamp(112px, 30vw, 132px);
  }

  .ritual-paw-veil { top: 70%; width: 39%; }
  .ritual-paw-aura { top: 70%; width: 41%; }

  .memorial-ritual.is-lit .light-button {
    animation: ritual-bell-rise-mobile-lite-v26 4.8s cubic-bezier(0.2, 0.78, 0.24, 1) forwards;
  }
}

@keyframes ritual-bell-rise-mobile-lite-v26 {
  0% { top: 63%; opacity: 0.82; transform: translate(-50%, -50%) scale(1); visibility: visible; }
  16% { opacity: 1; }
  30% { top: 57%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { top: 18%; opacity: 0.82; transform: translate(-50%, -50%) scale(0.86); }
  88% { opacity: 0.2; }
  99% { visibility: visible; }
  100% { top: 12%; opacity: 0; transform: translate(-50%, -56%) scale(0.78); visibility: hidden; }
}

@keyframes ritual-bell-rise-mobile-v23 {
  0% {
    top: 63%;
    opacity: 0.82;
    filter: saturate(1.04) brightness(1.04) drop-shadow(0 16px 26px rgb(0 0 0 / 64%));
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
  }
  20% { opacity: 1; filter: saturate(1.14) brightness(1.16) drop-shadow(0 18px 30px rgb(219 159 61 / 28%)); }
  68% { top: 18%; opacity: 0.84; transform: translate(-50%, -50%) scale(0.86); }
  84% { opacity: 0.26; }
  99% { visibility: visible; }
  100% {
    top: 12%;
    opacity: 0;
    filter: saturate(0.88) brightness(0.72) drop-shadow(0 8px 18px rgb(0 0 0 / 30%));
    transform: translate(-50%, -56%) scale(0.78);
    visibility: hidden;
  }
}

@keyframes ritual-bell-rise-mobile-v17 {
  0% {
    top: 63%;
    opacity: 0.82;
    filter: saturate(1.04) brightness(1.04) drop-shadow(0 16px 26px rgb(0 0 0 / 64%));
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
  }
  18% {
    opacity: 1;
    filter: saturate(1.14) brightness(1.16) drop-shadow(0 18px 30px rgb(219 159 61 / 28%));
  }
  62% {
    top: 18%;
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(0.86);
  }
  82% { opacity: 0.3; }
  99% { visibility: visible; }
  100% {
    top: 12%;
    opacity: 0;
    filter: saturate(0.88) brightness(0.72) drop-shadow(0 8px 18px rgb(0 0 0 / 30%));
    transform: translate(-50%, -56%) scale(0.78);
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-lit .ritual-scene-image {
    opacity: 0.34;
    filter: brightness(0.58) saturate(0.66) contrast(1.04);
    animation: none;
    transform: none;
  }

  .memorial-ritual.is-lit .ritual-candle-reveal { opacity: 0.84; animation: none; }
  .memorial-ritual.is-lit .ritual-paw-reveal { opacity: 0.42; animation: none; }
  .memorial-ritual.is-lit .ritual-paw-aura { opacity: 0.62; animation: none; transform: translate(-50%, -50%) scale(1.08); }
  .memorial-ritual.is-lit .ritual-scene::after { opacity: 0.64; animation: none; transform: scale(1.05); }

  .memorial-ritual.is-lit .light-button {
    top: var(--ritual-bell-start-top);
    opacity: 0.94;
    visibility: visible;
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }

  .memorial-ritual.is-lit .ritual-heaven-scene {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
    filter: brightness(0.96) saturate(0.9);
    animation: none;
    transform: none;
  }

  .memorial-ritual.is-lit .ritual-heaven-vignette {
    opacity: 0;
    visibility: hidden;
    animation: none;
  }

  .memorial-ritual.is-lit .ritual-heaven-aura {
    opacity: 0.58;
    animation: none;
  }

  .memorial-ritual.is-lit .ritual-petals { display: none; }
  .memorial-ritual.ritual-complete .ritual-return:not([hidden]) {
    opacity: 0.78;
    animation: none;
    transform: none;
  }

  .memorial-ritual.is-lit .ritual-smoke i { display: none; }
}

/* v57 — five living memorial scenes.
   Each new scene gets one restrained motion language.  The large photographs
   stay on their own compositor layer; small overlays use only opacity and
   transforms so the sequence remains smooth on mobile. */
.ritual-ambient-scene {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateZ(0) scale(1.025);
  backface-visibility: hidden;
}

.memorial-ritual[data-ritual-theme="dawn"] .ritual-dawn-scene,
.memorial-ritual[data-ritual-theme="stars"] .ritual-stars-scene,
.memorial-ritual[data-ritual-theme="forest"] .ritual-forest-scene {
  visibility: visible;
}

.memorial-ritual[data-ritual-theme="dawn"].is-lit .ritual-dawn-scene {
  animation: ritual-dawn-journey-v57 5.7s cubic-bezier(0.2, 0.72, 0.28, 1) 4.15s forwards;
  will-change: opacity, transform;
}

.memorial-ritual[data-ritual-theme="stars"].is-lit .ritual-stars-scene {
  animation: ritual-stars-arrive-v57 5.7s cubic-bezier(0.2, 0.72, 0.28, 1) 4.15s forwards;
  will-change: opacity, transform;
}

.memorial-ritual[data-ritual-theme="forest"].is-lit .ritual-forest-scene {
  animation: ritual-forest-home-v57 5.7s cubic-bezier(0.2, 0.72, 0.28, 1) 4.15s forwards;
  will-change: opacity, transform;
}

.memorial-ritual[data-ritual-theme="dawn"].ritual-complete .ritual-dawn-scene,
.memorial-ritual[data-ritual-theme="stars"].ritual-complete .ritual-stars-scene,
.memorial-ritual[data-ritual-theme="forest"].ritual-complete .ritual-forest-scene {
  opacity: 1;
  animation: none;
  transform: translateZ(0) scale(1);
  will-change: auto;
}

.memorial-ritual[data-ritual-theme="dawn"] .ritual-heaven-scene,
.memorial-ritual[data-ritual-theme="dawn"] .ritual-dusk-scene,
.memorial-ritual[data-ritual-theme="dawn"] .ritual-heaven-aura,
.memorial-ritual[data-ritual-theme="dawn"] .ritual-rainbow,
.memorial-ritual[data-ritual-theme="dawn"] .ritual-puppies-presence,
.memorial-ritual[data-ritual-theme="dawn"] .ritual-dusk-leaves,
.memorial-ritual[data-ritual-theme="stars"] .ritual-heaven-scene,
.memorial-ritual[data-ritual-theme="stars"] .ritual-dusk-scene,
.memorial-ritual[data-ritual-theme="stars"] .ritual-heaven-aura,
.memorial-ritual[data-ritual-theme="stars"] .ritual-rainbow,
.memorial-ritual[data-ritual-theme="stars"] .ritual-puppies-presence,
.memorial-ritual[data-ritual-theme="stars"] .ritual-dusk-leaves,
.memorial-ritual[data-ritual-theme="forest"] .ritual-heaven-scene,
.memorial-ritual[data-ritual-theme="forest"] .ritual-dusk-scene,
.memorial-ritual[data-ritual-theme="forest"] .ritual-heaven-aura,
.memorial-ritual[data-ritual-theme="forest"] .ritual-rainbow,
.memorial-ritual[data-ritual-theme="forest"] .ritual-puppies-presence,
.memorial-ritual[data-ritual-theme="forest"] .ritual-dusk-leaves {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
}

/* Dawn passage: the family advances into light while the trail appears one
   pawprint at a time. */
.ritual-dawn-light,
.ritual-dawn-pawprints,
.ritual-stars-glimmer,
.ritual-forest-mist,
.ritual-forest-leaves {
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
}

.memorial-ritual[data-ritual-theme="dawn"] .ritual-dawn-light,
.memorial-ritual[data-ritual-theme="dawn"] .ritual-dawn-pawprints,
.memorial-ritual[data-ritual-theme="stars"] .ritual-stars-glimmer,
.memorial-ritual[data-ritual-theme="forest"] .ritual-forest-mist,
.memorial-ritual[data-ritual-theme="forest"] .ritual-forest-leaves {
  visibility: visible;
}

.ritual-dawn-light {
  background: radial-gradient(circle at 53% 21%, rgb(255 242 190 / 54%) 0, rgb(255 208 112 / 18%) 21%, transparent 49%);
  mix-blend-mode: screen;
}

.memorial-ritual[data-ritual-theme="dawn"].is-lit .ritual-dawn-light,
.memorial-ritual[data-ritual-theme="dawn"].ritual-complete .ritual-dawn-light {
  opacity: 0.72;
  animation: ritual-dawn-light-v57 5.8s ease-in-out 5s infinite alternate;
}

.ritual-dawn-pawprints i {
  --step-delay: 5.25s;
  position: absolute;
  top: 82%;
  left: 49%;
  width: clamp(9px, 1.35vw, 17px);
  height: clamp(10px, 1.5vw, 19px);
  opacity: 0;
  transform: rotate(-8deg) scale(0.72);
}

.ritual-dawn-pawprints i::before {
  position: absolute;
  right: 23%;
  bottom: 0;
  left: 23%;
  height: 52%;
  border-radius: 55% 55% 46% 46%;
  background: rgb(255 225 159 / 78%);
  box-shadow: 0 0 9px rgb(255 213 123 / 42%);
  content: "";
}

.ritual-dawn-pawprints i::after {
  position: absolute;
  top: 5%;
  left: 40%;
  width: 22%;
  height: 24%;
  border-radius: 50%;
  background: rgb(255 231 174 / 82%);
  box-shadow: -5px 3px 0 rgb(255 231 174 / 78%), 5px 3px 0 rgb(255 231 174 / 78%);
  content: "";
}

.ritual-dawn-pawprints i:nth-child(2) { --step-delay: 5.72s; top: 76%; left: 52%; transform: rotate(8deg) scale(0.7); }
.ritual-dawn-pawprints i:nth-child(3) { --step-delay: 6.19s; top: 70%; left: 49%; transform: rotate(-7deg) scale(0.65); }
.ritual-dawn-pawprints i:nth-child(4) { --step-delay: 6.66s; top: 64%; left: 52%; transform: rotate(7deg) scale(0.6); }
.ritual-dawn-pawprints i:nth-child(5) { --step-delay: 7.13s; top: 58%; left: 50%; transform: rotate(-5deg) scale(0.55); }

.memorial-ritual[data-ritual-theme="dawn"].is-lit .ritual-dawn-pawprints,
.memorial-ritual[data-ritual-theme="dawn"].ritual-complete .ritual-dawn-pawprints {
  opacity: 1;
}

.memorial-ritual[data-ritual-theme="dawn"].is-lit .ritual-dawn-pawprints i,
.memorial-ritual[data-ritual-theme="dawn"].ritual-complete .ritual-dawn-pawprints i {
  animation: ritual-dawn-step-v57 1.1s ease-out var(--step-delay) forwards;
}

/* Starlit meadow: a slow breathing composition with restrained fireflies. */
.ritual-stars-glimmer i {
  --spark-delay: 0s;
  position: absolute;
  top: 64%;
  left: 11%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe68b;
  box-shadow: 0 0 12px 4px rgb(255 215 91 / 34%);
  opacity: 0;
}

.ritual-stars-glimmer i:nth-child(2) { --spark-delay: -1.7s; top: 73%; left: 28%; transform: scale(.72); }
.ritual-stars-glimmer i:nth-child(3) { --spark-delay: -3.4s; top: 57%; left: 68%; transform: scale(.9); }
.ritual-stars-glimmer i:nth-child(4) { --spark-delay: -5.1s; top: 76%; left: 84%; transform: scale(.62); }
.ritual-stars-glimmer i:nth-child(5) { --spark-delay: -6.8s; top: 48%; left: 91%; transform: scale(.78); }

.memorial-ritual[data-ritual-theme="stars"].is-lit .ritual-stars-glimmer,
.memorial-ritual[data-ritual-theme="stars"].ritual-complete .ritual-stars-glimmer {
  opacity: 1;
}

.memorial-ritual[data-ritual-theme="stars"].is-lit .ritual-stars-glimmer i,
.memorial-ritual[data-ritual-theme="stars"].ritual-complete .ritual-stars-glimmer i {
  animation: ritual-starlight-v57 7.4s ease-in-out var(--spark-delay) infinite;
}

/* Forest path: mist crosses the creek while a few leaves descend. */
.ritual-forest-mist {
  top: 47%;
  height: 42%;
  background:
    radial-gradient(ellipse at 20% 58%, rgb(229 239 219 / 19%), transparent 45%),
    radial-gradient(ellipse at 78% 34%, rgb(238 241 215 / 15%), transparent 43%);
}

.memorial-ritual[data-ritual-theme="forest"].is-lit .ritual-forest-mist,
.memorial-ritual[data-ritual-theme="forest"].ritual-complete .ritual-forest-mist {
  opacity: 0.58;
  animation: ritual-forest-mist-v57 11s ease-in-out 5.4s infinite alternate;
}

.ritual-forest-leaves i {
  --forest-delay: 0s;
  position: absolute;
  top: -8%;
  left: 18%;
  width: 12px;
  height: 7px;
  border-radius: 90% 14% 82% 18%;
  background: rgb(179 130 63 / 72%);
  opacity: 0;
  transform: rotate(20deg);
}

.ritual-forest-leaves i:nth-child(2) { --forest-delay: -2.8s; left: 42%; transform: scale(.78) rotate(-18deg); }
.ritual-forest-leaves i:nth-child(3) { --forest-delay: -5.6s; left: 69%; transform: scale(.9) rotate(35deg); }
.ritual-forest-leaves i:nth-child(4) { --forest-delay: -8.4s; left: 88%; transform: scale(.68) rotate(-28deg); }

.memorial-ritual[data-ritual-theme="forest"].is-lit .ritual-forest-leaves,
.memorial-ritual[data-ritual-theme="forest"].ritual-complete .ritual-forest-leaves {
  opacity: 0.66;
}

.memorial-ritual[data-ritual-theme="forest"].is-lit .ritual-forest-leaves i,
.memorial-ritual[data-ritual-theme="forest"].ritual-complete .ritual-forest-leaves i {
  animation: ritual-forest-leaf-v57 11.2s linear var(--forest-delay) infinite;
}

@keyframes ritual-dawn-journey-v57 {
  from { opacity: 0; transform: translate3d(0, 1.8%, 0) scale(1.045); }
  to { opacity: 1; transform: translate3d(0, -0.4%, 0) scale(1.005); }
}

@keyframes ritual-stars-arrive-v57 {
  from { opacity: 0; transform: translateZ(0) scale(1.035); }
  to { opacity: 1; transform: translateZ(0) scale(1); }
}

@keyframes ritual-forest-home-v57 {
  from { opacity: 0; transform: translate3d(-0.7%, 0.8%, 0) scale(1.035); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ritual-dawn-light-v57 {
  from { opacity: 0.5; transform: scale(0.98); }
  to { opacity: 0.78; transform: scale(1.025); }
}

@keyframes ritual-dawn-step-v57 {
  from { opacity: 0; }
  45% { opacity: 0.9; }
  to { opacity: 0.44; }
}

@keyframes ritual-starlight-v57 {
  0%, 100% { opacity: 0.12; transform: translate3d(0, 4px, 0) scale(0.76); }
  48% { opacity: 0.84; transform: translate3d(8px, -7px, 0) scale(1); }
}

@keyframes ritual-forest-mist-v57 {
  from { transform: translate3d(-2.5%, 0, 0); }
  to { transform: translate3d(2.5%, -1%, 0); }
}

@keyframes ritual-forest-leaf-v57 {
  0% { opacity: 0; transform: translate3d(0, -10px, 0) rotate(10deg); }
  16% { opacity: 0.52; }
  76% { opacity: 0.34; }
  100% { opacity: 0; transform: translate3d(52px, 112vh, 0) rotate(310deg); }
}

@media (max-width: 720px) {
  .ritual-theme-picker select {
    min-width: min(178px, 58vw);
    max-width: 62vw;
  }

  .ritual-dawn-scene { object-position: 51% center; }
  .ritual-stars-scene { object-position: 50% center; }
  .ritual-forest-scene { object-position: 52% center; }

  .ritual-dawn-pawprints i {
    width: 9px;
    height: 11px;
  }

  .ritual-forest-leaves i {
    width: 9px;
    height: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual[data-ritual-theme="dawn"].is-lit .ritual-dawn-scene,
  .memorial-ritual[data-ritual-theme="stars"].is-lit .ritual-stars-scene,
  .memorial-ritual[data-ritual-theme="forest"].is-lit .ritual-forest-scene {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .ritual-dawn-light,
  .ritual-dawn-pawprints,
  .ritual-stars-glimmer,
  .ritual-forest-mist,
  .ritual-forest-leaves {
    display: none !important;
  }
}

/* v35 — the final portrait dissolves into the vigil instead of reading as a
   rounded photo card. Light is concentrated on Wang Wang; the frame itself
   falls gently back into the night. */
.ritual-scene {
  border-radius: 0;
}

.ritual-heaven-scene {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 66%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 72%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 66%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 72%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ritual-heaven-aura {
  background:
    radial-gradient(ellipse 24% 61% at 51% 50%, rgb(255 255 249 / 30%) 0%, rgb(255 244 211 / 13%) 46%, transparent 76%),
    radial-gradient(ellipse 49% 76% at 50% 51%, transparent 52%, rgb(229 179 101 / 6%) 72%, transparent 91%);
}

.ritual-celestial-bloom::before {
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse 24% 63% at 51% 50%, rgb(255 255 251 / 27%) 0%, rgb(255 241 204 / 13%) 43%, transparent 73%),
    radial-gradient(ellipse 43% 80% at 50% 50%, transparent 54%, rgb(246 207 143 / 7%) 72%, transparent 91%);
  transform: none;
}

.ritual-celestial-bloom::after {
  inset: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 25% 69% at 51% 50%, transparent 0 46%, rgb(12 8 5 / 12%) 62%, rgb(8 6 4 / 42%) 81%, rgb(5 4 3 / 68%) 100%),
    radial-gradient(ellipse 80% 88% at 50% 49%, transparent 0 59%, rgb(237 199 136 / 7%) 72%, rgb(7 5 4 / 50%) 91%, rgb(4 3 2 / 76%) 100%);
  box-shadow: none;
}

.memorial-ritual.ritual-complete .ritual-celestial-bloom {
  opacity: 0.68;
}

/* The soundtrack is supporting furniture, not a second content card. */
.ritual-meta {
  width: min(100%, 980px);
  padding: 12px 4px 0;
  border-top-color: rgb(229 185 95 / 14%);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.ritual-meta .sound-module,
.sound-module {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  background: transparent;
}

.sound-head {
  display: none;
}

.sound-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sound-toggle {
  min-height: 32px;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.sound-toggle-glyph {
  width: 30px;
  height: 30px;
  font-size: 9px;
}

.sound-volume {
  gap: 5px;
  font-size: 0;
}

.sound-volume input {
  width: clamp(54px, 8vw, 72px);
  height: 18px;
}

.sound-status {
  display: none;
}

.ritual-meta .light-thanks {
  font-size: 13px;
}

/* These decorative loops stayed alive even ten screens below the hero.
   Their static end state keeps the composition intact without background
   repaint cost while visitors read or use the memorial. */
.primary-link > span[aria-hidden="true"],
.petition-button > span[aria-hidden="true"],
.angel-frame > img {
  animation: none !important;
}

@media (max-width: 720px) {
  .ritual-heaven-scene {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 72%) 4%, #000 10% 90%, rgb(0 0 0 / 72%) 96%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 76%) 4%, #000 9% 91%, rgb(0 0 0 / 66%) 96%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 72%) 4%, #000 10% 90%, rgb(0 0 0 / 72%) 96%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 76%) 4%, #000 9% 91%, rgb(0 0 0 / 66%) 96%, transparent 100%);
  }

  .ritual-heaven-aura {
    background: radial-gradient(ellipse 31% 64% at 50% 50%, rgb(255 255 249 / 25%) 0%, rgb(255 242 207 / 10%) 48%, transparent 76%);
  }

  .ritual-celestial-bloom::before {
    background: radial-gradient(ellipse 31% 65% at 50% 50%, rgb(255 255 251 / 24%) 0%, rgb(255 239 199 / 11%) 45%, transparent 74%);
  }

  .ritual-meta {
    padding-top: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ritual-meta .sound-module {
    padding: 0;
    border: 0;
  }

  .sound-toggle {
    font-size: 10.5px;
  }

  .sound-toggle-glyph {
    width: 28px;
    height: 28px;
  }

  .sound-volume input {
    width: 52px;
  }
}

@media (max-width: 390px) {
  .sound-toggle [data-sound-toggle-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .sound-volume input {
    width: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-lit .ritual-heaven-scene {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 66%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 72%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 66%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 72%) 5%, #000 11% 89%, rgb(0 0 0 / 66%) 95%, transparent 100%);
  }
}

/* v46 — two clearly named ritual atmospheres. The original heaven reunion
   remains the primary scene; the quieter dusk garden is an optional second
   interpretation. The selector is intentionally compact and editorial. */
.ritual-theme-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin: -2px auto 18px;
  color: rgb(239 218 174 / 68%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ritual-theme-picker select {
  min-width: 154px;
  height: 34px;
  padding: 0 34px 0 12px;
  border: 1px solid rgb(222 177 88 / 28%);
  border-radius: 999px;
  color: #f1d79f;
  background-color: rgb(19 15 12 / 88%);
  font: inherit;
  letter-spacing: 0.055em;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.ritual-theme-picker select:hover,
.ritual-theme-picker select:focus-visible {
  border-color: rgb(231 190 104 / 64%);
  background-color: rgb(27 21 16 / 96%);
  outline: none;
}

.ritual-dusk-scene {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: brightness(0.58) saturate(0.76) contrast(1.04);
  pointer-events: none;
  transform: translateZ(0) scale(1.018);
}

.memorial-ritual[data-ritual-theme="dusk"].is-lit .ritual-dusk-scene {
  will-change: opacity, filter, transform;
  animation: ritual-dusk-arrive-v46 5.35s cubic-bezier(0.22, 0.7, 0.28, 1) 4.35s forwards;
}

.memorial-ritual[data-ritual-theme="dusk"] .ritual-heaven-scene,
.memorial-ritual[data-ritual-theme="dusk"] .ritual-heaven-aura,
.memorial-ritual[data-ritual-theme="dusk"] .ritual-rainbow,
.memorial-ritual[data-ritual-theme="dusk"] .ritual-puppies-presence {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
}

.memorial-ritual[data-ritual-theme="dusk"].ritual-complete .ritual-dusk-scene {
  opacity: 1;
  filter: brightness(0.96) saturate(0.88) contrast(1.035);
  animation: none !important;
  transform: translateZ(0) scale(1);
  will-change: auto;
}

.memorial-ritual[data-ritual-theme="heaven"] .ritual-dusk-scene {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
}

/* 暮光花園只保留少量、緩慢的落葉；以位移與透明度完成，避免高耗能粒子。 */
.ritual-dusk-leaves {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease 6.2s;
}

.ritual-dusk-leaves i {
  position: absolute;
  top: var(--leaf-y);
  left: var(--leaf-start);
  width: 14px;
  height: 8px;
  border-radius: 90% 12% 82% 18%;
  opacity: 0;
  background: linear-gradient(145deg, rgb(153 99 54 / 82%), rgb(76 44 27 / 76%));
  box-shadow: inset 0 0 0 1px rgb(228 182 112 / 12%), 0 2px 4px rgb(18 10 5 / 24%);
  filter: saturate(0.72);
  transform: translate3d(0, 0, 0) rotate(-18deg) scale(var(--leaf-scale));
  will-change: transform, opacity;
}

.ritual-dusk-leaves i::after {
  position: absolute;
  top: 50%;
  right: 1px;
  left: 1px;
  height: 1px;
  background: rgb(246 213 158 / 30%);
  content: "";
  transform: rotate(-12deg);
  transform-origin: center;
}

.memorial-ritual[data-ritual-theme="dusk"].is-lit .ritual-dusk-leaves,
.memorial-ritual[data-ritual-theme="dusk"].ritual-complete .ritual-dusk-leaves {
  opacity: 0.58;
}

.memorial-ritual[data-ritual-theme="dusk"].is-lit .ritual-dusk-leaves i,
.memorial-ritual[data-ritual-theme="dusk"].ritual-complete .ritual-dusk-leaves i {
  animation: ritual-dusk-leaf-ground-drift-v56 var(--leaf-duration) cubic-bezier(0.32, 0.08, 0.68, 0.96) var(--leaf-delay) infinite;
}

.memorial-ritual[data-ritual-theme="heaven"] .ritual-dusk-leaves {
  display: none;
}

@keyframes ritual-dusk-leaf-ground-drift-v56 {
  0% {
    opacity: 0;
    transform: translate3d(0, 4px, 0) rotate(-18deg) scale(var(--leaf-scale));
  }
  14% {
    opacity: 0.26;
  }
  46% {
    opacity: 0.46;
    transform: translate3d(var(--leaf-mid), var(--leaf-lift), 0) rotate(var(--leaf-mid-turn)) scale(var(--leaf-scale));
  }
  76% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--leaf-end), -4px, 0) rotate(var(--leaf-turn)) scale(var(--leaf-scale));
  }
}

@keyframes ritual-dusk-arrive-v46 {
  0% {
    opacity: 0;
    filter: brightness(0.58) saturate(0.76) contrast(1.04);
    transform: translateZ(0) scale(1.018);
  }
  100% {
    opacity: 1;
    filter: brightness(0.96) saturate(0.88) contrast(1.035);
    transform: translateZ(0) scale(1);
  }
}

@media (max-width: 720px) {
  .ritual-theme-picker {
    gap: 9px;
    margin-bottom: 14px;
    font-size: 10px;
  }

  .ritual-theme-picker select {
    min-width: 138px;
    height: 32px;
    padding-left: 10px;
  }

  .ritual-dusk-scene {
    object-position: 58% center;
  }

  .ritual-dusk-leaves i {
    width: 9px;
    height: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual[data-ritual-theme="dusk"].is-lit .ritual-dusk-scene {
    opacity: 1;
    filter: brightness(0.96) saturate(0.88) contrast(1.035);
    animation: none;
    transform: none;
  }


  .ritual-dusk-leaves {
    display: none !important;
  }
}

/* v41 — family reunion in the final frame.
   Reuse the already-loaded hero artwork, crop only the four puppies, and
   dissolve the crop into the cloud field so it never reads as a pasted card. */
.ritual-puppies-presence {
  position: absolute;
  z-index: 7;
  bottom: 1.8%;
  left: 2.2%;
  width: 39%;
  height: 29%;
  overflow: hidden;
  opacity: 0;
  filter: brightness(1.06) saturate(0.86) drop-shadow(0 0 14px rgb(255 247 223 / 28%));
  -webkit-mask-image: radial-gradient(ellipse 80% 58% at 52% 49%, #000 0 38%, rgb(0 0 0 / 88%) 51%, rgb(0 0 0 / 38%) 68%, transparent 88%);
  mask-image: radial-gradient(ellipse 80% 58% at 52% 49%, #000 0 38%, rgb(0 0 0 / 88%) 51%, rgb(0 0 0 / 38%) 68%, transparent 88%);
  pointer-events: none;
  transform: translate3d(-2%, 4%, 0) scale(0.97);
}

.ritual-puppies-presence img {
  position: absolute;
  top: -168%;
  left: -80%;
  width: 200%;
  max-width: none;
  height: auto;
}

.memorial-ritual.is-lit .ritual-puppies-presence {
  will-change: opacity, transform, filter;
  animation: ritual-puppies-arrive-v41 1.85s cubic-bezier(0.22, 0.72, 0.28, 1) 8.45s forwards;
}

.memorial-ritual.ritual-complete .ritual-puppies-presence {
  opacity: 0.94;
  filter: brightness(1.04) saturate(0.88) drop-shadow(0 0 12px rgb(255 247 223 / 32%));
  animation: none !important;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

@keyframes ritual-puppies-arrive-v41 {
  from {
    opacity: 0;
    filter: brightness(1.16) saturate(0.72) blur(5px) drop-shadow(0 0 18px rgb(255 247 223 / 18%));
    transform: translate3d(-2%, 4%, 0) scale(0.97);
  }

  to {
    opacity: 0.94;
    filter: brightness(1.04) saturate(0.88) blur(0) drop-shadow(0 0 12px rgb(255 247 223 / 32%));
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .ritual-puppies-presence {
    bottom: 1.5%;
    left: 0.5%;
    width: 47%;
    height: 29%;
  }

  .ritual-puppies-presence img {
    top: -170%;
    left: -80%;
    width: 200%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-lit .ritual-puppies-presence {
    opacity: 0.94;
    animation: none;
    transform: none;
  }
}

/* v38 — the petals are the farewell; the rainbow is what remains.
   A single clipped radial band draws from left to right once, then becomes a
   still layer so the completed memorial costs no ongoing animation work. */
.ritual-rainbow {
  position: absolute;
  z-index: 6;
  top: -8%;
  right: -5%;
  left: -7%;
  height: 76%;
  overflow: hidden;
  opacity: 0;
  background: radial-gradient(
    ellipse 84% 158% at 52% 111%,
    transparent 0 57%,
    rgb(132 105 205 / 18%) 57.3% 58.1%,
    rgb(100 145 218 / 20%) 58.2% 59%,
    rgb(101 177 183 / 20%) 59.1% 59.9%,
    rgb(139 188 130 / 20%) 60% 60.8%,
    rgb(238 210 126 / 22%) 60.9% 61.7%,
    rgb(231 164 113 / 20%) 61.8% 62.6%,
    rgb(214 133 132 / 19%) 62.7% 63.5%,
    transparent 63.8%
  );
  filter:
    drop-shadow(0 0 10px rgb(255 248 226 / 25%))
    drop-shadow(0 0 28px rgb(255 240 202 / 15%));
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transform: rotate(-1.8deg) scaleX(1.035) translateZ(0);
  transform-origin: 50% 100%;
}

.memorial-ritual.is-lit .ritual-rainbow {
  will-change: clip-path, opacity;
  animation: ritual-rainbow-sequence-v53 11.85s linear forwards;
}

.memorial-ritual.ritual-complete .ritual-rainbow {
  opacity: 0;
  animation: none !important;
  clip-path: inset(0);
  will-change: auto;
}

@keyframes ritual-rainbow-sequence-v53 {
  0%, 64.1% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  83.1% {
    opacity: 0.56;
    clip-path: inset(0);
  }

  /* The last staggered petal clears before the rainbow begins its exit. */
  92.4% {
    opacity: 0.56;
    clip-path: inset(0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0);
  }
}

@media (max-width: 720px) {
  .ritual-rainbow {
    top: -6%;
    right: -7%;
    left: -10%;
    height: 74%;
    background: radial-gradient(
      ellipse 87% 156% at 53% 111%,
      transparent 0 57%,
      rgb(132 105 205 / 23%) 57.3% 58.2%,
      rgb(100 145 218 / 23%) 58.3% 59.2%,
      rgb(101 177 183 / 22%) 59.3% 60.2%,
      rgb(139 188 130 / 22%) 60.3% 61.2%,
      rgb(238 210 126 / 24%) 61.3% 62.2%,
      rgb(231 164 113 / 23%) 62.3% 63.2%,
      rgb(214 133 132 / 22%) 63.3% 64.2%,
      transparent 64.5%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-lit .ritual-rainbow {
    opacity: 0;
    animation: none;
    clip-path: inset(0);
  }
}

/* v36 — one uninterrupted bell ascent and an open, directional heaven light.
   Position and fade are separate animations so the bell never pauses at
   intermediate waypoints before it yields the scene. */
.light-button {
  --ritual-bell-start-top: 61%;
  --ritual-bell-end-top: 9%;
  --ritual-bell-end-scale: 0.82;
}

.memorial-ritual.is-lit .light-button {
  animation:
    ritual-bell-rise-continuous-v36 5.35s cubic-bezier(0.34, 0.03, 0.22, 1) forwards,
    ritual-bell-fade-continuous-v36 1.2s ease 4.15s forwards;
}

@keyframes ritual-bell-rise-continuous-v36 {
  from {
    top: var(--ritual-bell-start-top);
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    top: var(--ritual-bell-end-top);
    transform: translate(-50%, -56%) scale(var(--ritual-bell-end-scale));
  }
}

@keyframes ritual-bell-fade-continuous-v36 {
  from {
    opacity: 1;
    visibility: visible;
  }

  99% {
    opacity: 0;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Replace the portrait-shaped oval spotlight with light arriving from an
   implied opening above. The faint stepped path is atmospheric, not a card
   or a second illustration, and remains behind the visual focus. */
.ritual-heaven-aura {
  background:
    linear-gradient(72deg, transparent 34%, rgb(255 250 231 / 0%) 42%, rgb(255 250 231 / 16%) 50%, transparent 62%),
    linear-gradient(108deg, transparent 34%, rgb(255 245 218 / 0%) 42%, rgb(255 245 218 / 14%) 50%, transparent 62%),
    radial-gradient(circle at 50% 7%, rgb(255 255 246 / 34%) 0%, rgb(255 243 210 / 13%) 19%, transparent 43%);
}

.ritual-heaven-aura::before {
  position: absolute;
  top: 7%;
  bottom: 9%;
  left: 50%;
  width: 44%;
  opacity: 0.34;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 8%,
    rgb(255 252 238 / 0%) 8%,
    rgb(255 252 238 / 32%) 9.2%,
    transparent 10.4% 15%
  );
  clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
  content: "";
  filter: blur(0.8px);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 88%), rgb(0 0 0 / 34%) 62%, transparent 94%);
  pointer-events: none;
  transform: translateX(-50%);
}

.memorial-ritual.is-lit .ritual-scene::after {
  background:
    linear-gradient(74deg, transparent 38%, rgb(255 248 226 / 11%) 50%, transparent 62%),
    linear-gradient(106deg, transparent 38%, rgb(255 244 215 / 9%) 50%, transparent 62%),
    radial-gradient(circle at 50% 6%, rgb(255 255 242 / 25%), transparent 36%);
}

.ritual-celestial-bloom::before {
  inset: -8% -5% -6%;
  background:
    linear-gradient(70deg, transparent 35%, rgb(255 249 227 / 0%) 42%, rgb(255 249 227 / 17%) 50%, transparent 61%),
    linear-gradient(110deg, transparent 35%, rgb(255 245 218 / 0%) 42%, rgb(255 245 218 / 14%) 50%, transparent 61%),
    radial-gradient(circle at 50% 5%, rgb(255 255 244 / 31%) 0%, rgb(255 239 195 / 10%) 21%, transparent 43%);
}

.ritual-celestial-bloom::after {
  background:
    linear-gradient(90deg, rgb(6 5 4 / 56%), transparent 14% 86%, rgb(6 5 4 / 56%)),
    linear-gradient(180deg, rgb(255 245 218 / 8%), transparent 27% 74%, rgb(5 4 3 / 58%));
}

@media (max-width: 720px) {
  .light-button {
    --ritual-bell-start-top: 63%;
    --ritual-bell-end-top: 12%;
    --ritual-bell-end-scale: 0.78;
  }

  .memorial-ritual.is-lit .light-button {
    animation:
      ritual-bell-rise-continuous-v36 5.1s cubic-bezier(0.34, 0.03, 0.22, 1) forwards,
      ritual-bell-fade-continuous-v36 1.1s ease 4s forwards;
  }

  .ritual-heaven-aura {
    background:
      linear-gradient(70deg, transparent 31%, rgb(255 250 231 / 0%) 40%, rgb(255 250 231 / 15%) 50%, transparent 64%),
      linear-gradient(110deg, transparent 31%, rgb(255 245 218 / 0%) 40%, rgb(255 245 218 / 13%) 50%, transparent 64%),
      radial-gradient(circle at 50% 7%, rgb(255 255 246 / 31%) 0%, rgb(255 243 210 / 11%) 21%, transparent 45%);
  }

  .ritual-heaven-aura::before {
    width: 58%;
    opacity: 0.28;
  }

  .ritual-celestial-bloom::before {
    background:
      linear-gradient(68deg, transparent 31%, rgb(255 249 227 / 0%) 40%, rgb(255 249 227 / 15%) 50%, transparent 64%),
      linear-gradient(112deg, transparent 31%, rgb(255 245 218 / 0%) 40%, rgb(255 245 218 / 12%) 50%, transparent 64%),
      radial-gradient(circle at 50% 6%, rgb(255 255 244 / 28%) 0%, rgb(255 239 195 / 9%) 23%, transparent 46%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-lit .light-button {
    top: var(--ritual-bell-start-top);
    opacity: 0.94;
    visibility: visible;
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* v37 — one continuous arrival, followed by light that opens outward.
   The previous mask faded the photograph to black at all four edges and the
   six-stop opacity curve made Wang Wang appear in visible stages.  Keep the
   whole photograph intact, use a single compositor-friendly fade, and let a
   warm white perimeter carry the final frame into the surrounding page. */
.ritual-heaven-scene {
  -webkit-mask-image: none;
  mask-image: none;
  filter: brightness(0.7) saturate(0.82);
  transform: translateZ(0) scale(1.018);
}

.memorial-ritual.is-lit .ritual-heaven-scene {
  will-change: opacity, filter, transform;
  animation: ritual-heaven-arrive-continuous-v37 5.35s cubic-bezier(0.22, 0.7, 0.28, 1) 4.35s forwards;
}

.memorial-ritual.is-lit .ritual-heaven-vignette {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.memorial-ritual.is-lit .ritual-scene::after,
.memorial-ritual.is-lit .ritual-heaven-aura {
  will-change: opacity, transform;
  animation: ritual-white-radiance-open-v37 5.2s cubic-bezier(0.22, 0.7, 0.28, 1) 4.45s forwards;
}

.memorial-ritual.is-lit .ritual-celestial-bloom {
  will-change: opacity, transform;
  animation: ritual-white-frame-open-v37 5.05s cubic-bezier(0.22, 0.7, 0.28, 1) 4.55s forwards;
}

.ritual-celestial-bloom::after {
  inset: 0;
  border: 1px solid rgb(255 250 232 / 28%);
  border-radius: clamp(12px, 1.4vw, 20px);
  background:
    radial-gradient(ellipse 84% 88% at 50% 50%, transparent 0 67%, rgb(255 247 223 / 9%) 82%, rgb(255 253 243 / 28%) 100%),
    linear-gradient(90deg, rgb(255 252 240 / 18%), transparent 10% 90%, rgb(255 252 240 / 18%)),
    linear-gradient(180deg, rgb(255 252 240 / 18%), transparent 10% 90%, rgb(255 252 240 / 18%));
  box-shadow:
    inset 0 0 28px rgb(255 252 241 / 18%),
    inset 0 0 76px rgb(255 232 185 / 8%);
}

.memorial-ritual.ritual-complete .ritual-scene {
  border-radius: clamp(12px, 1.4vw, 20px);
  box-shadow:
    0 0 0 1px rgb(255 249 230 / 25%),
    0 0 22px rgb(255 247 224 / 30%),
    0 0 58px rgb(255 225 171 / 18%),
    0 0 96px rgb(255 214 145 / 8%);
}

.memorial-ritual.ritual-complete .ritual-heaven-scene {
  opacity: 1;
  filter: brightness(1.035) saturate(0.94);
  animation: none !important;
  transform: translateZ(0) scale(1);
  will-change: auto;
}

.memorial-ritual.ritual-complete .ritual-scene::after,
.memorial-ritual.ritual-complete .ritual-heaven-aura {
  opacity: 0.48;
  animation: none !important;
  transform: scale(1.055);
  will-change: auto;
}

.memorial-ritual.ritual-complete .ritual-celestial-bloom {
  opacity: 0.72;
  animation: none !important;
  transform: scale(1);
  will-change: auto;
}

@keyframes ritual-heaven-arrive-continuous-v37 {
  from {
    opacity: 0;
    filter: brightness(0.7) saturate(0.82);
    transform: translateZ(0) scale(1.018);
  }

  to {
    opacity: 1;
    filter: brightness(1.035) saturate(0.94);
    transform: translateZ(0) scale(1);
  }
}

@keyframes ritual-white-radiance-open-v37 {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 0.48; transform: scale(1.055); }
}

@keyframes ritual-white-frame-open-v37 {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 0.72; transform: scale(1); }
}

@media (max-width: 720px) {
  .ritual-heaven-scene {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .memorial-ritual.ritual-complete .ritual-scene {
    border-radius: 12px;
    box-shadow:
      0 0 0 1px rgb(255 249 230 / 22%),
      0 0 16px rgb(255 247 224 / 28%),
      0 0 36px rgb(255 225 171 / 15%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-lit .ritual-heaven-scene {
    opacity: 1;
    filter: brightness(1.035) saturate(0.94);
    animation: none;
    transform: translateZ(0) scale(1);
  }

  .memorial-ritual.is-lit .ritual-heaven-vignette {
    display: none;
  }

  .memorial-ritual.is-lit .ritual-scene::after,
  .memorial-ritual.is-lit .ritual-heaven-aura,
  .memorial-ritual.is-lit .ritual-celestial-bloom {
    animation: none;
  }
}