/* ============================================================
   Don Tom — couche "premium" (visuel). Fichier isolé : retirer le
   <link> annule tout.
   1) Rayons : rotation lente autour de l'écran (comme avant) + TOUS
      les rayons en dégradé progressif + léger scintillement (moiré doux).
   2) Reflet blanc "DBZ" qui balaie le vinyle ET le titre "Don Tom"
      en même temps, une fois.
   3) Grain cinéma léger sur le hero, en soft-light (n'empâte pas les
      creux des lettres) + animation par background-position.
   ============================================================ */

/* ---------- 1) Rayons : sunburst 360°, rotation lente autour de l'écran ----------
   Calque agrandi à 300% et centré sur l'écran (rotation autour du centre =
   même style qu'avant). Point de fuite JUSTE hors champ (68% 32% du grand
   calque -> coefficient ~0.54 > 0.5 = à peine au-delà du coin, petite marge) :
   son orbite reste toujours hors viewport -> on ne voit jamais le centre,
   seulement les rayons qui balaient près des bords. */
.hero__rays {
  inset: -100% !important;            /* 300% x 300%, centré sur le hero */
  height: auto !important;
  background:
    repeating-conic-gradient(from 0deg at 68% 32%,
      rgba(255,247,214,0)    0deg,
      rgba(255,247,214,.22)  5deg,
      rgba(255,247,214,0)    10deg,
      rgba(255,247,214,0)    18deg) !important;
  -webkit-mask-image: radial-gradient(70% 70% at 68% 32%, #000 0%, #000 8%, transparent 85%) !important;
          mask-image: radial-gradient(70% 70% at 68% 32%, #000 0%, #000 8%, transparent 85%) !important;
}
/* 2e nappe très douce, pas angulaire légèrement différent -> moiré scintillant lent */
.hero__rays::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg at 68% 32%,
      rgba(255,247,214,0)    0deg,
      rgba(255,247,214,.15)  4.5deg,
      rgba(255,247,214,0)    9deg,
      rgba(255,247,214,0)    16deg);
  -webkit-mask-image: radial-gradient(70% 70% at 68% 32%, #000 0%, #000 8%, transparent 85%);
          mask-image: radial-gradient(70% 70% at 68% 32%, #000 0%, #000 8%, transparent 85%);
  mix-blend-mode: screen;
  animation: rayRoll 240s linear infinite, rayTwinkle 8s ease-in-out infinite; /* opposé + très lent */
  will-change: transform, opacity;
}
@keyframes rayRoll    { to { transform: rotate(-360deg); } }
@keyframes rayTwinkle { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }

/* ---------- Intro : fondu de sortie rapide -> le hero apparaît tôt, sans "saut" ---------- */
.intro { transition: opacity .3s var(--ease, ease), visibility .3s !important; }
/* "Rocksteady baby !" un peu plus écarté du bouton "Entrer" */
.intro__note { margin-top: 48px !important; }
/* Carte Don Tom : retire le contour blanc (border cream) + désactive l'animation CSS dropIn
   (sinon elle apparaît en 0,9 s et entre en conflit avec le fondu lent géré par GSAP). */
.intro__logo { border: none !important; animation: none !important; }

/* ---------- 2) Reflet "DBZ" (vinyle uniquement) ---------- */
.gleam {
  position: absolute;
  inset: 0;                                   /* couvre l'hôte (titre) par défaut */
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
/* clip-path : découpe FIABLEMENT le reflet (y compris son mix-blend-mode) en rond,
   sinon le blend reste dans un buffer carré et on voit une forme carrée sur le vinyle. */
.gleam--round { border-radius: 50%; -webkit-clip-path: circle(50%); clip-path: circle(50%); }
.gleam i {
  position: absolute;
  top: -30%; left: 0;
  width: 40%; height: 160%;
  transform: rotate(20deg);
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0) 16%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0) 84%, transparent 100%);
  filter: blur(.6px);
  mix-blend-mode: screen;
  opacity: 0;
}
/* Variante "carte Don Tom" : reflet large à double frange chaude, angle plus doux
   -> nettement différent du trait blanc net du vinyle. */
.gleam--card i {
  width: 66%;
  transform: rotate(9deg);
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,244,214,0) 14%,
    rgba(255,234,184,.5) 37%,
    rgba(255,252,240,.95) 50%,
    rgba(255,234,184,.5) 63%,
    rgba(255,244,214,0) 86%, transparent 100%);
  filter: blur(2.5px);
}

/* ---------- Bouton "Entrer" restylisé (override de style.css), SANS reflet ---------- */
.enter-btn {
  background: linear-gradient(180deg, #2c3e21 0%, #21301a 58%, #19240f 100%) !important;
  color: var(--cream-2, #f7eccf) !important;
  border: none !important;
  outline: none !important;                 /* supprime le contour bleu de focus */
  border-radius: 999px !important;
  padding: 15px 32px 15px 16px !important;
  /* liseré OR permanent -> accorde le bouton aux tons or/crème de l'intro */
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(247,236,207,.16),
              inset 0 0 0 1px rgba(235,179,57,.32) !important;
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease), background .25s var(--ease, ease) !important;
}
.enter-btn:focus { outline: none !important; }
.enter-btn:focus-visible {                  /* accessibilité : anneau doré (et non bleu) */
  outline: none !important;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5),
              inset 0 0 0 1px rgba(235,179,57,.5),
              0 0 0 4px rgba(235,179,57,.4) !important;
}
.enter-btn:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(180deg, #33491f 0%, #25371d 58%, #1b2a13 100%) !important;
  box-shadow: 0 22px 44px -14px rgba(0,0,0,.55),
              inset 0 0 0 1px rgba(235,179,57,.6),
              0 0 0 5px rgba(235,179,57,.14) !important;
}
.enter-btn:active { transform: translateY(-1px) scale(.99) !important; }
.enter-btn__icon {
  background: radial-gradient(120% 120% at 35% 25%, #ffe08a 0%, var(--gold, #EBB339) 70%) !important;
  color: #1b2a13 !important;
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4) !important;
  animation: none !important;            /* plus d'anneau qui pulse : plus sobre/classe */
}

/* ---------- 3) Grain cinéma (soft-light, animé par background-position) ---------- */
.hero__grain {
  inset: 0;
  opacity: .14;
  mix-blend-mode: soft-light;                 /* éclaircit/assombrit en douceur, sans cimenter */
  animation: grainShift .55s steps(1) infinite;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  20%  { background-position: -26px 14px; }
  40%  { background-position: 20px -22px; }
  60%  { background-position: -16px -14px; }
  80%  { background-position: 24px 18px; }
  100% { background-position: -10px 10px; }
}

/* Effets voulus partout : maintenus même en reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .hero__rays        { animation: spin 120s linear infinite !important; }
  .hero__rays::after { animation: rayRoll 240s linear infinite, rayTwinkle 8s ease-in-out infinite !important; }
  .hero__grain       { animation: grainShift .55s steps(1) infinite !important; }
}

/* Mobile : on allège pour une animation fluide
   - grain FIGÉ (l'animation = repeinture ~14x/s en soft-light, trop coûteuse sur tél)
   - 2e nappe de rayons retirée (un grand conic animé en moins -> GPU soulagé) */
@media (max-width: 760px) {
  .hero__grain { animation: none !important; }
  .hero__rays::after { display: none; }
}