/* ============================================
   ZEKKO — REFONTE "SYNTHWAVE DEN"
   Couche additive : chargée APRÈS style.css.
   Surcharge les tokens + ajoute aurore animée,
   amplification du hero, apparitions au scroll.
   ============================================ */

/* ---- 1. Palette retravaillée (ruisselle dans tout le site via les vars) ---- */
:root {
  --bg:  #0b0913;
  --bg2: #12101d;
  --bg3: #1a1626;
  --card: #14111e;
  --gold:      #C9A24B;
  --gold-soft: #E8D9A0;
  --violet:    #B06AD8;
  /* On remappe les anciennes variables néon vers la palette premium :
     tout le CSS existant (boutons, bordures, lueurs…) bascule en or/violet. */
  --cyan:   #C9A24B;
  --pink:   #B06AD8;
  --purple: #B06AD8;
  --mint:   #C9A24B;
  --yellow: #E8D9A0;
  --text:  #ECE7D9;
  --muted: #9A92A8;
  --border:     rgba(201, 162, 75, 0.20);
  --border-hot: rgba(176, 106, 216, 0.30);
  --glow-cyan: 0 0 0 rgba(0,0,0,0);
  --glow-pink: 0 0 0 rgba(0,0,0,0);
}

body {
  background:
    radial-gradient(1100px 720px at 50% -12%, rgba(176,106,216,0.12), transparent 62%),
    radial-gradient(900px 600px at 92% 112%, rgba(201,162,75,0.09), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Direction premium : fond calme et statique (plus d'aurore néon mobile) */
.zk-aurora { display: none; }

/* ---- 2. Aurore animée (DOM injecté par motion.js) ---- */
.zk-aurora {
  position: fixed;
  inset: -10vh -10vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.zk-blob {
  position: absolute;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.zk-blob.b1 { background: radial-gradient(circle, var(--cyan),   transparent 62%); top: -12%; left: -8%;  animation: zk-drift1 19s ease-in-out infinite; }
.zk-blob.b2 { background: radial-gradient(circle, var(--pink),   transparent 62%); top: -6%;  right: -10%; animation: zk-drift2 23s ease-in-out infinite; }
.zk-blob.b3 { background: radial-gradient(circle, var(--purple), transparent 62%); bottom: -16%; right: 4%; animation: zk-drift3 27s ease-in-out infinite; }
.zk-blob.b4 { background: radial-gradient(circle, var(--mint),   transparent 64%); bottom: -18%; left: -6%; animation: zk-drift4 21s ease-in-out infinite; }

@keyframes zk-drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes zk-drift2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-12vw, 12vh) scale(0.92); } }
@keyframes zk-drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-10vw, -12vh) scale(1.15); } }
@keyframes zk-drift4 { 0%,100% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(12vw, -10vh) scale(0.95); } }

/* ---- 3. Hero amplifié ---- */
.hero h1 .name-text {
  background: linear-gradient(110deg, var(--pink) 0%, var(--purple) 35%, var(--cyan) 68%, var(--mint) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: zk-name-shimmer 7s linear infinite;
  filter: drop-shadow(0 0 26px rgba(255,61,174,0.35)) drop-shadow(0 0 44px rgba(0,245,255,0.25));
}
@keyframes zk-name-shimmer { to { background-position: 240% 0; } }

.hero h1 .name-ghost { animation: zk-glitch-name 4.5s infinite; opacity: 0.28; }
@keyframes zk-glitch-name {
  0%, 78%, 100% { transform: none; clip-path: none; }
  80% { transform: translate(-7px, 2px); clip-path: inset(0 0 62% 0); }
  82% { transform: translate(6px, -2px); clip-path: inset(58% 0 0 0); }
  84% { transform: translate(-4px, 0);   clip-path: inset(30% 0 40% 0); }
  86% { transform: none; clip-path: none; }
}

/* Halo conique tournant derrière l'avatar */
.avatar-outer::after {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cyan), var(--pink), var(--purple), var(--mint), var(--cyan));
  filter: blur(34px);
  opacity: 0.32;
  z-index: -1;
  animation: rotate-ring 16s linear infinite;
}
.avatar-ring { box-shadow: 0 0 38px rgba(255,61,174,0.22), 0 0 64px rgba(0,245,255,0.16); }

/* Boutons : dégradé multi-néon animé + glow renforcé */
.btn-primary::before {
  background: linear-gradient(110deg, var(--cyan), var(--purple) 45%, var(--pink));
  background-size: 220% 100%;
  animation: zk-btn-flow 4.5s linear infinite;
}
@keyframes zk-btn-flow { to { background-position: 220% 0; } }
.btn-primary:hover { box-shadow: 0 0 26px rgba(0,245,255,0.5), 0 0 48px rgba(255,61,174,0.32); }
.btn-secondary:hover { box-shadow: 0 0 22px rgba(157,91,255,0.4), inset 0 0 22px rgba(0,245,255,0.06); }

/* ---- 4. Séparateur : ligne néon balayée ---- */
.divider {
  position: relative;
  height: 64px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.divider::before {
  content: '';
  width: min(640px, 78%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  background-size: 220% 100%;
  animation: zk-div-sweep 5s linear infinite;
  box-shadow: 0 0 12px rgba(0,245,255,0.4);
}
@keyframes zk-div-sweep { to { background-position: 220% 0; } }

/* ---- 5. Apparitions au scroll (classes posées par motion.js) ---- */
.zk-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.zk-reveal.zk-in { opacity: 1; transform: none; }

/* ---- 6. Thème trans = saisonnier (juin uniquement, via body.pride-month) ---- */
/* Hors juin : on masque les banderoles Pride et on garde le synthwave pur. */
body:not(.pride-month) .pride-banner,
body:not(.pride-month) .pride-month-banner { display: none !important; }

/* Titres de section : dégradé synthwave animé (le thème trans de juin le surcharge). */
.section-title {
  background: linear-gradient(100deg, var(--cyan), var(--pink) 55%, var(--purple));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: zk-name-shimmer 8s linear infinite;
}

/* ============================================================
   7. HERO V2 — vitrine technique (CSS de pointe)
   @property · conic anim · scroll-driven · color-mix/oklch ·
   container queries · 3D · text-wrap · svh · view transitions
   ============================================================ */

/* Propriété custom animable (interpolation fluide de l'angle conique) */
@property --zk-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Transitions douces entre pages (index ↔ stats ↔ historique) */
@view-transition { navigation: auto; }

.hero-v2 {
  position: relative;
  display: block;
  min-height: 100svh;                 /* nouvelle unité viewport */
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  container-type: inline-size;        /* container queries */
}

/* ---- HUD : crochets d'angle ---- */
.hud-bracket {
  position: absolute;
  width: clamp(26px, 4vw, 52px);
  aspect-ratio: 1;
  z-index: 5;
  pointer-events: none;
  border: 2px solid color-mix(in oklch, var(--cyan) 65%, transparent);
  opacity: 0.5;
  animation: zk-hud-pulse 4s ease-in-out infinite;
}
.hud-bracket.tl { top: 92px;  left: 22px;  border-right: 0; border-bottom: 0; }
.hud-bracket.tr { top: 92px;  right: 22px; border-left: 0;  border-bottom: 0; }
.hud-bracket.bl { bottom: 70px; left: 22px;  border-right: 0; border-top: 0; }
.hud-bracket.br { bottom: 70px; right: 22px; border-left: 0;  border-top: 0; }
@keyframes zk-hud-pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 0.6; } }

/* ---- Watermark géant en fond ---- */
.hero-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none;
}
.hero-watermark span {
  font: 900 italic min(31vw, 440px)/0.8 'Exo 2', sans-serif;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklch, var(--cyan) 18%, transparent);
}
/* Parallaxe pilotée par le scroll, sans JS */
@supports (animation-timeline: scroll()) {
  .hero-watermark span {
    animation: zk-wm-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 90vh;
  }
  /* Simple fondu au scroll, sans déplacement (évite la vection). */
  @keyframes zk-wm-parallax {
    to { opacity: 0.3; }
  }
}

/* ---- Scène : avatar centré ---- */
.hero-v2 .hero-stage {
  position: relative;
  z-index: 3;
  width: min(1240px, 92vw);
  margin-inline: auto;
  min-height: 100svh;
  display: grid;
  place-items: center;
}
.hero-v2 .hero-visual {
  position: relative;
  z-index: 3;
  perspective: 1100px;                /* profondeur 3D */
}
.hero-v2 .avatar-outer {
  width: clamp(260px, 36vw, 440px);
  height: clamp(260px, 36vw, 440px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.hero-v2 .hero-visual:hover .avatar-outer {
  transform: rotateY(-9deg) rotateX(6deg) scale(1.02);
}
/* Anneau néon conique animé via @property (rotation fluide réelle) */
.hero-v2 .avatar-ring {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--zk-angle), var(--cyan), var(--pink), var(--purple), var(--mint), var(--cyan)) border-box;
  border: 2px solid transparent;
  animation: zk-spin 6s linear infinite;
}
@keyframes zk-spin { to { --zk-angle: 360deg; } }

.hero-v2 .avatar-credit {
  position: relative;
  z-index: 3;
  margin-top: 1rem;
  text-align: center;
}

/* ---- Panneau glass en surimpression ---- */
.hero-v2 .hero-panel {
  position: absolute;
  left: max(22px, calc(50% - 605px));
  bottom: 13svh;
  z-index: 4;
  width: min(440px, 86vw);
  padding: 1.6rem 1.85rem;
  background: color-mix(in oklch, var(--bg2) 60%, transparent);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid color-mix(in oklch, var(--cyan) 22%, transparent);
  border-radius: 20px;
  box-shadow: 0 24px 70px -24px color-mix(in oklch, var(--pink) 45%, transparent);
}
.hero-v2 .hero-panel h1 {
  font-size: clamp(1.9rem, 3cqi + 1.2rem, 3rem);   /* unité container query */
  margin-bottom: 1rem;
}
.hero-v2 .hero-sub {
  text-wrap: balance;
  max-width: 40ch;
  margin-bottom: 1.5rem;
}

/* ---- Marquee défilant ---- */
.hero-marquee {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  overflow: hidden;
  padding-block: 0.55rem;
  border-block: 1px solid color-mix(in oklch, var(--cyan) 18%, transparent);
  background: color-mix(in oklch, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee-track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  will-change: transform;
  animation: zk-marquee 28s linear infinite;
}
.hero-marquee-track span {
  font: 700 0.82rem/1 'Share Tech Mono', monospace;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-right: 1ch;
  color: color-mix(in oklch, var(--cyan) 80%, white);
}
@keyframes zk-marquee { to { transform: translateX(-50%); } }

/* ---- Empilement sur petit écran (container query) ---- */
@container (max-width: 860px) {
  .hero-v2 .hero-stage { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding-block: 6rem 4rem; }
  .hero-v2 .hero-panel { position: static; width: min(440px, 92vw); }
  .hero-watermark span { font-size: 42vw; }
}

/* ---- 8. Respect de prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .zk-blob,
  .avatar-outer::after,
  .hero h1 .name-text,
  .hero h1 .name-ghost,
  .section-title,
  .btn-primary::before,
  .divider::before,
  .hud-bracket,
  .hero-watermark span,
  .hero-v2 .avatar-ring,
  .hero-marquee-track { animation: none !important; }
  .hero-v2 .hero-visual:hover .avatar-outer { transform: none; }
  .zk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- 9. Backdrop WebGL (scene3d.js) ---- */
.zk-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  -webkit-mask-image: radial-gradient(135% 105% at 50% 38%, #000 52%, transparent 100%);
          mask-image: radial-gradient(135% 105% at 50% 38%, #000 52%, transparent 100%);
}
.zk-scene canvas { display: block; width: 100% !important; height: 100% !important; }
body.zk-3d .zk-scene { opacity: 1; }
/* Quand la 3D tourne, l'aurore CSS passe derrière et s'atténue (profondeur). */
body.zk-3d .zk-aurora { z-index: -2; opacity: 0.4; }

/* ============================================================
   10. DIRECTION "SOMBRE PREMIUM" — or & violet, serif élégant
   ============================================================ */
@font-face {
  font-family: 'Playfair Display';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/playfair-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-weight: 700; font-style: italic; font-display: swap;
  src: url('../fonts/playfair-display-700-italic.woff2') format('woff2');
}

/* Nom "Zekko" : serif italique, dégradé or → violet, sans glitch */
.hero h1 .name-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 45%, var(--violet));
  background-size: 200% 100%;
  filter: drop-shadow(0 2px 20px rgba(201,162,75,0.22));
}
.hero h1 .name-ghost { display: none; }
.hero h1 .line1, .hero h1 .line2 { color: var(--text); font-style: normal; }

/* Titres de section : même serif élégant */
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 60%, var(--violet));
}

/* Lueurs néon → ombres douces or/violet */
.avatar-ring { box-shadow: 0 0 36px rgba(201,162,75,0.16), 0 0 70px rgba(176,106,216,0.12); }
.avatar-outer::after { opacity: 0.2; }
.btn-primary:hover { box-shadow: 0 10px 32px -10px rgba(201,162,75,0.55); }
.btn-secondary:hover { box-shadow: 0 10px 28px -12px rgba(176,106,216,0.45), inset 0 0 0 1px rgba(201,162,75,0.22); }
.divider::before { box-shadow: 0 0 10px rgba(201,162,75,0.32); }
nav { border-bottom-color: rgba(201,162,75,0.18); }

/* Panneau verre premium : liseré or fin */
.hero-v2 .hero-panel {
  border-color: rgba(201,162,75,0.26);
  box-shadow: 0 28px 80px -28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(232,217,160,0.12);
}

/* Marquee : version discrète et élégante (plus de mono néon ni de //) */
.hero-marquee {
  border-block: none;
  border-top: 1px solid color-mix(in oklch, var(--gold) 14%, transparent);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-block: 0.75rem;
}
.hero-marquee-track { animation-duration: 48s; }
.hero-marquee-track span {
  font-family: 'Exo 2', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: none;
  color: color-mix(in oklch, var(--gold-soft) 60%, var(--muted));
  opacity: 0.7;
}

/* ---- Formulaire candidature modérateur (#mod-apply) ---- */
.mod-intro { color: var(--muted); max-width: 640px; margin-bottom: 1.4rem; line-height: 1.65; }
.mod-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 640px; }
.mod-form-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.mod-form-row .suggest-input { flex: 1; min-width: 150px; }
.mod-textarea {
  resize: vertical;
  min-height: 68px;
  font-family: 'Exo 2', sans-serif;
  line-height: 1.5;
  padding-top: 0.6rem;
}