/* Start-Animation der Scanner-App (Ablauf und Zeitsteuerung: js/intro.js).
   Das Logo wird aus seinen Teilen zusammengesetzt (Rahmenecken, Barcode-Brille, Schriftzüge)
   und fliegt dann an die Stelle des Seitenlogos. Alle Teile sind dasselbe Bild, jeweils auf
   einen Ausschnitt beschnitten (clip-path aus intro.js). Ohne Animation stehen sie an ihrem Platz.
   Zeitplan ab Start (ms): Ecken 100-810, Laser 650-1550, Brille 650-1640, Schriftzug oben 950-1500,
   BARCODE 1100-1650, SCANNER 1300-1750, Glanz 1650-2200, Flug ab 2050 (FLUG_START in intro.js). */

/* Seite bleibt bis zum Flug unsichtbar (die Klasse "intro" setzt intro.js schon im <head>) */
html.intro body > :not(.intro-ebene) {
    opacity: 0;
}

/* 400 ms / 450 ms: in intro.js als AUSBLENDEN_MS (Summe) hinterlegt */
html.intro.intro-aus body > :not(.intro-ebene) {
    opacity: 1;
    transition: opacity 450ms ease 400ms;
}

.intro-ebene {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #ffffff;
    container-type: size; /* Logo-Größe in cqw/cqh = tatsächliche Fenstergröße (kein vh, siehe style.css) */
    cursor: pointer; /* Tippen überspringt */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

html.intro-aus .intro-ebene {
    background-color: transparent;
    transition: background-color 450ms ease 400ms;
    pointer-events: none;
}

.intro-logo {
    position: relative;
    width: 240px;
    width: min(64cqw, 45cqh, 300px);
    aspect-ratio: 288 / 393;
    transform-origin: 0 0; /* Flug: intro.js rechnet vom linken oberen Eck aus */
}

/* Bis das Bild geladen ist, bleibt die Ebene leer weiß */
.intro-ebene:not(.intro-start) .intro-logo {
    visibility: hidden;
}

/* Rückfall ohne Zielbild: Logo verkleinert sich und verblasst */
.intro-logo.intro-logo-weg {
    opacity: 0;
    transform: scale(0.8);
    transform-origin: 50% 50%;
    transition: opacity 400ms ease, transform 400ms ease;
}

.intro-teil {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply; /* der weiße Bildhintergrund verdeckt keine anderen Teile */
}

.intro-teil img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- 1. Rahmenecken fliegen aus den Bildschirmecken herein ---------- */
.teil-ecke-lo { transform-origin: 8% 20%; }
.teil-ecke-ro { transform-origin: 92% 20%; }
.teil-ecke-ru { transform-origin: 92% 68%; }
.teil-ecke-lu { transform-origin: 8% 68%; }

.intro-start .teil-ecke-lo { animation: intro-ecke-lo 500ms cubic-bezier(0.22, 1.4, 0.36, 1) 100ms both; }
.intro-start .teil-ecke-ro { animation: intro-ecke-ro 500ms cubic-bezier(0.22, 1.4, 0.36, 1) 170ms both; }
.intro-start .teil-ecke-ru { animation: intro-ecke-ru 500ms cubic-bezier(0.22, 1.4, 0.36, 1) 240ms both; }
.intro-start .teil-ecke-lu { animation: intro-ecke-lu 500ms cubic-bezier(0.22, 1.4, 0.36, 1) 310ms both; }

@keyframes intro-ecke-lo {
    from { opacity: 0; transform: translate(-70%, -45%) rotate(-35deg) scale(1.6); }
    to   { opacity: 1; transform: none; }
}
@keyframes intro-ecke-ro {
    from { opacity: 0; transform: translate(70%, -45%) rotate(35deg) scale(1.6); }
    to   { opacity: 1; transform: none; }
}
@keyframes intro-ecke-ru {
    from { opacity: 0; transform: translate(70%, 45%) rotate(-35deg) scale(1.6); }
    to   { opacity: 1; transform: none; }
}
@keyframes intro-ecke-lu {
    from { opacity: 0; transform: translate(-70%, 45%) rotate(35deg) scale(1.6); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 2. Laser-Scan: Brille erscheint hinter der Laserlinie, dann kurzer Blitz ---------- */
/* Laser fährt von 24 % bis 66 % der Logohöhe (Bereich der Brille) und wieder zurück */
.intro-laser {
    position: absolute;
    inset: 0 7%;
    opacity: 0;
    pointer-events: none;
}

.intro-laser::before {
    content: "";
    position: absolute;
    top: -1.5px;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(48, 225, 227, 0), #30E1E3 15%, #ffffff 50%, #30E1E3 85%, rgba(48, 225, 227, 0));
    box-shadow: 0 0 10px 3px rgba(48, 225, 227, 0.85), 0 0 26px 8px rgba(48, 225, 227, 0.35);
}

/* Lichtschleier über der Linie */
.intro-laser::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 12%;
    background: linear-gradient(to top, rgba(48, 225, 227, 0.35), rgba(48, 225, 227, 0));
}

.teil-brille { transform-origin: 50% 44%; }

.intro-start .intro-laser { animation: intro-laser 900ms linear 650ms both; }
.intro-start .teil-brille {
    animation:
        intro-scan 540ms ease-in-out 650ms both,
        intro-blitz 450ms ease-out 1190ms;
}

/* 60 % von 900 ms = 540 ms: Laser unten, wenn die Brille ganz aufgedeckt ist */
@keyframes intro-laser {
    0%   { opacity: 0; transform: translateY(24%); animation-timing-function: ease-in-out; }
    8%   { opacity: 1; }
    60%  { opacity: 1; transform: translateY(66%); animation-timing-function: ease-in; }
    100% { opacity: 0; transform: translateY(24%); }
}

/* Unterkante des sichtbaren Bereichs = Laserlinie (100 % - 24 % bis 100 % - 66 %) */
@keyframes intro-scan {
    from { clip-path: inset(0 0 76% 0); }
    to   { clip-path: inset(0 0 34% 0); }
}

@keyframes intro-blitz {
    35% { filter: brightness(1.5) saturate(1.4); transform: scale(1.04); }
}

/* ---------- 3. Schriftzüge ---------- */
.teil-oben { transform-origin: 50% 6%; }
.teil-barcode { transform-origin: 50% 83%; }

.intro-start .teil-oben { animation: intro-oben 550ms cubic-bezier(0.2, 1.25, 0.4, 1) 950ms both; }
.intro-start .teil-barcode { animation: intro-barcode 550ms ease-out 1100ms both; }
.intro-start .teil-scanner { animation: intro-scanner 450ms ease-out 1300ms both; }

@keyframes intro-oben {
    from { opacity: 0; transform: translateY(-35%); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

@keyframes intro-barcode {
    0%   { opacity: 0; transform: translateY(18%) scale(0.3); }
    60%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: none; }
}

/* Baut sich von links nach rechts auf (Schrift beginnt bei etwa 5 % der Breite) */
@keyframes intro-scanner {
    from { clip-path: inset(0 95% 0 0); transform: translateX(-3%); }
    to   { clip-path: inset(0 0 0 0); transform: none; }
}

/* ---------- 4. Glanz läuft schräg über das Logo ---------- */
/* screen: hellt nur die farbigen Flächen auf, Weiß bleibt Weiß */
.intro-glanz {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mix-blend-mode: screen;
    pointer-events: none;
}

.intro-glanz::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 35%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
    transform: translateX(-150%) skewX(-18deg);
}

.intro-start .intro-glanz::before { animation: intro-glanz 550ms ease-in-out 1650ms both; }

@keyframes intro-glanz {
    from { transform: translateX(-150%) skewX(-18deg); }
    to   { transform: translateX(330%) skewX(-18deg); }
}

/* ---------- Überspringen (Tippen): alles sofort an seinen Platz ---------- */
.intro-sofort .intro-teil,
.intro-sofort .intro-laser,
.intro-sofort .intro-glanz::before {
    animation: none !important;
}