/* =====================================================================
   condoor-fx.css — Signature scroll-morph pack (gold theme)
   Loads alongside condoor-ui; body.fx-on gates everything.
   ===================================================================== */

/* ---- Reveal 2.0: fade + rise + slight 3D, driven by JS class ---- */
body.fx-on .reveal { opacity: 0; transform: translateY(46px) scale(.985); will-change: transform, opacity; }
body.fx-on .reveal.fx-in {
    opacity: 1; transform: none;
    transition: opacity .85s var(--ease), transform .95s var(--ease);
}
body.fx-on .reveal.fx-in.fx-d1 { transition-delay: .06s; }
body.fx-on .reveal.fx-in.fx-d2 { transition-delay: .12s; }
body.fx-on .reveal.fx-in.fx-d3 { transition-delay: .18s; }

/* ---- Hero: word-by-word 3D flip-in ---- */
body.fx-on .hero h1, body.fx-on .page-hero h1 { perspective: 900px; }
.fx-word { display: inline-block; white-space: pre; opacity: 0;
    transform: translateY(.55em) rotateX(-88deg); transform-origin: 50% 100%;
    will-change: transform, opacity; }
.fx-word.fx-in { opacity: 1; transform: none;
    transition: opacity .55s ease, transform .8s cubic-bezier(.2,.9,.25,1); }

/* animated gold shine that sweeps across emphasis words as you scroll */
body.fx-on .gold-text { position: relative; }
body.fx-on .gold-text::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
    background-size: 300% 100%;
    background-position: calc(var(--sweep, 0) * 1%) 0;
    -webkit-mask: linear-gradient(#000, #000); mix-blend-mode: overlay; opacity: .0;
}
body.fx-on .hero .gold-text::after, body.fx-on .page-hero .gold-text::after { opacity: .9; }

/* ---- Headline gold wipe: text fills with gold left→right by --wipe ---- */
.fx-wipe {
    background-image: linear-gradient(90deg,
        var(--gold-300) 0%, var(--gold-400) calc(var(--wipe,0%) - 6%),
        var(--gold-500) var(--wipe,0%), rgba(255,255,255,.22) calc(var(--wipe,0%) + 1%));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}

/* ---- Liquid-gold goo blobs ---- */
body.fx-on .bg-fx .blob { will-change: transform; }
.fx-goo-wrap { position: absolute; inset: 0; filter: url(#condoor-goo); }

/* ---- Magnetic 3D tilt + specular sheen on cards ---- */
.fx-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out; }
.fx-sheen { position: relative; }
.fx-sheen > .fx-sheen-layer {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(240,209,138,.20), transparent 62%);
    opacity: 0; transition: opacity .25s ease; z-index: 2;
}
.fx-sheen.fx-hot > .fx-sheen-layer { opacity: 1; }

/* ---- Gallery parallax zoom ---- */
body.fx-on .gallery-item img { will-change: transform; }

/* =====================================================================
   SHOWPIECE 1 — Pinned Portal-Build (index #portal)
   ===================================================================== */
body.fx-on #portal .browser { will-change: transform; }
body.fx-on #portal .w-card, body.fx-on #portal .float-widget {
    opacity: 0; transform: translateY(28px) scale(.96); will-change: transform, opacity;
}
body.fx-on #portal .w-card.fx-built, body.fx-on #portal .float-widget.fx-built {
    opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease);
}
body.fx-on #portal .w-bars span, body.fx-on #portal .mini-chart .bar { transform-origin: bottom; }
.fx-type-caret { border-right: 2px solid var(--gold-300); animation: fxCaret 1s step-end infinite; }
@keyframes fxCaret { 50% { border-color: transparent; } }

/* =====================================================================
   SHOWPIECE 2 — Pinned horizontal Aufstiegs-Leiter (karriere #aufstieg)
   ===================================================================== */
.fx-hpin { position: relative; }
.fx-hpin-viewport { position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; }
.fx-hpin-track { display: flex; gap: var(--s-3); padding: 0 8vw; will-change: transform; }
.fx-hpin-track > * { flex: 0 0 clamp(260px, 78vw, 360px); }
.fx-hpin-progress { position: absolute; left: 8vw; right: 8vw; bottom: 9vh; height: 3px;
    background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.fx-hpin-progress > span { display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }
@media (max-width: 760px) {
    /* on small screens fall back to normal vertical flow (no pin) */
    .fx-hpin { height: auto !important; }
    .fx-hpin-viewport { position: static; height: auto; }
    .fx-hpin-track { flex-direction: column; padding: 0; }
    .fx-hpin-track > * { flex: none; }
    .fx-hpin-progress { display: none; }
}

/* ---- Respect reduced motion: fx-on is never added, so nothing here applies ---- */

/* =====================================================================
   MOTION PACK v2 — magnet buttons, living icons, gold-ink links,
   nav-underline morph, odometer stats, self-drawing timeline
   ===================================================================== */

/* ---- Magnetic buttons + gold click ripple ---- */
body.fx-on .btn { position: relative; overflow: hidden; }
body.fx-on .btn > * { position: relative; z-index: 1; }
.fx-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(255,244,214,.75), rgba(224,177,94,.30) 55%, transparent 72%);
    animation: fxRipple .6s ease-out forwards;
}
@keyframes fxRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ---- Living feature icons on card hover ---- */
body.fx-on .feature-card .ico svg { transition: transform .35s var(--ease); }
body.fx-on .feature-card:hover .ico { animation: fxIcoPop .55s var(--ease); }
@keyframes fxIcoPop { 40% { transform: translateY(-3px) scale(1.08); } }
body.fx-on .feature-card:hover [class*="lucide-"] { transform: scale(1.1); }
body.fx-on .feature-card:hover .lucide-zap { animation: fxZap .45s steps(2) 2; }
@keyframes fxZap { 50% { opacity: .35; transform: rotate(-10deg) scale(1.12); } }
body.fx-on .feature-card:hover .lucide-arrow-right,
body.fx-on .feature-card:hover .lucide-trending-up { transform: translateX(4px) scale(1.05); }
body.fx-on .feature-card:hover .lucide-banknote { transform: translateY(-2px) rotate(-5deg); }
body.fx-on .feature-card:hover .lucide-graduation-cap { transform: translateY(-3px) rotate(7deg); }
body.fx-on .feature-card:hover .lucide-users,
body.fx-on .feature-card:hover .lucide-users-round { transform: scale(1.14); }
body.fx-on .feature-card:hover .lucide-settings,
body.fx-on .feature-card:hover .lucide-cpu { animation: fxSpin 1.2s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* ---- Gold-ink link fill ---- */
body.fx-on .footer-links a, body.fx-on .legal-block a, body.fx-on .datenschutz-section a, body.fx-on .datenschutz-card a {
    background-image: linear-gradient(var(--gold-300), var(--gold-300));
    background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size .35s var(--ease), color .25s;
}
body.fx-on .footer-links a:hover, body.fx-on .legal-block a:hover,
body.fx-on .datenschutz-section a:hover, body.fx-on .datenschutz-card a:hover {
    background-size: 100% 1.5px; color: var(--gold-300);
}

/* ---- Nav underline morph ---- */
body.fx-on .nav-links { position: relative; }
.fx-nav-underline {
    position: absolute; bottom: 4px; left: 0; height: 2px; width: 0; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); pointer-events: none;
    transition: transform .32s var(--ease), width .32s var(--ease), opacity .2s var(--ease);
}

/* ---- Odometer stats ---- */
.od-wrap { display: inline-flex; align-items: flex-end; }
.od-wrap, .od-wrap .od-d, .od-wrap .od-suf {
    color: var(--gold-300) !important; -webkit-text-fill-color: var(--gold-300) !important;
    background: none !important;
}
.od-col { display: inline-block; overflow: hidden; vertical-align: bottom; }
.od-reel { display: block; will-change: transform; }
.od-d { display: block; text-align: center; }
.od-suf { white-space: pre; }

/* ---- Self-drawing timeline spine ---- */
body.fx-on .timeline { position: relative; padding-left: 26px; }
.fx-tl-line {
    position: absolute; top: 10px; bottom: 10px; left: 10px; width: 2px; z-index: 0;
    background: linear-gradient(var(--gold-500), var(--gold-300));
    transform-origin: top center; transform: scaleY(0);
}
.fx-tl-head {
    position: absolute; left: 6px; width: 10px; height: 10px; margin-top: -6px; border-radius: 50%;
    background: var(--gold-300); box-shadow: 0 0 14px 3px rgba(224,177,94,.75); opacity: 0; z-index: 1;
    transition: opacity .3s var(--ease);
}
@media (max-width: 600px) { body.fx-on .timeline { padding-left: 0; } .fx-tl-line, .fx-tl-head { display: none; } }

/* ---- Nav: underline only — kill the pill/bubble when fx (underline) is active ---- */
body.fx-on .nav-links a:hover,
body.fx-on .nav-links a[aria-current="page"] {
    background: transparent !important;
    box-shadow: none !important;
}