/**
 * Page d'introduction — orbite animée + hero glassmorphism.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.intro-vortex {
    --vx-font-display: "Syne", system-ui, sans-serif;
    --vx-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
    --vx-scene: min(92vmin, 780px);
    --vx-core-clear: calc(var(--vx-scene) * 0.24);
    --vx-orbit-outer: calc(var(--vx-scene) * 0.46);
    --vx-orbit-mid: calc(var(--vx-scene) * 0.36);
    --vx-orbit-inner: calc(var(--vx-scene) * 0.27);
    --vx-spin-outer: 44s;
    --vx-spin-mid: 34s;
    --vx-spin-inner: 28s;
    --vx-pull-duration: 3.2s;
    --vx-noir: #040308;
    --vx-noir-soft: #0c0812;
    --vx-blanc: #ffffff;
    --vx-gris: #64748b;
    --vx-gris-mauve: #8b7a9e;
    --vx-mauve: #7c3aed;
    --vx-mauve-fonce: #2e1065;
    --vx-mauve-pale: #e9d5ff;
    --vx-mauve-mid: #a78bfa;
    --vx-ink: #f8fafc;
    --vx-muted: #a8a3b3;
    --vx-accent: var(--vx-mauve-mid);
    --vx-glass: rgba(12, 8, 20, 0.62);
    --vx-glass-border: rgba(233, 213, 255, 0.14);
    --vx-glass-hover: rgba(255, 255, 255, 0.2);
    --vx-outside-cutoff: 48%;
    margin: 0;
    min-height: 100dvh;
    font-family: var(--vx-font-body);
    color: var(--vx-ink);
    background: var(--vx-noir);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}

/* --- Fond --- */
.intro-vortex .vx-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.intro-vortex .vx-bg-outside,
.intro-vortex .vx-art-lightnight,
.intro-vortex .vx-art-aurora,
.intro-vortex .vx-art-bloom,
.intro-vortex .vx-art-dust,
.intro-vortex .vx-art-grain,
.intro-vortex .vx-bg-dim,
.intro-vortex .vx-bg-base {
    transition:
        opacity 0.55s ease,
        filter 0.55s ease,
        background 0.55s ease;
}

.intro-vortex .vx-bg-base {
    position: absolute;
    inset: 0;
    background: var(--vx-noir);
}

.intro-vortex .vx-bg-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 0%, transparent 34%, rgba(46, 16, 101, 0.22) 42%, rgba(124, 58, 237, 0.18) 52%, rgba(139, 122, 158, 0.14) 62%, rgba(4, 3, 8, 0.92) 88%),
        radial-gradient(ellipse 85% 65% at 50% 45%, rgba(12, 8, 20, 0.7) 0%, rgba(46, 16, 101, 0.18) 30%, transparent 52%),
        linear-gradient(160deg, var(--vx-noir-soft) 0%, var(--vx-noir) 55%, var(--vx-mauve-fonce) 100%);
}

/* Profondeur et clarté à l'intérieur du vortex — contour non touché */
.intro-vortex .vx-bg-vortex {
    position: absolute;
    inset: 0;
    mask-image: radial-gradient(circle at 50% 50%, black 0%, black calc(var(--vx-outside-cutoff) - 4%), transparent var(--vx-outside-cutoff), transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black calc(var(--vx-outside-cutoff) - 4%), transparent var(--vx-outside-cutoff), transparent 100%);
    background:
        radial-gradient(circle at 50% 50%,
            rgba(233, 213, 255, 0.1) 0%,
            rgba(167, 139, 250, 0.08) 14%,
            rgba(124, 58, 237, 0.06) 26%,
            transparent 40%,
            rgba(46, 16, 101, 0.1) 48%,
            rgba(124, 58, 237, 0.08) 56%,
            transparent 66%),
        radial-gradient(circle at 50% 50%,
            transparent 10%,
            rgba(233, 213, 255, 0.06) 12%,
            transparent 14%,
            transparent 24%,
            rgba(167, 139, 250, 0.07) 26%,
            transparent 28%,
            transparent 38%,
            rgba(124, 58, 237, 0.06) 40%,
            transparent 42%);
}

/* Fond artistique autour du vortex — zone light night */
.intro-vortex .vx-bg-outside {
    position: absolute;
    inset: 0;
    mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    background:
        radial-gradient(ellipse 100% 80% at 50% 38%,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(233, 213, 255, 0.2) 32%,
            rgba(167, 139, 250, 0.1) 55%,
            transparent 72%),
        conic-gradient(from 210deg at 18% 28%,
            rgba(255, 255, 255, 0.16) 0deg,
            rgba(233, 213, 255, 0.28) 40deg,
            rgba(124, 58, 237, 0.1) 55deg,
            transparent 110deg),
        conic-gradient(from 330deg at 82% 22%,
            rgba(255, 255, 255, 0.22) 0deg,
            rgba(233, 213, 255, 0.26) 48deg,
            transparent 100deg),
        conic-gradient(from 140deg at 12% 78%,
            rgba(255, 255, 255, 0.1) 0deg,
            rgba(233, 213, 255, 0.18) 50deg,
            rgba(100, 116, 139, 0.12) 60deg,
            transparent 120deg),
        conic-gradient(from 20deg at 88% 82%,
            rgba(255, 255, 255, 0.08) 0deg,
            rgba(233, 213, 255, 0.16) 45deg,
            rgba(124, 58, 237, 0.12) 70deg,
            transparent 130deg),
        radial-gradient(ellipse 130% 90% at 50% 108%, rgba(46, 16, 101, 0.22) 0%, rgba(233, 213, 255, 0.06) 40%, transparent 58%),
        radial-gradient(ellipse 90% 120% at 0% 50%, rgba(233, 213, 255, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse 90% 120% at 100% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(233, 213, 255, 0.12) 30%, transparent 48%),
        linear-gradient(175deg, rgba(20, 14, 36, 0.35) 0%, rgba(40, 28, 68, 0.22) 40%, rgba(233, 213, 255, 0.1) 100%);
}

.intro-vortex .vx-art-lightnight {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 110% 90% at 50% 35%,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(248, 250, 252, 0.18) 18%,
            rgba(233, 213, 255, 0.22) 38%,
            rgba(167, 139, 250, 0.08) 58%,
            transparent 74%),
        radial-gradient(ellipse 70% 50% at 50% 8%,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(233, 213, 255, 0.1) 40%,
            transparent 68%),
        radial-gradient(ellipse 60% 45% at 15% 20%,
            rgba(255, 255, 255, 0.12) 0%,
            transparent 65%),
        radial-gradient(ellipse 55% 40% at 85% 18%,
            rgba(255, 255, 255, 0.14) 0%,
            transparent 62%);
    mix-blend-mode: screen;
    opacity: 0.88;
    filter: blur(2px);
    animation: vxLightNightPulse 18s ease-in-out infinite alternate;
}

@keyframes vxLightNightPulse {
    0%   { opacity: 0.82; }
    100% { opacity: 0.95; }
}

.intro-vortex .vx-bg-exterior {
    position: absolute;
    inset: 0;
    mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
}

.intro-vortex .vx-art-aurora {
    position: absolute;
    inset: -25%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(255, 255, 255, 0.12) 20deg,
            rgba(233, 213, 255, 0.18) 30deg,
            transparent 60deg,
            rgba(255, 255, 255, 0.08) 100deg,
            rgba(167, 139, 250, 0.14) 120deg,
            transparent 150deg,
            rgba(233, 213, 255, 0.1) 210deg,
            transparent 240deg,
            rgba(255, 255, 255, 0.06) 280deg,
            rgba(100, 116, 139, 0.06) 300deg,
            transparent 330deg),
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(233, 213, 255, 0.1) 40%, transparent 70%);
    filter: blur(48px);
    opacity: 0.82;
    mix-blend-mode: screen;
    animation: vxAuroraDrift 24s ease-in-out infinite alternate;
}

.intro-vortex .vx-art-bloom {
    position: absolute;
    filter: blur(56px);
    mix-blend-mode: screen;
    opacity: 0.65;
    animation: vxBloomBreath 14s ease-in-out infinite;
}

.intro-vortex .vx-art-bloom--nw {
    width: min(62vw, 560px);
    height: min(48vw, 420px);
    top: -8%;
    left: -14%;
    border-radius: 58% 42% 53% 47% / 44% 56% 44% 56%;
    background: radial-gradient(ellipse at 40% 40%,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(233, 213, 255, 0.42) 28%,
        rgba(167, 139, 250, 0.2) 50%,
        transparent 78%);
    animation-delay: -3s;
}

.intro-vortex .vx-art-bloom--ne {
    width: min(54vw, 480px);
    height: min(50vw, 440px);
    top: -4%;
    right: -12%;
    border-radius: 45% 55% 48% 52% / 52% 48% 52% 48%;
    background: radial-gradient(ellipse at 60% 35%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(248, 250, 252, 0.28) 22%,
        rgba(233, 213, 255, 0.32) 42%,
        transparent 76%);
    animation-delay: -7s;
}

.intro-vortex .vx-art-bloom--sw {
    width: min(58vw, 520px);
    height: min(52vw, 460px);
    bottom: -10%;
    left: -10%;
    border-radius: 52% 48% 58% 42% / 48% 52% 45% 55%;
    background: radial-gradient(ellipse at 35% 65%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(233, 213, 255, 0.28) 32%,
        rgba(139, 122, 158, 0.16) 52%,
        transparent 80%);
    animation-delay: -5s;
}

.intro-vortex .vx-art-bloom--se {
    width: min(60vw, 540px);
    height: min(54vw, 500px);
    bottom: -12%;
    right: -14%;
    border-radius: 47% 53% 42% 58% / 55% 45% 55% 45%;
    background: radial-gradient(ellipse at 65% 70%,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(233, 213, 255, 0.3) 30%,
        rgba(124, 58, 237, 0.18) 52%,
        transparent 78%);
    animation-delay: -11s;
}

.intro-vortex .vx-art-dust {
    position: absolute;
    inset: 0;
    opacity: 0.7;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 14%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 22% 38%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 74% 18%, rgba(255, 255, 255, 0.75) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 88% 42%, rgba(248, 250, 252, 0.65) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 12% 72%, rgba(255, 255, 255, 0.55) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 36% 88%, rgba(233, 213, 255, 0.6) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 68% 78%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 92% 86%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 12%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 6% 50%, rgba(255, 255, 255, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 94% 55%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    background-size: 280px 280px, 340px 340px, 260px 260px, 320px 320px, 300px 300px, 360px 360px, 290px 290px, 330px 330px, 240px 240px, 310px 310px, 270px 270px;
    animation: vxDustTwinkle 8s ease-in-out infinite alternate;
}

@keyframes vxAuroraDrift {
    0%   { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(18deg) scale(1.06); }
}

@keyframes vxBloomBreath {
    0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
    50%      { opacity: 0.78; transform: scale(1.05) rotate(3deg); }
}

@keyframes vxDustTwinkle {
    0%   { opacity: 0.55; }
    100% { opacity: 0.82; }
}

.intro-vortex .vx-ext-band {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}

.intro-vortex .vx-ext-band--a {
    width: min(98vmin, 920px);
    height: min(98vmin, 920px);
    border: 1px solid rgba(233, 213, 255, 0.12);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 80px -20px rgba(124, 58, 237, 0.25);
}

.intro-vortex .vx-ext-band--b {
    width: min(108vmin, 1040px);
    height: min(108vmin, 1040px);
    border: 1px dashed rgba(139, 122, 158, 0.22);
    opacity: 0.7;
}

.intro-vortex .vx-art-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.intro-vortex .vx-bg-dim {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--vx-outside-cutoff), black calc(var(--vx-outside-cutoff) + 3%), black 100%);
    background:
        radial-gradient(ellipse 120% 100% at 50% 50%, rgba(4, 3, 8, 0.75) 0%, rgba(12, 8, 20, 0.85) 45%, rgba(4, 3, 8, 0.92) 100%),
        linear-gradient(160deg, rgba(4, 3, 8, 0.6) 0%, rgba(46, 16, 101, 0.5) 100%);
}

/* Clic fond : pale ↔ foncé — vortex inverse la luminosité */
.intro-vortex.vx-bg-dark .vx-bg-base {
    background: #020104;
}

.intro-vortex.vx-bg-dark .vx-bg-outside {
    opacity: 0.2;
    filter: brightness(0.35) saturate(0.7);
}

.intro-vortex.vx-bg-dark .vx-art-lightnight {
    opacity: 0.06;
    filter: blur(4px) brightness(0.4);
}

.intro-vortex.vx-bg-dark .vx-art-aurora {
    opacity: 0.18;
    filter: blur(48px) brightness(0.35);
}

.intro-vortex.vx-bg-dark .vx-art-bloom {
    opacity: 0.22;
    filter: blur(56px) brightness(0.4);
}

.intro-vortex.vx-bg-dark .vx-art-dust {
    opacity: 0.25;
}

.intro-vortex.vx-bg-dark .vx-art-grain {
    opacity: 0.06;
}

.intro-vortex.vx-bg-dark .vx-bg-dim {
    opacity: 1;
}

/* Fond pâle → vortex foncé | fond foncé → vortex clair */
.intro-vortex .vx-vortex-dim,
.intro-vortex .vx-vortex-glow,
.intro-vortex .vx-bg-vortex,
.intro-vortex .vx-vortex-depth,
.intro-vortex .vx-vortex-pull,
.intro-vortex .vx-scene-halo--outer,
.intro-vortex .vx-scene-halo--mid,
.intro-vortex .vx-ring-trail {
    transition:
        opacity 0.55s ease,
        filter 0.55s ease,
        background 0.55s ease,
        box-shadow 0.55s ease,
        border-color 0.55s ease;
}

.intro-vortex .vx-vortex-dim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.45;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(4, 3, 8, 0.38) 0%,
            rgba(12, 8, 20, 0.22) 38%,
            rgba(46, 16, 101, 0.12) 62%,
            transparent 100%);
}

.intro-vortex .vx-vortex-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(233, 213, 255, 0.2) 28%,
            rgba(167, 139, 250, 0.1) 52%,
            transparent 72%);
    mix-blend-mode: screen;
}

.intro-vortex .vx-bg-vortex {
    filter: brightness(0.82) saturate(0.92);
}

.intro-vortex .vx-vortex-depth {
    filter: brightness(0.85);
}

.intro-vortex .vx-vortex-pull {
    filter: brightness(0.88);
}

.intro-vortex .vx-scene-halo--outer {
    filter: brightness(0.82);
}

.intro-vortex .vx-ring-trail {
    border-color: rgba(167, 139, 250, 0.2);
    filter: brightness(0.85);
}

.intro-vortex.vx-bg-dark .vx-vortex-dim {
    opacity: 0;
}

.intro-vortex.vx-bg-dark .vx-vortex-glow {
    opacity: 1;
}

.intro-vortex.vx-bg-dark .vx-bg-vortex {
    filter: brightness(1.45) saturate(1.1);
}

.intro-vortex.vx-bg-dark .vx-vortex-depth {
    filter: brightness(1.35);
    box-shadow:
        inset 0 0 60px -10px rgba(233, 213, 255, 0.12),
        inset 0 0 100px -30px rgba(124, 58, 237, 0.1);
}

.intro-vortex.vx-bg-dark .vx-vortex-pull {
    filter: brightness(1.4);
}

.intro-vortex.vx-bg-dark .vx-vortex-pull__ring {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 14px 0 rgba(233, 213, 255, 0.25);
}

.intro-vortex.vx-bg-dark .vx-vortex-pull__well {
    background: radial-gradient(circle,
        rgba(233, 213, 255, 0.12) 0%,
        rgba(124, 58, 237, 0.2) 42%,
        transparent 72%);
    box-shadow: inset 0 0 35px 6px rgba(233, 213, 255, 0.08);
}

.intro-vortex.vx-bg-dark .vx-scene-halo--outer {
    filter: brightness(1.3);
    border-color: rgba(233, 213, 255, 0.18);
}

.intro-vortex.vx-bg-dark .vx-scene-halo--mid {
    border-color: rgba(233, 213, 255, 0.38);
    opacity: 1;
}

.intro-vortex.vx-bg-dark .vx-ring-trail {
    border-color: rgba(233, 213, 255, 0.28);
    filter: brightness(1.25);
    box-shadow:
        0 0 28px -4px rgba(233, 213, 255, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* --- Scène --- */
.intro-vortex .vx-shell {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    pointer-events: none;
}

.intro-vortex .vx-scene-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: calc(var(--vx-scene) + min(14vw, 9rem));
    height: calc(var(--vx-scene) + min(14vw, 9rem));
    pointer-events: none;
    z-index: 0;
}

.intro-vortex .vx-scene-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}

.intro-vortex .vx-scene-halo--outer {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle,
            rgba(233, 213, 255, 0.05) 0%,
            rgba(124, 58, 237, 0.07) 30%,
            transparent 52%,
            rgba(124, 58, 237, 0.08) 62%,
            rgba(233, 213, 255, 0.06) 68%,
            rgba(100, 116, 139, 0.08) 74%,
            transparent 80%);
    border: 1px solid rgba(233, 213, 255, 0.1);
    box-shadow:
        0 0 50px -12px rgba(124, 58, 237, 0.2),
        0 0 0 12px rgba(4, 3, 8, 0.35);
}

.intro-vortex .vx-scene-halo--mid {
    width: calc(100% + min(8vw, 5rem));
    height: calc(100% + min(8vw, 5rem));
    border: 1px dashed rgba(139, 122, 158, 0.28);
    opacity: 0.85;
}

/* Animation vortex — aspiration vers le fond (textes non touchés) */
.intro-vortex .vx-vortex-pull {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    mask-image: radial-gradient(circle at 50% 50%, black 0%, black 88%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black 88%, transparent 100%);
}

.intro-vortex .vx-vortex-pull__rings {
    position: absolute;
    inset: 0;
}

.intro-vortex .vx-vortex-pull__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgba(233, 213, 255, 0.22);
    box-shadow: 0 0 12px -2px rgba(167, 139, 250, 0.2);
    width: 88%;
    height: 88%;
    translate: -50% -50%;
    opacity: 0;
    animation: vxPullRing var(--vx-pull-duration) linear infinite;
}

.intro-vortex .vx-vortex-pull__ring:nth-child(1) { animation-delay: 0s; }
.intro-vortex .vx-vortex-pull__ring:nth-child(2) { animation-delay: -0.64s; }
.intro-vortex .vx-vortex-pull__ring:nth-child(3) { animation-delay: -1.28s; }
.intro-vortex .vx-vortex-pull__ring:nth-child(4) { animation-delay: -1.92s; }
.intro-vortex .vx-vortex-pull__ring:nth-child(5) { animation-delay: -2.56s; }

.intro-vortex .vx-vortex-pull__well {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: calc(var(--vx-core-clear) * 1.6);
    height: calc(var(--vx-core-clear) * 1.6);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(4, 3, 8, 0.55) 0%,
        rgba(46, 16, 101, 0.32) 45%,
        transparent 72%);
    box-shadow: inset 0 0 35px 6px rgba(4, 3, 8, 0.35);
    animation: vxPullWell 2.4s ease-in-out infinite alternate;
}

@keyframes vxPullRing {
    0% {
        width: 90%;
        height: 90%;
        opacity: 0;
        rotate: 0deg;
    }
    8% {
        opacity: 0.55;
    }
    100% {
        width: 14%;
        height: 14%;
        opacity: 0;
        rotate: 120deg;
    }
}

@keyframes vxPullWell {
    0% {
        scale: 0.92;
        opacity: 0.75;
    }
    100% {
        scale: 1.08;
        opacity: 1;
    }
}

.intro-vortex .vx-vortex-depth {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(233, 213, 255, 0.07) 0%,
            rgba(46, 16, 101, 0.12) 20%,
            transparent 35%,
            rgba(124, 58, 237, 0.05) 45%,
            transparent 55%),
        radial-gradient(circle at 50% 50%,
            transparent 18%,
            rgba(167, 139, 250, 0.08) 20%,
            transparent 22%,
            transparent 32%,
            rgba(233, 213, 255, 0.06) 34%,
            transparent 36%);
    box-shadow:
        inset 0 0 80px -20px rgba(124, 58, 237, 0.12),
        inset 0 0 120px -40px rgba(4, 3, 8, 0.22);
}

.intro-vortex .vx-scene {
    position: relative;
    width: var(--vx-scene);
    height: var(--vx-scene);
    pointer-events: none;
    z-index: 1;
}

/* Anneaux décoratifs tournants */
.intro-vortex .vx-ring-trail {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgba(233, 213, 255, 0.22);
    box-shadow:
        0 0 24px -6px rgba(167, 139, 250, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.intro-vortex .vx-ring-trail--outer {
    width: calc(var(--vx-orbit-outer) * 2);
    height: calc(var(--vx-orbit-outer) * 2);
    animation: vxSpinOuter var(--vx-spin-outer) linear infinite;
}

.intro-vortex .vx-ring-trail--mid {
    width: calc(var(--vx-orbit-mid) * 2);
    height: calc(var(--vx-orbit-mid) * 2);
    border-style: dashed;
    border-color: rgba(167, 139, 250, 0.24);
    animation: vxSpinMidReverse var(--vx-spin-mid) linear infinite;
}

.intro-vortex .vx-ring-trail--inner {
    width: calc(var(--vx-orbit-inner) * 2);
    height: calc(var(--vx-orbit-inner) * 2);
    border-color: rgba(139, 122, 158, 0.18);
    animation: vxSpinInner var(--vx-spin-inner) linear infinite;
}

@keyframes vxSpinOuter {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes vxSpinMidReverse {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* --- Hero central --- */
.intro-vortex .vx-hero {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 5;
    pointer-events: none;
}

.intro-vortex .vx-hero-card {
    container-type: inline-size;
    pointer-events: auto;
    width: calc(var(--vx-core-clear) * 2.15);
    max-width: calc(100% - 1rem);
    padding: clamp(1.1rem, 3vw, 1.6rem) clamp(0.85rem, 2.5vw, 1.25rem);
    text-align: center;
    border-radius: 1.35rem;
    border: 1px solid var(--vx-glass-border);
    background: var(--vx-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 24px 48px -24px rgba(0, 0, 0, 0.6);
    animation: vxHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow: hidden;
}

@keyframes vxHeroIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.intro-vortex .vx-hero-eyebrow {
    margin: 0 0 0.55rem;
    font-size: clamp(0.58rem, 1.6vw, 0.68rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vx-accent);
}

.intro-vortex .vx-hero-title {
    margin: 0;
    font-family: var(--vx-font-display);
    font-size: clamp(0.62rem, 13.5cqi, 1.08rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
    max-width: 100%;
}

.intro-vortex .vx-hero-accent {
    background: linear-gradient(135deg, var(--vx-mauve-pale) 0%, var(--vx-mauve-mid) 55%, var(--vx-mauve) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-vortex .vx-hero-byline {
    margin: 0.65rem 0 0;
    font-size: clamp(0.72rem, 1.9vw, 0.84rem);
    color: var(--vx-muted);
    overflow-wrap: break-word;
}

.intro-vortex .vx-hero-byline strong {
    font-weight: 600;
    color: #e2e8f0;
}

.intro-vortex .vx-hero-name {
    margin: 0.4rem 0 0;
    font-family: var(--vx-font-display);
    font-size: clamp(0.78rem, 2.1vw, 0.92rem);
    font-weight: 700;
    color: #fff;
}

/* --- Orbites animées --- */
.intro-vortex .vx-services {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.intro-vortex .vx-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.intro-vortex .vx-ring--outer {
    animation: vxSpin var(--vx-spin-outer) linear infinite;
}

.intro-vortex .vx-ring--mid {
    inset: 0;
    animation: vxSpinReverse var(--vx-spin-mid) linear infinite;
}

.intro-vortex .vx-ring--inner {
    animation: vxSpin var(--vx-spin-inner) linear infinite;
}

@keyframes vxSpin {
    to { transform: rotate(360deg); }
}

@keyframes vxSpinReverse {
    to { transform: rotate(-360deg); }
}

.intro-vortex .vx-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.intro-vortex .vx-orbit--a0   { --vx-angle: 0deg; }
.intro-vortex .vx-orbit--a45  { --vx-angle: 45deg; }
.intro-vortex .vx-orbit--a90  { --vx-angle: 90deg; }
.intro-vortex .vx-orbit--a135 { --vx-angle: 135deg; }
.intro-vortex .vx-orbit--a180 { --vx-angle: 180deg; }
.intro-vortex .vx-orbit--a225 { --vx-angle: 225deg; }
.intro-vortex .vx-orbit--a270 { --vx-angle: 270deg; }
.intro-vortex .vx-orbit--a315 { --vx-angle: 315deg; }

.intro-vortex .vx-ring--outer .vx-service {
    --vx-orbit-radius: var(--vx-orbit-outer);
}

.intro-vortex .vx-ring--mid .vx-service {
    --vx-orbit-radius: var(--vx-orbit-mid);
}

.intro-vortex .vx-ring--inner .vx-service {
    --vx-orbit-radius: var(--vx-orbit-inner);
}

.intro-vortex .vx-service {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:
        rotate(var(--vx-angle, 0deg))
        translateY(calc(-1 * var(--vx-orbit-radius)))
        rotate(calc(-1 * var(--vx-angle, 0deg)))
        translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.72rem;
    font-family: var(--vx-font-body);
    font-size: clamp(0.62rem, 1.45vw, 0.76rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: #e2e8f0;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--vx-glass-border);
    background: rgba(12, 8, 20, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px -12px rgba(46, 16, 101, 0.55);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        filter 0.2s ease;
}

.intro-vortex .vx-ring--outer .vx-orbit .vx-service {
    animation: vxCounterOuter var(--vx-spin-outer) linear infinite;
}

.intro-vortex .vx-ring--mid .vx-orbit .vx-service {
    animation: vxCounterMid var(--vx-spin-mid) linear infinite;
}

.intro-vortex .vx-ring--inner .vx-orbit .vx-service {
    animation: vxCounterInner var(--vx-spin-inner) linear infinite;
}

@keyframes vxCounterOuter {
    to {
        transform:
            rotate(var(--vx-angle, 0deg))
            translateY(calc(-1 * var(--vx-orbit-radius)))
            rotate(calc(-1 * var(--vx-angle, 0deg) - 360deg))
            translateX(-50%);
    }
}

@keyframes vxCounterMid {
    to {
        transform:
            rotate(var(--vx-angle, 0deg))
            translateY(calc(-1 * var(--vx-orbit-radius)))
            rotate(calc(-1 * var(--vx-angle, 0deg) + 360deg))
            translateX(-50%);
    }
}

@keyframes vxSpinInner {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes vxCounterInner {
    to {
        transform:
            rotate(var(--vx-angle, 0deg))
            translateY(calc(-1 * var(--vx-orbit-radius)))
            rotate(calc(-1 * var(--vx-angle, 0deg) - 360deg))
            translateX(-50%);
    }
}

.intro-vortex .vx-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--vx-accent);
    transition: color 0.2s ease, filter 0.2s ease;
}

.intro-vortex .vx-service-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.intro-vortex .vx-service-label {
    max-width: min(30vw, 172px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.intro-vortex .vx-service-label--ready {
    color: #4ade80;
}

.intro-vortex .vx-service-label--pending {
    color: #f87171;
}

.intro-vortex .vx-service--pending {
    cursor: default;
    pointer-events: auto;
}

.intro-vortex .vx-service--pending:hover,
.intro-vortex .vx-service--pending:focus-visible {
    color: #e2e8f0;
    border-color: var(--vx-glass-border);
    background: rgba(12, 8, 20, 0.78);
    filter: none;
    box-shadow: 0 8px 24px -12px rgba(46, 16, 101, 0.55);
}

.intro-vortex .vx-service:hover .vx-service-label--ready,
.intro-vortex .vx-service:focus-visible .vx-service-label--ready {
    color: #86efac;
}

.intro-vortex .vx-service:hover .vx-service-label--pending,
.intro-vortex .vx-service:focus-visible .vx-service-label--pending {
    color: #fca5a5;
}

.intro-vortex .vx-service:not(.vx-service--pending):hover,
.intro-vortex .vx-service:not(.vx-service--pending):focus-visible {
    color: var(--vx-blanc);
    border-color: rgba(233, 213, 255, 0.75);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95) 0%, rgba(192, 132, 252, 0.88) 100%);
    filter: brightness(1.12) saturate(1.25);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35) inset,
        0 0 20px rgba(192, 132, 252, 0.75),
        0 0 40px rgba(124, 58, 237, 0.55),
        0 8px 28px -6px rgba(46, 16, 101, 0.6);
    outline: none;
}

.intro-vortex .vx-service:hover .vx-service-icon,
.intro-vortex .vx-service:focus-visible .vx-service-icon {
    color: var(--vx-blanc);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
}

.intro-vortex .vx-service:focus-visible {
    outline: 2px solid var(--vx-accent);
    outline-offset: 3px;
}

/* --- Mobile : orbite compacte + icônes --- */
@media (max-width: 640px) {
    .intro-vortex {
        --vx-scene: 94vmin;
        --vx-core-clear: 24vmin;
        --vx-orbit-mid: 34vmin;
        --vx-orbit-outer: 43.5vmin;
        --vx-orbit-inner: 27.5vmin;
        --vx-spin-outer: 36s;
        --vx-spin-mid: 28s;
        --vx-spin-inner: 24s;
    }

    .intro-vortex .vx-shell {
        padding: 0;
    }

    .intro-vortex .vx-scene-frame {
        width: calc(var(--vx-scene) + 8vmin);
        height: calc(var(--vx-scene) + 8vmin);
    }

    .intro-vortex .vx-ext-band--a,
    .intro-vortex .vx-ext-band--b {
        display: none;
    }

    .intro-vortex .vx-hero-card {
        width: calc(var(--vx-core-clear) * 2.1);
        padding: 0.85rem 0.65rem;
    }

    .intro-vortex .vx-hero-title {
        font-size: clamp(0.52rem, 12cqi, 0.68rem);
    }

    .intro-vortex .vx-hero-eyebrow {
        font-size: clamp(0.52rem, 2vw, 0.6rem);
        letter-spacing: 0.08em;
    }

    .intro-vortex .vx-hero-byline {
        font-size: clamp(0.58rem, 2.2vw, 0.68rem);
    }

    .intro-vortex .vx-hero-name {
        font-size: clamp(0.6rem, 2.3vw, 0.72rem);
    }

    .intro-vortex .vx-service {
        width: 2.65rem;
        height: 2.65rem;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .intro-vortex .vx-service-label {
        display: none;
    }

    .intro-vortex .vx-service-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .intro-vortex .vx-ring-trail--mid {
        width: calc(var(--vx-orbit-mid) * 2);
        height: calc(var(--vx-orbit-mid) * 2);
    }

    .intro-vortex .vx-ring-trail--outer {
        width: calc(var(--vx-orbit-outer) * 2);
        height: calc(var(--vx-orbit-outer) * 2);
    }

    .intro-vortex .vx-ring-trail--inner {
        width: calc(var(--vx-orbit-inner) * 2);
        height: calc(var(--vx-orbit-inner) * 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-vortex .vx-art-lightnight,
    .intro-vortex .vx-art-aurora,
    .intro-vortex .vx-art-bloom,
    .intro-vortex .vx-art-dust {
        animation: none;
    }

    .intro-vortex .vx-vortex-pull__ring,
    .intro-vortex .vx-vortex-pull__well {
        animation: none;
    }

    .intro-vortex .vx-ring-trail,
    .intro-vortex .vx-ring,
    .intro-vortex .vx-service {
        animation: none !important;
    }

    .intro-vortex .vx-hero-card {
        animation: none;
    }

    .intro-vortex .vx-ring--outer .vx-orbit .vx-service,
    .intro-vortex .vx-ring--mid .vx-orbit .vx-service,
    .intro-vortex .vx-ring--inner .vx-orbit .vx-service {
        transform:
            rotate(var(--vx-angle, 0deg))
            translateY(calc(-1 * var(--vx-orbit-radius)))
            rotate(calc(-1 * var(--vx-angle, 0deg)))
            translateX(-50%);
    }
}