/* ==========================================================================
   Mystic Anim - base styles (plein écran + centrage)
   ========================================================================== */

.mystic-anim-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000;
    color: #fff;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.mystic-anim-inner {
    position: absolute;
    inset: 0;
}

/* Texte générique */
.mystic-anim-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    color: #ccc;
    padding: 1rem;
}

/* ==========================================================================
   1. CIEL ÉTOILÉ + AURORES BORÉALES (sky-aurora)
   ========================================================================== */
.mystic-anim-sky-aurora canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   2. CIEL ASTRAL PARALLAX (sky-parallax) — animation + scintillement
   ========================================================================== */
.mystic-anim-sky-parallax .parallax-layer {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    will-change: transform;
}

.mystic-anim-sky-parallax .parallax-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.4;
    animation: parallax-star-twinkle 6s ease-in-out infinite;
}

.mystic-anim-sky-parallax .parallax-layer.layer-1 .parallax-star { opacity: 0.7; }
.mystic-anim-sky-parallax .parallax-layer.layer-3 .parallax-star { opacity: 0.25; }

@keyframes parallax-star-twinkle {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

/* ==========================================================================
   3. NÉBULEUSES RESPIRANTES (nebula-breath) — plus sombre + 2 couches
   ========================================================================== */
.mystic-anim-nebula-breath {
    background:
        radial-gradient(circle at 25% 25%, rgba(88, 28, 135, 0.25), transparent 60%),
        radial-gradient(circle at 75% 65%, rgba(2, 132, 199, 0.22), transparent 65%),
        #000;
}

.mystic-anim-nebula-breath .nebula-cloud {
    position: absolute;
    width: 190%;
    height: 190%;
    top: -45%;
    left: -45%;
    filter: blur(20px);
    opacity: 0.9;
}

.mystic-anim-nebula-breath .nebula-cloud.layer-1 {
    background:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.75), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(45, 212, 191, 0.55), transparent 60%),
        radial-gradient(circle at 40% 80%, rgba(244, 114, 182, 0.6), transparent 60%);
    animation: nebula-breath-pulse-1 9s ease-in-out infinite;
}

.mystic-anim-nebula-breath .nebula-cloud.layer-2 {
    background:
        radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.25), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.25), transparent 60%);
    animation: nebula-breath-pulse-2 14s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.7;
}

@keyframes nebula-breath-pulse-1 {
    0%   { transform: scale(0.95) translate3d(0, 14px, 0); filter: blur(18px); opacity: 0.7; }
    50%  { transform: scale(1.15) translate3d(0, -16px, 0); filter: blur(28px); opacity: 1; }
    100% { transform: scale(0.95) translate3d(0, 14px, 0); filter: blur(18px); opacity: 0.7; }
}

@keyframes nebula-breath-pulse-2 {
    0%   { transform: scale(1) translate3d(-10px, 8px, 0);   filter: blur(16px); }
    50%  { transform: scale(1.08) translate3d(12px, -12px, 0); filter: blur(24px); }
    100% { transform: scale(1) translate3d(-10px, 8px, 0);   filter: blur(16px); }
}

/* ==========================================================================
   4. PORTAIL ASTRAL INTERACTIF (portal) — centrage garanti
   ========================================================================== */
.mystic-anim-portal .mystic-anim-inner {
    display: flex;
    align-items: center;
    justify-content: center; /* centre horizontalement et verticalement */
}

.mystic-anim-portal {
    background: radial-gradient(circle at 50% 10%, #1f2937, #020617 70%);
}

.mystic-portal {
    position: relative;
    width: 220px; height: 220px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.7s ease, box-shadow 0.7s ease;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
}

.mystic-portal-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(129, 140, 248, 0.7);
    box-shadow: 0 0 25px rgba(129, 140, 248, 0.4);
    animation: mystic-portal-rotate 18s linear infinite;
}
.mystic-portal-ring.ring-1 { inset: 12%; }
.mystic-portal-ring.ring-2 { inset: 22%; border-color: rgba(56, 189, 248, 0.8); animation-direction: reverse; animation-duration: 22s; }
.mystic-portal-ring.ring-3 { inset: 32%; border-style: dashed; border-color: rgba(251, 191, 36, 0.9); animation-duration: 26s; }

.mystic-portal-core {
    position: absolute; inset: 36%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.2), transparent 70%);
    box-shadow: 0 0 45px rgba(129, 140, 248, 0.9);
    transition: transform 0.7s ease, box-shadow 0.7s ease, background 0.7s ease;
}

.mystic-portal-label {
    position: absolute; bottom: -3rem; width: 100%; text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #e5e7eb; opacity: 0.8;
}

.mystic-portal-glow {
    position: absolute; inset: 10%; border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25), transparent 70%);
    filter: blur(8px); opacity: 0.6; transition: opacity 0.6s ease;
}

@keyframes mystic-portal-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mystic-portal.is-open { transform: scale(1.08); box-shadow: 0 0 60px rgba(59, 130, 246, 0.8); }
.mystic-portal.is-open .mystic-portal-core { transform: scale(1.12); background: radial-gradient(circle, rgba(56, 189, 248, 0.4), transparent 70%); box-shadow: 0 0 70px rgba(56, 189, 248, 1); }
.mystic-portal.is-open .mystic-portal-glow { opacity: 1; }

/* ==========================================================================
   5. SILHOUETTE ASTRALE DÉTACHABLE (astral-body) — centrage garanti
   ========================================================================== */
.mystic-anim-astral-body .mystic-anim-inner {
    display: flex; align-items: center; justify-content: center;
}
.mystic-anim-astral-body {
    background: radial-gradient(circle at 50% 20%, #111827, #020617 70%);
}
.astral-body-wrapper { position: relative; width: min(520px, 90%); height: 280px; }
.astral-body-wrapper img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.9;
}
.astral-body-overlay {
    mix-blend-mode: screen; animation: astral-detach 5.8s ease-in-out infinite;
    filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.9));
}
@keyframes astral-detach {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.6; }
    50%      { transform: translate3d(26px, -16px, 0); opacity: 1; }
}

/* ==========================================================================
   6. CHAKRAS ANIMÉS (chakras) — plus de hauteur utile
   ========================================================================== */
.mystic-anim-chakras .mystic-anim-inner {
    display: flex; align-items: center; justify-content: center;
    padding-block: 8vh; /* espace haut/bas pour éviter que le 1er/dernier chakra soit coupé */
}
.chakras-column {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    height: 84vh; /* colonne étirée */
    max-height: 1400px; min-height: 560px;
    gap: 1rem;
}
.chakra-point {
    width: 28px; height: 28px; border-radius: 999px; box-shadow: 0 0 25px currentColor;
    cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative;
}
.chakra-point::before {
    content: ""; position: absolute; inset: 18%; border-radius: inherit;
    background: radial-gradient(circle, #ffffff, transparent 60%); opacity: 0.9;
}
.chakra-point::after {
    content: ""; position: absolute; inset: -30%; border-radius: inherit;
    background: radial-gradient(circle, currentColor, transparent 70%);
    opacity: 0.55; filter: blur(6px); animation: chakra-pulse 4s ease-in-out infinite;
}
@keyframes chakra-pulse { 0%,100%{transform:scale(1);opacity:0.4;} 50%{transform:scale(1.22);opacity:0.9;} }
.chakra-point:hover { transform: scale(1.15); box-shadow: 0 0 30px currentColor; }

.chakra-tooltip {
    position: absolute; left: 2.6rem; min-width: 180px; max-width: 260px;
    padding: 0.6rem 0.8rem; font-size: 0.8rem; background: rgba(15, 23, 42, 0.95);
    border-radius: 0.5rem; border: 1px solid rgba(148, 163, 184, 0.6); color: #e5e7eb;
    pointer-events: none; opacity: 0; transform: translate3d(0, 6px, 0);
    transition: opacity 0.25s ease, transform 0.25s ease; z-index: 3;
}
.chakra-tooltip.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.chakra-tooltip strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }

/* Couleurs (bas -> haut) */
.chakra-point[data-chakra-index="0"] { color: #f97316; }
.chakra-point[data-chakra-index="1"] { color: #facc15; }
.chakra-point[data-chakra-index="2"] { color: #22c55e; }
.chakra-point[data-chakra-index="3"] { color: #38bdf8; }
.chakra-point[data-chakra-index="4"] { color: #6366f1; }
.chakra-point[data-chakra-index="5"] { color: #a855f7; }
.chakra-point[data-chakra-index="6"] { color: #ec4899; }

/* ==========================================================================
   7. MANDALA DE CHARGE ÉNERGÉTIQUE (mandala-charge) — centrage garanti
   ========================================================================== */
.mystic-anim-mandala-charge .mystic-anim-inner {
    display: flex; align-items: center; justify-content: center;
}
.mystic-anim-mandala-charge { background: radial-gradient(circle at 50% 20%, #020617, #020617 65%); }
.mandala-wrapper { position: relative; width: min(300px, 70%); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.mandala-base { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.6; filter: drop-shadow(0 0 18px rgba(129, 140, 248, 0.8)); }
.mandala-progress-ring { position: absolute; inset: 10%; border-radius: 999px; border: 3px solid rgba(148, 163, 184, 0.3); overflow: hidden; }
.mandala-progress-fill {
    position: absolute; inset: -40%;
    background: conic-gradient(from 0deg, rgba(56,189,248,0.1), rgba(56,189,248,1), rgba(129,140,248,1), rgba(236,72,153,1), rgba(56,189,248,1));
    transform-origin: center; animation: mandala-charge-spin 18s linear infinite; opacity: 0.9;
}
.mandala-core { position: absolute; inset: 32%; border-radius: 50%; background: radial-gradient(circle, rgba(15,23,42,0.95), #020617 80%); box-shadow: 0 0 40px rgba(129,140,248,0.9); }
@keyframes mandala-charge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==========================================================================
   8. ORBE DE RESPIRATION GUIDÉE (breath-orb) — centrage garanti
   ========================================================================== */
.mystic-anim-breath-orb .mystic-anim-inner {
    display: flex; align-items: center; justify-content: center;
}
.mystic-anim-breath-orb { background: radial-gradient(circle at 50% 10%, #020617, #020617 70%); }
.breath-orb { position: relative; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.3), transparent 70%); box-shadow: 0 0 50px rgba(56,189,248,0.9); animation: breath-orb-cycle 12s ease-in-out infinite; }
.breath-orb::before, .breath-orb::after { content: ""; position: absolute; inset: 18%; border-radius: inherit; border: 2px solid rgba(56,189,248,0.4); filter: blur(2px); }
.breath-orb::after { inset: 30%; border-color: rgba(129,140,248,0.45); }
.breath-orb-particles { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.breath-particle { position: absolute; width: 4px; height: 4px; border-radius: 999px; background: #e0f2fe; opacity: 0.9; animation: breath-particle-move 12s ease-in-out infinite; }
@keyframes breath-orb-cycle {
    0% { transform: scale(0.92); box-shadow: 0 0 30px rgba(56,189,248,0.7); }
    25% { transform: scale(1.04); box-shadow: 0 0 60px rgba(56,189,248,1); }
    50% { transform: scale(1.1); box-shadow: 0 0 70px rgba(129,140,248,1); }
    75% { transform: scale(1.04); box-shadow: 0 0 50px rgba(56,189,248,1); }
    100% { transform: scale(0.92); box-shadow: 0 0 30px rgba(56,189,248,0.7); }
}
@keyframes breath-particle-move {
    0% { transform: translate3d(0, 10px, 0); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translate3d(0, -16px, 0); opacity: 0.9; }
    80% { opacity: 0.2; }
    100% { transform: translate3d(0, 16px, 0); opacity: 0; }
}

/* ==========================================================================
   9. COMPTEUR DE MÉDITATION ASTRALE (meditation-timer) — centrage garanti
   ========================================================================== */
.mystic-anim-meditation-timer .mystic-anim-inner {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.meditation-timer {
    position: relative; width: 240px; height: 240px; border-radius: 50%;
    border: 2px dashed rgba(148, 163, 184, 0.4);
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, #020617, #000 65%);
}
.meditation-orbit { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(55,65,81,0.7); box-shadow: 0 0 20px rgba(55,65,81,0.4); }
.meditation-orbit.orbit-2 { inset: 23%; opacity: 0.85; }
.meditation-planet {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: #f97316; box-shadow: 0 0 20px rgba(248, 250, 252, 0.9);
    animation: meditation-orbit-rotate 60s linear infinite;
    transform-origin: 50% calc(50% + 70px);
}
.meditation-planet.planet-2 { background: #22c55e; animation-duration: 90s;  transform-origin: 50% calc(50% + 52px); }
.meditation-planet.planet-3 { background: #38bdf8; animation-duration: 120s; transform-origin: 50% calc(50% + 36px); }
.meditation-core { position: absolute; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle, #0f172a, #020617 70%); box-shadow: 0 0 25px rgba(148, 163, 184, 0.9); }
.meditation-label { margin-top: 1rem; text-align: center; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: #e5e7eb; opacity: 0.85; }
@keyframes meditation-orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Fallback */
.mystic-anim-unknown { background: #020617; }