/* ============================================================
   KRAUTH+WERNET — contact.css
   Nur Contact-Seite-spezifische Styles.
   Wird NACH global.css geladen.
   ============================================================ */

/* ---------- CONTACT HEADLINE ---------- */
.contact-headline {
  position: fixed;
  z-index: 5;
  bottom: min(160px, 15vh);
  left: var(--margin-x);
  /* Width: 1.5 Columns + Gutter */
  width: calc(
    ((100vw - 2 * var(--margin-x) - 2 * var(--gutter)) / 3) * 1.5
    + var(--gutter)
  );
  margin: 0;
  font-family: var(--font-head);
  font-weight: 300;
  font-style: normal;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.055em;
  color: var(--ink);
  pointer-events: none;
}

/* Lazy-load animation for headline */
.contact-headline {
  opacity: 1;
  transition: opacity 1.1s ease-out .15s;
}
.is-loading .contact-headline {
  opacity: 0;
  transition: none;
}

/* Word-by-word staggered reveal */
.contact-headline .word {
  display: inline-block;
  opacity: 0;
  transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-headline .word.is-visible {
  opacity: 1;
}

/* ---------- HEADLINE SETTLE REVEAL (1:1 wie die Photo-Intro-Animation) ---------- */
/* Startzustand: aufgeweitete line-height + Wörter ausgeblendet.
   Beim Entfernen von .is-hidden läuft die line-height von 65→50 px zusammen,
   während die Wörter (per JS verzögert) gestaffelt einfaden. */
.contact-headline.is-hidden {
  pointer-events: none;
}
.contact-headline.is-hidden .word {
  opacity: 0;
}
/* Reveal-Transitions (aktiv, sobald is-loaded gesetzt ist) */
.is-loaded .contact-headline {
  transition: line-height 3s cubic-bezier(0.05, 0.95, 0.15, 1);
}
.is-loaded .contact-headline .word {
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hidden-Startzustand unter is-loaded — spiegelt den "from"-Zustand */
.is-loaded .contact-headline.is-hidden {
  line-height: 65px;
  transition: line-height 1.8s cubic-bezier(0.4, 0, 0.6, 1);
}
.is-loaded .contact-headline.is-hidden .word {
  opacity: 0;
  transition: opacity .8s cubic-bezier(0.4, 0, 0.6, 1);
}

/* ---------- CONTACT ACTIONS ---------- */
/* Mobile: below headline. Desktop: positioned at footer cluster 1 location */
.contact-actions {
  position: fixed;
  z-index: 10;
  bottom: 16px;
  left: var(--margin-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: auto;
}
/* Lazy-load */
.contact-actions {
  opacity: 1;
}
/* Fade + Slide wie die About-Overline-Pill: opacity 0→1 + translateY(8px)→0 */
.contact-actions .btn--highlight.is-staggered {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-actions .btn--highlight.is-staggered.reveal {
  opacity: 1;
  transform: translateY(0);
}
.is-loading .contact-actions .btn--highlight {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

/* ---------- CONTACT PAGE — active state for header pill ---------- */
.contact-page .contact-btn {
  border-color: var(--accent);
}

/* Hide normal footer email/phone — replaced by highlight buttons */
.contact-page .footer-cluster--1 {
  display: none;
}

/* ---------- >=2300px BREAKPOINT ---------- */
@media (min-width: 2300px) {
  .contact-headline {
    font-size: 69px;
    line-height: 69px;
    width: calc((100vw - 2 * var(--margin-x) - 2 * var(--gutter)) / 3);
  }
  /* Aufgeblähter Startzustand proportional angepasst (69→90 statt 50→65) */
  .is-loaded .contact-headline.is-hidden {
    line-height: 90px;
  }
}

/* ---------- CONTACT PAGE — MOBILE ---------- */
@media (max-width: 768px) {
  /* Headline: relative flow, not fixed */
  .contact-headline {
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    font-size: 41px;
    line-height: 42px;
    padding-top: 33vh;
    padding-left: var(--margin-x);
    padding-right: var(--margin-x);
  }

  /* Fix gegen die "plötzlich am Ende erscheinenden" Ober-/Unterlängen (v.a. »f«):
     Beim per-Wort-Opacity-Fade schneidet der Compositing-Buffer jedes Worts die
     über die Zeilenbox hinausragende Glyphen-Tinte ab. Vertikales Padding fängt
     Ober-/Unterlängen; horizontales Padding + kompensierende Gegen-Margin fängt
     seitlich überstehende Tinte (den oberen f-Haken), ohne den Wortabstand zu
     ändern. Wortspans hier auf display:inline, damit vertikales Padding
     layout-neutral bleibt (kein Zeilenversatz). Nur mobil; Desktop unberührt.
     Gleicher Fix wie .intro .line auf der Photo-Seite. */
  .contact-headline .word {
    display: inline;
    padding: 0.5em 0.2em;
    margin: 0 -0.2em;
  }

  /* Kein line-height-Settle auf Mobile (Headline im Fluss → line-height-Sprung
     würde die Buttons verschieben), aber dieselbe dezente Positions-Animation
     wie die Photo-Intro: ein 15px translateY-Slide. transform verschiebt kein
     Layout → die Buttons darunter bleiben ruhig. */
  .is-loaded .contact-headline {
    transition: transform 3s cubic-bezier(0.05, 0.95, 0.15, 1);
  }
  .is-loaded .contact-headline.is-hidden {
    line-height: 42px;
    transform: translateY(15px);
    transition: transform 1.8s cubic-bezier(0.4, 0, 0.6, 1);
  }

  /* Contact actions: below headline in flow */
  .contact-actions {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 24px;
    padding-left: var(--margin-x);
    padding-bottom: 200px; /* space for fixed menu/footer */
  }
}