/* ===== 3D Animation Enhancements ===== */

/* Floating bubbles canvas */
#canvas-3d-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* 3D floating header image (desktop only) */
@keyframes headerFloat {
  0%,  100% { transform: translateY(0px)   rotateX(0deg); }
  50%        { transform: translateY(-5px) rotateX(1.5deg); }
}
@media (min-width: 600px) {
  header img {
    animation: headerFloat 5s ease-in-out infinite;
    transform-origin: center bottom;
  }
}

/* 3D spin-in for category icons when section opens */
@keyframes spinIn3d {
  from { transform: perspective(400px) rotateY(-90deg) scale(0.6); opacity: 0.3; }
  to   { transform: perspective(400px) rotateY(0deg)   scale(1);   opacity: 1; }
}
details.anim-open > summary .sum-icons,
details.anim-open > summary img:first-child:not(.icon-style):not(.icon-style2) {
  animation: spinIn3d 0.5s ease-out;
}

/* 3D pop on contact icons */
.kontakt-icon a img {
  transition: transform 0.3s ease, filter 0.3s ease !important;
}
.kontakt-icon a img:hover {
  transform: perspective(300px) translateZ(22px) scale(1.18) !important;
  filter: brightness(1.25) drop-shadow(0 4px 14px rgba(255,255,255,0.45)) !important;
}

/* 3D lift on navigation cards (index.html) */
.seitenverlinkung {
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}
.seitenverlinkung:hover {
  transform: perspective(600px) translateZ(18px) scale(1.03) !important;
}

/* 3D hover on link-back nav buttons */
.link-back {
  transform-style: preserve-3d;
}
.link-back a {
  display: block;
  transition: transform 0.3s ease !important;
}
.link-back:hover a {
  transform: perspective(400px) rotateX(-8deg) translateZ(12px) !important;
}

/* 3D hover on sport logos */
.bottom-img img {
  transition: transform 0.35s ease !important;
}
.bottom-img img:hover {
  transform: perspective(300px) translateZ(18px) scale(1.12) rotate(-3deg) !important;
}

/* Subtle 3D shadow depth on main card sections on hover */
.top-part,
.lower-part {
  transition: box-shadow 0.4s ease;
}
.top-part:hover,
.lower-part:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

/* 3D shimmer on speise/getraenke main headers */
.speisekarte-details-sum,
.getraenkekarte-details-sum {
  transition: transform 0.3s ease;
}
.speisekarte-details-sum:hover,
.getraenkekarte-details-sum:hover {
  transform: perspective(500px) rotateX(-5deg) translateZ(8px);
}

/* 3D slide transitions (replaces .fade) */
.mySlides.fade {
  animation: none;
}

@keyframes slide3dFromRight {
  from {
    transform: perspective(1200px) rotateY(-55deg) translateX(12%) scale(0.93);
    opacity: 0.25;
  }
  to {
    transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes slide3dFromLeft {
  from {
    transform: perspective(1200px) rotateY(55deg) translateX(-12%) scale(0.93);
    opacity: 0.25;
  }
  to {
    transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
  }
}

.mySlides.slide-3d-next {
  animation: slide3dFromRight 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.mySlides.slide-3d-prev {
  animation: slide3dFromLeft 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 3D glow pulse on slideshow images */
.slideimg {
  transition: box-shadow 0.4s ease, transform 0.4s ease !important;
}
.slideimg:hover {
  box-shadow: -8px 8px 30px rgba(0, 0, 0, 0.6) !important;
  transform: perspective(900px) rotateY(2deg) !important;
}

/* ---- Speisekarte & Getränkekarte: Verstärkte 3D Animationen ---- */

/* Äußere Container: deutlich stärkerer Schwenk */
.speisekarte.hiddenRechts {
  transform: perspective(600px) translateX(15%) rotateY(35deg) scale(0.95);
}
.speisekarte.showRechts {
  transform: perspective(600px) translateX(0) rotateY(0deg) scale(1);
}
.getraenkekarte.hiddenLinks {
  transform: perspective(600px) translateX(-15%) rotateY(-35deg) scale(0.95);
}
.getraenkekarte.showLinks {
  transform: perspective(600px) translateX(0) rotateY(0deg) scale(1);
}

/* Kategorie-Karten: ungerade von links eindrehen, gerade von rechts */
.speise-details:nth-child(odd).hiddenSpawn,
.drink-details:nth-child(odd).hiddenSpawn {
  transform: perspective(500px) rotateY(-60deg) scale(0.88);
}
.speise-details:nth-child(odd).showSpawn,
.drink-details:nth-child(odd).showSpawn {
  transform: perspective(500px) rotateY(0deg) scale(1);
}
.speise-details:nth-child(even).hiddenSpawn,
.drink-details:nth-child(even).hiddenSpawn {
  transform: perspective(500px) rotateY(60deg) scale(0.88);
}
.speise-details:nth-child(even).showSpawn,
.drink-details:nth-child(even).showSpawn {
  transform: perspective(500px) rotateY(0deg) scale(1);
}

/* ---- Individuelle Speisen & Getränke: 3D-Einblendung beim Öffnen einer Kategorie ---- */

/* <tr>-Opacity deaktivieren – die <td>-Animation übernimmt alles */
.speise-details tr.hiddenSpawn,
.drink-details tr.hiddenSpawn {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}
.speise-details tr.showSpawn,
.drink-details tr.showSpawn {
  opacity: 1 !important;
  filter: none !important;
}

@keyframes menuItem3dIn {
  from {
    opacity: 0;
    transform: perspective(500px) rotateX(-45deg) translateY(18px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) translateY(0) scale(1);
  }
}

.speise-details[open] tr td,
.drink-details[open] tr td {
  animation: menuItem3dIn 0.45s ease-out both;
}

/* Gestaffelter Start: jede Zeile 55 ms später */
.speise-details[open] tr:nth-child(1) td,  .drink-details[open] tr:nth-child(1) td  { animation-delay: 0ms;    }
.speise-details[open] tr:nth-child(2) td,  .drink-details[open] tr:nth-child(2) td  { animation-delay: 55ms;   }
.speise-details[open] tr:nth-child(3) td,  .drink-details[open] tr:nth-child(3) td  { animation-delay: 110ms;  }
.speise-details[open] tr:nth-child(4) td,  .drink-details[open] tr:nth-child(4) td  { animation-delay: 165ms;  }
.speise-details[open] tr:nth-child(5) td,  .drink-details[open] tr:nth-child(5) td  { animation-delay: 220ms;  }
.speise-details[open] tr:nth-child(6) td,  .drink-details[open] tr:nth-child(6) td  { animation-delay: 275ms;  }
.speise-details[open] tr:nth-child(7) td,  .drink-details[open] tr:nth-child(7) td  { animation-delay: 330ms;  }
.speise-details[open] tr:nth-child(8) td,  .drink-details[open] tr:nth-child(8) td  { animation-delay: 385ms;  }
.speise-details[open] tr:nth-child(9) td,  .drink-details[open] tr:nth-child(9) td  { animation-delay: 440ms;  }
.speise-details[open] tr:nth-child(10) td, .drink-details[open] tr:nth-child(10) td { animation-delay: 495ms;  }
.speise-details[open] tr:nth-child(11) td, .drink-details[open] tr:nth-child(11) td { animation-delay: 550ms;  }
.speise-details[open] tr:nth-child(12) td, .drink-details[open] tr:nth-child(12) td { animation-delay: 605ms;  }
.speise-details[open] tr:nth-child(13) td, .drink-details[open] tr:nth-child(13) td { animation-delay: 660ms;  }
.speise-details[open] tr:nth-child(14) td, .drink-details[open] tr:nth-child(14) td { animation-delay: 715ms;  }
.speise-details[open] tr:nth-child(15) td, .drink-details[open] tr:nth-child(15) td { animation-delay: 770ms;  }
.speise-details[open] tr:nth-child(16) td, .drink-details[open] tr:nth-child(16) td { animation-delay: 825ms;  }
.speise-details[open] tr:nth-child(17) td, .drink-details[open] tr:nth-child(17) td { animation-delay: 880ms;  }
.speise-details[open] tr:nth-child(18) td, .drink-details[open] tr:nth-child(18) td { animation-delay: 935ms;  }
.speise-details[open] tr:nth-child(19) td, .drink-details[open] tr:nth-child(19) td { animation-delay: 990ms;  }
.speise-details[open] tr:nth-child(20) td, .drink-details[open] tr:nth-child(20) td { animation-delay: 1045ms; }

/* Table row subtle 3D highlight */
tr.hiddenSpawn {
  transition: background-color 0.2s ease;
}
tr.hiddenSpawn:hover td {
  background-color: rgba(255, 255, 255, 0.07);
}

/* Tilt-ready containers */
.top-part,
.lower-part,
.kontakt,
.slideshow-container {
  transform-style: preserve-3d;
}

/* ---- Continuous float after slide-in ---- */
@keyframes seitenFloat {
  0%, 100% { transform: perspective(600px) translateY(0px) translateZ(0); }
  50%       { transform: perspective(600px) translateY(-8px) translateZ(6px); }
}
.anim-float.seitenverlinkung {
  animation: seitenFloat 3.5s ease-in-out infinite;
}
.anim-float.seitenverlinkung:hover {
  animation-play-state: paused;
  transform: perspective(600px) translateZ(18px) scale(1.03) !important;
}

@keyframes navFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}
#header-ul a.anim-float {
  animation: navFloat 2.8s ease-in-out infinite;
}
#header-ul a.a2.anim-float {
  animation-delay: 0.6s;
}