/* ============================================================
   CCA — Bannière immersive "CRÉATIVITÉ vivante"
   CSS/SVG only · léger · 3 modes (liquid / kinetic / elastic)
   ============================================================ */

.hero2 {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; padding-top: 60px;
  border-bottom: 1px solid var(--hair);
  --amp: 6;          /* amplitude de mouvement (piloté par l'intensité) */
  --wall-op: 0.05;   /* opacité du mur kinétique */
  --wall-speed: 38s;
}

/* ---------- mur kinétique (arrière-plan) ---------- */
.kwall { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(4px,1.4vw,22px); pointer-events: none; opacity: var(--wall-op); will-change: transform; }
.kwall-row { display: flex; width: max-content; white-space: nowrap; font-family: var(--syne); font-weight: 800; font-size: clamp(48px,11vw,170px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); animation: wallscroll var(--wall-speed) linear infinite; }
.kwall-row.rev { animation-direction: reverse; animation-duration: calc(var(--wall-speed) * 1.35); }
.kwall-row span { padding-right: 0.3em; }
@keyframes wallscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- bandeaux mini ---------- */
.hero2-top, .hero2-bottom { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); flex-shrink: 0; }
.hero2-top { border-bottom: 1px solid var(--hair); }
.hero2-bottom { border-top: 1px solid var(--hair); gap: 20px; flex-wrap: wrap; }
.avail { display: inline-flex; align-items: center; gap: 10px; font-family: var(--dm); font-weight: 500; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); }
.avail .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: pulse 2s ease-in-out infinite; }
.hero2-top .meta { font-family: var(--dm); font-weight: 400; font-size: 11px; color: var(--faint2); letter-spacing: 0.04em; }

/* ---------- scène centrale ---------- */
.stage { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: clamp(10px,3vh,40px) var(--pad); text-align: center; }
.stage-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(14px,3vh,30px); width: 100%; }

.kicker { font-family: var(--syne); font-weight: 800; font-size: clamp(18px,2.6vw,38px); letter-spacing: -0.02em; line-height: 1.04; color: var(--ink); max-width: 18ch; opacity: 0; transform: translateY(16px); }
.kicker em { color: var(--orange); font-style: normal; }
.loaded .kicker { transition: opacity .9s var(--ease) 1.15s, transform .9s var(--ease) 1.15s; opacity: 1; transform: none; }

/* mot vivant */
.living { font-family: var(--syne); font-weight: 800; font-size: clamp(58px,20vw,300px); line-height: 0.78; letter-spacing: -0.045em; display: flex; justify-content: center; white-space: nowrap; cursor: default; }
.living .l { display: inline-block; overflow: hidden; will-change: transform; transition: transform .5s cubic-bezier(0.34,1.56,0.64,1); }
.living .l > i { display: inline-block; transform: translateY(115%); font-style: normal; }
.living .l.fill > i { color: var(--orange); }
.living .l.blue > i { color: var(--blue); }
.living .l.out > i { color: transparent; -webkit-text-stroke: clamp(1.2px,0.42vw,4px) var(--ink); text-stroke: clamp(1.2px,0.42vw,4px) var(--ink); }

/* reveal (intro) puis liquid (continu) */
.loaded .living .l > i { animation: revealUp 1s var(--ease) forwards, liquid var(--ldur,4.2s) ease-in-out 1.15s infinite; }
@keyframes revealUp { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes liquid {
  0%,100% { transform: translateY(0) scaleY(1) skewX(0deg); }
  25%     { transform: translateY(calc(var(--amp) * -0.16px)) scaleY(calc(1 + var(--amp)*0.012)) skewX(calc(var(--amp)*-0.12deg)); }
  50%     { transform: translateY(calc(var(--amp) *  0.12px)) scaleY(calc(1 - var(--amp)*0.010)) skewX(calc(var(--amp)* 0.10deg)); }
  75%     { transform: translateY(calc(var(--amp) * -0.10px)) scaleY(calc(1 + var(--amp)*0.008)) skewX(calc(var(--amp)* 0.14deg)); }
}
/* desync per letter */
.living .l:nth-child(1) > i { --ldur: 4.2s; } .living .l:nth-child(2) > i { --ldur: 5.1s; }
.living .l:nth-child(3) > i { --ldur: 3.7s; } .living .l:nth-child(4) > i { --ldur: 4.8s; }
.living .l:nth-child(5) > i { --ldur: 5.5s; } .living .l:nth-child(6) > i { --ldur: 4.0s; }
.living .l:nth-child(7) > i { --ldur: 4.6s; } .living .l:nth-child(8) > i { --ldur: 5.3s; }
.living .l:nth-child(9) > i { --ldur: 3.9s; } .living .l:nth-child(10) > i { --ldur: 4.9s; }
/* reveal stagger */
.loaded .living .l:nth-child(1) > i { animation-delay: 0s, 1.15s; } .loaded .living .l:nth-child(2) > i { animation-delay: .06s, 1.2s; }
.loaded .living .l:nth-child(3) > i { animation-delay: .12s, 1.25s; } .loaded .living .l:nth-child(4) > i { animation-delay: .18s, 1.3s; }
.loaded .living .l:nth-child(5) > i { animation-delay: .24s, 1.35s; } .loaded .living .l:nth-child(6) > i { animation-delay: .30s, 1.4s; }
.loaded .living .l:nth-child(7) > i { animation-delay: .36s, 1.45s; } .loaded .living .l:nth-child(8) > i { animation-delay: .42s, 1.5s; }
.loaded .living .l:nth-child(9) > i { animation-delay: .48s, 1.55s; } .loaded .living .l:nth-child(10) > i { animation-delay: .54s, 1.6s; }

/* goo / fondu liquide (optionnel, off par défaut) */
.hero2.goo .living { filter: url(#cca-goo); }

/* ---------- bottom: CTA + scroll ---------- */
.hero2-bottom .cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; opacity: 0; transform: translateY(14px); }
.loaded .hero2-bottom .cta-row { transition: opacity .8s var(--ease) 1.45s, transform .8s var(--ease) 1.45s; opacity: 1; transform: none; }
.hero2 .scroll-cue { display: inline-flex; align-items: center; gap: 9px; font-family: var(--dm); font-weight: 300; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint2); }
.hero2 .scroll-cue .arr { animation: bounce 1.6s ease-in-out infinite; }

/* ---------- MODES ---------- */
.hero2[data-hero-mode="kinetic"] { --wall-op: 0.13; --wall-speed: 24s; --amp: 2.4; }
.hero2[data-hero-mode="kinetic"] .living .l.out > i { -webkit-text-stroke-width: clamp(1.5px,0.5vw,5px); }
.hero2[data-hero-mode="elastic"] { --amp: 11; }
.hero2[data-hero-mode="elastic"] .living .l { transition: transform .7s cubic-bezier(0.16,1.4,0.3,1); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .hero2-top .meta { display: none; }
  .living { font-size: clamp(52px,23vw,140px); }
  .kicker { font-size: clamp(17px,5vw,26px); }
  .hero2-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero2 .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kwall-row, .avail .dot, .scroll-cue .arr { animation: none !important; }
  .loaded .living .l > i { animation: revealUp .6s var(--ease) forwards !important; }
  .living .l > i { transform: none; }
  .kicker, .hero2-bottom .cta-row { opacity: 1 !important; transform: none !important; }
}