/* ==========================================================
   INFO PRO 13 — EFFETS "GAMING" ACCUEIL
   Halos animés en fond, motif circuit/hexagones, bordures qui
   réagissent au survol, titres lumineux. Actif uniquement sur
   la page d'accueil (body.home). Respecte prefers-reduced-motion.
   ========================================================== */

/* ---- 1. Halos animés en fond ---- */

.ip13-fx-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ip13-fx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
}

.ip13-fx-orb--1 {
    width: 560px;
    height: 560px;
    top: -180px;
    right: -120px;
    background: radial-gradient(circle, rgba(102,137,255,.55), transparent 70%);
    animation: ip13FxDrift1 22s ease-in-out infinite;
}

.ip13-fx-orb--2 {
    width: 460px;
    height: 460px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle, rgba(217,70,239,.40), transparent 70%);
    animation: ip13FxDrift2 26s ease-in-out infinite;
}

.ip13-fx-orb--3 {
    width: 380px;
    height: 380px;
    top: 40%;
    left: 50%;
    background: radial-gradient(circle, rgba(102,137,255,.30), transparent 70%);
    animation: ip13FxDrift3 30s ease-in-out infinite;
}

@keyframes ip13FxDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-60px, 50px) scale(1.08); }
}

@keyframes ip13FxDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(50px, -40px) scale(1.06); }
}

@keyframes ip13FxDrift3 {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50%      { transform: translate(-50%, -60px) scale(1.12); }
}

/* ---- 2. Motif circuit / hexagones ---- */

.ip13-fx-hex {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%238b5cf6' stroke-opacity='0.10' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size: 84px 96px;
    -webkit-mask-image: linear-gradient(180deg, black, transparent 92vh);
    mask-image: linear-gradient(180deg, black, transparent 92vh);
}


/*
 * Le contenu doit rester au-dessus des halos/motifs fixes.
 * Le header a besoin d'un z-index STRICTEMENT supérieur à celui du
 * main: même valeur == à égalité, le dernier des deux dans le DOM
 * (site-main) gagne l'affichage, ce qui faisait passer le hero
 * au-dessus du panneau du menu mobile (position:absolute, déborde
 * sous le header) — menu qui semblait "ne plus s'ouvrir" alors qu'il
 * s'ouvrait bien, juste caché derrière le hero.
 */
body.home .site-header {
    position: relative;
    z-index: 2;
}

body.home .site-main {
    position: relative;
    z-index: 1;
}

/* ---- 3. Titres lumineux ---- */

body.home .gaming-hero h1,
body.home .section-heading h2 {
    text-shadow: 0 0 8px rgba(255, 255, 255, .85),
        0 0 26px rgba(102,137,255,.75),
        0 0 60px rgba(102,137,255,.45);
}

@media (prefers-reduced-motion: no-preference) {
    body.home .gaming-hero h1 {
        animation: ip13FxTitleGlow 3.2s ease-in-out infinite;
    }
}

@keyframes ip13FxTitleGlow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(255, 255, 255, .85),
            0 0 26px rgba(102,137,255,.75),
            0 0 60px rgba(102,137,255,.45);
    }
    50% {
        text-shadow: 0 0 12px rgba(255, 255, 255, 1),
            0 0 38px rgba(102,137,255,1),
            0 0 85px rgba(102,137,255,.65);
    }
}

/* ---- 4. Bordures / cartes qui réagissent au survol ---- */

body.home .gaming-universe-card,
body.home .ip13-home-expertise-card,
body.home .ip13-home-help__card {
    position: relative;
    isolation: isolate;
}

body.home .gaming-universe-card: :before,
body.home .ip13-home-expertise-card::before,
body.home .ip13-home-help__card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--ip13-fx-angle, 0deg),
        transparent 0%,
        rgba(102,137,255,.9) 12%,
        transparent 24%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
}

body.home .gaming-universe-card: hover::before,
body.home .ip13-home-expertise-card:hover::before,
body.home .ip13-home-help__card:hover::before {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    @property --ip13-fx-angle {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg;
    }

    body.home .gaming-universe-card: hover::before,
    body.home .ip13-home-expertise-card:hover::before,
    body.home .ip13-home-help__card:hover::before {
        animation: ip13FxSpin 2.4s linear infinite;
    }

    @keyframes ip13FxSpin {
        to { --ip13-fx-angle: 360deg; }
    }
}

body.home .btn.btn-primary {
    position: relative;
    overflow: hidden;
}

body.home .btn.btn-primary: hover {
    box-shadow:
        0 0 0 1px rgba(102,137,255,.4),
        0 0 24px rgba(102,137,255,.55),
        0 0 50px rgba(102,137,255,.30);
}

@media (max-width: 700px) {

    /*
     * Les halos étaient positionnés en pixels fixes pensés pour un
     * écran large (ex: right:-120px sur un cercle de 560px) — sur
     * ~390px de large, la quasi-totalité du cercle tombe hors
     * viewport et devient invisible. Recentré et réduit pour rester
     * perceptible sur un petit écran.
     */
    .ip13-fx-orb--1 {
        width: 320px;
        height: 320px;
        top: -80px;
        right: -100px;
        left: auto;
        filter: blur(36px);
        opacity: .5;
    }

    .ip13-fx-orb--2 {
        width: 280px;
        height: 280px;
        bottom: -80px;
        left: -90px;
        filter: blur(36px);
        opacity: .45;
    }

    .ip13-fx-orb--3 {
        width: 240px;
        height: 240px;
        top: 55%;
        filter: blur(30px);
        opacity: .4;
    }

    .ip13-fx-hex {
        opacity: .35;
    }
}