/*
 * intro.css — Intro-Animations-Overlay (Swissscan 3-Logo-Fly-In)
 * ============================================================
 * Layout: Euroscan (links) · Swissscan (Mitte, größer) · Scherübl (rechts)
 * Animation: 3 Logos blenden ein → Seiten-Logos blenden aus →
 *            Swissscan-Logo fliegt nach oben in die Nav-Ecke
 */

#intro-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  background:      var(--intro-bg, #0A0A0A);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      opacity .5s ease, visibility .5s ease;
}
#intro-overlay.hidden {
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
}

/* ── Reihe der 3 Logos ── */
.intro-row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             clamp(18px, 4vw, 48px);
}

/* ── Logo-Kacheln ── */
.intro-logo {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          16px 22px;
  border-radius:    14px;
  background:       #fff;
  box-shadow:       0 10px 40px rgba(0,0,0,.35),
                    0 0 0 1px rgba(255,255,255,.06);
  will-change:      transform, opacity;
  transform-origin: center center;
  opacity:          0;                 /* Startzustand — von JS eingeblendet */
  transform:        scale(0.82);
}
.intro-logo img {
  width:      auto;
  object-fit: contain;
  display:    block;
}

/* Seiten-Logos: kleiner, leicht abgedunkelt */
.il-side       { filter: saturate(.9); }
.il-side img   { height: 58px; }

/* Mittleres Logo (Swissscan): prominenter */
.il-main       { padding: 22px 28px; border-radius: 16px; }
.il-main img   { height: 90px; }

/* ── Skip-Button ── */
.intro-skip {
  position:       fixed;
  bottom:         28px;
  right:          32px;
  z-index:        1001;
  font-family:    var(--font-b);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
  cursor:         pointer;
  transition:     color .2s;
  border:         none;
  background:     none;
  padding:        8px 12px;
}
.intro-skip:hover { color: rgba(255,255,255,.8); }

/* ── Responsive ── */
@media (max-width: 680px) {
  .intro-row   { gap: 14px; }
  .il-side     { padding: 12px 14px; }
  .il-side img { height: 38px; }
  .il-main     { padding: 16px 20px; }
  .il-main img { height: 62px; }
}