/* KynxVale Website – Effekt-Schicht (30.10.2026, Overhaul "alles noch krasser").
   Liegt ueber site.css: Hero-Emblem, Glutpartikel, Lichtstrahlen, Wort-Animationen, 3D-Karten, Zaehler, Laufband,
   Scroll-Fortschritt, Cursor-Licht. Logik in assets/js/fx.js. Alles respektiert prefers-reduced-motion. */

/* ---------- Scroll-Fortschritt ---------- */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 500; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, rgba(230, 190, 98, 0), var(--gold) 30%, var(--gold-2) 70%, #fff6dc); box-shadow: 0 0 12px rgba(230, 190, 98, .7); }

/* ---------- Cursor-Licht (nur Desktop) ---------- */
.fx-cursor { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(circle, rgba(230, 190, 98, .085), rgba(95, 212, 196, .03) 40%, transparent 68%);
    transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0); transition: opacity .6s; opacity: 0; }
.fx-cursor.on { opacity: 1; }

/* ---------- Hero ---------- */
.hero { min-height: min(100vh, 1040px); }
.hero-media img { animation: none; transform: translate3d(0, var(--hy, 0px), 0) scale(1.12); will-change: transform; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1100px 700px at var(--mx, 70%) var(--my, 40%), rgba(255, 214, 140, .10), transparent 60%); mix-blend-mode: screen; transition: background-position .2s; }
.hero-rays { position: absolute; inset: -30% -10% 0 30%; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: screen;
    background: repeating-conic-gradient(from 200deg at 75% 0%, rgba(255, 220, 150, .12) 0deg 3deg, transparent 3deg 11deg);
    -webkit-mask: radial-gradient(70% 80% at 75% 0%, #000 0%, transparent 70%); mask: radial-gradient(70% 80% at 75% 0%, #000 0%, transparent 70%);
    animation: rays 24s ease-in-out infinite alternate; }
@keyframes rays { from { transform: rotate(-3deg); opacity: .4; } to { transform: rotate(4deg); opacity: .7; } }
.fx-embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2rem; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero-content { min-width: 0; } }

/* Emblem: Globus + K steht, Flechtring dreht sich langsam, Glut-Orbit drumherum */
.emblem { position: relative; width: min(470px, 38vw); aspect-ratio: 1; justify-self: end; margin-bottom: 2rem; animation: emblemIn 1.6s var(--ease) both .15s; }
.emblem-float { position: absolute; inset: 0; animation: float 7s ease-in-out infinite; }
.emblem-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(240, 196, 98, .42), rgba(95, 170, 230, .16) 42%, transparent 66%); filter: blur(10px); animation: glow 5s ease-in-out infinite; }
/* 30.10.2026: Bild steht. Die Ring-Innenkante ist nicht kreisrund (75-80 %) und das Motiv war am Bildrand gerade abgeschnitten ->
   Drehen gab Naehte und einen wandernden dunklen Strich. Jetzt laeuft nur ein Lichtschimmer um den Flechtring. */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.emblem-ring, .emblem-core { position: absolute; inset: 0; }
.emblem-core { background: url(../images/emblem_900.webp?v=2) center/100% no-repeat; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.emblem-ring { pointer-events: none; mix-blend-mode: screen;
    background: conic-gradient(from var(--sweep), transparent 0deg 305deg, rgba(255, 236, 180, .38) 335deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 74%, #000 80%), url(../images/emblem_900.webp?v=2) center/100% no-repeat;
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle closest-side, transparent 74%, #000 80%), url(../images/emblem_900.webp?v=2) center/100% no-repeat;
    mask-composite: intersect;
    animation: ringSweep 9s linear infinite; }
@keyframes ringSweep { to { --sweep: 360deg; } }
.emblem-core::after { content: ''; position: absolute; inset: 11%; border-radius: 50%; pointer-events: none;   /* Lichtkante wandert ueber den Planeten */
    background: linear-gradient(115deg, transparent 35%, rgba(255, 246, 214, .38) 48%, transparent 60%); background-size: 260% 100%; mix-blend-mode: overlay; animation: sheenK 6.5s ease-in-out infinite; }
.emblem-orbit { position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(230, 190, 98, .16); transform: rotateX(68deg) rotateZ(0deg); animation: orbit 16s linear infinite; }
.emblem-orbit::before, .emblem-orbit::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 14px 4px rgba(255, 210, 120, .8); top: -5px; left: calc(50% - 5px); }
.emblem-orbit::after { top: auto; bottom: -4px; width: 6px; height: 6px; background: #bfe8ff; box-shadow: 0 0 12px 3px rgba(120, 200, 255, .7); }
@keyframes emblemIn { from { opacity: 0; transform: scale(.82) translateY(30px); filter: blur(14px) brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(.6deg); } }
@keyframes glow { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes sheenK { 0%, 100% { background-position: 110% 0; } 50% { background-position: -10% 0; } }
@media (max-width: 960px) { .emblem { justify-self: start; width: min(220px, 52vw); margin: 0 0 1rem; order: -1; } }

/* Wort fuer Wort einsteigen (fx.js zerlegt [data-split]) */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.split-w > span { display: inline-block; transform: translateY(105%) rotate(4deg); opacity: 0; animation: wordUp .9s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * .08s); }
@keyframes wordUp { to { transform: none; opacity: 1; } }
.hero h1 em { background: linear-gradient(100deg, #e0b257 0%, #fbe7b0 22%, #fff8e1 30%, #fbe7b0 38%, #e0b257 60%, #f3d17f 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: goldText 6s ease-in-out infinite; }
.hero h1 em .split-w > span { background: linear-gradient(100deg, #e0b257 0%, #fbe7b0 22%, #fff8e1 30%, #fbe7b0 38%, #e0b257 60%, #f3d17f 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wordUp .9s var(--ease) forwards, goldText 6s ease-in-out infinite; animation-delay: calc(.25s + var(--i) * .08s), 0s; }
@keyframes goldText { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hero-badges, .hero-lead, .hero-ctas, .hero-meta { animation: fadeUp 1s var(--ease) both; }
.hero-badges { animation-delay: .1s; } .hero-lead { animation-delay: .7s; } .hero-ctas { animation-delay: .85s; } .hero-meta { animation-delay: 1s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Magnet-Buttons */
.fx-mag { transform: translate3d(var(--bx, 0), var(--by, 0), 0); transition: transform .35s var(--ease), box-shadow .2s, background .2s, border-color .2s; }
.fx-mag:hover { transform: translate3d(var(--bx, 0), calc(var(--by, 0px) - 2px), 0); }
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 64%); transform: translateX(-120%); animation: btnSheen 4.5s ease-in-out infinite 2s; pointer-events: none; }
@keyframes btnSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- Kennzahlen zaehlen hoch ---------- */
.stat b { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 1.2rem 1rem; } .stat b { font-size: clamp(1.1rem, 5.2vw, 1.6rem); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } }
.stats { background: linear-gradient(180deg, rgba(20, 23, 32, .86), rgba(12, 14, 20, .86)); }
.stats::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(120deg, rgba(230, 190, 98, .5), transparent 30%, transparent 70%, rgba(95, 212, 196, .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- Laufband ---------- */
.marquee { position: relative; overflow: hidden; padding: 1.6rem 0; margin-top: 3.5rem; border-block: 1px solid var(--line);
    -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: .06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(230, 190, 98, .55); }
.marquee span:nth-child(even) { color: var(--gold-2); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(230, 190, 98, .35); }
.marquee i { align-self: center; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 12px rgba(230, 190, 98, .8); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 3D-Karten mit Lichtreflex ---------- */
.features, .gallery { perspective: 1400px; }
.fx-tilt { position: relative; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transform-style: preserve-3d; transition: transform .5s var(--ease), opacity .8s var(--ease), border-color .3s, box-shadow .4s; will-change: transform; }
.fx-tilt.reveal:not(.in) { transform: translateY(26px); }   /* Reveal-Einflug bleibt erhalten */
.fx-tilt.tilting { transition: transform .08s linear, border-color .3s, box-shadow .4s; }
.fx-tilt::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
    background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 236, 190, .16), transparent 45%); }
.fx-tilt:hover::after { opacity: 1; }
.fcard:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.fcard-body { transform: translateZ(30px); }
.fcard .tag { display: inline-flex; padding: .25rem .6rem; border-radius: 999px; background: rgba(7, 8, 12, .55); border: 1px solid rgba(230, 190, 98, .35); backdrop-filter: blur(6px); }

/* ---------- Reveal-Varianten + Staffelung ---------- */
.reveal { transition-delay: var(--d, 0s); }
.reveal.r-zoom { transform: scale(.94); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.r-zoom.in { transform: none; filter: none; }
.reveal.r-clip { clip-path: inset(0 0 100% 0 round 24px); opacity: 1; transform: none; transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.r-clip.in { clip-path: inset(0 0 0 0 round 24px); }
.section-head h2 { background: linear-gradient(180deg, #fff, #d9d2c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.overline::before { animation: lineGrow 1.2s var(--ease) both; transform-origin: 0 50%; }
@keyframes lineGrow { from { transform: scaleX(0); } }

/* Galerie: Licht beim Ueberfahren */
.gallery button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 8, 12, .7)); opacity: 0; transition: opacity .4s; }
.gallery button:hover::after { opacity: 1; }

/* Community-Box: langsam wandernder Goldrand */
.community { position: relative; }
.community::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(230, 190, 98, .8) 80%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: angle 6s linear infinite; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes angle { to { --ang: 360deg; } }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .emblem, .emblem-float, .emblem-glow, .emblem-ring, .emblem-orbit, .emblem-core::after, .hero-rays, .marquee-track, .btn-gold::after,
    .community::before, .hero-badges, .hero-lead, .hero-ctas, .hero-meta, .hero h1 em, .overline::before { animation: none !important; }
    .split-w > span { animation: none !important; transform: none; opacity: 1; }
    .fx-tilt, .fx-mag { transform: none !important; }
    .fx-embers, .fx-cursor { display: none; }
    .hero-media img { transform: scale(1.06) !important; }
    .reveal.r-zoom, .reveal.r-clip { filter: none; clip-path: none; transform: none; }
}