/*
 * animations.css — Jonathan & Sara Wedding
 * Dezente, elegante Animationen. Additiv zu style.css.
 * Alle nicht-essentiellen Bewegungen unter prefers-reduced-motion: no-preference.
 * Keine Bewegungen unter prefers-reduced-motion: reduce.
 * JS-Fallback: Elemente bleiben ohne html.js-Klasse immer sichtbar.
 */


/* ============================================================
   1. HERO KEN BURNS — sehr langsamer Zoom auf .hero .hero-bg
   ============================================================ */

@keyframes hero-ken-burns {
  0%   { transform: scale(1);    }
  100% { transform: scale(1.02); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .hero-bg {
    animation: hero-ken-burns 20s ease-in-out alternate infinite;
    will-change: transform;
  }
}


/* ============================================================
   2. ORNAMENT — Einblenden mit optionalem Strich-Zeichnen
   ============================================================
   Fallback-Sicherheit:
   - Standard: .ornament ist opacity: 1 (ohne JS immer sichtbar)
   - html.js .ornament: opacity: 0 (versteckt, wartet auf .drawn)
   - html.js .ornament.drawn: opacity: 1 (eingeblendet)
   Alles nur unter no-preference, damit reduced-motion nichts versteckt.
   ============================================================ */

/* Sicherer Standard — IMMER sichtbar (ohne JS, ohne IntersectionObserver,
   bei reduced-motion). Das Ornament wird nie dauerhaft versteckt. */
.ornament {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* Draw-in nur als EINMALIGE Animation, wenn die Klasse .drawn gesetzt wird.
     Die Basis bleibt opacity:1 -> faellt der Trigger (JS/Observer) aus,
     ist das Ornament trotzdem voll sichtbar. */
  @keyframes orn-in {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes orn-line { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
  @keyframes orn-dot  { from { opacity: 0; } to { opacity: 1; } }

  html.js .ornament.drawn { animation: orn-in 0.9s ease both; }
  html.js .ornament.drawn line {
    stroke-dasharray: 200;
    animation: orn-line 1.1s ease 0.15s both;
  }
  html.js .ornament.drawn circle,
  html.js .ornament.drawn ellipse {
    animation: orn-dot 0.6s ease 0.5s both;
  }
}


/* ============================================================
   3. NAV-HOVER — goldene Unterstreichung wächst von links
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  .nav-menu a:not(.nav-cta) {
    position: relative;
    text-decoration: none;
  }

  .nav-menu a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: var(--gold, #c2a253);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
  }

  .nav-menu a:not(.nav-cta):hover::after,
  .nav-menu a:not(.nav-cta).active::after {
    transform: scaleX(1);
  }
}

/* Aktiver Link ohne Bewegung auch bei reduced-motion sichtbar */
@media (prefers-reduced-motion: reduce) {

  .nav-menu a:not(.nav-cta) {
    position: relative;
    text-decoration: none;
  }

  .nav-menu a:not(.nav-cta).active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: var(--gold, #c2a253);
  }
}


/* ============================================================
   4. BUTTON-HOVER — sanftes Anheben + weicher Schatten
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  .btn,
  .btn-gold,
  .btn-light {
    transition:
      transform  0.25s ease,
      box-shadow 0.25s ease;
  }

  .btn:hover,
  .btn-gold:hover,
  .btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(194, 162, 83, 0.22);
  }

  .btn:active,
  .btn-gold:active,
  .btn-light:active {
    transform: translateY(0);
    box-shadow: none;
  }
}


/* ============================================================
   5. KARTEN-HOVER — dünne goldene Linie wächst von der Mitte
      (translateY ist in style.css — hier NICHT duplizieren)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  .card,
  .nearby-card,
  .stay-item,
  .team-card,
  .desc-item,
  .loc-card {
    position: relative;
    overflow: hidden; /* Linie wird abgeschnitten wenn außerhalb */
  }

  .card::after,
  .nearby-card::after,
  .stay-item::after,
  .team-card::after,
  .desc-item::after,
  .loc-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gold, #c2a253);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease;
  }

  .card:hover::after,
  .nearby-card:hover::after,
  .stay-item:hover::after,
  .team-card:hover::after,
  .desc-item:hover::after,
  .loc-card:hover::after {
    transform: scaleX(1);
  }
}


/* ============================================================
   6. COUNTDOWN-ZAHLEN — subtiles Aufscheinen beim Einblenden
   ============================================================ */

@keyframes cd-appear {
  0%   { opacity: 0.4; transform: scale(0.96); }
  100% { opacity: 1;   transform: scale(1);    }
}

@media (prefers-reduced-motion: no-preference) {
  .cd-num {
    animation: cd-appear 0.6s ease both;
  }
}


/* ============================================================
   7. REVEAL — Stagger-Delay via CSS-Custom-Property
      Basis (opacity, translateY, transition) bleibt in style.css.
      Nur transition-delay wird hier ergaenzt.
   ============================================================ */

.reveal {
  transition-delay: var(--d, 0s);
}