/* ============================================================
   INTRO — Kleiderschrank-Swoosh beim Start (09.09.2026)
   Vorlage: Jannis' Artefakt „Lyfz Swoosh" (1,6 s): der Schrank faded ein, die Tueren schwingen auf,
   vier Ghost-Model-Teile fliegen aus den Ecken hinein und schrumpfen, die Tueren schliessen sich,
   der Schrank loest sich auf und der Schriftzug „Lyfz" waechst mit leichtem Ueberschwingen ein.
   Reines CSS (Transforms/Opacity), Orchestrierung in js/intro.js. Prata bleibt Schriftschnitt 400.
   Farben kommen aus den App-Tokens (app.css), damit Hell und Dunkel stimmen.
   Das Markup steht in index.html (#intro), damit die Flaeche VOR dem ersten Skript da ist — kein
   Aufblitzen der App darunter.
   ============================================================ */
.intro{position:fixed;inset:0;z-index:200;background:var(--surface);display:flex;align-items:center;
  justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.intro.fading{transition:opacity .22s ease-out;opacity:0;pointer-events:none}
.intro.hidden{display:none}
.intro__hint{position:absolute;bottom:calc(26px + var(--safe-b,0px));left:0;right:0;text-align:center;
  font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,var(--muted));
  opacity:0;transition:opacity .3s ease .5s}
.intro.playing .intro__hint{opacity:.85}

.intro__scene{position:relative;width:220px;height:220px}
.intro__wardrobe{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0}
.intro__shell{position:relative;width:64px;height:78px;perspective:240px;border:3px solid var(--ink);
  border-radius:8px;background:var(--bg);overflow:hidden}
.intro__interior{position:absolute;inset:0;background:var(--bg)}
.intro__rod{position:absolute;left:8px;right:8px;top:13px;height:1.5px;background:var(--line-2,var(--line))}
.intro__door{position:absolute;top:0;bottom:0;width:50%;box-sizing:border-box;background:var(--surface);
  border:1.5px solid var(--ink);backface-visibility:hidden}
.intro__door--l{left:0;border-right:none;transform-origin:left center}
.intro__door--r{right:0;border-left:none;transform-origin:right center}
.intro__knob{position:absolute;top:50%;width:4px;height:4px;border-radius:50%;background:var(--ink);translate:0 -50%}
.intro__door--l .intro__knob{right:6px}
.intro__door--r .intro__knob{left:6px}
.intro__garment{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0;color:var(--ink-3,var(--muted))}
.intro__logo{position:absolute;left:50%;top:50%;translate:-50% -50%;font-family:var(--serif);font-weight:400;
  font-size:40px;letter-spacing:.01em;color:var(--ink);opacity:0;white-space:nowrap;font-synthesis:none}

/* ---- Zeitleiste, alles relativ zu 1600 ms ---- */
.intro.playing .intro__wardrobe{animation:introWardrobe 900ms ease-out both}
.intro.playing .intro__door--l{animation:introDoorL 900ms ease-in-out both}
.intro.playing .intro__door--r{animation:introDoorR 900ms ease-in-out both}
.intro.playing .intro__garment--shirt{animation:introShirt 560ms cubic-bezier(.25,.65,.2,1) 60ms both}
.intro.playing .intro__garment--trousers{animation:introTrousers 560ms cubic-bezier(.25,.65,.2,1) 140ms both}
.intro.playing .intro__garment--dress{animation:introDress 560ms cubic-bezier(.25,.65,.2,1) 220ms both}
.intro.playing .intro__garment--jacket{animation:introJacket 560ms cubic-bezier(.25,.65,.2,1) 300ms both}
.intro.playing .intro__logo{animation:introLogo 650ms cubic-bezier(.2,.9,.25,1.25) 900ms both,introGlow 900ms ease-in-out 900ms both}

@keyframes introWardrobe{0%{opacity:0;scale:.6}16%{opacity:1;scale:1}75%{opacity:1;scale:1.05}88%{opacity:1;scale:1}100%{opacity:0;scale:.85}}
@keyframes introDoorL{0%,13%{transform:rotateY(0deg)}42%,78%{transform:rotateY(-96deg)}100%{transform:rotateY(0deg)}}
@keyframes introDoorR{0%,13%{transform:rotateY(0deg)}42%,78%{transform:rotateY(96deg)}100%{transform:rotateY(0deg)}}
@keyframes introShirt{0%{opacity:0;translate:calc(-50% - 168px) calc(-50% - 158px);rotate:-26deg;scale:.45}
  55%{opacity:1;translate:calc(-50% - 16px) calc(-50% - 13px);rotate:-6deg;scale:.95}100%{opacity:0;translate:-50% -50%;rotate:4deg;scale:.15}}
@keyframes introTrousers{0%{opacity:0;translate:calc(-50% + 164px) calc(-50% - 150px);rotate:24deg;scale:.45}
  55%{opacity:1;translate:calc(-50% + 15px) calc(-50% - 12px);rotate:6deg;scale:.95}100%{opacity:0;translate:-50% -50%;rotate:-4deg;scale:.15}}
@keyframes introDress{0%{opacity:0;translate:calc(-50% - 156px) calc(-50% + 160px);rotate:18deg;scale:.45}
  55%{opacity:1;translate:calc(-50% - 14px) calc(-50% + 15px);rotate:4deg;scale:.95}100%{opacity:0;translate:-50% -50%;rotate:-6deg;scale:.15}}
@keyframes introJacket{0%{opacity:0;translate:calc(-50% + 160px) calc(-50% + 155px);rotate:-20deg;scale:.45}
  55%{opacity:1;translate:calc(-50% + 14px) calc(-50% + 14px);rotate:-4deg;scale:.95}100%{opacity:0;translate:-50% -50%;rotate:6deg;scale:.15}}
@keyframes introLogo{0%{opacity:0;scale:.5;translate:-50% calc(-50% + 6px)}60%{opacity:1;scale:1.08;translate:-50% -50%}100%{opacity:1;scale:1;translate:-50% -50%}}
@keyframes introGlow{0%{text-shadow:0 0 0 var(--intro-glow)}55%{text-shadow:0 0 22px var(--intro-glow)}100%{text-shadow:0 0 0 var(--intro-glow)}}
.intro{--intro-glow:rgba(26,26,24,.16)}
[data-theme="dark"] .intro{--intro-glow:rgba(241,236,226,.28)}

/* Reduzierte Bewegung (Systemeinstellung): kein Schrank, keine fliegenden Teile — nur der Schriftzug
   blendet ein, und das Ganze ist nach 700 ms vorbei (js/intro.js kuerzt die Dauer). */
@keyframes introLogoReduced{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .intro .intro__wardrobe,.intro .intro__garment{display:none}
  .intro.playing .intro__logo{animation:introLogoReduced 400ms ease-out both}
}