/*
 * Zeitreise-Hero · langsame Dramaturgie
 * Die bestehende linke Verkaufsbotschaft bleibt sichtbar. Nur die rechte
 * Hallenseite erzählt den Film: Fenster für Fenster, Landung, Türlicht, Gold.
 */
.hero {
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y;
  contain: paint;
}

.hero-cinema-impact,
.glass-canvas,
.hero-cinema-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-cinema-impact {
  z-index: 2;
  overflow: hidden;
}

.glass-canvas {
  z-index: 4;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.window-strike {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  background: url("/images/fenster-bruch-ruhig-v1.webp") center / cover no-repeat;
  filter: contrast(1.04);
  will-change: opacity, filter;
}

/* Perspektivische Reihenfolge: hinten rechts beginnt es, dann nach vorn. */
.window-01 { clip-path: polygon(63.9% 11%, 68.1% 7.8%, 68.1% 34.5%, 63.9% 37.2%); }
.window-02 { clip-path: polygon(68.2% 7.7%, 72.7% 4.8%, 72.7% 32.6%, 68.2% 34.6%); }
.window-03 { clip-path: polygon(72.8% 4.7%, 78.4% 2.1%, 78.4% 30.5%, 72.8% 32.5%); }
.window-04 { clip-path: polygon(78.5% 2%, 87.2% 0%, 87.2% 27.5%, 78.5% 30.4%); }
.window-05 { clip-path: polygon(87.3% 0%, 99.8% 0%, 99.8% 23.8%, 87.3% 27.4%); }
.window-06 { clip-path: polygon(60.5% 38%, 64.4% 36%, 64.4% 62.7%, 60.5% 63.8%); }
.window-07 { clip-path: polygon(64.5% 35.9%, 69.6% 33.4%, 69.6% 65.2%, 64.5% 62.8%); }
.window-08 { clip-path: polygon(69.7% 33.3%, 76.4% 30.4%, 76.4% 67.8%, 69.7% 65.3%); }
.window-09 { clip-path: polygon(76.5% 30.3%, 87.6% 26.3%, 87.6% 71%, 76.5% 67.9%); }
.window-10 { clip-path: polygon(87.7% 26.2%, 99.8% 22.2%, 99.8% 73%, 87.7% 71.1%); }

.hero-cinema-vignette {
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle at 79% 66%, transparent 0 18%, rgba(0, 0, 0, .2) 58%, rgba(0, 0, 0, .48) 100%);
  clip-path: inset(0 0 0 47%);
}

.hero-copy {
  position: relative;
  z-index: 6 !important;
}

.hero-visual {
  position: relative;
  z-index: 5 !important;
  align-self: stretch;
  min-height: 630px;
  overflow: visible;
}

.hero-devices {
  display: none !important;
}

.time-cinema {
  position: absolute;
  inset: 0 -3% -2% -2%;
  overflow: visible;
  pointer-events: none;
}

.time-cinema::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: -2%;
  width: min(40vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(255, 247, 207, .92), rgba(196, 154, 44, .25) 34%, transparent 69%);
  transform: scale(.35);
}

.time-booth {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: clamp(255px, 30vw, 445px);
  height: auto;
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .6));
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.time-booth-closed {
  opacity: 0;
  transform: translate3d(0, calc(-100vh - 110%), 0) scale(.96);
}

.time-booth-open {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
}

.cinema-replay {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: -49px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(17, 17, 17, .55);
  color: #111;
  background: rgba(255, 255, 255, .84);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

/* Kurzes, klares Erdbeben unmittelbar vor dem ersten Fensterbruch. */
.hero.cinema-running {
  animation: hero-quake .72s cubic-bezier(.36, .07, .19, .97) .04s both;
  transform-origin: 50% 58%;
}

/* Erst die oberen Fenster, danach die unteren. Jedes Fenster erhält Zeit. */
.hero.cinema-running .window-strike {
  animation: pane-break .48s cubic-bezier(.16, .78, .22, 1) both;
}

.hero.cinema-running .window-01 { animation-delay: .8s; }
.hero.cinema-running .window-02 { animation-delay: 1.45s; }
.hero.cinema-running .window-03 { animation-delay: 2.1s; }
.hero.cinema-running .window-04 { animation-delay: 2.75s; }
.hero.cinema-running .window-05 { animation-delay: 3.4s; }
.hero.cinema-running .window-06 { animation-delay: 4.2s; }
.hero.cinema-running .window-07 { animation-delay: 4.85s; }
.hero.cinema-running .window-08 { animation-delay: 5.5s; }
.hero.cinema-running .window-09 { animation-delay: 6.15s; }
.hero.cinema-running .window-10 { animation-delay: 6.8s; }

.hero.cinema-running .hero-cinema-vignette {
  animation: vignette-in 1.3s ease 10.25s both;
}

/*
 * Erst wenn auch der letzte Splitter gefallen ist, setzt die Zeitreise ein.
 * Die Landungsanimation hat absichtlich keinen rückwärts wirkenden Fill-Mode:
 * Sonst würde ihr Startwert die vorherige Abwärtsfahrt überschreiben und die
 * Zelle schlagartig am Boden einblenden.
 */
.hero.cinema-running .time-booth-closed {
  animation:
    booth-descends 4.35s cubic-bezier(.2, .42, .18, 1) 9.25s both,
    booth-settles .55s ease-out 13.6s,
    closed-away .24s ease 14.3s forwards;
}

.hero.cinema-running .time-booth-open {
  animation: open-reveal .52s ease 14.3s both;
}

.hero.cinema-running .time-cinema::before {
  animation: portal-fire 2.35s ease 14.34s both;
}

.hero.cinema-running h1 em {
  animation:
    slogan-to-gold .72s ease 14.65s both,
    slogan-gold-pulse .62s ease-in-out 15.37s 2 alternate;
}

.hero.cinema-running .cinema-replay {
  animation: replay-in .35s ease 17s both;
  pointer-events: auto;
}

@keyframes pane-break {
  0% { opacity: 0; filter: contrast(1.02) brightness(1); }
  24% { opacity: .2; filter: contrast(1.12) brightness(1.18); }
  55% { opacity: .88; filter: contrast(1.08) brightness(1.04); }
  100% { opacity: 1; filter: contrast(1.04) brightness(1); }
}

@keyframes hero-quake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  10% { transform: translate3d(-4px, 2px, 0) rotate(-.08deg) scale(1.008); }
  21% { transform: translate3d(5px, -3px, 0) rotate(.1deg) scale(1.008); }
  33% { transform: translate3d(-6px, -1px, 0) rotate(-.12deg) scale(1.008); }
  46% { transform: translate3d(5px, 3px, 0) rotate(.1deg) scale(1.008); }
  59% { transform: translate3d(-4px, -3px, 0) rotate(-.08deg) scale(1.008); }
  72% { transform: translate3d(4px, 2px, 0) rotate(.07deg) scale(1.006); }
  85% { transform: translate3d(-2px, -1px, 0) rotate(-.04deg) scale(1.003); }
}

@keyframes vignette-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes booth-descends {
  0% { opacity: 0; transform: translate3d(0, calc(-100vh - 110%), 0) scale(.96); }
  6% { opacity: 1; transform: translate3d(0, calc(-100vh - 110%), 0) scale(.96); }
  90% { opacity: 1; transform: translate3d(0, -4%, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes booth-descends-mobile {
  0% { opacity: 0; transform: translate3d(0, -180%, 0) scale(.96); }
  6% { opacity: 1; transform: translate3d(0, -180%, 0) scale(.96); }
  90% { opacity: 1; transform: translate3d(0, -4%, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes booth-settles {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  35% { transform: translate3d(0, 1.6%, 0) scale(1.018, .982); }
  72% { transform: translate3d(0, -.5%, 0) scale(.995, 1.005); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes closed-away {
  to { opacity: 0; }
}

@keyframes open-reveal {
  from { opacity: 0; transform: translate3d(0, 0, 0) scale(.99); filter: brightness(1.9) drop-shadow(0 34px 34px rgba(0, 0, 0, .6)); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) drop-shadow(0 34px 34px rgba(0, 0, 0, .6)); }
}

@keyframes portal-fire {
  0% { opacity: 0; transform: scale(.35); }
  18% { opacity: .95; }
  48% { opacity: .72; }
  100% { opacity: .3; transform: scale(1.18); }
}

@keyframes slogan-to-gold {
  0% { color: #111; text-shadow: none; }
  38% { color: #fff3bd; text-shadow: 0 0 25px rgba(226, 198, 111, .95); }
  100% { color: #c49a2c; text-shadow: 0 0 20px rgba(196, 154, 44, .28); }
}

@keyframes slogan-gold-pulse {
  from { color: #c49a2c; text-shadow: 0 0 12px rgba(196, 154, 44, .2); }
  to { color: #e2c66f; text-shadow: 0 0 34px rgba(226, 198, 111, .7); }
}

@keyframes replay-in {
  to { opacity: 1; }
}

@media (max-width: 1100px) {
  .hero-visual { min-height: 570px; }
  .time-booth { width: clamp(235px, 35vw, 390px); }
}

@media (max-width: 780px) {
  .hero {
    min-height: 0 !important;
    padding: 54px 16px 64px !important;
  }

  .hero-copy {
    padding-top: 26px !important;
  }

  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(33px, 9.2vw, 36px) !important;
    line-height: .93 !important;
    letter-spacing: -.052em !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .hero .availability {
    width: 100%;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 9px 12px;
    font-size: 14px !important;
    line-height: 1.25;
    letter-spacing: .075em;
    text-align: center;
    white-space: normal;
  }

  .hero-copy .eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .hero-copy > .hero-visual {
    width: calc(100% + 32px);
    max-width: none !important;
    height: 310px;
    min-height: 310px !important;
    margin: 17px -16px 26px;
    overflow: hidden;
    border-top: 2px solid rgba(196, 154, 44, .8);
    border-bottom: 2px solid rgba(17, 17, 17, .8);
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .12)),
      url("/images/hero-fabrikhalle-goldstuhl-v4.webp") 65% center / auto 100% no-repeat;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
  }

  .hero-copy > .hero-visual::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 32%, transparent 72%, rgba(0, 0, 0, .24));
  }

  .hero-cinema-impact,
  .glass-canvas,
  .hero-cinema-vignette {
    inset: 0;
  }

  .hero-cinema-impact { opacity: .9; }

  .window-strike {
    background-position: 65% center;
    background-size: auto 100%;
  }

  /* Sechs im mobilen Bildausschnitt wirklich sichtbare Fensterscheiben. */
  .window-01 { clip-path: polygon(62.1% 11%, 73% 7.8%, 73% 34.5%, 62.1% 37.2%); }
  .window-02 { clip-path: polygon(73.2% 7.7%, 85% 4.8%, 85% 32.6%, 73.2% 34.6%); }
  .window-03 { clip-path: polygon(85.2% 4.7%, 99.7% 2.1%, 99.7% 30.5%, 85.2% 32.5%); }
  .window-04 { clip-path: polygon(53.2% 38%, 63.4% 36%, 63.4% 62.7%, 53.2% 63.8%); }
  .window-05 { clip-path: polygon(63.6% 35.9%, 76.9% 33.4%, 76.9% 65.2%, 63.6% 62.8%); }
  .window-06 { clip-path: polygon(77.1% 33.3%, 94.5% 30.4%, 94.5% 67.8%, 77.1% 65.3%); }
  .window-07,
  .window-08,
  .window-09,
  .window-10 { display: none; }

  .hero.cinema-running .window-01 { animation-delay: .9s; }
  .hero.cinema-running .window-02 { animation-delay: 1.7s; }
  .hero.cinema-running .window-03 { animation-delay: 2.5s; }
  .hero.cinema-running .window-04 { animation-delay: 3.4s; }
  .hero.cinema-running .window-05 { animation-delay: 4.2s; }
  .hero.cinema-running .window-06 { animation-delay: 5s; }

  .hero-cinema-vignette {
    clip-path: none;
    background: radial-gradient(circle at 76% 70%, transparent 0 18%, rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .34) 100%);
  }

  .time-cinema {
    z-index: 5;
    inset: 0;
    overflow: hidden;
  }

  .time-cinema::before {
    right: -8%;
    bottom: -4%;
    width: 74%;
  }

  .time-booth {
    right: 2%;
    bottom: 0;
    width: min(43vw, 158px);
  }

  .hero.cinema-running .hero-cinema-vignette {
    animation-delay: 10.65s;
  }

  .hero.cinema-running .time-booth-closed {
    animation:
      booth-descends-mobile 3.55s cubic-bezier(.2, .42, .18, 1) 7.45s both,
      booth-settles .5s ease-out 11s,
      closed-away .22s ease 11.65s forwards;
  }

  .hero.cinema-running .time-booth-open {
    animation: open-reveal .48s ease 11.65s both;
  }

  .hero.cinema-running .time-cinema::before {
    animation: portal-fire 2.2s ease 11.69s both;
  }

  .hero.cinema-running h1 em {
    animation:
      slogan-to-gold .7s ease 12s both,
      slogan-gold-pulse .6s ease-in-out 12.7s 2 alternate;
  }

  .cinema-replay {
    top: 12px;
    right: 12px;
    bottom: auto;
    min-height: 36px;
    padding: 0 11px;
    font-size: 11px;
    background: rgba(255, 255, 255, .92);
  }

  .hero.cinema-running .cinema-replay {
    animation-delay: 14.35s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.cinema-running {
    animation: none !important;
  }

  .window-strike,
  .hero-cinema-vignette,
  .time-booth-closed,
  .time-cinema::before,
  .cinema-replay {
    display: none !important;
  }

  .time-booth-open {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero h1 em {
    color: #c49a2c !important;
    animation: none !important;
  }
}