/* ============================================================
   CBA Canvas Animation — Frontend styles
   Base visual styles → GB block attributes (styles + css)
   Ce fichier contient UNIQUEMENT :
     - Variables CSS partagées
     - États déclenchés par JS (.cba-loader--hidden, etc.)
     - Styles de #cba-canvas (injecté par JS, non gérable par GB)
     - @keyframes
     - Media queries
   ============================================================ */

/* ─── Variables partagées ─── */
:root {
  --cba-bg-dark:        #080e06;
  --cba-bg-light:       #ffffff;
  --cba-accent:         #8dc520;
  --cba-text-dark:      #e5e1d3;
  --cba-text-light:     #181e10;
  --cba-text-muted:     #7a9068;
  --cba-text-muted-lt:  #556645;
  --cba-ease:           cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Thème clair (activé par JS) ─── */
body.cba-theme-light {
  --cba-bg-dark: #ffffff;
}

/* ─── Layout (positions retirées des blocs GB pour l'éditabilité) ─── */
#cba-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
}

#cba-canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 10;          /* au-dessus du header/contenu du thème */
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}

#cba-overlay {
  position: fixed;
  inset: 0;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
}

.cba-hero {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: flex-end;
  padding: 0 6vw 7vh;
  pointer-events: none;
}

.cba-hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cba-hero-content {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Initial hidden state for animated hero elements (JS reveals them) */
.cba-label        { opacity: 0; transform: translateY(12px); }
.cba-word         { opacity: 0; transform: translateY(60px); }
.cba-hero-tagline { opacity: 0; transform: translateY(16px); }
.cba-cta-button   { opacity: 0; transform: translateY(10px); }

.cba-scroll-hint {
  position: fixed;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  pointer-events: none;
}

#cba-scroll-driver {
  position: relative;
  z-index: 0;
}

#cba-fixed-layer {
  will-change: opacity;
}

/* ─── Canvas (élément injecté par JS dans #cba-canvas-wrap) ─── */
#cba-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── États JS : Loader ─── */
#cba-loader.cba-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ─── États JS : Overlay ─── */
#cba-overlay.cba-overlay--visible { opacity: 1; }

/*body.cba-theme-light #cba-overlay {
  background:
    linear-gradient(to top,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.06) 38%,
      transparent 100%);
}*/

/* ─── États JS : Hero révélé ─── */
.cba-hero-content--revealed .cba-label,
.cba-hero-content--revealed .cba-word,
.cba-hero-content--revealed .cba-hero-tagline,
.cba-hero-content--revealed .cba-cta-button {
  opacity: 1;
  transform: translateY(0);
}

.cba-hero-content--revealed .cba-word:nth-child(2) { transition-delay: 0.10s; }
.cba-hero-content--revealed .cba-word:nth-child(3) { transition-delay: 0.20s; }

/* ─── Thème clair : textes hero ─── */
body.cba-theme-light .cba-hero-heading { color: var(--cba-text-light); text-shadow: 3px 3px 0px #ffffff; }
body.cba-theme-light .cba-label        { color: var(--cba-text-muted-lt); }
/*body.cba-theme-light .cba-hero-tagline { color: rgba(24, 30, 16, 0.60); }*/
/*body.cba-theme-light .cba-cta-button   { color: #ffffff; background: var(--cba-text-light); }*/

/* ─── États JS : Scroll hint caché ─── */
.cba-scroll-hint.cba-scroll-hint--hidden { opacity: 0; }

/* ─── Thème clair : scroll hint ─── */
body.cba-theme-light .cba-scroll-hint span       { color: var(--cba-text-muted-lt); }
body.cba-theme-light .cba-scroll-hint-arrow      { border-color: rgba(24,30,16,0.20); }
body.cba-theme-light .cba-scroll-hint-arrow::after {
  border-color: var(--cba-text-muted-lt);
}

/* ─── Scroll hint arrow : animation (non supportée par GB, gérée ici) ─── */
.cba-scroll-hint-arrow {
  animation: cba-hint-bounce 2s ease-in-out infinite;
}

/* ─── Keyframes ─── */
@keyframes cba-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .cba-hero         { padding: 0 5vw 6vh; }
  .cba-hero-heading { font-size: clamp(3.5rem, 16vw, 5rem); }
}