/* ============================================
   BELL PONTE - Animation Styles
   GSAP States & CSS Keyframes
   ============================================ */

/* ---------- Reveal Animations (GSAP triggers these via classes) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Stagger Children ---------- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}

.stagger-children.active > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Story Beat: Dough Rolling ---------- */
.dough-anim {
  transform-origin: center center;
}

.dough-flat {
  border-radius: 50%;
  transform: scaleY(0.15) scaleX(2.2);
  background: radial-gradient(circle, #e8d5a0 60%, #c4a66a 100%);
}

/* ---------- Story Beat: Ingredient Rain ---------- */
.ingredient {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* ---------- Story Beat: Fire / Oven ---------- */
.oven-silhouette {
  width: 300px;
  height: 200px;
  background: var(--color-bg-card);
  border-radius: 50% 50% 0 0;
  margin: 0 auto;
  position: relative;
  border: 3px solid var(--color-warm-gold-dim);
}

.oven-silhouette::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40%;
  background: linear-gradient(to top, var(--color-fire-red), transparent);
  border-radius: 0 0 50% 50%;
  animation: ovenGlow 1.5s ease-in-out infinite alternate;
}

@keyframes ovenGlow {
  0% { opacity: 0.5; height: 35%; }
  100% { opacity: 1; height: 45%; }
}

/* ---------- Story Beat: Perfezione Handwriting ---------- */
.handwriting-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill: none;
  stroke: var(--color-warm-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.handwriting-path.animate {
  animation: drawText 3s ease forwards;
}

@keyframes drawText {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Card Entrance Animations ---------- */
@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* ---------- Text Shimmer Effect ---------- */
.text-shimmer {
  background: linear-gradient(
    120deg,
    var(--color-warm-gold) 0%,
    var(--color-warm-gold-light) 25%,
    var(--color-warm-gold) 50%,
    var(--color-warm-gold-light) 75%,
    var(--color-warm-gold) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---------- Floating Effect ---------- */
.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ---------- Pulse Ring ---------- */
.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--color-warm-gold);
  opacity: 0;
  animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* ---------- Counter Animation ---------- */
.counter-animate {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------- Section Transition Overlays ---------- */
.section-wipe {
  position: absolute;
  inset: 0;
  background: var(--color-bg-primary);
  transform-origin: left;
  z-index: 100;
  pointer-events: none;
}

/* ---------- Grain/Noise Texture Overlay ---------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ---------- Enhanced Reveal Animations ---------- */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out-expo);
}

.reveal-fade.active {
  opacity: 1;
}

/* ---------- Ornament Divider Animations ---------- */
.ornament-divider {
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 1s var(--ease-out-expo) 0.2s, transform 1s var(--ease-out-expo) 0.2s;
}

.ornament-divider.active,
.section.active + .ornament-divider,
.ornament-divider {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------- Gentle Sway Animation for Decorative Elements ---------- */
@keyframes gentleSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(1deg) translateY(-2px); }
  75% { transform: rotate(-1deg) translateY(2px); }
}

.sway {
  animation: gentleSway 6s ease-in-out infinite;
}

/* ---------- Decorative Float Animation ---------- */
@keyframes decorativeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(0.5deg); }
  66% { transform: translateY(-4px) rotate(-0.5deg); }
}

.deco-float {
  animation: decorativeFloat 8s ease-in-out infinite;
}

/* ---------- Gold Line Reveal ---------- */
@keyframes lineReveal {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 120px;
    opacity: 1;
  }
}

.section-header.active .section-divider {
  animation: lineReveal 0.8s var(--ease-out-expo) 0.3s both;
}

/* ---------- Hero Corner Fade In ---------- */
@keyframes cornerFadeIn {
  from {
    opacity: 0;
    width: 0;
    height: 0;
  }
  to {
    opacity: 0.3;
    width: 60px;
    height: 60px;
  }
}

.hero-corner {
  animation: cornerFadeIn 1.5s var(--ease-out-expo) 1.5s both;
}

/* ---------- Card Hover Lift ---------- */
@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 168, 67, 0); }
  50% { box-shadow: 0 0 30px rgba(212, 168, 67, 0.06); }
}

/* ---------- Section Entrance with Depth ---------- */
.reveal-depth {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.reveal-depth.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Feature Icon Pop ---------- */
@keyframes iconPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.about-feature {
  opacity: 0;
}

.about-features.active .about-feature {
  animation: iconPop 0.5s var(--ease-out-expo) both;
}

.about-features.active .about-feature:nth-child(1) { animation-delay: 0.1s; }
.about-features.active .about-feature:nth-child(2) { animation-delay: 0.2s; }
.about-features.active .about-feature:nth-child(3) { animation-delay: 0.3s; }
.about-features.active .about-feature:nth-child(4) { animation-delay: 0.4s; }

/* ---------- Contact Item Slide In ---------- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.contact-info.active .contact-item {
  animation: slideInLeft 0.6s var(--ease-out-expo) both;
}

.contact-info.active .contact-item:nth-child(1) { animation-delay: 0.1s; }
.contact-info.active .contact-item:nth-child(2) { animation-delay: 0.2s; }
.contact-info.active .contact-item:nth-child(3) { animation-delay: 0.3s; }
.contact-info.active .contact-item:nth-child(4) { animation-delay: 0.4s; }

/* ---------- Map Container Reveal ---------- */
@keyframes mapReveal {
  from {
    opacity: 0;
    transform: translateX(30px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- Ambient Glow Pulse ---------- */
@keyframes ambientPulse {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}

#speisekarte::before {
  animation: ambientPulse 8s ease-in-out infinite;
}

#kontakt::before {
  animation: ambientPulse 10s ease-in-out infinite;
}

/* ---------- Spezial Badge Shine ---------- */
@keyframes badgeShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.spezial-badge {
  background: linear-gradient(
    120deg,
    var(--color-warm-gold) 0%,
    var(--color-warm-gold-light) 40%,
    var(--color-warm-gold) 60%,
    var(--color-warm-gold-light) 80%,
    var(--color-warm-gold) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: badgeShine 4s linear infinite;
}