/* Demo Fitness — Theme: NEON (AGGRESSIVE) */
/* Club-gym underground : lasers, glow violent, contrast ++, edges “tube LED” */

:root{
  --bg:#02020a;
  --fg:#f7f8ff;
  --muted:rgba(247,248,255,.80);

  /* Néon agressif */
  --accent:#00f2ff;   /* cyan laser */
  --accent2:#ff2df7;  /* rose néon */
  --accent3:#6a35ff;  /* violet électrique */
  --acid:#b6ff00;     /* vert “toxic” (petites touches) */

  --card:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.18);
  --shadow:0 34px 150px rgba(0,0,0,.80);

  --hero-img: url('../img/hero.webp');
  --card-img-1: url('../img/product1.webp');
  --card-img-2: url('../img/product2.webp');
  --card-img-3: url('../img/product3.webp');

  --layout: A;
}

/* =========================
   BACKGROUND : lasers + haze
   ========================= */
body{
  background:
    /* Haze cyan/rose */
    radial-gradient(1200px 820px at 12% 0%, rgba(0,242,255,.46), transparent 60%),
    radial-gradient(1100px 820px at 92% 10%, rgba(255,45,247,.40), transparent 62%),
    radial-gradient(900px 520px at 55% 115%, rgba(106,53,255,.24), transparent 62%),

    /* Lasers diagonaux */
    repeating-linear-gradient(
      135deg,
      rgba(0,242,255,.14) 0px,
      rgba(0,242,255,.14) 2px,
      transparent 2px,
      transparent 18px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255,45,247,.10) 0px,
      rgba(255,45,247,.10) 2px,
      transparent 2px,
      transparent 22px
    ),

    /* Base */
    linear-gradient(180deg, #010109, #02020a 55%, #010109);
  background-attachment: fixed;
}

/* Glow + vignette + “fog” */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(900px 420px at 20% 10%, rgba(0,242,255,.22), transparent 72%),
    radial-gradient(900px 420px at 85% 10%, rgba(255,45,247,.18), transparent 74%),
    radial-gradient(1400px 1000px at 50% 50%, transparent 45%, rgba(0,0,0,.62) 100%);
  mix-blend-mode: screen;
  opacity:.95;
}

/* Scanlines + LED dust + grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.07) 0px,
      rgba(255,255,255,.07) 1px,
      transparent 1px,
      transparent 6px
    ),
    radial-gradient(2px 2px at 18% 25%, rgba(0,242,255,.60), transparent 70%),
    radial-gradient(2px 2px at 72% 55%, rgba(255,45,247,.52), transparent 70%),
    radial-gradient(2px 2px at 84% 18%, rgba(182,255,0,.40), transparent 70%),
    radial-gradient(800px 320px at 50% -10%, rgba(255,255,255,.14), transparent 75%);
  opacity:.14;
  mix-blend-mode: screen;
}

/* =========================
   GLASS : outline plus dur
   ========================= */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 28px 120px rgba(0,0,0,.72);
}

/* =========================
   TOPBAR : tube + strip glow
   ========================= */
.topbar{
  background: rgba(1,1,10,.62);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,242,255,.90) 18%,
    rgba(255,45,247,.82) 52%,
    rgba(182,255,0,.45) 78%,
    transparent 100%);
  filter: blur(.4px);
  opacity: 1;
}
.brand__dot{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:
    0 0 0 9px rgba(0,242,255,.18),
    0 0 30px rgba(0,242,255,.70),
    0 0 70px rgba(255,45,247,.32);
}

/* =========================
   TITRE : néon agressif + anim
   ========================= */
.h1, .hero h1{
  letter-spacing: -.08em;
  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 26px rgba(0,242,255,.55),
    0 0 52px rgba(255,45,247,.30),
    0 0 78px rgba(106,53,255,.18),
    0 24px 110px rgba(0,0,0,.78);
}

/* Gradient “laser” sur le titre (si support) */
@supports (-webkit-background-clip:text) {
  .h1, .hero h1{
    background: linear-gradient(90deg,
      rgba(0,242,255,1),
      rgba(255,45,247,1),
      rgba(182,255,0,.92),
      rgba(0,242,255,1));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference){
    .h1, .hero h1{
      background-size: 220% 100%;
      animation: neonShift 2.6s linear infinite;
    }
  }
}
@keyframes neonShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

.lead{
  color: rgba(247,248,255,.84);
  text-shadow: 0 0 18px rgba(0,242,255,.14);
}

/* =========================
   THEME BUTTONS : LED pills++
   ========================= */
.tBtn{
  border-color: rgba(0,242,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  filter: saturate(1.85) contrast(1.10);
  position:relative;
  overflow:hidden;
}
.tBtn::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(160px 54px at 25% 25%, rgba(0,242,255,.44), transparent 70%),
    radial-gradient(160px 54px at 82% 65%, rgba(255,45,247,.34), transparent 72%),
    radial-gradient(120px 44px at 60% 10%, rgba(182,255,0,.18), transparent 70%);
  opacity:.9;
  pointer-events:none;
}
.tBtn:hover{
  border-color: rgba(255,45,247,.65);
  box-shadow:
    0 0 0 4px rgba(0,242,255,.20),
    0 0 60px rgba(0,242,255,.18),
    0 24px 70px rgba(0,0,0,.65);
}
.tBtn.is-on{
  border-color: rgba(0,242,255,.95);
  box-shadow:
    0 0 0 4px rgba(0,242,255,.26),
    0 0 70px rgba(0,242,255,.26),
    0 0 90px rgba(255,45,247,.16);
}
@media (prefers-reduced-motion: no-preference){
  .tBtn.is-on{ animation: pillPulse 1.5s ease-in-out infinite; }
}
@keyframes pillPulse{
  0%,100%{ filter:saturate(1.85) brightness(1.00); }
  50%{ filter:saturate(2.20) brightness(1.15); }
}

/* =========================
   CTA BUTTONS : punch + flicker
   ========================= */
.btn{
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.btn:hover{ filter:saturate(1.35) brightness(1.06); }

.btn.primary{
  color:#061018;
  background: linear-gradient(135deg, rgba(0,242,255,1), rgba(255,45,247,.92));
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 55px rgba(0,242,255,.22),
    0 18px 55px rgba(255,45,247,.16),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
@media (prefers-reduced-motion: no-preference){
  .btn.primary{ animation: flicker 5.2s infinite; }
}
@keyframes flicker{
  0%, 100% { filter: brightness(1); }
  92% { filter: brightness(1.06); }
  93% { filter: brightness(.92); }
  94% { filter: brightness(1.10); }
  96% { filter: brightness(.98); }
}

/* =========================
   HERO MEDIA : neon poster + frame
   ========================= */
.heroMedia{
  border-color: rgba(0,242,255,.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 36px 150px rgba(0,0,0,.78),
    0 0 160px rgba(0,242,255,.18);
  position:relative;
}

/* Frame glow */
.heroMedia::before{
  content:"";
  position:absolute; inset:-5px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(0,242,255,.95),
    rgba(255,45,247,.70),
    rgba(182,255,0,.40),
    rgba(106,53,255,.60),
    rgba(0,242,255,.95));
  filter: blur(14px);
  opacity:.42;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .heroMedia::before{ animation: frameBreath 2.4s ease-in-out infinite; }
}
@keyframes frameBreath{
  0%,100%{ opacity:.34; transform: translateY(0); }
  50%{ opacity:.52; transform: translateY(-2px); }
}

/* Bloom overlay */
.heroMedia::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(860px 480px at 16% 22%, rgba(0,242,255,.40), transparent 64%),
    radial-gradient(820px 460px at 86% 18%, rgba(255,45,247,.34), transparent 66%),
    radial-gradient(700px 420px at 70% 76%, rgba(182,255,0,.14), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%);
  mix-blend-mode: screen;
  opacity:.86;
}

/* =========================
   KPI : LED panels agressifs
   ========================= */
.kpi{
  border-color: rgba(0,242,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 20px 70px rgba(0,0,0,.55),
    0 0 42px rgba(0,242,255,.08);
}
.kpi b{
  text-shadow:
    0 0 22px rgba(0,242,255,.42),
    0 0 44px rgba(255,45,247,.22);
}

/* =========================
   CARDS : edge glow hard + highlights
   ========================= */
.pCard{
  position:relative;
  overflow:hidden;
}
.pCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--r2);
  padding:1px;
  background:
    linear-gradient(135deg,
      rgba(0,242,255,.70),
      rgba(255,45,247,.48),
      rgba(182,255,0,.20),
      rgba(255,255,255,0));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity: 1;
}
.pCard::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(280px 180px at 10% 0%, rgba(0,242,255,.30), transparent 72%),
    radial-gradient(280px 180px at 92% 0%, rgba(255,45,247,.24), transparent 74%),
    radial-gradient(260px 160px at 65% 115%, rgba(106,53,255,.18), transparent 72%);
  opacity:.95;
}
.pIcon{
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 20px 70px rgba(0,0,0,.62),
    0 0 44px rgba(0,242,255,.10);
}

/* Chips : plus “toxic pop” */
.chip{
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
}
.chip:nth-of-type(3n){
  border-color: rgba(182,255,0,.24);
  box-shadow: 0 0 0 4px rgba(182,255,0,.10);
}

/* =========================
   Focus states
   ========================= */
:where(a,button,input,select,textarea):focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(0,242,255,.26),
    0 0 70px rgba(255,45,247,.14);
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  body::before{ display:none; }
  body::after{ opacity:.65; }
  .tBtn.is-on{ animation:none; }
  .heroMedia::before{ animation:none; }
  .btn.primary{ animation:none; }
  .h1, .hero h1{ animation:none; }
}