:root { --k: 1; --ease: cubic-bezier(.2, .8, .2, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #24160f; }
body.idle, body.idle * { cursor: none !important; }

.slide { position: fixed; inset: 0; opacity: 0; visibility: hidden; transition: opacity 2.6s ease, visibility 0s linear 2.6s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity 2.6s ease; z-index: 2; }
.slide.leaving { visibility: visible; opacity: 0; z-index: 1; transition: opacity 2.4s ease .3s; }

.cloth { position: absolute; inset: 0; background: center / cover no-repeat; }
.cloth::before, .cloth::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.light .cloth::before { background: rgba(244, 234, 214, .6); }
.dark .deco.rays canvas { opacity: .55; }
.light .cloth::after { background: radial-gradient(48vmax 40vmax at 50% 46%, rgba(255, 214, 140, .42), rgba(255, 214, 140, 0) 70%), radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(70, 40, 15, .3) 100%); }
.dark .cloth::after { background: radial-gradient(44vmax 38vmax at 50% 46%, rgba(255, 170, 70, .2), rgba(255, 170, 70, 0) 70%), radial-gradient(130% 100% at 50% 45%, transparent 50%, rgba(0, 0, 0, .45) 100%); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--k) * 236px + 2vh); background: center top / cover; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C120 -4 240 24 380 8 S640 -6 760 10 S920 20 1000 4 L1000 100 L0 100Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C120 -4 240 24 380 8 S640 -6 760 10 S920 20 1000 4 L1000 100 L0 100Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; box-shadow: inset 0 18px 30px -18px rgba(0, 0, 0, .6); }

.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--k)); }
.deco { position: absolute; pointer-events: none; transform-origin: 50% 100%; }
.deco canvas { display: block; }
.sw { transform-origin: 50% 100%; }
.sw.a { animation: swayA 7s ease-in-out infinite; } .sw.b { animation: swayB 8.5s ease-in-out infinite; } .sw.c { animation: swayA 6s ease-in-out -2s infinite; }
.sw.slow { animation: swayB 12s ease-in-out infinite; } .sw.slow.b { animation: swayA 13s ease-in-out -4s infinite; }
.sw.swing { transform-origin: 50% 0; animation: swing 9s ease-in-out infinite; } .sw.swing.b { animation: swing 11s ease-in-out -3s infinite reverse; }
.sw.spin { transform-origin: 50% 50%; animation: spin 220s linear infinite; }
.sw.spin-slow { transform-origin: 50% 50%; animation: spin 300s linear infinite reverse; }
@keyframes swayA { 50% { transform: rotate(1.6deg); } }
@keyframes swayB { 50% { transform: rotate(-1.4deg); } }
@keyframes swing { 25% { transform: rotate(.7deg); } 75% { transform: rotate(-.7deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* entrance and exit */
.slide.on .bl { animation: bloom 2s var(--ease) var(--d, 0s) both; }
.slide.leaving .bl { animation: fold 1.6s ease-in both; }
.deco.rays, .deco.mandala { transform-origin: 50% 50%; }
@keyframes bloom { from { opacity: 0; transform: translateY(26px) scale(.62) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes fold { to { opacity: 0; transform: translateY(18px) scale(.86); } }
.slide.on .deco.rays, .slide.on .deco.mandala { animation-name: bloomRound; }
@keyframes bloomRound { from { opacity: 0; transform: scale(.7) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* the painting */
.frame-wrap { position: absolute; z-index: 5; }
.slide.on .frame-wrap { animation: rise 2.8s var(--ease) .15s both; }
.slide.leaving .frame-wrap { animation: sink 1.8s ease-in both; }
@keyframes rise { from { opacity: 0; transform: translateY(46px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes sink { to { opacity: 0; transform: translateY(24px) scale(.98); } }
.window { position: absolute; overflow: hidden; background: #2a1a12; box-shadow: 0 0 0 2px #6e4a14, 0 36px 70px -26px rgba(30, 12, 2, .75), 0 14px 26px -12px rgba(30, 12, 2, .5); }
.window img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 46% 42%; }
.slide.on .window img { animation: kb 70s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.075) translate(-.8%, -1.2%); } }
.window .sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(255, 246, 220, 0) 38%, rgba(255, 246, 220, .2) 47%, rgba(255, 246, 220, 0) 56%); background-size: 280% 100%; mix-blend-mode: screen; animation: sheen 14s ease-in-out infinite; }
@keyframes sheen { 0%, 24% { background-position: 130% 0; } 72%, 100% { background-position: -50% 0; } }
.ornament { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Ik Onkar, written in light then filled with gold thread */
.crest { position: absolute; z-index: 7; width: 144px; }
.crest .onkar-svg { width: 144px; height: auto; display: block; }
.onkar-big { position: absolute; left: 674px; top: 200px; width: 572px; z-index: 6; }
.onkar-big .onkar-svg { width: 572px; height: auto; display: block; }
.slide.on .onkar-big { animation: breathe 9s ease-in-out 6s infinite; }
@keyframes breathe { 50% { transform: scale(1.018); } }
.onkar-svg .draw { stroke-dasharray: 2600; stroke-dashoffset: 2600; opacity: 0; }
.slide.on .onkar-svg .draw { animation: draw 5s ease-in-out .9s forwards; }
.slide.on .big .draw { animation-duration: 7s; animation-delay: 1.2s; }
@keyframes draw { 0% { stroke-dashoffset: 2600; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .3; } }
.onkar-svg .fill, .onkar-svg .edge, .onkar-svg .cord { opacity: 0; }
.slide.on .onkar-svg .fill, .slide.on .onkar-svg .edge { animation: fillIn 2.4s ease 3.6s forwards; }
.slide.on .onkar-svg .cord { animation: fillIn 2s ease 5s forwards; }
.slide.on .big .fill, .slide.on .big .edge { animation-delay: 5.2s; }
.slide.on .big .cord { animation-delay: 6.8s; }
@keyframes fillIn { to { opacity: 1; } }
.onkar-svg .shine { opacity: .9; }
.onkar-svg .sweep { animation: sweep 9s ease-in-out 6s infinite; }
@keyframes sweep { 0% { x: -60%; } 55%, 100% { x: 110%; } }
.moolmantar { position: absolute; left: 0; width: 1920px; top: 968px; margin: 0; text-align: center; font: 600 40px/1.3 "Noto Serif Gurmukhi", serif; letter-spacing: .01em; background: repeating-linear-gradient(-58deg, rgba(255, 240, 190, .3) 0 1px, rgba(110, 70, 15, .22) 1px 2px), linear-gradient(135deg, #f3d888, #c9952f 40%, #eecb6c 65%, #a3711e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(20, 6, 2, .6)); z-index: 7; }

/* night: diyas, fireflies, twinkling stars */
.diya { z-index: 9; }
.flame { position: absolute; left: 70px; top: -18px; width: 14px; height: 30px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 78%, #fff8dc 0 18%, #ffd27a 34%, #f08a2a 62%, rgba(224, 120, 40, 0) 76%); box-shadow: 0 0 22px 8px rgba(255, 176, 70, .45), 0 0 60px 22px rgba(255, 150, 50, .18); transform-origin: 50% 100%; animation: flicker 1.9s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 20% { transform: scale(.94, 1.08) skewX(2deg); } 45% { transform: scale(1.04, .94) skewX(-2deg); } 70% { transform: scale(.97, 1.05) skewX(1deg); } }
.firefly { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, #f2c94a 45%, rgba(242, 201, 74, 0) 70%); box-shadow: 0 0 12px 4px rgba(242, 201, 74, .35); z-index: 8; animation-name: drift, blink; animation-iteration-count: infinite, infinite; animation-timing-function: ease-in-out, ease-in-out; animation-direction: alternate, alternate; }
@keyframes drift { 0% { transform: translate(0, 0); } 33% { transform: translate(40px, -30px); } 66% { transform: translate(-20px, -60px); } 100% { transform: translate(30px, -10px); } }
@keyframes blink { 0%, 40% { opacity: .1; } 70%, 100% { opacity: 1; } }
.twinkle { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 3; animation: twinkle 6s ease-in-out infinite; }
.twinkle::before, .twinkle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: linear-gradient(90deg, transparent, #fff3c4, transparent); }
.twinkle::after { transform: rotate(90deg); }
.twinkle.gold::before, .twinkle.gold::after { background: linear-gradient(90deg, transparent, #ffe9a8, transparent); }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 82% { opacity: 1; transform: scale(1) rotate(20deg); } }

#petals { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }
.quiet { position: fixed; right: 12px; bottom: 10px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 245, 220, .35); opacity: .22; z-index: 30; transition: opacity .3s; }
.quiet:hover, .quiet:focus-visible { opacity: .8; outline: none; }

@media (prefers-reduced-motion: reduce) {
  .sw, .window img, .window .sheen, .slide.on .cloth, .onkar-big, .flame, .firefly, .twinkle, .onkar-svg .sweep { animation: none !important; }
  .slide.on .bl, .slide.leaving .bl, .slide.on .frame-wrap, .slide.leaving .frame-wrap { animation: none !important; }
  .onkar-svg .draw { opacity: .3; stroke-dashoffset: 0; animation: none !important; }
  .onkar-svg .fill, .onkar-svg .edge, .onkar-svg .cord { opacity: 1; animation: none !important; }
  .firefly { opacity: .7; } .twinkle { opacity: 0; }
}

/* Harmandir Sahib: the sarovar's reflection ripples in strips; clouds drift; pigeons fly */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 15; }
.refl { position: absolute; width: 1920px; height: 440px; overflow: hidden; opacity: .95; }
.rstrip { position: absolute; left: 0; width: 1920px; height: 20px; background-size: 1920px 440px; background-repeat: no-repeat; animation: ripple 3.8s ease-in-out infinite alternate; }
@keyframes ripple { from { transform: translateX(calc(var(--amp) * -1)); } to { transform: translateX(var(--amp)); } }
.slide.on .sceneIn { animation: sceneIn 2.8s var(--ease) .15s both; }
.slide.leaving .sceneIn { animation: sink 1.8s ease-in both; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
.cloud { position: absolute; left: 0; z-index: 1; animation: cloudDrift 180s linear infinite; }
@keyframes cloudDrift { from { transform: translateX(-420px); } to { transform: translateX(2000px); } }
.pigeon { position: absolute; left: 0; z-index: 5; animation: fly 28s linear infinite; }
.pigeon svg { display: block; animation: flap .55s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes fly { 0% { transform: translate(-80px, 0); } 25% { transform: translate(520px, -40px); } 50% { transform: translate(1000px, 10px); } 75% { transform: translate(1480px, -30px); } 100% { transform: translate(2020px, 0); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
.gtext { position: absolute; left: 700px; top: 350px; width: 520px; z-index: 7; }
.gtext .onkar-svg { width: 520px; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .rstrip, .cloud, .pigeon, .pigeon svg { animation: none !important; } .pigeon { display: none; } }

/* quiet skies for Harmandir Sahib: a soft gradient on plain linen */
.s-amritsar .cloth { background: linear-gradient(180deg, #bcd3e0 0%, #dfe7e6 38%, #f4e5c8 62%, #f4e5c8 100%), url(../story/linen.jpg) center / cover !important; background-blend-mode: multiply !important; }
.s-amritsar-night .cloth { background: linear-gradient(180deg, #0f1430 0%, #1a2350 45%, #2a2a52 60%, #1a2046 100%), url(../story/linen.jpg) center / cover !important; background-blend-mode: multiply !important; }
.s-amritsar .cloth::before, .s-amritsar .cloth::after { display: none; }
.s-amritsar-night .cloth::after { background: radial-gradient(30vmax 26vmax at 59% 44%, rgba(255,170,70,.18), rgba(255,170,70,0) 70%); }