/* ============================================================
   assets/imagine.css
   EPTEC IMAGINE: Szene, Raum, Dramaturgie (nur visuell)
   Definitive Version
   ============================================================ */

/* =======================
   1) STARTSCENE: MEADOW
   ======================= */

.grassy-meadow {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, #87ceeb 0%, #cfefff 40%, #6fbf73 100%);
  overflow: hidden;
}

.sun {
  position: absolute;
  top: 6%;
  right: 12%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, #fff7b2, #ffd54f);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.95;
}

.stream {
  position: absolute;
  bottom: 12%;
  left: 12%;
  width: 46%;
  height: 7%;
  background: linear-gradient(to right, rgba(129,212,250,0.8), rgba(79,195,247,0.8));
  border-radius: 60%;
  opacity: 0.55;
  filter: blur(1px);
}

/* =======================
   2) TRANSITION: TUNNEL FALL
   ======================= */

#eptec-tunnel {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #2b1d0f 0%, #000 70%);
  overflow: hidden;
  pointer-events: none;
  z-index: 999998;
  opacity: 0;
}

.tunnel-hidden { display: none; }

.tunnel-active {
  display: block;
  opacity: 1; /* hard guarantee: tunnel becomes visible */
  animation: tunnelFadeIn 120ms linear forwards;
}

@keyframes tunnelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tunnel-wall {
  position: absolute;
  inset: -50%;
  background:
    repeating-radial-gradient(
      circle at center,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.02) 40px,
      rgba(0,0,0,0.92) 80px
    );
  transform-origin: center;
  animation: tunnelFall 1350ms linear forwards;
}

@keyframes tunnelFall {
  0%   { transform: scale(0.2) rotate(0deg); }
  100% { transform: scale(2.6) rotate(10deg); }
}

/* =======================
   3) OPTIONAL: ADMIN ORB (visual only, if present in DOM)
   ======================= */

.admin-orb {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #ffcc00, #ff3300, #00ccff);
  background-size: 400%;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  animation: lava 10s infinite, waber 4s infinite ease-in-out;
}

@keyframes lava {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes waber {
  0%, 100% { transform: scale(1); border-radius: 50%; }
  50% {
    transform: scale(1.1);
    border-radius: 42% 58% 45% 55%;
    box-shadow: 0 0 30px rgba(0,242,255,0.9);
  }
}

/* =======================
   4) OPTIONAL: ADMIN OVERLAY (visual only, if present in DOM)
   ======================= */

.admin-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  z-index: 9999;
}

.hidden-admin-input {
  background: transparent;
  border: none;
  color: transparent;
  outline: none;
  width: 100%;
  text-align: center;
  cursor: default;
}