/* Ein Gemälde in zwei Formaten: quadratisch (bild-14) für Hochformat,
   16:9 (bild-15) für Querformat. Die Bühne deckt den Schirm wie cover;
   darüber nur Licht, Dunst und Glut, positioniert in Prozent des Bildes. */
:root{--nacht:#10173a;--amber:236,128,36;
  --bild:url(/bild-14.webp);--ar:1;--bx:47.9%;--by:20.8%;--bw:20%;--sx:49.7%;--sy:87%;--pk:.03}
@media (min-aspect-ratio:13/10){
  :root{--bild:url(/bild-15.webp);--ar:2688/1520;--bx:49%;--by:20.5%;--bw:13%;--sx:49%;--sy:87%;--pk:.019}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--nacht);overflow:hidden}
.himmel{position:fixed;inset:0;isolation:isolate}
.himmel::before{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;background:#04070f;opacity:0;animation:nacht 3.4s ease-out both}
.himmel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 90% at 50% 45%,transparent 45%,rgba(5,8,22,.32) 75%,rgba(4,6,18,.55) 100%)}

/* Bühne im Seitenverhältnis des Bildes, deckt den Schirm, mittig auf der Blüte */
.szene{position:absolute;left:50%;top:50%;aspect-ratio:var(--ar);
  width:max(100vw,calc(100vh * var(--ar)));transform:translate(calc(-1 * var(--bx)),-50%)}
.bild{position:absolute;inset:0;background:var(--bild) center/100% 100% no-repeat}

/* Dunst in der Senke, in die die Blütenblätter fallen */
.dunst{position:absolute;left:calc(var(--sx) - 25%);width:50%;top:calc(var(--sy) - 9%);height:18%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 45% at 50% 55%,rgba(var(--amber),.14),transparent 70%);
  animation:senke 9s ease-in-out infinite}

/* Licht der Blüte: Auftritt außen, Atmen innen, damit die Helligkeit nie springt */
.schein,.herz{position:absolute;left:var(--bx);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
.schein{top:var(--by);width:calc(var(--bw) * 2.4);animation:erwachen 4s ease-out .6s both}
.herz{top:var(--by);width:calc(var(--bw) * .8);animation:erwachen 3.6s ease-out .9s both}
.schein i,.herz i{position:absolute;inset:0;border-radius:50%}
.schein i{background:radial-gradient(circle,rgba(255,190,110,.16) 0%,rgba(var(--amber),.08) 35%,transparent 68%);
  animation:schein 9s ease-in-out 4.6s infinite}
.herz i{background:radial-gradient(circle,rgba(255,220,150,.28) 0%,rgba(255,190,110,.12) 40%,transparent 70%);
  animation:herz 9s ease-in-out 4.6s infinite}

/* Blütenblätter fallen aus der Blüte in die Senke: außen die Fallhöhe, innen Drift und Drehung.
   --pw ist die Blattgröße relativ zur Bühnenbreite */
.blaetter{position:absolute;left:var(--bx);width:0;pointer-events:none;
  --pw:calc(max(100vw,calc(100vh * var(--ar))) * var(--pk));
  top:calc(var(--by) + var(--bw) * .3 * var(--ar));height:calc(var(--sy) - var(--by) - var(--bw) * .3 * var(--ar))}
.blaetter b{position:absolute;left:0;top:0;opacity:0;animation:fallen 14s cubic-bezier(.35,.1,.6,.95) infinite}
.blaetter i{position:absolute;display:block;width:var(--pw);aspect-ratio:40/34;margin-left:calc(var(--pw) * -.5);
  background:url(/blatt.svg) center/contain no-repeat;filter:drop-shadow(0 0 calc(var(--pw) * .35) rgba(var(--amber),.55));
  animation:wehen 14s ease-in-out infinite}
.blaetter b:nth-child(1),.blaetter b:nth-child(1) i{animation-duration:14s;animation-delay:0s}
.blaetter b:nth-child(2),.blaetter b:nth-child(2) i{animation-duration:16s;animation-delay:-2s}
.blaetter b:nth-child(3),.blaetter b:nth-child(3) i{animation-duration:13s;animation-delay:-4.5s}
.blaetter b:nth-child(4),.blaetter b:nth-child(4) i{animation-duration:17s;animation-delay:-6.5s}
.blaetter b:nth-child(5),.blaetter b:nth-child(5) i{animation-duration:15s;animation-delay:-8.5s}
.blaetter b:nth-child(6),.blaetter b:nth-child(6) i{animation-duration:14.5s;animation-delay:-10.5s}
.blaetter b:nth-child(7),.blaetter b:nth-child(7) i{animation-duration:18s;animation-delay:-12.5s}
.blaetter b:nth-child(1) i{--a:1}
.blaetter b:nth-child(2) i{--a:-1.3;width:calc(var(--pw) * .8)}
.blaetter b:nth-child(3) i{--a:.8}
.blaetter b:nth-child(4) i{--a:-.9;width:calc(var(--pw) * 1.15)}
.blaetter b:nth-child(5) i{--a:1.4;width:calc(var(--pw) * .7)}
.blaetter b:nth-child(6) i{--a:-1.1}
.blaetter b:nth-child(7) i{--a:1.2;width:calc(var(--pw) * .9)}

/* Glut steigt aus der Blüte und aus der Senke */
.funken{position:absolute;inset:0;pointer-events:none}
.funken i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,200,130,.9);box-shadow:0 0 7px 2px rgba(var(--amber),.5);opacity:0;
  animation:steigen 15s linear infinite}
/* nur jeder zweite Funke, dazu zwei Flugbahnen */
.funken i:nth-child(even){display:none}
.funken i:nth-child(4n+3){animation-name:steigen2}
.funken i:nth-child(-n+6){top:calc(var(--by) + 4%)}
.funken i:nth-child(n+7){top:calc(var(--sy) - 1%)}
.funken i:nth-child(1){left:calc(var(--bx) - 4%);animation-duration:12s;animation-delay:-1s}
.funken i:nth-child(2){left:calc(var(--bx) + 3%);animation-duration:15s;animation-delay:-6s;width:2px;height:2px}
.funken i:nth-child(3){left:calc(var(--bx) - 1%);animation-duration:10s;animation-delay:-3s}
.funken i:nth-child(4){left:calc(var(--bx) + 5%);animation-duration:17s;animation-delay:-11s;width:2px;height:2px}
.funken i:nth-child(5){left:calc(var(--bx) - 6%);animation-duration:14s;animation-delay:-8s;width:2px;height:2px}
.funken i:nth-child(6){left:calc(var(--bx) + 1%);animation-duration:19s;animation-delay:-14s}
.funken i:nth-child(7){left:calc(var(--sx) - 7%);animation-duration:18s;animation-delay:-2s;width:2px;height:2px}
.funken i:nth-child(8){left:calc(var(--sx) + 3%);animation-duration:21s;animation-delay:-9s}
.funken i:nth-child(9){left:calc(var(--sx) - 2%);animation-duration:16s;animation-delay:-13s;width:2px;height:2px}
.funken i:nth-child(10){left:calc(var(--sx) + 6%);animation-duration:20s;animation-delay:-5s;width:2px;height:2px}
.funken i:nth-child(11){left:calc(var(--sx) - 10%);animation-duration:23s;animation-delay:-17s;width:2px;height:2px}
.funken i:nth-child(12){left:calc(var(--sx) + 1%);animation-duration:13s;animation-delay:-7s}

@keyframes nacht{0%{opacity:1}100%{opacity:0}}
@keyframes erwachen{0%{opacity:0}100%{opacity:1}}
@keyframes schein{0%,100%{opacity:1;transform:scale(1.06)}50%{opacity:.55;transform:scale(.94)}}
@keyframes herz{0%,100%{opacity:1}50%{opacity:.75}}
@keyframes senke{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes fallen{0%{top:0;opacity:0}8%{opacity:.95}75%{opacity:.8}100%{top:100%;opacity:0}}
@keyframes wehen{
  0%{transform:translateX(0) rotate(0) scale(1)}
  25%{transform:translateX(calc(var(--pw) * 1.8 * var(--a))) rotate(80deg) scale(.95)}
  50%{transform:translateX(calc(var(--pw) * -1 * var(--a))) rotate(170deg) scale(.82)}
  75%{transform:translateX(calc(var(--pw) * 1.3 * var(--a))) rotate(250deg) scale(.7)}
  100%{transform:translateX(calc(var(--pw) * .2 * var(--a))) rotate(330deg) scale(.55)}}
@keyframes steigen2{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}45%{transform:translate(-1.6vmin,-11vmin)}
  75%{transform:translate(.6vmin,-20vmin);opacity:.35}100%{transform:translate(-1.2vmin,-30vmin);opacity:0}}
@keyframes steigen{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}40%{transform:translate(1.2vmin,-9vmin)}
  70%{transform:translate(-1vmin,-18vmin);opacity:.45}100%{transform:translate(.8vmin,-28vmin);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .funken,.blaetter{display:none}
}