/* ================================================================
   Göhler's Feinbäckerei — Hero Cinematic Animations (CSS only)
   
  - Ken Burns zoom on bakery façade
  - Crossfade to product slides (each also zooming)
  - No JavaScript required
  ================================================================ */

/* ——— 1. Design Tokens (hero-specific) ──────────────────── */
.hero {
  --slide-duration: 7s;          /* visible window per slide   */
}

/* ——— 2. Hero Stage ────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;                 /* full viewport             */
  min-height: 480px;             /* minimum for mobile        */
  overflow: hidden;
}

.hero__stage {
  position: absolute;
  inset: 0;
}


/* ——— 3. Every Slide (shared) ──────────────────────────── */
.hero__slide {
  position: absolute;
  inset: 0;

  /* default hidden, animated into view */
  opacity: 0;

  background-color: #E6DCC1;     /* warm fallback            */
  background-position: center;
  background-size: cover;
}


/* ——— 4. Facade (Slide 1) ─────────────────────────────── */
.hero__slide--facade {
  background-image: url('../media/fassade/Fassade-Bild.jpg');

  /* Ken Burns – slow zoom on the bakery façade entrance     */
  transform-origin: 50% 45%;      /* centre slightly lower   */
  animation: facadeCycle 28s linear infinite;
}


/* ——— 5. Product Slides (2–4) ─────────────────----------- */

/* each product slide has its own origin so different crops  */
.hero__slide--product-1 { transform-origin: 50% 35%; }
.hero__slide--product-2 { transform-origin: 60% 40%; }
.hero__slide--product-3 { transform-origin: 45% 45%; }

/* stagger the animation delay for each product                */
.hero__slide--product-1 { animation: productCycle 28s linear infinite; animation-delay: -7s; }
.hero__slide--product-2 { animation: productCycle 28s linear infinite; animation-delay: -14s;}
.hero__slide--product-3 { animation: productCycle 28s linear infinite; animation-delay: -21s;}

/* ——— 6. Keyframe: Facade ──────────────────────────────── */

@keyframes facadeCycle {
  
  /* visible 0 – 5 % (≈0–7 s)                                  */
      0%  { opacity: 0; transform: scale(1);     }
      3%  { opacity: 1; transform: scale(1);     }
     22%  { opacity: 1; transform: scale(1.18);   /* Ken Burns */}
     
  /* fade out                                                   */
     24%  { opacity: 0; transform: scale(1.18);  }

  /* invisible until next cycle                                 */
    100%  { opacity: 0; transform: scale(1.18);   }
}


/* ——— 7. Keyframe: Product ────────────────────────────── */

@keyframes productCycle {
      0%  { opacity: 0; transform: scale(1);       }
      3%  { opacity: 1; transform: scale(1);       }
     22%  { opacity: 1; transform: scale(1.15);    /* Ken Burns */}
     
  /* fade out with crossfade gap                                */
     24%  { opacity: 0; transform: scale(1.15);   }
    100%  { opacity: 0; transform: scale(1.15);   }
}


/* ——— 8. Content Overlay ──────────────────────────────── */
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2;

  pointer-events: none;           /* let clicks pass to slides */
  padding: var(--space-lg);

  color: #fff;
  text-shadow:
    0 2px 8px  rgba(0,0,0,.65),
    0 0 32px   rgba(0,0,0,.35);
}

/* pointer events back for the button */
.hero__content .btn {
  pointer-events: auto;
  text-shadow: none;
}

.hero__tagline {
  font-family: var(--ff-body);
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: clamp(.7rem, 1.4vw, .9rem);
  margin-bottom: var(--space-sm);
  opacity: .85;
}

.hero__content h1 {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 300;
  max-width: 48ch;
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* ——— 9. Gradient overlay on hero ─────────────────────── */
.hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                   /* between slides and text   */
  background: linear-gradient(
    to bottom,
    rgba(62,36,16,.25) 0%,
    rgba(62,36,16,.45) 70%,
    var(--clr-bg)        100%
  );
  pointer-events: none;
}

/* ——— 10. Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation-duration: 56s !important; }
  .hero__content h1 { font-size: clamp(2rem, 4vw, 3rem); }
}


/* ——— 11. Mobile tweaks ──────────────────────────────── */
@media (max-width: 768px) {
  .hero { min-height: 70vh; }

  .hero__content h1 { font-size: clamp(2rem, 8vw, 3rem); }
}