/**
 * EDEN ROLEPLAY - VERSION SUBTILE ET DOUCE
 * Animations minimalistes et fluides
 * Sans effets agressifs
 */

/* ==================== CSS VARIABLES ==================== */
:root {
  /* Colors */
  --color-primary: #526b46;
  --color-secondary: #cbd3c3;
  --color-dark: #1a1a1a;
  --color-darker: #0d0d0d;

  /* Animation timing - Plus doux */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Dynamic values */
  --mouse-x: 0;
  --mouse-y: 0;
  --scroll-progress: 0;
}

/* ==================== BACKGROUND SIMPLE ==================== */
.simple-gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(
    180deg,
    var(--color-darker) 0%,
    var(--color-dark) 100%
  );
  /* Pas d'animation */
}

/* ==================== FADE IN DOUX ==================== */
.fade-in {
  animation: gentle-fade-in 0.8s var(--ease-gentle) forwards;
}

@keyframes gentle-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== SECTION TRANSITIONS SUBTILES ==================== */
.section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-smooth),
              transform 0.6s var(--ease-smooth);
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== HOVER SIMPLE ==================== */
.soft-hover {
  transition: transform 0.3s var(--ease-smooth),
              box-shadow 0.3s var(--ease-smooth);
}

.soft-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(82, 107, 70, 0.15);
}

/* ==================== GLASS EFFECT SIMPLE ==================== */
.glass-simple {
  background: rgba(82, 107, 70, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(203, 211, 195, 0.1);
  transition: background 0.3s var(--ease-smooth);
}

.glass-simple:hover {
  background: rgba(82, 107, 70, 0.08);
}

/* ==================== BOUTONS DRAGGABLES ==================== */
.draggable {
  cursor: move;
  user-select: none;
  transition: transform 0.3s var(--ease-smooth),
              box-shadow 0.3s var(--ease-smooth);
}

.draggable:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(82, 107, 70, 0.2);
}

.draggable.dragging {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(82, 107, 70, 0.3);
  z-index: 1000;
}

/* ==================== STAGGER DOUX ==================== */
.stagger-gentle {
  opacity: 0;
  transform: translateY(15px);
}

.stagger-gentle.visible {
  animation: stagger-appear 0.5s var(--ease-gentle) forwards;
}

@keyframes stagger-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-gentle:nth-child(1) { animation-delay: 0.05s; }
.stagger-gentle:nth-child(2) { animation-delay: 0.1s; }
.stagger-gentle:nth-child(3) { animation-delay: 0.15s; }
.stagger-gentle:nth-child(4) { animation-delay: 0.2s; }
.stagger-gentle:nth-child(5) { animation-delay: 0.25s; }
.stagger-gentle:nth-child(6) { animation-delay: 0.3s; }

/* ==================== SCROLL PROGRESS BAR SIMPLE ==================== */
.scroll-progress-simple {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform-origin: left;
  transform: scaleX(var(--scroll-progress));
  z-index: 9999;
  will-change: transform;
}

/* ==================== PARALLAX LÉGER (optionnel) ==================== */
.parallax-gentle {
  transition: transform 0.5s var(--ease-smooth);
}

/* ==================== NAVIGATION DOUCE ==================== */
.nav-smooth {
  transition: background 0.3s var(--ease-smooth),
              backdrop-filter 0.3s var(--ease-smooth);
}

.nav-smooth.scrolled {
  background: rgba(13, 13, 13, 0.8);
  backdrop-filter: blur(10px);
}

/* ==================== IMAGES SMOOTH ==================== */
.img-smooth {
  transition: transform 0.4s var(--ease-smooth),
              filter 0.4s var(--ease-smooth);
}

.img-smooth:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* ==================== LOADING DOUX ==================== */
.loading-smooth {
  opacity: 0;
}

.loading-smooth.loaded {
  animation: load-fade 0.6s var(--ease-smooth) forwards;
}

@keyframes load-fade {
  to {
    opacity: 1;
  }
}

/* ==================== PERFORMANCE ==================== */
.gpu-light {
  transform: translateZ(0);
  will-change: transform;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  /* Encore plus simple sur mobile */
  .soft-hover:hover {
    transform: translateY(-2px);
  }

  .parallax-gentle {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Désactiver toutes animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== FADE OVERLAY DOUX ==================== */
.overlay-fade {
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}

.overlay-fade:hover {
  opacity: 1;
}

/* ==================== BOUTONS AVEC EFFET DOUX ==================== */
.btn-smooth {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth);
}

.btn-smooth::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-smooth), height 0.4s var(--ease-smooth);
}

.btn-smooth:hover::before {
  width: 300px;
  height: 300px;
}

/* ==================== CARDS SIMPLES ==================== */
.card-gentle {
  transition: transform 0.3s var(--ease-smooth),
              box-shadow 0.3s var(--ease-smooth),
              border-color 0.3s var(--ease-smooth);
}

.card-gentle:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border-color: var(--color-primary);
}