/* =========================================================
   Accueil « Légende » : effets visuels (voir assets/js/legende-fx.js)
   Chargé seulement sur l'accueil du style Légende quand « mes images » est coché.
   Animations coupées si le visiteur a demandé moins d'animations.
   ========================================================= */

/* ---------- Couverture ---------- */
.is-lgb .bx-hero { overflow: hidden; min-height: 680px; }
.is-lgb .bx-hero.has-lfx-bg { background-image: none !important; }
.is-lgb .bx-hero > .hx-wrap, .is-lgb .bx-hero > .bx-hero-in { position: relative; z-index: 2; }
.lfx-bg {
  position: absolute; inset: -5%; z-index: -2; pointer-events: none;
  background-size: cover; background-repeat: no-repeat;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.04);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.lfx-on .bx-hero .lfx-bg { animation: lfx-kenburns 34s ease-in-out infinite alternate; }
@keyframes lfx-kenburns { from { scale: 1; } to { scale: 1.09; } }
.lfx-hero { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lfx-fog {
  position: absolute; left: -30%; right: -30%; bottom: -10%; height: 55%; opacity: .55; mix-blend-mode: screen; filter: blur(30px);
  background: radial-gradient(ellipse 30% 45% at 25% 70%, rgba(150, 70, 60, .45), transparent 70%),
              radial-gradient(ellipse 35% 40% at 70% 80%, rgba(110, 90, 100, .35), transparent 70%);
}
.lfx-fog.is-b { bottom: 10%; height: 40%; opacity: .35; }
.lfx-on .lfx-fog { animation: lfx-drift 26s ease-in-out infinite alternate; }
.lfx-on .lfx-fog.is-b { animation-duration: 38s; animation-direction: alternate-reverse; }
@keyframes lfx-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.lfx-glow {
  position: absolute; left: 50%; top: 34%; width: 760px; height: 420px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(214, 44, 24, .32), rgba(214, 44, 24, 0) 65%); mix-blend-mode: screen;
}
.lfx-on .lfx-glow { animation: lfx-pulse 5s ease-in-out infinite; }
@keyframes lfx-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.lfx-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 50% 70% at var(--fx, 50%) 0%, rgba(230, 225, 255, .55), rgba(180, 170, 255, .08) 45%, transparent 70%); mix-blend-mode: screen; }
.lfx-flash.is-on { animation: lfx-flash 1.1s ease-out; }
@keyframes lfx-flash { 0% { opacity: 0; } 6% { opacity: 1; } 12% { opacity: .2; } 18% { opacity: .9; } 40% { opacity: .15; } 100% { opacity: 0; } }

/* logo : entrée cinéma, flottement, halo */
.is-lgb .bx-hero .hx-title { transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.lfx-on .bx-hero .hx-logo { animation: lfx-logo-in 1.6s .15s cubic-bezier(.2, .9, .25, 1.1) both, lfx-float 7s 1.8s ease-in-out infinite; }
@keyframes lfx-logo-in { from { opacity: 0; transform: scale(1.18); filter: blur(12px) brightness(2.4); } 60% { filter: blur(0) brightness(1.35); } to { opacity: 1; transform: none; } }
@keyframes lfx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.lfx-on .bx-hero .bx-tag, .lfx-on .bx-hero .bx-pitch, .lfx-on .bx-hero .hx-actions, .lfx-on .bx-hero .bx-offers, .lfx-on .bx-hero .bx-stats { animation: lfx-up .9s cubic-bezier(.2, .7, .2, 1) both; }
.lfx-on .bx-hero .bx-tag { animation-delay: .9s; }
.lfx-on .bx-hero .bx-pitch { animation-delay: 1.02s; }
.lfx-on .bx-hero .hx-actions { animation-delay: 1.14s; }
.lfx-on .bx-hero .bx-offers { animation-delay: 1.26s; }
.lfx-on .bx-hero .bx-stats { animation-delay: 1.38s; }
@keyframes lfx-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* grand bouton : reflet qui passe */
.is-lgb .bx-hero .hx-actions .hx-btn.is-red { position: relative; overflow: hidden; }
.is-lgb .bx-hero .hx-actions .hx-btn.is-red::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, .45), transparent);
}
.lfx-on .bx-hero .hx-actions .hx-btn.is-red::after { animation: lfx-shine 4.5s 2.5s ease-in-out infinite; }
@keyframes lfx-shine { 0% { left: -60%; } 30%, 100% { left: 130%; } }
/* barre de statistiques : liseré doré qui balaie */
.is-lgb .bx-stats { position: relative; overflow: hidden; }
.is-lgb .bx-stats::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--lg-gold-hi), transparent); }
.lfx-on .bx-stats::after { animation: lfx-sweep 6s 3s linear infinite; }
@keyframes lfx-sweep { to { left: 100%; } }

/* ---------- Titres de section : or animé ---------- */
.is-lgb .lgb-sec h2 {
  background: linear-gradient(100deg, #f6ead2 0%, #f6ead2 38%, #ffe3a6 46%, #fff8ea 50%, #e5bd75 54%, #f6ead2 62%, #f6ead2 100%);
  background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lfx-on .lgb-sec.is-in h2 { animation: lfx-gold 3.2s .3s ease-out both; }
@keyframes lfx-gold { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lfx-on .lgb-sec::after { animation: lfx-orn 1.2s .2s cubic-bezier(.2, .7, .2, 1) both paused; }
.lfx-on .lgb-sec.is-in::after { animation-play-state: running; }
@keyframes lfx-orn { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }

/* ---------- Apparition en cascade ---------- */
.lfx-on .lfx-rv { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.lfx-on .lfx-rv.is-in { opacity: 1; transform: none; }
.lfx-on .lfx-rv.bx-siege.is-in { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- Bannières : 3D + reflet ---------- */
.is-lgb .bx-lgtiles { perspective: 900px; }
.is-lgb .bx-lgtiles a { transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s; }
.is-lgb .bx-lgtiles a.is-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition-duration: .12s; }
.is-lgb .bx-lgtiles a::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle 220px at var(--sx, 50%) var(--sy, 50%), rgba(255, 236, 200, .28), transparent 60%);
  mix-blend-mode: soft-light;
}
.is-lgb .bx-lgtiles a:hover::before { opacity: 1; }
.is-lgb .bx-lgtiles a:hover { box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(241, 205, 140, .55), 0 0 40px -10px rgba(214, 167, 92, .45); }
.is-lgb .bx-lgtiles b { transition: letter-spacing .35s, color .25s; }
.is-lgb .bx-lgtiles a:hover b { letter-spacing: .12em; color: var(--lg-gold-hi); }

/* ---------- Cadres : halo qui suit la souris ---------- */
html body.is-lgb .bx:not(.bx-siege):not(.bx-join)::after, html body.is-lgb .bx-lgdaily::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(214, 167, 92, .09), transparent 60%);
}

/* ---------- Vitrine des classes ---------- */
.is-lgb .lg-show-art { isolation: isolate; }
.lfx-ghost {
  position: absolute; left: 50%; top: 50%; width: 150%; transform: translate(-50%, -50%); z-index: -3; pointer-events: none; text-align: center;
  font: 700 clamp(44px, 5.2vw, 82px)/.92 var(--lg-title); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--c) 45%, transparent); opacity: .38;
}
.lfx-ring {
  position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -2; border-radius: 50%; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow: 0 0 40px -6px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 40px -10px color-mix(in srgb, var(--c) 35%, transparent);
}
.lfx-ring.is-in { width: 74%; border: 2px dotted color-mix(in srgb, var(--lg-gold) 60%, transparent); box-shadow: none; }
.lfx-on .lfx-ring { animation: lfx-spin 60s linear infinite; }
.lfx-on .lfx-ring.is-in { animation-duration: 40s; animation-direction: reverse; }
@keyframes lfx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.lfx-on .lg-show-panel:not([hidden]) .lg-show-art img { animation: lfx-float 6s ease-in-out infinite; }
.is-lgb .lg-show-pick button[aria-selected="true"] img { animation: lfx-sel 2.4s ease-in-out infinite; }
@keyframes lfx-sel { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent), 0 0 34px color-mix(in srgb, var(--c) 75%, transparent); } }
.is-lgb .lg-show-body h3 { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 40%, #f3e4c4)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ---------- Castle Siege ---------- */
.is-lgb .bx-siege { isolation: isolate; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.is-lgb .bx-siege.has-lfx-bg { background-image: none !important; }
.is-lgb .bx-siege .lfx-bg { inset: -4%; z-index: -2; background-position: 62% 35% !important; }
.lfx-on .bx-siege .lfx-bg { animation: lfx-kenburns 26s ease-in-out infinite alternate; }
.is-lgb .bx-siege::before { z-index: -1; }
.lfx-torch {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 22% 30% at 72% 88%, rgba(255, 120, 40, .4), transparent 70%), radial-gradient(ellipse 18% 26% at 92% 70%, rgba(255, 150, 60, .3), transparent 70%);
}
.lfx-on .lfx-torch { animation: lfx-flicker 2.6s steps(1) infinite; }
@keyframes lfx-flicker { 0% { opacity: .8; } 12% { opacity: .55; } 20% { opacity: .95; } 38% { opacity: .7; } 52% { opacity: 1; } 70% { opacity: .6; } 84% { opacity: .9; } }
.is-lgb .bx-siege-txt { z-index: 2; }
.is-lgb .bx-siege-txt strong { background-size: 100% 200%; }
.is-lgb .bx-siege.is-tilt { transition-duration: .12s; }

/* ---------- Appel final : fond qui glisse lentement ---------- */
.lfx-on .bx-join::before { animation: lfx-pan 40s ease-in-out infinite alternate; }
@keyframes lfx-pan { from { background-position: 0 0, 0 0, center 25%; } to { background-position: 0 0, 0 0, center 55%; } }
.is-lgb .bx-join .hx-btn.is-red { box-shadow: 0 18px 40px -14px rgba(226, 74, 47, .9), 0 0 0 1px rgba(255, 170, 130, .4); }
.lfx-on .bx-join .hx-btn.is-red { animation: lfx-cta 2.8s ease-in-out infinite; }
@keyframes lfx-cta { 50% { box-shadow: 0 18px 50px -10px rgba(226, 74, 47, 1), 0 0 0 1px rgba(255, 200, 160, .7), 0 0 40px -6px rgba(226, 74, 47, .8); } }

/* ---------- Petits écrans et animations réduites ---------- */
@media (max-width: 760px) {
  .is-lgb .bx-hero { min-height: 600px; }
  .lfx-glow { width: 420px; height: 300px; }
  .lfx-ghost { font-size: 40px; }
}
.lfx-still .lfx-rv { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lfx-bg, .lfx-fog, .lfx-glow, .lfx-ring, .lfx-torch, .lfx-flash, .lfx-rays, .lfx-smoke, .lfx-down i, .hx-title::after, .bx-join::before, .bx-hero .hx-logo, .lg-show-art img { animation: none !important; }
}


/* =========================================================
   Passe 2 : sans particules — rayons de lumière, grain de film, reflet sur le logo,
   ornements ciselés, ambiance de la classe, fumée sur le Castle Siege, progression de lecture
   ========================================================= */
/* rayons de lumière qui tombent du ciel */
.lfx-rays {
  position: absolute; left: 50%; top: -30%; width: 140%; height: 120%; transform: translateX(-50%); transform-origin: 50% 0; mix-blend-mode: screen; opacity: .5; filter: blur(14px);
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255, 214, 160, .22) 6deg, transparent 12deg, transparent 18deg, rgba(255, 190, 140, .16) 22deg, transparent 27deg,
              transparent 33deg, rgba(255, 220, 170, .2) 37deg, transparent 42deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 85%); mask-image: linear-gradient(180deg, #000 20%, transparent 85%);
}
.lfx-on .lfx-rays { animation: lfx-rays 18s ease-in-out infinite alternate; }
@keyframes lfx-rays { from { transform: translateX(-50%) rotate(-4deg); opacity: .35; } to { transform: translateX(-50%) rotate(4deg); opacity: .6; } }
/* grain de film fixe + vignette */
.lfx-grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lfx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
/* reflet doré qui traverse le logo */
.is-lgb .bx-hero .hx-title { position: relative; }
.is-lgb .bx-hero .hx-title.has-sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: var(--lfx-logo) center / contain no-repeat; mask: var(--lfx-logo) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, .0) 42%, rgba(255, 244, 214, .85) 50%, rgba(255, 220, 150, .0) 58%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 120% 0;
}
.lfx-on .bx-hero .hx-title.has-sheen::after { animation: lfx-logo-sheen 6.5s 2.2s ease-in-out infinite; }
@keyframes lfx-logo-sheen { 0% { background-position: 120% 0; } 35%, 100% { background-position: -20% 0; } }
/* flèche « découvrir la suite » */
.lfx-down { position: absolute; left: 50%; bottom: 14px; z-index: 3; width: 34px; height: 50px; margin-left: -17px; border: 1px solid rgba(236, 212, 172, .45); border-radius: 20px; }
.lfx-down i { position: absolute; left: 50%; top: 10px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--lg-gold-hi); }
.lfx-on .lfx-down i { animation: lfx-down 1.8s ease-in-out infinite; }
@keyframes lfx-down { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(16px); } 100% { opacity: 0; } }
.lfx-down:hover { border-color: var(--lg-gold-hi); box-shadow: 0 0 20px -4px rgba(236, 212, 172, .6); }
@media (max-width: 760px) { .lfx-down { display: none; } }
/* barre de progression de lecture */
.lfx-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 2px; pointer-events: none; }
.lfx-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #8f1b0f, #e24a2f 30%, #f1cd8c 80%, #fff3d6); box-shadow: 0 0 10px rgba(241, 205, 140, .7); }
/* ornement ciselé sous les titres */
.lgb-sec::after { width: 300px !important; height: 24px !important; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='24'%20viewBox='0%200%20300%2024'%3E%3Cdefs%3E%3ClinearGradient%20id='l'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23d2a964'%20stop-opacity='0'/%3E%3Cstop%20offset='1'%20stop-color='%23d2a964'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='r'%20x1='1'%20x2='0'%3E%3Cstop%20offset='0'%20stop-color='%23d2a964'%20stop-opacity='0'/%3E%3Cstop%20offset='1'%20stop-color='%23d2a964'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M0%2012H112'%20stroke='url%28%23l%29'/%3E%3Cpath%20d='M188%2012H300'%20stroke='url%28%23r%29'/%3E%3Cpath%20d='M112%2012c8-8%2016-8%2022-2M188%2012c-8-8-16-8-22-2M112%2012c8%208%2016%208%2022%202M188%2012c-8%208-16%208-22%202'%20fill='none'%20stroke='%23d2a964'%20stroke-width='1'/%3E%3Cpath%20d='M150%202l10%2010-10%2010-10-10z'%20fill='none'%20stroke='%23ecd4ac'/%3E%3Cpath%20d='M150%207l5%205-5%205-5-5z'%20fill='%23e2b25a'/%3E%3Ccircle%20cx='131'%20cy='12'%20r='1.8'%20fill='%23ecd4ac'/%3E%3Ccircle%20cx='169'%20cy='12'%20r='1.8'%20fill='%23ecd4ac'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.lgb-sec .lg-kicker { color: #e9c98d; }
.lgb-sec h2 { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .9)) drop-shadow(0 0 30px rgba(194, 45, 29, .25)); }
/* vitrine : ambiance de la classe choisie, très floue, en fond de bande */
.is-lgb .bx-lgshow { position: relative; }
.lfx-amb {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: center 30% / cover no-repeat; filter: blur(60px) saturate(1.4); opacity: 0; transition: opacity 1s;
  -webkit-mask-image: radial-gradient(ellipse 45% 70% at 30% 55%, #000, transparent 75%); mask-image: radial-gradient(ellipse 45% 70% at 30% 55%, #000, transparent 75%);
}
.lfx-amb.is-on { opacity: .28; }
/* Castle Siege : fumée qui passe devant l'image */
.lfx-smoke {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 60%; z-index: 0; pointer-events: none; opacity: .5; filter: blur(24px);
  background: radial-gradient(ellipse 30% 50% at 30% 70%, rgba(40, 30, 28, .8), transparent 70%), radial-gradient(ellipse 25% 45% at 75% 80%, rgba(60, 40, 34, .6), transparent 70%);
}
.lfx-on .lfx-smoke { animation: lfx-drift 22s ease-in-out infinite alternate-reverse; }
/* bannières : liseré doré qui fait le tour au survol */
.is-lgb .bx-lgtiles a { outline: 1px solid transparent; outline-offset: -6px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s, outline-color .3s, outline-offset .3s; }
.is-lgb .bx-lgtiles a:hover { outline-color: rgba(241, 205, 140, .55); outline-offset: -8px; }
/* cadres : coins dorés qui s'allongent au survol */
html body.is-lgb .bx:not(.bx-siege):not(.bx-join), html body.is-lgb .bx-lgdaily { transition: border-color .3s, box-shadow .3s, background-size .4s; }