/*
 * intro.css — Intro-Animations-Overlay
 * ============================================================
 */

#intro-overlay {
  position:   fixed;
  inset:      0;
  z-index:    1000;
  background: var(--intro-bg, #0E1E2B);
  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;
}

.intro-stage {
  position:       relative;
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            32px;
}

/* ── Logo-Kacheln ── */
.intro-logo {
  display:        flex;
  align-items:    center;
  justify-content:center;
  padding:        16px;
  border-radius:  16px;
  will-change:    transform, opacity;
  flex-shrink:    0;
}
.intro-logo img { object-fit: contain; display: block; }

.il-eps {
  background:  #fff;
  border:      1.5px solid rgba(10,92,138,.25);
  box-shadow:  0 0 50px rgba(10,92,138,.35);
  width:  150px;
  height: 150px;
  position: relative;
  z-index: 2;
}
.il-eps img { width: 118px; height: 118px; }

.il-sch {
  background:  #fff;
  border:      1.5px solid rgba(255,255,255,.15);
  width:  130px;
  height: 130px;
}
.il-sch img { width: 100px; height: 100px; }

.il-sps {
  background:  #fff;
  border:      1.5px solid rgba(255,255,255,.1);
  width:  130px;
  height: 130px;
}
.il-sps img { width: 108px; height: 108px; }

/* ── 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,.28);
  cursor:         pointer;
  transition:     color .2s;
  border:         none;
  background:     none;
  padding:        8px 12px;
}
.intro-skip:hover { color: rgba(255,255,255,.7); }