/* ============================================================
   GOWRAX UI KIT — styles partagés de modernisation
   ------------------------------------------------------------
   Importé par toutes les pages :
   <link rel="stylesheet" href="/assets/css/gowrax-ui.css">
   <script src="/assets/js/gowrax-ui.js" defer></script>
   ============================================================ */

:root {
  --grx-neon: #D62F7F;
  --grx-ether: #A2D2FF;
  --grx-lavender: #B185DB;
  --grx-quartz: #F7CAD0;
  --grx-gold: #E9C46A;
  --grx-abyss: #0D0E15;
}

/* ── Reveal au scroll ─────────────────────────────────────
   Pose data-reveal sur un élément ; le JS ajoute .grx-visible
   quand il entre dans le viewport. data-reveal-delay="1..6"
   pour un effet cascade. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }

[data-reveal].grx-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }

/* ── Tilt 3D ──────────────────────────────────────────────
   Pose data-tilt sur une carte ; le JS pilote --grx-rx/--grx-ry.
   Le glow suit le curseur via --grx-mx/--grx-my (en %). */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(var(--grx-rx, 0deg))
             rotateY(var(--grx-ry, 0deg));
  transition: transform .25s ease-out;
}
[data-tilt]:hover { transition: transform .08s linear; }

[data-tilt] .grx-glow {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    480px circle at var(--grx-mx, 50%) var(--grx-my, 50%),
    rgba(247, 202, 208, 0.08), transparent 65%
  );
  transition: opacity .4s ease;
}
[data-tilt]:hover .grx-glow { opacity: 1; }

/* ── Lueur de texte douce (titres hero) ── */
.grx-title-glow { text-shadow: 0 0 40px rgba(247, 202, 208, .25); }

/* ── Texte en dégradé animé (signature Gowrax) ──
   Quartz → Néon → Ether qui ondule lentement dans le titre. */
.grx-gradient-text {
  background: linear-gradient(110deg,
    #F0F2F5 0%, #F7CAD0 22%, #D62F7F 45%, #B185DB 62%, #A2D2FF 80%, #F0F2F5 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grxShimmer 7s linear infinite;
}
@keyframes grxShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: -250% 0; }
}

/* ── Carte verre signature ──
   Glassmorphism + liseré dégradé qui s'allume au survol. */
.grx-card {
  position: relative;
  background: rgba(20, 22, 38, 0.38);
  border: 1px solid rgba(247, 202, 208, 0.09);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              border-color .45s ease, box-shadow .45s ease;
}
.grx-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(214, 47, 127, 0.14), transparent 38%, rgba(162, 210, 255, 0.10));
  opacity: 0; transition: opacity .45s ease;
}
.grx-card:hover {
  transform: translateY(-6px);
  border-color: rgba(214, 47, 127, 0.45);
  box-shadow: 0 18px 44px rgba(214, 47, 127, 0.13),
              0 4px 18px rgba(162, 210, 255, 0.08);
}
.grx-card:hover::before { opacity: 1; }

/* ── Ligne décorative en dégradé ── */
.grx-deco-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 202, 208, .25), transparent);
}

/* ── Accessibilité : focus clavier visible partout ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--grx-ether);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Sélection de texte cohérente ── */
::selection { background: rgba(111, 45, 189, .65); color: #fff; }

/* ── Scrollbar discrète (pages scrollables) ── */
@media (min-width: 768px) {
  .grx-scroll::-webkit-scrollbar { width: 6px; }
  .grx-scroll::-webkit-scrollbar-track { background: transparent; }
  .grx-scroll::-webkit-scrollbar-thumb {
    background: rgba(177, 133, 219, .25);
    border-radius: 6px;
  }
  .grx-scroll::-webkit-scrollbar-thumb:hover { background: rgba(177, 133, 219, .5); }
}

/* ── Mouvement réduit : on neutralise tout ─────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-tilt] { transform: none !important; transition: none !important; }
  [data-tilt] .grx-glow { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}