/* Occasi walk-through: alive at rest and the opening that fills the window (v222, 24 Oct 2026; js/occasi-walk-alive.js).
 * Layers inside a walk-through's art box, all under its words (z-index 2): .wa-petals (drifting petals: small compositor-animated elements), .wa-foil
 * (a glint along the gold foil, masked by the plate's foil mask). Wide
 * windows: .wa-side (the scene's colours carried on past the picture's sides) and .wa-feather (the art box's edges melt into
 * them; no card shadow while it fills the window). Reduced motion: none of the moving layers. */
.wa-petals { position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.wa-petal { position: absolute; top: 0; display: block; will-change: transform; }
.wa-petal b { display: block; border-radius: 50%; will-change: transform; }
.wa-petals.on { opacity: 1; }
.wa-petals.is-over { z-index: 5; }
.wa-foil { display: none; }
@supports (mask-mode: luminance) {
  .wa-foil { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .4s ease;
    -webkit-mask-image: var(--wa-mask); mask-image: var(--wa-mask); mask-mode: luminance; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .wa-foil.on { opacity: 1; }
  .wa-foil::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: -50%; width: 50%;
    background: linear-gradient(104deg, rgba(255, 238, 200, 0) 20%, rgba(255, 242, 212, .8) 50%, rgba(255, 238, 200, 0) 80%); }
  .wa-foil.on::before { animation: wa-glint 8s cubic-bezier(.45, 0, .55, 1) infinite; }
  .wa-foil.is-paused::before { animation-play-state: paused; }
}
@keyframes wa-glint { 0% { transform: translate3d(0, 0, 0); } 60%, 100% { transform: translate3d(300%, 0, 0); } }
.wa-side { position: absolute; left: 0; top: 0; z-index: 0; display: block; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.wa-side.is-r { left: auto; right: 0; }
.wa-side.on { opacity: 1; }
.wa-feather { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%); box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { .wa-petals, .wa-foil { display: none !important; } }
.wa-tuck { visibility: hidden; }
/* v222 (owner, 24 Oct): the scene's own objects move at rest (OccasiWalkAlive.sway): feathered cuts of the picture, laid over
   the same pixels, moved by the compositor about their pivots; under the words, never over them */
.wa-swaylayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.wa-swaylayer.on { opacity: 1; }
.wa-swaylayer.is-over { z-index: 5; }
.wa-sway { position: absolute; display: block; background-repeat: no-repeat; will-change: transform; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.wa-sway.is-light { overflow: hidden; }
.wa-sway.is-light b { position: absolute; top: 0; bottom: 0; left: -50%; right: -50%; display: block; will-change: transform;
  background: linear-gradient(100deg, rgba(255, 250, 236, 0) 38%, rgba(255, 250, 236, calc(var(--wa-glow, .5) * .55)) 50%, rgba(255, 250, 236, 0) 62%); }
.wa-swaylayer.is-debug .wa-sway { outline: 2px dashed #e0f; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .wa-swaylayer { display: none !important; } }