/**
 * CERC Platform Shell - Animations
 * GSAP + Lenis hooks + transitions physiques
 * Anti-Lecon 38 : pas de "hover transition: all 0.2s" generique
 */

/* ===================================================
   REVEAL HOOKS pour GSAP ScrollTrigger
   =================================================== */

/* Elements a animer au scroll - etat initial */
[data-cerc-reveal] {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

[data-cerc-reveal="fade"] {
  opacity: 0;
  transform: none;
}

[data-cerc-reveal="left"] {
  opacity: 0;
  transform: translateX(-24px);
}

[data-cerc-reveal="scale"] {
  opacity: 0;
  transform: scale(0.92);
}

/* Etat final apres animation (classe ajoutee par GSAP) */
[data-cerc-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delay via CSS custom property (defini par GSAP) */
[data-cerc-stagger] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--cerc-ease), transform 400ms var(--cerc-ease);
  transition-delay: var(--cerc-stagger-delay, 0ms);
}
[data-cerc-stagger].is-revealed {
  opacity: 1;
  transform: none;
}

/* ===================================================
   HEADER STICKY COMPACT
   =================================================== */

.cerc-app-header {
  /* La transition est sur cerc-shell.css */
}

/* Quand compact : titre se compacte */
.cerc-app-header.is-scrolled .cerc-header-title h1 { font-size: 0.875rem; }
.cerc-app-header.is-scrolled .cerc-header-title span { display: none; }
.cerc-app-header.is-scrolled .cerc-logo-plaque { height: 36px; }
.cerc-app-header.is-scrolled .cerc-logo-plaque img { height: 24px; }

/* ===================================================
   COUNTER ANIMATION (KPI count-up)
   JS gere via GSAP ticker - CSS = etat final seulement
   =================================================== */

.cerc-kpi-value[data-count] {
  display: inline-block;
  min-width: 2ch;
}

/* ===================================================
   MICROINTERACTIONS
   =================================================== */

/* Focus ring custom (accessible) */
.cerc-filter-select:focus-visible,
.cerc-btn:focus-visible,
.cerc-nav-item:focus-visible,
.cerc-chat-submit:focus-visible {
  outline: 2px solid var(--cerc-vert);
  outline-offset: 2px;
}

/* Hover sur KPI card : trait vert + shadow */
.cerc-kpi-card {
  will-change: transform;
}

/* Link underline animation */
.cerc-link {
  color: var(--cerc-vert);
  text-decoration: none;
  position: relative;
  display: inline;
}
.cerc-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cerc-vert);
  transition: width 200ms var(--cerc-ease);
}
.cerc-link:hover::after { width: 100%; }

/* ===================================================
   LOADING / SKELETON
   =================================================== */

.cerc-skeleton {
  background: linear-gradient(
    90deg,
    var(--cerc-surface) 25%,
    var(--cerc-surface-2) 50%,
    var(--cerc-surface) 75%
  );
  background-size: 200% 100%;
  animation: cerc-shimmer 1.5s infinite;
  border-radius: var(--cerc-r-md);
}
@keyframes cerc-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ===================================================
   DEMO PAGE : grain de fond
   =================================================== */

.cerc-demo-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* ===================================================
   TRANSITIONS D'ENTREE PAGE
   =================================================== */

.cerc-page-enter {
  animation: cerc-page-in 300ms var(--cerc-ease) both;
}
@keyframes cerc-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================
   SPINNER
   =================================================== */

.cerc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cerc-border);
  border-top-color: var(--cerc-vert);
  border-radius: 50%;
  animation: cerc-spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes cerc-spin { to { transform: rotate(360deg); } }