/* ===========================================
   PAGE TRANSITION - Kaffeepflanze → Kaffeebohne
   Fluid Morph Design
   =========================================== */

/* Container */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}

/* Orange Background Overlay */
.page-transition::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, #FF6B35);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  will-change: transform;
}

.page-transition.active::before {
  transform: translateY(0);
}

/* ===== SLOGAN OBEN: GOOD COFFEE ===== */
.pt-slogan-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 220px));
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: 8px;
  text-align: center;
  color: var(--text-primary, #1a1714);
  white-space: nowrap;
  z-index: 10;
  text-transform: uppercase;
  opacity: 0;
}

[data-theme="dark"] .pt-slogan-top {
  color: #ffffff;
}

/* ===== SLOGAN UNTEN: for good people ===== */
.pt-slogan-bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 220px));
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 4px;
  text-align: center;
  color: var(--text-primary, #1a1714);
  white-space: nowrap;
  z-index: 10;
  text-transform: uppercase;
  opacity: 0;
}

[data-theme="dark"] .pt-slogan-bottom {
  color: #ffffff;
}

/* ===== MORPH CONTAINER ===== */
.pt-morph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 320px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ===== PFLANZE - Einzelne Blätter für Morph ===== */
.pt-leaf {
  position: absolute;
  width: 80px;
  height: 120px;
  background: var(--text-primary, #1a1714);
  border-radius: 0 70% 0 70%;
  opacity: 0;
  transform-origin: bottom center;
}

[data-theme="dark"] .pt-leaf {
  background: #ffffff;
}

/* Blatt-Positionen */
.pt-leaf-1 { left: 50%; top: 30%; transform: translateX(-100%) rotate(-40deg); }
.pt-leaf-2 { left: 50%; top: 30%; transform: translateX(0%) rotate(40deg) scaleX(-1); }
.pt-leaf-3 { left: 50%; top: 50%; transform: translateX(-110%) rotate(-30deg); }
.pt-leaf-4 { left: 50%; top: 50%; transform: translateX(10%) rotate(30deg) scaleX(-1); }
.pt-leaf-5 { left: 50%; top: 10%; transform: translateX(-50%) rotate(0deg); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; width: 60px; height: 100px; }

/* Stiel */
.pt-stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 160px;
  background: var(--text-primary, #1a1714);
  transform: translateX(-50%);
  border-radius: 3px;
  opacity: 0;
  transform-origin: bottom center;
}

[data-theme="dark"] .pt-stem {
  background: #ffffff;
}

/* ===== KAFFEEBOHNE ===== */
.pt-bean {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 200px;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.pt-bean-shape {
  width: 100%;
  height: 100%;
  background: var(--text-primary, #1a1714);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .pt-bean-shape {
  background: #ffffff;
}

/* Bohnen-Linie */
.pt-bean-line {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 4px;
  height: 80%;
  background: var(--accent, #FF6B35);
  transform: translateX(-50%);
  border-radius: 2px;
  opacity: 0.6;
}

/* Bohnen-Highlight entfernt - sah nicht gut aus */

/* ===== ANIMATIONEN ===== */

/* Slogan Fade In */
.page-transition.active .pt-slogan-top {
  animation: sloganFadeIn 0.6s ease-out 0.3s forwards;
}

.page-transition.active .pt-slogan-bottom {
  animation: sloganFadeIn 0.6s ease-out 0.4s forwards;
}

@keyframes sloganFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 220px)) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 220px)) scale(1);
  }
}

/* Für bottom slogan andere Position */
.page-transition.active .pt-slogan-bottom {
  animation-name: sloganFadeInBottom;
}

@keyframes sloganFadeInBottom {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 240px)) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 220px)) scale(1);
  }
}

/* Pflanze erscheint und morpht */
.page-transition.active .pt-stem {
  animation: stemGrow 0.5s ease-out 0.4s forwards,
             stemMorph 0.4s ease-in 0.85s forwards;
}

.page-transition.active .pt-leaf-1 {
  animation: leafGrow 0.4s ease-out 0.5s forwards,
             leafMorph 0.3s ease-in 0.85s forwards;
}

.page-transition.active .pt-leaf-2 {
  animation: leafGrow 0.4s ease-out 0.55s forwards,
             leafMorph 0.3s ease-in 0.85s forwards;
}

.page-transition.active .pt-leaf-3 {
  animation: leafGrow 0.4s ease-out 0.6s forwards,
             leafMorph 0.3s ease-in 0.85s forwards;
}

.page-transition.active .pt-leaf-4 {
  animation: leafGrow 0.4s ease-out 0.65s forwards,
             leafMorph 0.3s ease-in 0.85s forwards;
}

.page-transition.active .pt-leaf-5 {
  animation: leafGrow 0.4s ease-out 0.7s forwards,
             leafMorph 0.3s ease-in 0.85s forwards;
}

/* Bohne erscheint aus dem Morph */
.page-transition.active .pt-bean {
  animation: beanMorph 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s forwards;
}

@keyframes stemGrow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes stemMorph {
  0% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.2) scaleX(3);
    border-radius: 50%;
  }
}

@keyframes leafGrow {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-40deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%) rotate(-40deg) scale(1);
  }
}

@keyframes leafMorph {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(50%) rotate(0deg) scale(0.3);
    border-radius: 50%;
  }
}

@keyframes beanMorph {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(-15deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

/* ===== GPU Performance ===== */
.page-transition,
.page-transition::before,
.pt-morph,
.pt-leaf,
.pt-stem,
.pt-bean,
.pt-slogan-top,
.pt-slogan-bottom {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ===== MOBILE RESPONSIVE ===== */

/* Tablet (max 768px) */
@media (max-width: 768px) {
  .pt-slogan-top {
    font-size: 42px;
    letter-spacing: 6px;
    transform: translate(-50%, calc(-50% - 160px));
  }

  .pt-slogan-bottom {
    font-size: 28px;
    letter-spacing: 3px;
    transform: translate(-50%, calc(-50% + 160px));
  }

  .pt-morph {
    width: 200px;
    height: 230px;
  }

  .pt-leaf {
    width: 60px;
    height: 90px;
  }

  .pt-leaf-5 {
    width: 45px;
    height: 75px;
  }

  .pt-stem {
    height: 115px;
    width: 5px;
  }

  .pt-bean {
    width: 100px;
    height: 145px;
  }

  @keyframes sloganFadeIn {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% - 160px)) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% - 160px)) scale(1);
    }
  }

  @keyframes sloganFadeInBottom {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 180px)) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% + 160px)) scale(1);
    }
  }
}

/* Mobile (max 480px) */
@media (max-width: 480px) {
  .pt-slogan-top {
    font-size: 28px;
    letter-spacing: 4px;
    transform: translate(-50%, calc(-50% - 120px));
  }

  .pt-slogan-bottom {
    font-size: 20px;
    letter-spacing: 2px;
    transform: translate(-50%, calc(-50% + 120px));
  }

  .pt-morph {
    width: 140px;
    height: 160px;
  }

  .pt-leaf {
    width: 40px;
    height: 60px;
  }

  .pt-leaf-5 {
    width: 30px;
    height: 50px;
  }

  .pt-stem {
    height: 80px;
    width: 4px;
  }

  .pt-bean {
    width: 70px;
    height: 100px;
  }

  .pt-bean-line {
    width: 3px;
  }

  @keyframes sloganFadeIn {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% - 120px)) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% - 120px)) scale(1);
    }
  }

  @keyframes sloganFadeInBottom {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 140px)) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% + 120px)) scale(1);
    }
  }
}

/* Small Mobile (max 360px) */
@media (max-width: 360px) {
  .pt-slogan-top {
    font-size: 22px;
    letter-spacing: 3px;
    transform: translate(-50%, calc(-50% - 100px));
  }

  .pt-slogan-bottom {
    font-size: 16px;
    letter-spacing: 2px;
    transform: translate(-50%, calc(-50% + 100px));
  }

  .pt-morph {
    width: 110px;
    height: 130px;
  }

  .pt-leaf {
    width: 32px;
    height: 48px;
  }

  .pt-leaf-5 {
    width: 24px;
    height: 40px;
  }

  .pt-stem {
    height: 65px;
    width: 3px;
  }

  .pt-bean {
    width: 55px;
    height: 80px;
  }

  @keyframes sloganFadeIn {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% - 100px)) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% - 100px)) scale(1);
    }
  }

  @keyframes sloganFadeInBottom {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 120px)) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% + 100px)) scale(1);
    }
  }
}