/* ============================================================
 *  Couverture animée (accueil) : ta propre image + effets
 *  zoom cinéma, profondeur à la souris, yeux qui s'allument,
 *  rayon de la tour, éclairs, brume, braises, reflet sur le logo.
 *  Réglage : Admin → Réglages → Apparence → « Couverture animée ».
 * ============================================================ */
.lg-hero.has-hfx { background-image: none !important; }
.hfx { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hfx-stage, .hfx-over { position: absolute; left: 0; top: 0; transform-origin: 62% 40%;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--z, 1)); will-change: transform; }
.hfx-stage img { display: block; width: 100%; height: 100%; user-select: none; }
.hfx-over { z-index: 0; }
/* calque au-dessus du dégradé sombre du thème, sous le texte */
.hfx-top { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lg-hero.has-hfx > .lg-hero-grid { z-index: 2; }

/* Entrée cinéma : l'image sort du noir en reculant */
body.hx.page-home .hfx-stage { animation: hfx-in 2.6s cubic-bezier(.2, .7, .2, 1) both !important; }
@keyframes hfx-in { from { opacity: 0; filter: brightness(.2) saturate(.6); } to { opacity: 1; filter: none; } }
body.hx.page-home .hfx-in-logo .lg-logo img { animation: hfx-logo 1.4s .5s cubic-bezier(.2, .9, .25, 1.15) both !important; }
body.hx.page-home .hfx-in-logo .lg-kicker, body.hx.page-home .hfx-in-logo .lg-tagline, body.hx.page-home .hfx-in-logo .lg-pitch, body.hx.page-home .hfx-in-logo .lg-cta { animation: hfx-up .9s both !important; }
body.hx.page-home .hfx-in-logo .lg-kicker { animation-delay: .25s !important; } body.hx.page-home .hfx-in-logo .lg-tagline { animation-delay: 1.1s !important; }
body.hx.page-home .hfx-in-logo .lg-pitch { animation-delay: 1.25s !important; } body.hx.page-home .hfx-in-logo .lg-cta { animation-delay: 1.4s !important; }
@keyframes hfx-logo { from { opacity: 0; transform: scale(1.25); filter: blur(10px) brightness(2.2); } 60% { filter: blur(0) brightness(1.5); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hfx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Yeux du chevalier */
.hfx-eye { position: absolute; width: 0; height: 0; }
body.hx.page-home .hfx-eye::before { content: ""; position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 70, 50, .95) 0%, rgba(255, 30, 20, .45) 22%, rgba(255, 0, 0, 0) 62%);
  mix-blend-mode: screen; animation: hfx-eye 4.2s ease-in-out infinite !important; }
body.hx.page-home .hfx-eye::after { content: ""; position: absolute; left: -230px; top: -2px; width: 460px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 70, .0) 20%, rgba(255, 200, 190, .95) 50%, rgba(255, 90, 70, .0) 80%, transparent);
  filter: blur(1px); mix-blend-mode: screen; transform: rotate(-14deg) scaleX(.2); opacity: 0; animation: hfx-flare 4.2s ease-in-out infinite !important; }
@keyframes hfx-eye { 0%, 100% { opacity: .55; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.12); } 52% { opacity: .9; transform: scale(1.05); } }
@keyframes hfx-flare { 0%, 35%, 70%, 100% { opacity: 0; transform: rotate(-14deg) scaleX(.2); } 46% { opacity: .9; transform: rotate(-14deg) scaleX(1); } }

/* Rayon magique de la tour */
.hfx-beam { position: absolute; width: 0; height: 0; }
body.hx.page-home .hfx-beam::before { content: ""; position: absolute; left: -14px; top: var(--bt, -400px); width: 28px; height: var(--bh, 700px);
  background: linear-gradient(180deg, rgba(160, 140, 255, 0) 0%, rgba(190, 170, 255, .45) 35%, rgba(235, 230, 255, .8) 75%, rgba(255, 255, 255, .9) 92%, rgba(160, 140, 255, 0) 100%);
  filter: blur(6px); mix-blend-mode: screen; animation: hfx-beam 3.1s ease-in-out infinite !important; }
body.hx.page-home .hfx-beam::after { content: ""; position: absolute; left: -55px; top: -55px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(190, 170, 255, .8) 12%, rgba(140, 110, 255, 0) 60%); mix-blend-mode: screen;
  animation: hfx-star 2.3s ease-in-out infinite !important; }
@keyframes hfx-beam { 0%, 100% { opacity: .35; transform: scaleX(.7); } 30% { opacity: .75; transform: scaleX(1.15); } 34% { opacity: .4; } 38% { opacity: .8; } }
@keyframes hfx-star { 0%, 100% { opacity: .7; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }

/* Éclairs */
.hfx-flash { position: absolute; inset: 0; z-index: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 55% at var(--fx, 40%) 22%, rgba(200, 210, 255, .6), rgba(120, 130, 255, .16) 50%, transparent 78%); }
body.hx.page-home .hfx-flash.on { animation: hfx-flash .9s ease-out !important; }
@keyframes hfx-flash { 0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .2; } 22% { opacity: .85; } 100% { opacity: 0; } }
.hfx-bolt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.hfx-bolt path { fill: none; stroke: #eef0ff; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #9fb0ff) drop-shadow(0 0 18px #6d7dff); opacity: 0; }
body.hx.page-home .hfx-bolt path.on { animation: hfx-bolt .8s ease-out forwards !important; }
@keyframes hfx-bolt { 0% { opacity: 0; } 5% { opacity: 1; } 15% { opacity: .15; } 24% { opacity: 1; } 100% { opacity: 0; } }

/* Brume au sol */
body.hx.page-home .hfx-fog { position: absolute; left: -20%; right: -20%; bottom: -6%; height: 46%; z-index: 0; opacity: .55;
  background:
    radial-gradient(ellipse 30% 40% at 20% 70%, rgba(150, 40, 30, .35), transparent 70%),
    radial-gradient(ellipse 35% 45% at 60% 80%, rgba(90, 80, 100, .35), transparent 70%),
    radial-gradient(ellipse 25% 35% at 85% 65%, rgba(160, 50, 30, .3), transparent 70%);
  filter: blur(18px); animation: hfx-fog 26s ease-in-out infinite alternate !important; }
body.hx.page-home .hfx-fog.b { opacity: .4; animation-duration: 38s !important; animation-direction: alternate-reverse !important; bottom: -14%; }
@keyframes hfx-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Braises (canvas) */
.hfx-sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lg-hero.has-hfx .hx-embers { display: none; }

/* Reflet doré qui passe sur le logo */
.lg-hero.has-hfx .lg-logo { position: relative; }
body.hx.page-home .lg-hero.has-hfx .lg-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, .0) 40%, rgba(255, 245, 215, .85) 50%, rgba(255, 240, 200, 0) 60%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0; mix-blend-mode: overlay;
  -webkit-mask: var(--hfx-logo) center / contain no-repeat; mask: var(--hfx-logo) center / contain no-repeat;
  animation: hfx-shine 7s 2.4s ease-in-out infinite !important; }
@keyframes hfx-shine { 0% { background-position: 150% 0; } 18%, 100% { background-position: -60% 0; } }

/* Bouton principal qui respire */
body.hx.page-home .lg-hero.has-hfx .lg-btn.is-red { position: relative; overflow: hidden; animation: hfx-pulse 3s ease-in-out infinite !important; }
body.hx.page-home .lg-hero.has-hfx .lg-btn.is-red::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: hfx-btn 4.5s 3s ease-in-out infinite !important; }
@keyframes hfx-pulse { 50% { box-shadow: 0 0 0 0 rgba(226, 84, 63, 0), 0 10px 44px -6px rgba(255, 70, 50, .85); } }
@keyframes hfx-btn { 0% { left: -60%; } 30%, 100% { left: 130%; } }

@media (max-width: 860px) {
  .hfx-eye::after, .hfx-bolt { display: none; }
}
@media (prefers-reduced-motion: reduce) {html body.hx.page-home .hfx *, html body.hx.page-home .hfx-top *, html body.hx.page-home .hfx-stage, html body.hx.page-home .lg-hero.has-hfx .lg-logo::after, html body.hx.page-home .lg-hero.has-hfx .lg-btn.is-red, html body.hx.page-home .lg-hero.has-hfx .lg-btn.is-red::after, html body.hx.page-home .hfx-in-logo .lg-logo img, html body.hx.page-home .hfx-in-logo .lg-kicker, html body.hx.page-home .hfx-in-logo .lg-tagline, html body.hx.page-home .hfx-in-logo .lg-pitch, html body.hx.page-home .hfx-in-logo .lg-cta { animation: none !important; }
  .hfx-sparks { display: none; }
}