/**
 * ge-animations.css — Gallium Estate v49.3
 * Micro-Animationen, ge-reveal, Hover-System
 * VERBINDLICH: Diese Werte gelten überall, keine Abweichungen
 */

/* ════════════════════════════════════════════
   GE-REVEAL — Scroll-Animation
   Auf jede section und wichtige Kinder-Elemente setzen.
   JavaScript (header.php) beobachtet mit IntersectionObserver.
════════════════════════════════════════════ */
.ge-reveal,
.ge-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.ge-reveal.is-visible,
.ge-reveal.in,
.ge-fade.is-visible,
.ge-fade.in {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Kinder */
.ge-reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* D-13 v68: Catch-All zuerst — gilt für ALLE Kinder wenn sichtbar.
   Die spezifischen nth-child-Regeln darunter überschreiben 1–6 mit individuellem Delay.
   Ohne diese Regel blieben Items 7+ dauerhaft unsichtbar (opacity:0). */
.ge-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
  transition-delay: .42s;
}
.ge-reveal-stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: .05s; }
.ge-reveal-stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: .12s; }
.ge-reveal-stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: .19s; }
.ge-reveal-stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: .26s; }
.ge-reveal-stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: .33s; }
.ge-reveal-stagger.is-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: .40s; }

/* Bereits sichtbar beim Laden (above fold) */
.ge-reveal--instant {
  opacity: 1 !important;
  transform: none !important;
}

/* ════════════════════════════════════════════
   HOVER-SYSTEM — überall identisch
   VERBINDLICH: nur diese Werte verwenden
════════════════════════════════════════════ */

/* Standard Karte hover */
.ge-card-hover {
  transition: transform var(--transition), box-shadow var(--transition);
}
.ge-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* Bild zoom hover */
.ge-img-zoom {
  overflow: hidden;
}
.ge-img-zoom img {
  transition: transform .45s var(--ease);
}
.ge-img-zoom:hover img {
  transform: scale(1.04);
}

/* Link underline hover */
.ge-link-hover {
  transition: color var(--transition);
  text-underline-offset: 3px;
}
.ge-link-hover:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ════════════════════════════════════════════
   GRAIN OVERLAY (Hero-Textur)
════════════════════════════════════════════ */
.ge-hero-premium__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ════════════════════════════════════════════
   ORB / GLOW (Hero-Lichter)
════════════════════════════════════════════ */
/* D-01 v68: asymmetrische Orbs, Blur 120px, Farben differenziert (Navy + Gold) */
.ge-hero-premium__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ge-hero-premium__orb--1 {
  /* Gold-Glow oben rechts — warm, breit */
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(201,168,106,.09), transparent 65%);
  filter: blur(120px);   /* statisch — blur NICHT animieren (Main-Thread-Killer) */
  top: -140px;
  right: 8%;
  /* will-change: eigene Compositor-Ebene → kein Layout-Reflow beim Animieren */
  will-change: transform, opacity;
  animation: ge-orb-gold 10s ease-in-out infinite;
}
.ge-hero-premium__orb--2 {
  /* Navy-Tiefenglow unten links — kühl, kompakter */
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(14,32,64,.75), transparent 70%);
  filter: blur(90px);    /* statisch */
  bottom: -40px;
  left: 3%;
  will-change: transform, opacity;
  animation: ge-orb-navy 12s ease-in-out infinite;
  animation-delay: -5s;
}
/* Nur opacity + transform animieren — filter/blur NIEMALS in Keyframes!
   filter:blur() Animation = teuerste CSS-Op, blockiert Compositor */
@keyframes ge-orb-gold {
  0%, 100% { opacity: .55; transform: scale(1) translate(0, 0); }
  33%       { opacity: .85; transform: scale(1.06) translate(12px, -8px); }
  66%       { opacity: .65; transform: scale(.97) translate(-6px, 10px); }
}
@keyframes ge-orb-navy {
  0%, 100% { opacity: .7; transform: scale(1) translate(0, 0); }
  50%       { opacity: 1;  transform: scale(1.1) translate(8px, -12px); }
}

/* ════════════════════════════════════════════
   BADGE / DOT (Hero Badge)
════════════════════════════════════════════ */
.ge-hero-premium__badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: ge-dot-pulse 2s ease-in-out infinite;
}
@keyframes ge-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,106,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(201,168,106,0); }
}

/* ════════════════════════════════════════════
   SPINNER (Loading)
════════════════════════════════════════════ */
.ge-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(201,168,106,.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ge-spin .8s linear infinite;
}
@keyframes ge-spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════
   JAVASCRIPT — IntersectionObserver
   Wird in header.php oder functions.php geladen.
   Fügt .is-visible zu .ge-reveal Elementen hinzu.
════════════════════════════════════════════ */
/*
  document.addEventListener('DOMContentLoaded', function() {
    var io = new IntersectionObserver(function(entries) {
      entries.forEach(function(e) {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08 });
    document.querySelectorAll('.ge-reveal, .ge-fade, .ge-reveal-stagger')
      .forEach(function(el) { io.observe(el); });
  });
*/

/* ── v75: Delay-Utilities für ge-reveal ─── */
.ge-reveal--delay-1 { --ge-reveal-delay: .12s; }
.ge-reveal--delay-2 { --ge-reveal-delay: .24s; }
.ge-reveal--delay-3 { --ge-reveal-delay: .36s; }

/* ════════════════════════════════════════════
   v117 PREMIUM ANIMATIONS
════════════════════════════════════════════ */

/* Gold Shimmer — für Badges, KPI-Werte, CTAs */
@keyframes ge-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.ge-shimmer {
  background: linear-gradient(
    90deg,
    var(--gold-d) 0%,
    var(--gold-l) 40%,
    var(--gold)   50%,
    var(--gold-l) 60%,
    var(--gold-d) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ge-shimmer 3.5s linear infinite;
}

/* Fade-In von unten mit Blur — für Modal-Inhalte, Tooltips */
@keyframes ge-fade-up-blur {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
.ge-fade-up-blur { animation: ge-fade-up-blur .4s var(--ease) both; }

/* Scale-In — für Badges, Icons */
@keyframes ge-scale-in {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
.ge-scale-in { animation: ge-scale-in .35s var(--ease) both; }

/* Slide-In von rechts — für Sidebar, Mobile-Nav */
@keyframes ge-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.ge-slide-right { animation: ge-slide-right .4s var(--ease) both; }

/* Puls — für CTAs, wichtige Badges */
@keyframes ge-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0   rgba(201,168,106,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(201,168,106,0); }
}
.ge-pulse { animation: ge-pulse-gold 2.6s ease-in-out infinite; }

/* Floating — für Hero-Badges, dekorative Elemente */
@keyframes ge-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.ge-float { animation: ge-float 4s ease-in-out infinite; }

/* Glow-Border — für Featured Cards, CTA-Boxen */
@keyframes ge-glow-border {
  0%, 100% { border-color: rgba(201,168,106,.2); box-shadow: 0 0 0   0 rgba(201,168,106,0); }
  50%       { border-color: rgba(201,168,106,.5); box-shadow: 0 0 20px 4px rgba(201,168,106,.08); }
}
.ge-glow-border { animation: ge-glow-border 3s ease-in-out infinite; }

/* Stagger-Delays für ge-reveal-stagger — erweitert auf 10 Items */
.ge-reveal-stagger.is-visible > *:nth-child(7)  { opacity:1; transform:none; transition-delay: .47s; }
.ge-reveal-stagger.is-visible > *:nth-child(8)  { opacity:1; transform:none; transition-delay: .54s; }
.ge-reveal-stagger.is-visible > *:nth-child(9)  { opacity:1; transform:none; transition-delay: .61s; }
.ge-reveal-stagger.is-visible > *:nth-child(10) { opacity:1; transform:none; transition-delay: .68s; }

/* Horizontal Stagger — für Stat-Leisten */
.ge-reveal-stagger--h > * {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.ge-reveal-stagger--h.is-visible > *         { opacity: 1; transform: none; transition-delay: .42s; }
.ge-reveal-stagger--h.is-visible > *:nth-child(1) { transition-delay: .05s; }
.ge-reveal-stagger--h.is-visible > *:nth-child(2) { transition-delay: .12s; }
.ge-reveal-stagger--h.is-visible > *:nth-child(3) { transition-delay: .19s; }
.ge-reveal-stagger--h.is-visible > *:nth-child(4) { transition-delay: .26s; }

/* Mobile: Scroll-Einblend-Animationen + Orb-Scale deaktivieren */
@media (max-width: 768px) {
  .ge-reveal,
  .ge-fade,
  .ge-reveal-stagger > *,
  .ge-reveal-stagger--h > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  /* Orb-Animationen: scale(1.1) ohne overflow:hidden bläht das Hero-Bild auf */
  .ge-hero-premium__orb {
    animation: none !important;
    transform: none !important;
  }
}

/* Spotlight Hover — subtiler Lichteffekt beim Karten-Hover */
.ge-card--spotlight {
  position: relative;
  isolation: isolate;
}
.ge-card--spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(201,168,106,.07) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
}
.ge-card--spotlight:hover::before { opacity: 1; }

/* Count-Up — Klasse die JS-count-up-Animationen markiert */
.ge-count-up {
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}

/* Delay-Utilities erweitert */
.ge-reveal--delay-4 { transition-delay: .48s; }
.ge-reveal--delay-5 { transition-delay: .60s; }

/* Line-Draw — dekorative horizontale Linie die aufzieht */
@keyframes ge-line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.ge-line-draw {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-d), var(--gold-l), var(--gold-d));
  transform-origin: left center;
  animation: ge-line-draw .8s var(--ease) both;
}