/* ============================================================
   Sposa Favola — Cinematic Intro
   spielt einmal pro Session, fade auf den Hero
   ============================================================ */

/* Body-Lock während Intro */
body.intro-active {
  overflow: hidden;
  height: 100vh;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 900ms;
  /* hidden by default — JS toggles .is-active */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.intro.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* Subtle radial vignette — gold-warm in der Mitte, dunkler an den Kanten */
.intro__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 250, 240, 0.4) 0%,
      rgba(250, 246, 240, 0) 50%,
      rgba(35, 26, 20, 0.08) 100%
    );
  pointer-events: none;
}

/* Stage */
.intro__stage {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--space-6);
  width: 100%;
  max-width: 920px;
}

/* Three rotating words — shrinks to 0 after final word so finale floats to center */
.intro__words {
  position: relative;
  margin: 0;
  height: clamp(80px, 14vh, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro__words.is-empty {
  height: 0;
}

.intro__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 5rem);
  line-height: 1;
  color: var(--color-text-ink);
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}

.intro__word.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro__word.is-out {
  opacity: 0;
  transform: translateY(-16px);
  filter: blur(8px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.6, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.6, 1),
              filter 600ms cubic-bezier(0.4, 0, 0.6, 1);
}

/* Finale: brand wordmark + line + tagline */
.intro__finale {
  margin-top: clamp(var(--space-8), 6vh, var(--space-16));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro__finale.is-in { opacity: 1; }

.intro__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 1;
  color: var(--color-text-ink);
  letter-spacing: -0.02em;
}

.intro__brand-line {
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-accent-gold);
  transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro__finale.is-in .intro__brand-line {
  width: clamp(80px, 18vw, 180px);
}

.intro__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  color: var(--color-accent-wine);
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro__finale.is-in .intro__tagline {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Signature-Card — Klaude.Tech Production Credit
   (bottom right; bleibt die ganzen 5,2s sichtbar)
   ============================================================ */
.intro__signature {
  position: absolute;
  bottom: clamp(var(--space-6), 4vh, var(--space-12));
  right: clamp(var(--space-6), 4vw, var(--space-12));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  text-align: right;
  opacity: 0;
  /* Sofort da: kein Delay, schneller Fade */
  animation: introFadeIn 350ms 50ms ease-out forwards;
  font-family: var(--font-body);
  max-width: 280px;
}

.intro__signature-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.intro__signature-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}

.intro__signature-mark {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-text-ink);
  text-decoration: none;
  transition: color 200ms ease;
}

.intro__signature-mark:hover {
  color: var(--color-accent-wine);
}

.intro__signature-dot {
  color: var(--color-accent-gold);
}

.intro__signature-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-accent-gold);
  opacity: 0.7;
  margin-block: var(--space-1);
}

.intro__signature-slogan {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-text-mute);
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
  max-width: 220px;
}

.intro__signature-slogan em {
  font-style: italic;
}

.intro__signature-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-text-ink);
  color: var(--color-bg-ivory);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}

.intro__signature-phone:hover {
  background: var(--color-accent-wine);
  transform: translateY(-1px);
}

.intro__signature-phone-label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
}

.intro__signature-phone-number {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.intro__signature-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-ivory);
  border: 1px solid var(--color-line);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.intro__signature-qr:hover {
  border-color: var(--color-accent-gold);
  transform: translateY(-1px);
}

.intro__signature-qr img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: contrast(1.05);
}

.intro__signature-qr-caption {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}

@keyframes introFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro__word,
  .intro__finale,
  .intro__brand-line,
  .intro__tagline {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  .intro {
    transition-duration: 200ms !important;
  }
}

/* Mobile-specific tweaks */
@media (max-width: 600px) {
  .intro__signature {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
    align-items: stretch;
    gap: var(--space-2);
  }
  .intro__signature-head { align-items: flex-start; }
  .intro__signature-slogan { max-width: 100%; }
  .intro__signature-phone {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
  }
  .intro__signature-qr {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }
  .intro__signature-qr img {
    width: 70px;
    height: 70px;
  }
  .intro__signature-qr-caption {
    text-align: left;
  }
  .intro__brand-line {
    margin-block: var(--space-2);
  }
}