/**
 * KLORGRAV — Animations CSS
 * Effets, transitions, keyframes
 * Les animations GSAP seront dans js/animations.js
 */

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,45,120,0.3); }
  50%       { box-shadow: 0 0 28px rgba(255,45,120,0.6); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes neonFlicker {
  0%, 100% { opacity: 1; }
  92%       { opacity: 1; }
  93%       { opacity: 0.6; }
  94%       { opacity: 1; }
  96%       { opacity: 0.8; }
  97%       { opacity: 1; }
}

/* ============================================================
   ÉTAT INITIAL — éléments animés au chargement
   (GSAP les anime via js/animations.js)
============================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(32px);
}

.js-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
}

.js-reveal-right {
  opacity: 0;
  transform: translateX(32px);
}

/* Classe ajoutée par GSAP quand l'animation est terminée */
.is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   FALLBACK — Sans JS, tout est visible
============================================================ */
.no-js .js-reveal,
.no-js .js-reveal-left,
.no-js .js-reveal-right {
  opacity: 1;
  transform: none;
}

/* ============================================================
   HEADER — scroll effect
============================================================ */
.site-header {
  transition: background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

/* ============================================================
   LOGO — effet néon au hover
============================================================ */
.logo-link:hover .logo-text {
  text-shadow: 0 0 20px rgba(255,45,120,0.5);
}

/* ============================================================
   HERO — lueur ambiante derrière l'image
============================================================ */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(255,45,120,0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.hero-visual:hover::after {
  opacity: 1;
}

/* ============================================================
   GALERIE — effet lueur sur les cartes
============================================================ */
.gallery-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(255,45,120,0);
  transition: box-shadow var(--transition-base);
  pointer-events: none;
}

.gallery-card:hover::after {
  box-shadow: inset 0 0 0 1px rgba(255,45,120,0.5);
}

/* ============================================================
   SÉRIE CARDS — stagger au chargement
============================================================ */
.series-card:nth-child(1) { animation-delay: 0ms; }
.series-card:nth-child(2) { animation-delay: 80ms; }
.series-card:nth-child(3) { animation-delay: 160ms; }

/* ============================================================
   BTN — ripple effect
============================================================ */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
}

/* ============================================================
   LIGHTBOX — animation ouverture
============================================================ */
.lightbox:not([hidden]) .lightbox-content {
  animation: fadeInUp 0.3s ease both;
}

.lightbox:not([hidden]) .lightbox-overlay {
  animation: fadeIn 0.2s ease both;
}

/* ============================================================
   FAQ — animation ouverture
============================================================ */
.faq-item[open] .faq-answer {
  animation: fadeInUp 0.2s ease both;
}

/* ============================================================
   TITRE HERO — effet flicker néon (subtil)
============================================================ */
.hero-title-name {
  animation: neonFlicker 8s ease infinite;
}

/* ============================================================
   SCROLL INDICATOR (optionnel, page home)
============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.4;
  animation: fadeInUp 1s ease 1s both;
}

.scroll-indicator-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scanline 2s ease infinite;
}

.scroll-indicator-text {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}