/* ============================================================
   Lumos Hookah — Premium FX Layer  ·  "Editorial Luxury"
   Additiv & reversibel. Greift NUR on top von landing.css.
   Respektiert prefers-reduced-motion.
   ============================================================ */

/* 1) Display-Serif für Headlines (Inter bleibt Body) */
.hero-headline,
.section-heading,
.feature-title {
    font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
    letter-spacing: -0.015em;
}
.hero-headline {
    font-weight: 600;
    line-height: 1.04;
}
.section-heading { font-weight: 600; }

/* 2) Gold-Shimmer auf Akzent-Wörtern */
.hero-headline .gold,
.section-heading .gold {
    background: linear-gradient(100deg,
        #b07a1e 0%, #e8b84b 22%, #fff4cf 48%, #e8b84b 74%, #b07a1e 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: fx-shimmer 6.5s linear infinite;
}
@keyframes fx-shimmer { to { background-position: 220% center; } }

/* 3) Hero: Aurora-Gold-Glow + feines Korn (Elemente per JS injiziert) */
.hero { position: relative; isolation: isolate; }
.fx-aurora {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    filter: blur(64px); opacity: 0.5;
    background:
      radial-gradient(38% 48% at 22% 18%, rgba(201,148,58,0.40), transparent 70%),
      radial-gradient(34% 44% at 82% 8%,  rgba(245,212,134,0.24), transparent 70%),
      radial-gradient(46% 56% at 62% 70%, rgba(150,100,30,0.32),  transparent 72%);
    animation: fx-aurora-drift 20s ease-in-out infinite alternate;
}
@keyframes fx-aurora-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0)  scale(1.14); }
}
.fx-grain {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}
/* Hero-Inhalt über die FX-Layer heben */
.hero > .container { position: relative; z-index: 2; }
.hero .smoke-clouds { z-index: 1; }

/* 4) Cursor-Glow (nur Desktop, per JS) */
.fx-cursor {
    position: absolute; top: 0; left: 0;
    width: 420px; height: 420px; margin: -210px 0 0 -210px;
    border-radius: 50%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle, rgba(201,148,58,0.16), transparent 62%);
    opacity: 0; transition: opacity 0.35s ease; will-change: transform;
}

/* 5) Button-Shine-Sweep auf der Primär-CTA */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ''; position: absolute; top: 0; left: -120%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
    transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after { animation: fx-shine 0.85s ease; }
@keyframes fx-shine { to { left: 150%; } }

/* 6) Hero-Cards: sanftes Anheben + Gold-Glow beim Hover */
.hcard { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; }
.hcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 44px rgba(201,148,58,0.18);
    border-color: rgba(201,148,58,0.42);
}

/* ── Reduced Motion: alles Bewegte ruhigstellen ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-headline .gold, .section-heading .gold { animation: none; }
    .fx-aurora { animation: none; }
    .btn-primary:hover::after { animation: none; }
    .hcard { transition: none; }
    .hcard:hover { transform: none; }
    .fx-cursor { display: none; }
}