/* Animations thématiques : BleachSoulResonance.guide
   Univers de référence : reiatsu (pression spirituelle), coups de sabre, pétales de
   Senbonzakura, Flash Step. Le site est un wiki : les effets restent discrets et ne
   gênent jamais la lecture.
   Palette reprise du site : --gold #FBED6E, fond #0a0a0f. */

:root {
  --bsr-gold: #FBED6E;
  --bsr-orange: #f7a832;
  --bsr-reiatsu: rgba(251, 237, 110, .55);
}

/* ============ 1. REVEAL AU SCROLL : "Flash Step" ============
   Les blocs surgissent brièvement, comme une apparition en Shunpo.

   IMPORTANT : rien n'est masqué "par défaut". Un premier essai posait opacity:0
   sur les blocs à révéler, et 8 blocs de la page d'accueil sont restés invisibles
   (le titre, l'intro, la bannière...). Du contenu invisible sur la page la plus vue
   est inacceptable, et je n'ai pas pu isoler la cause avec certitude.
   Ici le masquage est posé PAR LE JS, uniquement sur les blocs hors écran, et retiré
   dès qu'ils entrent : si quoi que ce soit échoue, tout reste lisible.

   Le reveal n'anime QUE le mouvement, jamais l'opacité. Raison : si l'horloge d'animation
   du navigateur se fige (cas observé en environnement de test), un keyframe partant de
   opacity:0 laisse le bloc invisible pour toujours. En n'animant que translateY, le pire
   cas est un bloc décalé de 16px : toujours lisible. La lisibilité ne dépend d'aucune
   animation. */
.bsr-anim .bsr-cache {
  transform: translateY(16px);
}
.bsr-anim .bsr-vu {
  animation: bsr-entree .5s cubic-bezier(.22, .9, .3, 1) both;
  animation-delay: var(--bsr-d, 0ms);
}
@keyframes bsr-entree {
  from { transform: translateY(16px); }
  to   { transform: none; }
}

/* ============ 2. TITRES : coup de sabre ============
   Un trait lumineux traverse le titre à son apparition, puis s'efface. */
.bsr-anim .section-title,
.bsr-anim .header-separator,
.bsr-anim .category-title { position: relative; overflow: hidden; }
.bsr-anim .section-title::after,
.bsr-anim .header-separator::after,
.bsr-anim .category-title::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 55%;
  background: linear-gradient(100deg, transparent, var(--bsr-reiatsu), transparent);
  transform: skewX(-22deg);
  opacity: 0;
  pointer-events: none;
}
.bsr-anim .section-title.bsr-vu::after,
.bsr-anim .header-separator.bsr-vu::after,
.bsr-anim .category-title.bsr-vu::after { animation: bsr-slash .85s ease-out .1s 1; }
@keyframes bsr-slash {
  0%   { left: -60%; opacity: 0; }
  35%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* ============ 3. CARTES : aura de reiatsu au survol ============ */
.bsr-anim article.card,
.bsr-anim a.char-card,
.bsr-anim .character-card,
.bsr-anim .hub-card,
.bsr-anim .link-card,
.bsr-anim .stamp-card {
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease;
}
.bsr-anim article.card:hover,
.bsr-anim a.char-card:hover,
.bsr-anim .character-card:hover,
.bsr-anim .hub-card:hover,
.bsr-anim .link-card:hover,
.bsr-anim .stamp-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(251, 237, 110, .28);
  z-index: 3;
}
/* les SSR dégagent une pression spirituelle plus forte */
.bsr-anim article.card[data-rarity="SSR"]:hover,
.bsr-anim a.char-card[data-char-rarity="SSR"]:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, .6), 0 0 30px rgba(251, 237, 110, .5);
}

/* ============ 4. IMAGES : onde "Getsuga Tenshō" au survol ============ */
.bsr-anim .card-image-wrap { position: relative; overflow: hidden; }
.bsr-anim .card-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(251, 237, 110, .30) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.bsr-anim article.card:hover .card-image-wrap::after,
.bsr-anim a.char-card:hover .card-image-wrap::after { animation: bsr-getsuga .7s ease-out 1; }
@keyframes bsr-getsuga {
  to { transform: translateX(120%); }
}

/* ============ 5. VALEURS CHIFFRÉES : charge de reiatsu ============
   Les pourcentages de dégâts pulsent très légèrement au survol de leur bloc. */
.bsr-anim .skill-value {
  transition: color .25s ease, text-shadow .25s ease;
}
.bsr-anim .skill-card:hover .skill-value,
.bsr-anim .ascension-row:hover .skill-value {
  color: var(--bsr-gold);
  text-shadow: 0 0 10px rgba(251, 237, 110, .55);
}

/* ============ 6. ÉTOILES DE RARETÉ : scintillement AU SURVOL SEULEMENT ============
   Volontairement pas d'animation en boucle : certaines pages portent plus de 500 étoiles,
   et une animation infinie avec drop-shadow sur autant d'éléments sature le rendu
   (mesuré : la page devenait injouable). Ici le coût est nul au repos. */
.bsr-anim .rarity-star, .bsr-anim .stamp-star { transition: filter .25s ease; }
.bsr-anim article.card:hover .rarity-star,
.bsr-anim article.card:hover .stamp-star,
.bsr-anim .stamp-card:hover .stamp-star {
  filter: brightness(1.4);
}
/* une seule étoile scintille en continu : le badge de rareté d'une fiche perso */
.bsr-anim .char-rarity { animation: bsr-scintille 3.2s ease-in-out infinite; }
@keyframes bsr-scintille {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* ============ 7. PÉTALES DE SENBONZAKURA ============
   Fond décoratif : quelques pétales dérivent lentement. Desktop uniquement. */
.bsr-petales {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bsr-petale {
  position: absolute;
  top: -6vh;
  width: 9px; height: 9px;
  background: linear-gradient(135deg, #ffb7c5, #e86a8a);
  border-radius: 80% 10% 80% 10%;
  opacity: .32;
  animation: bsr-chute linear infinite;
}
@keyframes bsr-chute {
  0%   { transform: translateY(-6vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(106vh) translateX(90px) rotate(420deg); }
}

/* ============ 8. LIENS ET BOUTONS ============ */
.bsr-anim .filter-btn { transition: transform .18s ease, background-color .2s ease, color .2s ease; }
.bsr-anim .filter-btn:hover { transform: translateY(-2px); }
.bsr-anim .filter-btn.active { box-shadow: 0 0 14px rgba(251, 237, 110, .35); }

/* ============ 9. RANGÉES DE TIER LIST ============ */
.bsr-anim .tier-label { transition: text-shadow .3s ease; }
.bsr-anim .tier-row:hover .tier-label { text-shadow: 0 0 14px rgba(251, 237, 110, .7); }

/* ============ ACCESSIBILITÉ ============
   Respect strict du réglage système : aucun mouvement si l'utilisateur l'a désactivé. */
@media (prefers-reduced-motion: reduce) {
  .bsr-anim .bsr-cache, .bsr-anim .bsr-vu { opacity: 1 !important; transform: none !important; }
  .bsr-anim *, .bsr-anim *::before, .bsr-anim *::after {
    animation: none !important;
    transition: none !important;
  }
  .bsr-petales { display: none !important; }
}

/* ============ NAVIGATION MOBILE ============
   Le CSS du site prévoit déjà .sidebar.active { left: 0 } sous 1200px, mais je ne veux pas
   que la navigation mobile dépende d'une règle que je ne maîtrise pas : sans elle, le menu
   ne s'ouvre plus du tout et le site devient inutilisable au doigt. Règle de sécurité. */
@media (max-width: 1200px) {
  .sidebar { transition: left .3s ease; }
  .sidebar.active { left: 0 !important; }
}

/* ============ GARDE-FOU ============
   Le contenu structurant de l'accueil ne doit JAMAIS pouvoir être masqué par une animation,
   quelle qu'en soit la cause. Règle de dernier recours, volontairement en !important. */
.page-header, .intro-content, .event-section, .notice-updates,
.content-wrapper > .content-section {
  opacity: 1 !important;
}

/* mobile : on allège (pas de pétales, pas de survol au doigt) */
@media (max-width: 800px) {
  .bsr-petales { display: none; }
  .bsr-anim article.card:hover, .bsr-anim a.char-card:hover { transform: none; }
}