/* ================================================================
   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__content h1 { font-size: clamp(2rem, 8vw, 3rem); }
}


/* ================================================================
   P-41 Portrait-Anpassung (26.10.)
   Problem: Fassade-Bild ist Landscape (1911×986) → auf Portrait-
   Viewports zeigt `cover` nur einen ~24–36 % breiten Mittelstreifen,
   Ken-Burns zoomt zusätzlich hinein = "Bilder verlieren Wirkung".
   Fix (nur Hero-Höhe/Zoom/Overlay, KEIN overflow-Ansatz am .hero
   selbst mehr als vorhanden — P-01 beachtet: headlock bleibt unberührt):
     – Smartphones  ≤ 900 px : niedrigerer Hero (max. 460 px), milder
       Zoom (×1.06 statt ×1.18/1.15), helleres Overlay
     – Tablet-Portrait ≥ 901 px: Hero max. 620 px, gleicher Mild-Zoom
   Desktop-Landscape bleibt exakt unverändert (dort sieht es gut aus).
================================================================ */

/* keyframes mit gedämpfter Ken-Burns-Stufe — Namen nur per Media-Anlage verwendet */
@keyframes facadeCycleM {
      0%   { opacity: 0; transform: scale(1);     }
      3%   { opacity: 1; transform: scale(1);     }
     22%   { opacity: 1; transform: scale(1.06);  }
     24%   { opacity: 0; transform: scale(1.06);  }
    100%   { opacity: 0; transform: scale(1.06);  }
}

@keyframes productCycleM {
      0%   { opacity: 0; transform: scale(1);     }
      3%   { opacity: 1; transform: scale(1);     }
     22%   { opacity: 1; transform: scale(1.06);  }
     24%   { opacity: 0; transform: scale(1.06);  }
    100%   { opacity: 0; transform: scale(1.06);  }
}

@media (max-width: 900px) {                         /* Smartphones */
  .hero { height: min(72vh, 460px);  min-height: 340px; }  /* Fallback ohne svh */
  .hero { height: min(58svh, 460px); min-height: 340px; }

  .hero__slide--facade    { animation-name: facadeCycleM; }
  .hero__slide--product-1 { animation-name: productCycleM; }
  .hero__slide--product-2 { animation-name: productCycleM; }
  .hero__slide--product-3 { animation-name: productCycleM; }

  /* Overlay heller → Bilder wirken statt abgedunkelt */
  .hero__stage::after {
    background: linear-gradient(
      to bottom,
      rgba(62,36,16,.10) 0%,
      rgba(62,36,16,.30) 72%,
      var(--clr-bg)       100%
    );
  }
}

@media (orientation: portrait) and (min-width: 901px) {   /* Tablet-Portrait */
  .hero { height: min(84vh, 620px); min-height: 380px; }   /* Tablet-Portrait */

  .hero__slide--facade    { animation-name: facadeCycleM; }
  .hero__slide--product-1 { animation-name: productCycleM; }
  .hero__slide--product-2 { animation-name: productCycleM; }
  .hero__slide--product-3 { animation-name: productCycleM; }

  .hero__stage::after {
    background: linear-gradient(
      to bottom,
      rgba(62,36,16,.12) 0%,
      rgba(62,36,16,.34) 75%,
      var(--clr-bg)       100%
    );
  }
}