/* ============================================================
   HubStack — design system "Noir & Or éditorial"
   Chargé après le CDN Tailwind.
   ============================================================ */

:root {
  --ink: #15140F;
  --paper: #F5F1E8;
  --gold: #C8971B;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Réglage optique de Fraunces pour les grands titres */
.font-display { font-optical-sizing: auto; }

/* Scrollbar masquée pour la nav catégories */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Limitation de lignes (fallback si plugin CDN absent) */
.line-clamp-2, .line-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Grain subtil pour les sections sombres (effet print/premium) */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Apparition douce */
@keyframes hs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.animate-rise { animation: hs-rise .6s cubic-bezier(.22,.61,.36,1) both; }

/* ---- Animations du hero (cartes flottantes + orbite) ---- */
@keyframes hs-float   { 0%,100% { transform: translateY(0); }      50% { transform: translateY(-16px); } }
@keyframes hs-float-r { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(-5deg); } }
@keyframes hs-spin    { to { transform: rotate(360deg); } }
@keyframes hs-spin-rev{ to { transform: rotate(-360deg); } }
@keyframes hs-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes hs-pop     { 0% { opacity: 0; transform: scale(.9) translateY(8px); } 100% { opacity: 1; transform: none; } }

.animate-float      { animation: hs-float 6s ease-in-out infinite; }
.animate-float-slow { animation: hs-float 8.5s ease-in-out infinite; }
.animate-float-rot  { animation: hs-float-r 7s ease-in-out infinite; }
.animate-spin-slow  { animation: hs-spin 32s linear infinite; }
.animate-spin-rev   { animation: hs-spin-rev 28s linear infinite; }
.animate-pop        { animation: hs-pop .7s cubic-bezier(.22,.61,.36,1) both; }

/* Texte or avec reflet qui balaie (titre du hero) */
.shimmer-gold {
  background: linear-gradient(110deg, #9C7414 25%, #F4D67A 50%, #9C7414 75%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hs-shimmer 5s linear infinite;
}

/* Accessibilité : on coupe tout le mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-float-slow, .animate-float-rot,
  .animate-spin-slow, .animate-spin-rev, .shimmer-gold { animation: none !important; }
}

/* Lien souligné animé (style éditorial) */
.link-underline { background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left bottom;
  transition: background-size .3s ease; }
.link-underline:hover { background-size: 100% 1.5px; }

/* Sélection */
::selection { background: rgba(200,151,27,.30); }