/* ==========================================================================
   Alternative Startseite — scroll-driven opening scene (see alt-scene.js)
   and the sections after it (see alt-sections.js).

   .alt-scene holds three things in normal flow:
     .alt-stage    sticky, full-screen; everything visual happens here
     .alt-track    empty scroll distance that drives the timeline
     .alt-contact  "Lassen Sie uns Ihr Projekt besprechen!" + form; it
                   scrolls up over the stage while the last frame of the
                   flight clip zooms out behind it
   Colours come from alt-theme.css (black + blood orange).
   ========================================================================== */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Roboto-900-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Roboto-700-latin.woff2') format('woff2');
}

.alt-scene {
  position: relative;
  /* The Webflow page wrapper is a flex column that doesn't stretch. */
  width: 100%;
  align-self: stretch;
  background-color: var(--alt-black, #000);
  color: var(--alt-text, #f1ece6);
}

/* The site keeps 104px of body padding for the floating navbar; the scene
   is full-screen and runs underneath the navbar instead. */
body:has(.alt-scene) {
  padding-top: 0;
}

.alt-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--alt-black, #000);
}
.alt-track { height: 820vh; }

/* ---- Layer 1: Isar clip ------------------------------------------------ */
.alt-isar {
  position: absolute;
  inset: 0;
  will-change: opacity;
}
.alt-isar video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, filter;
}
/* Only the navbar edge is darkened; the water stays bright for the black
   headline that stands in it. */
.alt-isar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 16%);
}

/* ---- Hero copy: black, standing in the water --------------------------- */
.alt-hero {
  position: absolute;
  /* centred without translate(-50%): half of an odd width lands on a
     sub-pixel and makes the text soft */
  left: 0;
  right: 0;
  margin: 0 auto;
  /* JS sets `top` just below the waterline; this is the fallback */
  top: 66%;
  /* whole-pixel side padding instead of a vw width keeps the text on the
     pixel grid */
  max-width: 1180px;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
.alt-h1 {
  margin: 0;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 6.4vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #0a0a0a;
  /* a soft light halo lifts the black off the water (no clipping box) */
  text-shadow: 0 0 28px rgba(255, 250, 240, .3);
}
.alt-word {
  display: inline-block;
}
/* Headline is visible from the first paint; it just sharpens in on load
   (staggered per word). */
.alt-word > span {
  display: inline-block;
  /* backwards: once finished, no transform/filter is left on the text */
  animation: alt-sharpen 1.1s cubic-bezier(.22, 1, .36, 1) backwards;
}
.alt-word:nth-child(2) > span { animation-delay: .12s; }
.alt-word:nth-child(3) > span { animation-delay: .24s; }
@keyframes alt-sharpen {
  from { opacity: .35; transform: translateY(14%); filter: blur(8px); }
  to   { opacity: 1;   transform: none;           filter: none; }
}
@keyframes alt-soft-in {
  from { opacity: .3; filter: blur(4px); }
  to   { opacity: 1;  filter: none; }
}
.alt-word--accent > span {
  color: var(--alt-accent, #a5220f);
}
.alt-sub {
  margin: 16px 0 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(.82rem, .4vw + .72rem, 1.05rem);
  font-weight: 700;
  letter-spacing: .34em;
  /* letter-spacing also trails the last letter; indent the same amount so
     the line is optically centred */
  text-indent: .34em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #0a0a0a;
  /* tight halo: keeps small text crisp */
  text-shadow: 0 0 2px rgba(255, 250, 240, .7), 0 0 8px rgba(255, 250, 240, .35);
  animation: alt-soft-in 1s .4s ease-out backwards;
}
.alt-sub::before,
.alt-sub::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  margin: 0 16px;
  vertical-align: middle;
  background: var(--alt-accent, #a5220f);
}
.alt-lead {
  max-width: 36ch;
  margin: 14px auto 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(1rem, .5vw + .9rem, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  color: #0a0a0a;
  text-shadow: 0 0 2px rgba(255, 250, 240, .6), 0 0 10px rgba(255, 250, 240, .35);
  animation: alt-soft-in 1s .55s ease-out backwards;
}

/* ---- Scroll hint ------------------------------------------------------- */
.alt-hint {
  position: absolute;
  right: max(24px, 3vw);
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #0a0a0a;
  pointer-events: none;
}
.alt-hint i {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(10, 10, 10, .25);
}
.alt-hint i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--alt-accent, #a5220f);
  animation: alt-hint 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes alt-hint { to { top: 100%; } }

/* ---- Layers 2 + 3: beach clip, flight clip — full-bleed, see-through --- */
.alt-clip {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.alt-clip video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  will-change: transform, filter;
}
/* Darkens the side the copy sits on (left on desktop, bottom on phones). */
.alt-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .6) 100%);
  opacity: var(--shade, 1);
}
.alt-flug { transform-origin: 50% 50%; }

/* ---- Process copy (over the clips) ------------------------------------ */
.alt-process {
  position: absolute;
  left: max(64px, 7vw);
  top: 50%;
  width: min(42vw, 560px);
  transform: translateY(-50%);
  pointer-events: none;
}
.alt-intro,
.alt-step {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  opacity: 0;
}
.alt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--alt-accent-light, #e4442a);
}
.alt-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.alt-intro h2 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: .98;
  text-transform: uppercase;
  color: var(--alt-text, #f1ece6);
}
.alt-intro h2 em,
.alt-contact-head h2 em {
  font-style: normal;
  color: var(--alt-accent-light, #e4442a);
}
.alt-intro p {
  margin: 22px 0 0;
  max-width: 40ch;
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(1rem, .35vw + .92rem, 1.18rem);
  line-height: 1.6;
  color: rgba(241, 236, 230, .86);
}
.alt-step-num {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--alt-accent-light, #e4442a);
}
.alt-step-kicker {
  display: block;
  margin: 18px 0 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--alt-accent-light, #e4442a);
}
.alt-step h3 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--alt-text, #f1ece6);
  clip-path: inset(0 0 100% 0);
}
.alt-step p {
  margin: 18px 0 0;
  max-width: 42ch;
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(.98rem, .3vw + .9rem, 1.12rem);
  line-height: 1.65;
  color: rgba(241, 236, 230, .86);
}

/* Progress rail under the steps */
.alt-rail {
  position: absolute;
  left: max(64px, 7vw);
  bottom: max(40px, 7vh);
  display: flex;
  gap: 10px;
  width: min(42vw, 560px);
  opacity: 0;
}
.alt-rail span {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: rgba(241, 236, 230, .2);
}
.alt-rail span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--alt-accent-light, #e4442a);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}

/* ---- Contact: scrolls up over the zooming-out still -------------------- */
.alt-contact {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 45vh max(64px, 7vw) 22vh;
  box-sizing: border-box;
}
.alt-contact-head h2 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 4.8rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--alt-text, #f1ece6);
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}
.alt-contact-head > p:last-child {
  margin: 22px 0 0;
  max-width: 40ch;
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(1rem, .35vw + .92rem, 1.18rem);
  line-height: 1.6;
  color: rgba(241, 236, 230, .88);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7);
}
.alt-contact-panel {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--alt-line, rgba(241, 236, 230, .14));
  border-radius: 16px;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
}
.alt-contact-title {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--alt-text, #f1ece6);
}
.alt-contact-text {
  margin: 10px 0 22px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--alt-text-muted, rgba(241, 236, 230, .72));
}
.alt-contact .gwc-form { width: 100%; }

/* ---- Phones ------------------------------------------------------------ */
@media screen and (max-width: 899px) {
  .alt-track { height: 720vh; }
  /* no room next to the headline in the water on phones */
  .alt-hint { display: none; }
  /* show the right-hand part of the Isar clip so the church is in view
     (keep in sync with ISAR_POS_X_PHONE in alt-scene.js) */
  .alt-isar video { object-position: 86% 50%; }
  .alt-sub {
    font-size: .8rem;
    letter-spacing: .2em;
    text-indent: .2em;
  }
  .alt-sub::before,
  .alt-sub::after { width: 16px; margin: 0 8px; }
  .alt-clip::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .88) 72%, rgba(0, 0, 0, .95) 100%);
  }
  .alt-process {
    left: 6vw;
    right: 6vw;
    top: auto;
    bottom: 84px;
    height: 58vh;
    width: auto;
    transform: none;
  }
  .alt-intro,
  .alt-step { top: auto; bottom: 0; transform: none; }
  .alt-step-num { font-size: 3.6rem; }
  .alt-step-kicker { margin: 10px 0 6px; }
  .alt-step h3 { font-size: 2rem; }
  .alt-step p { margin-top: 10px; font-size: .95rem; line-height: 1.55; }
  .alt-intro h2 { font-size: 2.6rem; }
  .alt-intro p { margin-top: 14px; font-size: .98rem; }
  .alt-eyebrow { margin-bottom: 12px; }
  .alt-rail { left: 6vw; right: 6vw; width: auto; bottom: 36px; }
  .alt-contact {
    grid-template-columns: 1fr;
    padding: 55vh 6vw 14vh;
  }
}

/* ---- Reduced motion: no scroll scene, everything readable in order ----- */
.alt-scene.is-static .alt-track { display: none; }
.alt-scene.is-static .alt-stage { position: relative; height: auto; overflow: visible; padding-bottom: 80px; }
.alt-scene.is-static .alt-isar { position: relative; height: 100svh; }
.alt-scene.is-static .alt-sub,
.alt-scene.is-static .alt-lead,
.alt-scene.is-static .alt-intro,
.alt-scene.is-static .alt-step { opacity: 1; }
.alt-scene.is-static .alt-word > span { transform: none; }
.alt-scene.is-static .alt-step h3 { clip-path: none; }
.alt-scene.is-static .alt-hint,
.alt-scene.is-static .alt-rail,
.alt-scene.is-static .alt-flug,
.alt-scene.is-static .alt-strand2 { display: none; }
.alt-scene.is-static .alt-strand {
  position: relative;
  opacity: 1;
  height: 70svh;
  margin-bottom: 56px;
}
.alt-scene.is-static .alt-clip::after { display: none; }
.alt-scene.is-static .alt-process {
  position: relative;
  left: auto; top: auto; right: auto; bottom: auto;
  height: auto;
  width: min(88vw, 720px);
  margin: 0 auto;
  transform: none;
  display: grid;
  gap: 56px;
}
.alt-scene.is-static .alt-intro,
.alt-scene.is-static .alt-step { position: relative; top: auto; bottom: auto; transform: none; }
.alt-scene.is-static .alt-contact { padding-top: 80px; }

/* ==========================================================================
   Aktuelles: the three posts fly in from left, bottom and right
   (alt-sections.js plays it once when the section comes into view).
   ========================================================================== */
.alt-scene ~ .gwc-news { position: relative; z-index: 1; overflow: hidden; }
.gwc-news .gwc-news-card { will-change: transform, opacity, filter; }

/* ==========================================================================
   Abschlussbild: Siegestor — zooms from the inside out, light trails glow
   and leave an afterglow while scrolling (alt-sections.js).
   ========================================================================== */
.alt-finale {
  position: relative;
  width: 100%;
  align-self: stretch;
  background: var(--alt-black, #000);
}
.alt-finale-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3766 / 2146;
  overflow: hidden;
}
.alt-finale-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% 70%;
  will-change: transform;
}
.alt-finale-img,
.alt-trail,
.alt-flow-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Performance: every effect layer is pre-rendered (blur, brightness and
   saturation are baked into the WebP files) and only opacity / transform
   are animated, so the GPU composites them without repainting. */
.alt-trail {
  pointer-events: none;
  mix-blend-mode: screen;
}
.alt-trail--glow { opacity: .8; }
.alt-trail--ghost { opacity: 0; will-change: transform, opacity; }

/* Light pulses — played ONCE, strongly, when the picture comes into view
   (alt-sections.js adds .is-played), then the layers are removed
   (.is-done) so nothing keeps running or holding GPU memory.
   A window (28 % of the frame) slides across the frame while the bright
   trails image inside it slides the opposite way by the same amount, so the
   trails stay put and only the window moves — transform only, composited.
   window: translateX(-100% → 357%) of its own width = across the frame;
   image (1/0.28 = 357 % of the window): translateX(28% → -100%) = the same
   distance back. White/blue trails run left → right, red right → left. */
.alt-flow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.alt-flow-img {
  right: auto;
  width: 357.15%;
}
.alt-finale.is-played .alt-flow {
  will-change: transform, opacity;
  animation: alt-flow-window 2.6s cubic-bezier(.5, 0, .3, 1) 1 both;
}
.alt-finale.is-played .alt-flow-img {
  will-change: transform;
  animation: alt-flow-image 2.6s cubic-bezier(.5, 0, .3, 1) 1 both;
}
.alt-finale.is-played .alt-flow--red,
.alt-finale.is-played .alt-flow--red .alt-flow-img {
  animation-delay: .25s;
  animation-direction: reverse;
}
@keyframes alt-flow-window {
  0%   { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(357%);  opacity: 1; }
}
@keyframes alt-flow-image {
  from { transform: translateX(28%); }
  to   { transform: translateX(-100%); }
}
/* the glow swells once with the pulse and settles */
.alt-finale.is-played .alt-trail--glow {
  animation: alt-glow-swell 3.2s ease-in-out 1 both;
}
@keyframes alt-glow-swell {
  0%   { opacity: .8; }
  45%  { opacity: 1; }
  100% { opacity: .85; }
}
.alt-finale.is-done .alt-flow { display: none; }

/* Phones: a taller crop on the gate and the light trails, so the zoom and
   the trails have room to show (all layers share the same crop). */
@media screen and (max-width: 767px) {
  .alt-finale-frame { aspect-ratio: 4 / 5; }
  .alt-finale-img,
  .alt-trail,
  .alt-flow-img { object-position: 38% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-trail--ghost,
  .alt-flow { display: none; }
  .alt-finale.is-played .alt-trail--glow { animation: none; }
}


@media (prefers-reduced-motion: reduce) {
  .alt-word > span, .alt-sub, .alt-lead { animation: none; }
}

/* The clips are scaled / blurred by the chapter moves: give them their own
   compositing layer up front, so the first frame of a move doesn't pay for
   creating it. (Text layers stay un-promoted so they render crisp.) */
.alt-stage video {
  will-change: transform;
}