/* Visuel du Genie (leviation, halos, particules) - extrait du style.css d origine */

.hero-visual{
  position: relative;
  z-index: 1;
}
.hero-visual{
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.hero-backdrop,.hero-floor-glow,.magic-column,.hero-glow,.genie-vessel,.genie-prism,.genie-lattice,.genie-halo,.genie-ring,.activation-wave,.magic-particles{
  position: absolute;
  pointer-events: none;
}
.hero-backdrop{
  inset: 11% 8% 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(122, 246, 255, 0.09), transparent 54%),
    radial-gradient(circle at 52% 58%, rgba(126, 169, 255, 0.12), transparent 42%);
  filter: blur(28px);
}
.hero-floor-glow{
  bottom: 44px;
  width: 340px;
  height: 94px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 246, 255, 0.18), rgba(126, 169, 255, 0.16) 38%, transparent 76%);
  filter: blur(18px);
  opacity: 0.72;
}
.magic-column{
  bottom: 92px;
  width: 180px;
  height: 250px;
  background: linear-gradient(180deg, rgba(122, 246, 255, 0), rgba(122, 246, 255, 0.12), rgba(126, 169, 255, 0.09), rgba(126, 169, 255, 0));
  filter: blur(18px);
  opacity: 0.48;
  animation: pulseColumn 4.8s ease-in-out infinite;
}
.hero-glow{
  width: 388px;
  height: 388px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 246, 255, 0.13), rgba(126, 169, 255, 0.1) 42%, transparent 76%);
  filter: blur(14px);
  animation: pulseGlow 5.2s ease-in-out infinite;
}
.genie-vessel{
  display: none;
}
.genie-prism{
  display: none;
}
.genie-lattice{
  display: none;
}
.genie-halo{
  border-radius: 50%;
  border: 1px solid rgba(173, 212, 255, 0.1);
  box-shadow: 0 0 30px rgba(122, 246, 255, 0.04);
}
.genie-ring{
  border-radius: 50%;
  border: 1px solid rgba(160, 189, 240, 0.07);
}
.genie-ring-1{
  width: 360px;
  height: 360px;
  animation: spin 34s linear infinite;
}
.genie-ring-2{
  width: 294px;
  height: 294px;
  animation: spinReverse 26s linear infinite;
}
.genie-ring-3{
  width: 220px;
  height: 220px;
  border-color: rgba(122, 246, 255, 0.1);
  animation: spin 22s linear infinite;
}
.activation-wave{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(122, 246, 255, 0.16);
  opacity: 0;
}
.magic-particles{
  inset: 0;
}
.magic-particle{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.98), rgba(122, 246, 255, 0.84) 36%, rgba(126, 169, 255, 0.2) 76%, transparent 100%);
  box-shadow:
    0 0 16px rgba(122, 246, 255, 0.24),
    0 0 32px rgba(126, 169, 255, 0.14);
  opacity: var(--opacity);
  filter: blur(var(--blur));
  transform: translate3d(0, 0, 0) scale(var(--scale, 1));
  animation:
    particleFloat var(--duration) ease-in-out infinite,
    twinkle calc(var(--duration) * 0.75) ease-in-out infinite;
  animation-delay: var(--delay);
}
.magic-particles-front .magic-particle{
  opacity: calc(var(--opacity) + 0.1);
}
.genie-stage{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(100%, 420px);
}
.genie-core{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 304px;
  height: 304px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.24));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.genie-core::before{
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(122, 246, 255, 0.16), rgba(126, 169, 255, 0.1) 48%, transparent 78%);
  box-shadow: 0 0 42px rgba(122, 246, 255, 0.1);
}
.genie-core::after{
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(122, 246, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  opacity: 0.9;
}
.genie-core-shell,.genie-core-rim,.genie-core-grid,.genie-core-aura,.genie-core-shine{
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.genie-core-shell{
  display: none;
}
.genie-core-rim{
  display: none;
}
.genie-core-grid{
  display: none;
}
.genie-core-aura{
  background: radial-gradient(circle, rgba(122, 246, 255, 0.14), rgba(126, 169, 255, 0.1), transparent 74%);
  filter: blur(18px);
  animation: auraPulse 4.1s ease-in-out infinite;
}
.genie-core-shine{
  inset: 16%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0.34;
  transform: rotate(-18deg);
}
.hero-genie{
  position: relative;
  z-index: 2;
  width: 308px;
  max-width: 100%;
  object-fit: contain;
  filter:
    saturate(0.94)
    contrast(1.05)
    brightness(1.02)
    drop-shadow(0 0 14px rgba(122, 246, 255, 0.16))
    drop-shadow(0 0 32px rgba(126, 169, 255, 0.16))
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));
  animation:
    genieFloat 5.6s ease-in-out infinite,
    genieTilt 7.8s ease-in-out infinite,
    genieBreath 4.2s ease-in-out infinite;
  transition: transform 0.28s ease, filter 0.28s ease;
}
.hero-visual:hover .hero-genie,.genie-core:hover .hero-genie{
  transform: scale(1.03);
  filter:
    saturate(0.98)
    contrast(1.08)
    brightness(1.04)
    drop-shadow(0 0 18px rgba(122, 246, 255, 0.2))
    drop-shadow(0 0 40px rgba(126, 169, 255, 0.18))
    drop-shadow(0 20px 34px rgba(0, 0, 0, 0.2));
}
.hero-visual:hover .genie-core,.genie-core:hover{
  transform: translateY(-4px);
  filter: drop-shadow(0 28px 46px rgba(0, 0, 0, 0.28));
}
.hero-visual.is-bursting .activation-wave-2{
  animation-delay: 0.18s;
}
.hero-visual.is-bursting .activation-wave{
  animation: wavePulse 1.18s ease-out;
}
.hero-visual.is-bursting .hero-glow{
  animation: chargeGlow 0.9s ease-in-out 2;
}
@media (max-width: 1380px){ .hero-visual { min-height:500px; } }
@media (max-width: 980px){.hero-visual {
    min-height: 400px;
  }
.genie-stage::before {
    inset: 88px 26px 102px;
    border-radius: 30px;
  }
.genie-core {
    width: 256px;
    height: 256px;
  }
.hero-genie {
    width: 236px;
  }}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes genieFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes genieTilt {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}
@keyframes genieBreath {
  0%, 100% { scale: 0.985; }
  50% { scale: 1.02; }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.72; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes auraPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 0.94; transform: scale(1.05); }
}
@keyframes pulseColumn {
  0%, 100% { opacity: 0.42; transform: scaleY(0.94); }
  50% { opacity: 0.9; transform: scaleY(1.1); }
}
@keyframes chargeGlow {
  0%, 100% { opacity: 0.84; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.16); }
}
@keyframes wavePulse {
  0% { opacity: 0.45; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes particleFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(var(--scale, 1)); }
  50% { transform: translate3d(var(--drift-x), calc(var(--drift-y) * -1), 0) scale(calc(var(--scale, 1) * 1.08)); }
}
@keyframes twinkle {
  0%, 100% { opacity: calc(var(--opacity) * 0.64); }
  50% { opacity: var(--opacity); }
}
.hero-visual { background: transparent; border-radius: 28px; }
.genie-core { font: inherit; color: inherit; }
.genie-halo.halo-outer { width: 380px; height: 380px; border-color: rgba(173,212,255,.16); animation: spin 18s linear infinite; }
.genie-halo.halo-inner { width: 300px; height: 300px; border-color: rgba(122,246,255,.24); animation: spinReverse 14s linear infinite; }
.genie-ring { border-color: rgba(160,189,240,.12); }
@media (prefers-reduced-motion: reduce) { .hero-visual *, .hero-genie { animation: none !important; } }
@media (max-width: 760px) { .hero-visual { min-height: 380px; } .genie-halo.halo-outer { width: 320px; height: 320px; } .genie-halo.halo-inner { width: 250px; height: 250px; } .genie-ring-1 { width: 280px; height: 280px; } }