/* Erzeugt aus og-src/tasse.mjs. Nicht von Hand ändern. */

.tassenbild{
  position:relative; height:clamp(260px,34vw,400px);
  transform-style:preserve-3d;
  animation:schweben var(--t-schweb,4.5s) ease-in-out infinite;
}
@keyframes schweben{
  0%,100%{transform:translateY(0) rotateZ(0deg)}
  50%    {transform:translateY(-8px) rotateZ(.4deg)}
}

.ebene{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.e-fern  {transform:translateZ(-90px)}
.e-kette {transform:translateZ(-40px)}
.e-tasse {transform:translateZ(14px)}
.e-dampf {transform:translateZ(62px)}

/* --- Holztisch, ganz hinten, weich auslaufend und leicht unscharf --- */
.holz{filter:blur(1.6px)}
.holz .maser{
  fill:none; stroke:rgba(26,12,1,.62); stroke-linecap:round;
  stroke-width:calc(1.4px + (var(--i) % 3) * 1.1px);
  animation:masern 11s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.8s);
}
@keyframes masern{from{opacity:.3} to{opacity:.62}}

/* --- Porzellan: Untertasse und Tasse --- */
.geschirr .schatten        {fill:rgba(10,5,0,.5); filter:blur(11px)}
.geschirr .tellerkante     {fill:none; stroke:rgba(255,253,248,.5); stroke-width:2}
.geschirr .tellerring      {fill:none; stroke:rgba(116,100,82,.28); stroke-width:1.4}
.geschirr .tassenschatten  {fill:rgba(28,14,0,.4); filter:blur(8px)}
.geschirr .henkelschatten  {fill:none; stroke:rgba(28,14,0,.42); stroke-width:12;
                            stroke-linecap:round; filter:blur(5px)}
.geschirr .henkel          {fill:none; stroke:#EDE4D6; stroke-width:11; stroke-linecap:round}
.geschirr .rand            {fill:none; stroke:rgba(255,253,248,.62); stroke-width:2.4}
.geschirr .cremakante      {fill:none; stroke:rgba(46,20,2,.42); stroke-width:5}

/* Lichtwanderung auf der Crema */
.geschirr .glanz{
  transform-box:fill-box; transform-origin:center; opacity:.5;
  animation:schimmern 18s linear infinite;
}
@keyframes schimmern{to{transform:rotate(360deg)}}

/* --- Latte Art ---
   Zehn-Sekunden-Zyklus: Milchbänder von unten nach oben, dann der
   Stiel mittig durch, halten, auflösen, von vorn. */
.kunst{
  transform-box:fill-box; transform-origin:center;
  animation:cremaAtem 10s ease-in-out infinite;
}
@keyframes cremaAtem{0%,100%{transform:rotate(-1.1deg)} 50%{transform:rotate(1.1deg)}}

.kunst .blatt{
  fill:#F8F0E3; opacity:0;
  transform-box:fill-box; transform-origin:50% 100%;
  animation:blattGiessen 10s var(--ease,cubic-bezier(.2,1,.3,1)) infinite;
  animation-delay:calc(var(--b) * .085s);
}
@keyframes blattGiessen{
  0%  {opacity:0;   transform:scale(.34,.55)}
  5%  {opacity:.97; transform:scale(1,1)}
  62% {opacity:.97; transform:scale(1,1)}
  76% {opacity:0;   transform:scale(1.06,1.06)}
  100%{opacity:0;   transform:scale(.34,.55)}
}

.kunst .stiel{
  fill:none; stroke:#F8F0E3; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:170; opacity:0;
  animation:stielGiessen 10s var(--ease,cubic-bezier(.2,1,.3,1)) infinite;
}
@keyframes stielGiessen{
  0%,11%  {stroke-dashoffset:170; opacity:0}
  13%     {stroke-dashoffset:158; opacity:1}
  26%,62% {stroke-dashoffset:0;   opacity:1}
  76%,100%{stroke-dashoffset:0;   opacity:0}
}

/* --- Dampf --- */
.dampf{position:absolute; pointer-events:none; opacity:.5; filter:blur(9px)}
.dampf path{
  stroke:#F3EDE3; stroke-width:11; stroke-linecap:round; fill:none;
  animation:steigen var(--t-dampf,6.5s) linear infinite;
}
.dampf path:nth-child(2){animation-duration:calc(var(--t-dampf,6.5s) * 1.3); animation-delay:-2s}
.dampf path:nth-child(3){animation-duration:calc(var(--t-dampf,6.5s) * 1.6); animation-delay:-4s}
@keyframes steigen{
  0%  {opacity:0; transform:translateY(26px) scale(.9)}
  22% {opacity:.85}
  100%{opacity:0; transform:translateY(-150px) translateX(12px) scale(1.45)}
}

@media (max-width:900px){
  .tassenbild{height:clamp(240px,62vw,330px)}
}

/* Bewegung aus: die fertig gegossene Rosetta steht ruhig da. */
@media (prefers-reduced-motion:reduce){
  .tassenbild,.holz .maser,.geschirr .glanz,.kunst,.dampf path{animation:none}
  .kunst .blatt{opacity:.97; animation:none}
  .kunst .stiel{stroke-dashoffset:0; opacity:1; animation:none}
}