/* ============================================================
   SIRUS HOOD v2 — styles
   Fonts self-hostées (latin), keyframes, et les :hover
   (repris des attributs style-hover du prototype).
   ============================================================ */

/* --- Fonts self-host (latin subset) --- */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/archivoblack-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-500.woff2) format('woff2');
}

/* --- Base --- */
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #0B0B0B; }
* { box-sizing: border-box; }

/* --- Keyframes --- */
@keyframes zoomSlow { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes marqueeMove { to { transform: translateX(-50%); } }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes grainJit {
  0% { background-position: 0 0; } 12.5% { background-position: -70px 46px; }
  25% { background-position: 40px -58px; } 37.5% { background-position: -32px -80px; }
  50% { background-position: 78px 22px; } 62.5% { background-position: -84px -14px; }
  75% { background-position: 18px 66px; } 87.5% { background-position: -50px 8px; }
  100% { background-position: 0 0; }
}
@keyframes projFlicker {
  0%, 95.6%, 96.6%, 97.6%, 100% { opacity: 0; }
  96.1% { opacity: 0.055; }
  97.1% { opacity: 0.03; }
}

/* --- Hover (ex-style-hover). !important pour battre les styles inline --- */
.lnk { transition: color 0.15s ease; }
.lnk:hover { color: #D62400 !important; }
.next-link:hover { color: #E2B62A !important; }
.btn-red:hover { color: #D62400 !important; }
.row { transition: background 0.15s ease; }
.row:hover { background: rgba(214,36,0,0.06) !important; }
.cover { transition: opacity 0.2s ease; }
.cover:hover { opacity: 0.82 !important; }
.btn-demo:hover { background: #E2B62A !important; color: #0B0B0B !important; }
.btn-close:hover { color: #D62400 !important; border-color: #D62400 !important; }

/* --- Tactile : pas de ticker (défile trop vite), chevron de scroll subliminal --- */
@keyframes scrollHint {
  0%, 100% { opacity: 0.14; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.48; transform: translateX(-50%) translateY(6px); }
}
@media (hover: none), (pointer: coarse) {
  #ticker-bar { display: none !important; }
  #scroll-hint { display: block !important; }
}

/* --- Reduced motion : coupe toutes les animations CSS (le JS coupe la boucle en +) --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}