/* Deepmala-Karte: Bühne, Ebenen, Diyas, Licht und Funken aus design/html/diwali-deepmala.html (D1), unverändert;
   ohne Text der Studie, Einladung, Blätter, Studien-Panel und Bedienknöpfe. Der Kartentext (.kopf aus build.ts) steht
   dort, wo die Studie den Gruß zeigt, und erscheint wie dieser erst mit der letzten Flamme (#b.offen). */
:root{
  /* Nacht (Indigo-Papier) */
  --nacht-0:#070920; --nacht-1:#0E1238; --nacht-2:#1A2058; --nacht-3:#26306F;
  /* Licht, sparsam */
  --gold:#D9B877; --gold-tief:#7E6129; --safran:#F2A33A; --kern:#FFF4D6;
  --ton-1:#5A2A1C; --ton-2:#8E4A2C; --ton-3:#B8683C;
  /* Karte (Papier) */
  --papier:#F4ECDD; --tinte:#1E1B3A; --indigo:#2A2F72;
  /* Maße */
  --boden:clamp(150px,23svh,220px);          /* Oberkante der Brüstung ab Unterkante; lege() rechnet sie aus dem Bild */
  --lampe:clamp(38px,10.4vw,64px);           /* Breite einer Diya */
  /* Kurven: Feder fürs Zünden, sanft für Text */
  --feder:cubic-bezier(.2,1.25,.35,1);
  --sanft:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --feder:linear(0,.012,.048 2.6%,.193 5.6%,.713 14%,.89 17.6%,1.007 21.6%,1.06 25%,1.083 28.4%,1.08 32%,1.058 35.6%,1.012 42.6%,.993 48.4%,.988 53.6%,.995 63%,1.001 73%,1);
    --sanft:linear(0,.039 2.4%,.149 5.2%,.31 8.6%,.62 16%,.808 23%,.915 30.2%,.968 37.6%,.991 46%,1);
  }
}
html,body{background:var(--nacht-0);overscroll-behavior:none}
svg{display:block}
img,svg{user-select:none;-webkit-user-drag:none}
/* ---------- Bühne und Ebenen ---------- */
.buehne{position:fixed;inset:0;height:100svh;overflow:hidden;isolation:isolate;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.kamera{position:absolute;inset:0;opacity:1}
.ebene{position:absolute;inset:-5% -6%;pointer-events:none;will-change:transform}
.ebene.e-text{inset:0;pointer-events:none}
.js:not(.rm) .buehne:not(.bereit) .kamera{opacity:0}
.kamera{transition:opacity 1.2s var(--sanft)}

/* L0 Himmel: Indigo-Papier, statisch, Sterne einzeln */
.himmel{position:absolute;inset:0;background:linear-gradient(180deg,var(--nacht-0) 0%,var(--nacht-1) 38%,var(--nacht-2) 72%,var(--nacht-3) 100%)}
.horizont{position:absolute;left:0;right:0;bottom:calc(var(--boden) + 2%);height:38%;background:radial-gradient(60% 70% at 50% 100%,rgba(242,163,58,.16),rgba(242,163,58,0) 70%);opacity:0;transition:opacity 3s var(--sanft)}
.stern{position:absolute;width:var(--s,2px);height:var(--s,2px);border-radius:50%;background:#E9E4F7;opacity:var(--o,.5)}
.stern.t{animation:funkeln var(--d,6s) ease-in-out infinite;animation-delay:var(--w,0s)}
@keyframes funkeln{0%,100%{opacity:var(--o,.5);transform:scale(1)}50%{opacity:calc(var(--o,.5) * .35);transform:scale(.8)}}

/* Bildebenen (Midjourney, WebP mit Alpha). Lage und Größe rechnet lege() aus dem Seitenverhältnis der Datei. */
.bild{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.himmel-ruhe{position:absolute;inset:0;background:radial-gradient(75% 42% at 50% 40%,rgba(7,9,32,.66),rgba(7,9,32,.4) 60%,rgba(7,9,32,.12))} /* beruhigt den Sternenhimmel hinter dem Text */
.himmel-bild{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* L1 Ferne: Häuserzeile; die helle Fassung blendet mit jeder gezündeten Diya weiter auf („das Licht steckt an“) */
.haeuser{left:0;right:0;background:url(/assets/karten/bilder/deepmala/haeuser.webp) 50% 100%/auto 100% repeat-x} /* Zeile wiederholt sich bei breiten Bildschirmen */
.haeuser.nacht{filter:brightness(.42) saturate(.7)}
.haeuser.licht{opacity:0;transition:opacity 1.6s var(--sanft)}

/* L2 Mitte: Dunst zieht, Lichtschein hinter dem Gruß */
.dunst{position:absolute;left:-20%;width:140%;height:26%;bottom:calc(var(--boden) + 4%);opacity:0;transition:opacity 4s var(--sanft)}
.dunst i{position:absolute;inset:0;background:radial-gradient(40% 50% at 30% 60%,rgba(207,200,223,.10),transparent 70%),radial-gradient(35% 40% at 72% 45%,rgba(242,163,58,.07),transparent 70%);animation:ziehen 38s ease-in-out infinite alternate}
.dunst i+i{animation-duration:53s;animation-direction:alternate-reverse;transform:translateX(8%);opacity:.8}
@keyframes ziehen{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
.schein{position:absolute;left:50%;top:44%;width:min(150vw,1100px);height:min(95svh,760px);margin:calc(min(95svh,760px) / -2) 0 0 calc(min(150vw,1100px) / -2);opacity:0;transform:scale(.6);transform-origin:50% 80%;
  transition:opacity 1.6s var(--sanft),transform 2.2s var(--sanft)}
.offen .schein{opacity:1;transform:scale(1)}
.schein-atmet{position:absolute;inset:0;background:radial-gradient(closest-side,rgba(242,163,58,.16),rgba(242,163,58,.07) 48%,rgba(242,163,58,0))}
.offen .schein-atmet{animation:atmen 7s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:1}50%{opacity:.82}}
.offen .horizont{opacity:1}
.zug .dunst{opacity:1}

/* L4 vorn: Brüstung mit Diyas */
.bruestung{left:50%;bottom:0;transform:translateX(-50%)}
.bruestung.nacht{filter:brightness(.38) saturate(.75)}
.bruestung.licht{filter:brightness(.74) saturate(.9);opacity:0;transition:opacity 1.6s var(--sanft)}
.waerme{position:absolute;left:0;right:0;bottom:calc(var(--boden) + var(--ueber,0px) - 50px);height:120px;background:radial-gradient(50% 50% at 50% 50%,rgba(242,163,58,.18),transparent 75%);opacity:0;transition:opacity 2s var(--sanft)}
.offen .waerme{opacity:1}
.reihe{position:absolute;left:50%;transform:translateX(-50%);width:min(100vw - 20px,1040px);bottom:calc(var(--boden) + var(--ueber,0px) - var(--fuss,6px));display:flex;justify-content:space-evenly;align-items:flex-end}
.diya{position:relative;width:var(--lampe);flex:0 0 auto}
.diya.mitte{width:calc(var(--lampe) * 1.22)}
.diya .lampe{position:relative;display:block;width:100%;aspect-ratio:var(--ar,5/3)}
.diya .lampe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.diya .lampe .nacht{filter:brightness(.4) saturate(.6)}
.diya .lampe .licht{opacity:0;transition:opacity 1.2s var(--sanft)}
.diya.an .lampe .licht{opacity:1}
.diya .fleck{position:absolute;left:50%;bottom:-6px;width:340%;height:44px;margin-left:-170%;border-radius:50%;background:radial-gradient(closest-side,rgba(242,163,58,.38),rgba(242,163,58,0));opacity:0;transition:opacity 1s var(--sanft)}
.diya .lampe{z-index:1}
.diya .halo{position:absolute;left:var(--dx,50%);bottom:var(--dy,80%);width:230%;aspect-ratio:1;margin-left:-115%;margin-bottom:-100%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,150,.34),rgba(242,163,58,.09) 45%,rgba(242,163,58,0));opacity:0;transform:scale(.4);transition:opacity .9s var(--sanft),transform 1.1s var(--sanft);transform-origin:50% 70%}
.diya .zund{position:absolute;z-index:2;left:var(--dx,50%);bottom:var(--dy,80%);width:34%;margin-left:-17%;margin-bottom:-6%;transform:scale(0);transform-origin:50% 100%;opacity:0;transition:transform .8s var(--feder),opacity .25s linear}
.diya .zund svg{width:100%;height:auto;overflow:visible}
.diya.an .zund{transform:scale(1);opacity:1}
.diya.an .halo{opacity:1;transform:scale(1)}
.diya.an .fleck{opacity:1}
.flamme{transform-origin:50% 100%;animation:var(--fl,flackern-a) var(--d,1.5s) ease-in-out infinite;animation-delay:var(--w,0s)}
.flamme .innen{transform-origin:50% 100%;transform-box:fill-box;animation:kern var(--dk,1.1s) ease-in-out infinite;animation-delay:var(--w,0s)}
.diya.an .halo-flackert{animation:halo var(--dh,3s) ease-in-out infinite;animation-delay:var(--w,0s)}
.halo-flackert{position:absolute;inset:0;border-radius:50%}
@keyframes flackern-a{0%,100%{transform:scale(1,1) skewX(0)}17%{transform:scale(.96,1.06) skewX(-2deg)}33%{transform:scale(1.03,.97) skewX(1.5deg)}52%{transform:scale(.98,1.08) skewX(-1deg)}71%{transform:scale(1.02,.95) skewX(2.4deg)}86%{transform:scale(.97,1.04) skewX(-1.4deg)}}
@keyframes flackern-b{0%,100%{transform:scale(1,1) skewX(0)}22%{transform:scale(1.02,.96) skewX(1.8deg)}41%{transform:scale(.95,1.07) skewX(-2.2deg)}63%{transform:scale(1.01,.99) skewX(.6deg)}80%{transform:scale(.97,1.05) skewX(-1deg)}}
@keyframes flackern-c{0%,100%{transform:scale(1,1) skewX(0)}12%{transform:scale(.98,1.03) skewX(-1deg)}38%{transform:scale(1.03,.94) skewX(2deg)}57%{transform:scale(.96,1.09) skewX(-2.6deg)}76%{transform:scale(1.02,.98) skewX(1deg)}}
@keyframes kern{0%,100%{transform:scale(1,1)}50%{transform:scale(.9,1.08)}}
@keyframes halo{0%,100%{opacity:1}30%{opacity:.84}55%{opacity:.97}78%{opacity:.8}}

/* L5 nah: Blüten vorn, unscharfe Lichter, Funken */
.nah{position:absolute;inset:0}
.blueten{left:50%;bottom:0;transform:translateX(-50%)}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(242,163,58,var(--a,.16)),rgba(242,163,58,0));opacity:0;transition:opacity 2.4s var(--sanft)}
.offen .bokeh{opacity:1}
.funke{position:absolute;left:0;top:0;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#FFE7B8;box-shadow:0 0 6px 1px rgba(242,163,58,.75);opacity:0;will-change:transform,opacity}
.pausiert *,.pausiert *::before,.pausiert *::after{animation-play-state:paused!important}
.rm *,.rm *::before,.rm *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
.v-unten{height:26%}
/* Kartentext an der Stelle des Grußes; Einblenden wie .auf der Studie */
#b .kopf{top:calc(env(safe-area-inset-top) + clamp(56px,8svh,96px));bottom:calc(var(--boden) + clamp(78px,12svh,120px));padding-top:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
#b .kopf>*{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity 1s var(--sanft),transform 1.3s var(--sanft),visibility 0s linear 1.3s}
#b.offen .kopf>*{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#b.offen .kopf .zeile{transition-delay:.6s,.6s,0s}
#b .zeile{max-width:30ch}