/* ===========================
   Paula’s Garden – Screensaver Stylesheet
   =========================== */

/* 0. Schriftimport ---------------------------------- */
@import url('fonts.css');

/* 1. Basiseinstellungen ----------------------------- */
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;             /* Verhindert Scrollbalken */
  background: #022f18;          /* Haupt-Hintergrundfarbe */
  font-family: Montserrat, Arial, sans-serif;
  touch-action: manipulation;   /* Für Touchgeräte optimiert */
}

/* 2. Screensaver-Hintergrund ------------------------ */
.screensaver-bg {
  position: fixed;              /* Bleibt immer im Hintergrund */
  inset: 0;
  background: #022f18;
  z-index: 0;
  opacity: 1;
  transition: opacity 1s;
  pointer-events: none;         /* Klicks gehen durch */
  overflow: hidden;
}

/* 3. Screensaver Button ----------------------------- */
.btn-screensaver {
  width: 100%;
  font-size: 3.35rem;
  padding: 1rem;
  border-radius: 1.3rem;
  background: #b0d3cd;
  color: #4a564c;
  border: none;
  cursor: pointer;
  transition: background 0.18s;
}

/* 4. Blätter-Overlay -------------------------------- */
#leaves-front {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: all;          /* Blätter können mit Touch o.ä. interagieren */
}

/* Einzelne Blatt-Styles */
.leaf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(80px, 12vw, 140px);
  opacity: 1;
  filter: drop-shadow(0 4px 14px #27442325);
  z-index: var(--z);            /* Dynamischer Layer via JS */
  pointer-events: none;         /* Blätter selbst nicht interaktiv */
  user-select: none;
  transition: filter 0.4s;
}

/* 5. Finger-Icon / Touch-Aufforderung --------------- */
.finger-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;           /* Layout-Anpassung je nach Bedarf */
  padding: 2.5rem 0;
}

.finger-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 0.6rem;
  animation: finger-tap 1.2s infinite;
  filter: drop-shadow(0 4px 16px #7dcf7766);
}

/* Finger-Tap Animation */
@keyframes finger-tap {
  0%, 100%   { transform: translateY(0) scale(1); opacity: 1; }
  25%        { transform: translateY(-18px) scale(1.07); opacity: 0.93; }
  40%        { transform: translateY(0) scale(1); opacity: 1; }
}

/* 6. Logo ------------------------------------------- */
.logo-svg {
  width: 250px;
  height: auto;
  display: block;
}
#logo-in-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;   /* Breite wird vom Inhalt bestimmt */
  height: auto;  /* Höhe auch */
  pointer-events: none; /* Nur wenn nötig, sonst entfernen */
}


/* Optional: Logo mit Glass-Effekt */
.logo-box {
  background: #ffffff80;        /* Halbtransparent, weiß */
  border-radius: 50%;
  padding: 4rem;
  margin-top: 25%;
}