/* arka-hero.css — hero rotatif du home : met en scène les 3 fonctions d'arka
   (recherche & restitution · une tâche solo · une équipe qui produit).
   Transition « premium » : roll vertical par mot + flou + skew (jamais un fondu basique).
   Charge APRÈS arka-live.css. Piloté par arka-hero.js. */

/* ── indicateur de fonction : dots + libellé roulant ── */
.ark-hero-fn { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 15px; }
.ark-hero-dots { display: inline-flex; gap: 5px; }
.ark-hero-dots i { display: block; width: 5px; height: 5px; border-radius: 99px; background: var(--content-subtle); opacity: .32;
  transition: width .55s cubic-bezier(.19,1,.22,1), opacity .45s ease, background-color .45s ease; }
.ark-hero-dots i.on { width: 20px; opacity: 1; background: var(--accent); }
.ark-hero-lab { position: relative; display: block; overflow: hidden; height: 1.3em; }
.ark-hero-lab .t { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--content-subtle); white-space: nowrap; }
.ark-hero-lab.hero-in .t  { animation: heroWIn .58s cubic-bezier(.19,1,.22,1) both; }
.ark-hero-lab.hero-out .t { animation: heroWOut .32s cubic-bezier(.5,0,.75,0) both; }

/* ── titre : lignes masquées, mots roulants ── */
.ark-h1 .line { display: block; }
.ark-h1.hero-anim .line { overflow: hidden; padding-bottom: .04em; }
.ark-h1 .w { display: inline-block; will-change: transform, filter, opacity; }
.ark-h1.hero-in  .w { animation: heroWIn  .74s cubic-bezier(.19,1,.22,1) both; animation-delay: calc(var(--i, 0) * 42ms); }
.ark-h1.hero-out .w { animation: heroWOut .40s cubic-bezier(.5,0,.75,0) both;  animation-delay: calc(var(--i, 0) * 20ms); }

@keyframes heroWIn  { from { transform: translateY(112%) skewY(5deg);  filter: blur(8px); opacity: 0; }
                      to   { transform: translateY(0) skewY(0);        filter: blur(0);   opacity: 1; } }
@keyframes heroWOut { from { transform: translateY(0) skewY(0);        filter: blur(0);   opacity: 1; }
                      to   { transform: translateY(-108%) skewY(-3deg); filter: blur(7px); opacity: 0; } }

/* ── sous-titre : suit le titre, décalé ── */
.ark-sub.hero-in  { animation: heroSubIn  .7s cubic-bezier(.19,1,.22,1) both; animation-delay: .14s; }
.ark-sub.hero-out { animation: heroSubOut .34s ease both; }
@keyframes heroSubIn  { from { opacity: 0; transform: translateY(11px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes heroSubOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }

@media (prefers-reduced-motion: reduce) {
  .ark-h1 .w, .ark-sub, .ark-hero-lab .t { animation: none !important; }
  .ark-hero-dots i { transition: none; }
}

/* ── raccourcis du home : tag de « sorte » (recherche · tâche · équipe) ── */
.ark-home-item .hkind { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--content-subtle); white-space: nowrap; flex: none; }
.ark-home-item .hkind::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--k, var(--content-subtle)); }
.ark-home-item:hover .hkind { color: var(--content-muted); }

/* ── composer du home : il flotte sur un fond plein, le backdrop-filter n'a rien à
   flouter et produit des coutures verticales pendant l'anim du titre → on le retire ── */
.ark-home-ask { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }