/* ============================================================
   Monarch Hoard - STRISCIA DEI LOGHI + RITOCCHI DI STILE
   DOVE VA:  static/css/stile.css   (file nuovo)
   Va caricato per ULTIMO nel sito: alcune regole ritoccano
   quelle di site.css e components.css.
   ------------------------------------------------------------
   1. Striscia dei loghi
   2. Sfondo con luci che si muovono
   3. Titoli con gradiente
   4. Bordo luminoso che gira sui riquadri
   5. Lampo sui bottoni principali
   6. Barra di scorrimento e selezione del testo
   ============================================================ */

/* ============================================================
   1. LA STRISCIA DEI LOGHI
   ============================================================ */
.loghi {
  padding: 26px 0 34px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent);
}
.loghi__titolo {
  display: block;
  margin-bottom: 18px;
  text-align: center;
  font-family: var(--font-title);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* I bordi sfumati: i loghi entrano ed escono dal nulla */
.loghi__finestra {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.loghi__nastro {
  display: flex;
  width: max-content;
  gap: 64px;
  padding-right: 64px;          /* stesso spazio anche tra fine e ripartenza */
  /* La velocita' cresce con il numero dei loghi: circa 4s ciascuno */
  animation: loghi-scorri calc(var(--quanti, 6) * 4s) linear infinite;
}
.loghi:hover .loghi__nastro { animation-play-state: paused; }
@keyframes loghi-scorri {
  to { transform: translateX(-50%); }
}

.loghi__voce {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 60px;
  color: var(--text-muted);
  text-decoration: none;
}
.loghi__voce img {
  height: 100%;
  max-width: 170px;
  object-fit: contain;
  /* Spenti finche' non ci passi sopra */
  filter: grayscale(1) brightness(1.6) opacity(.55);
  transition: filter .35s ease, transform .35s ease;
}
.loghi__voce:hover img {
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.6));
  transform: scale(1.08);
}

/* Il nome si vede solo quando il logo manca */
.loghi__nome { display: none; }
.loghi__voce.senza-logo .loghi__nome {
  display: inline;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .3s ease, text-shadow .3s ease;
}
.loghi__voce.senza-logo:hover .loghi__nome {
  color: #fff;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7);
}

@media (max-width: 560px) {
  .loghi__nastro { gap: 40px; padding-right: 40px; }
  .loghi__voce { height: 44px; }
}

/* ============================================================
   2. LO SFONDO: LUCI CHE SI MUOVONO
   ------------------------------------------------------------
   Tre macchie di luce (blu, azzurra, viola) dietro a tutto,
   che si spostano lentissime. La griglia di site.css resta.
   ============================================================ */
body.theme-site::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(35% 30% at 20% 25%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(30% 28% at 80% 65%, rgba(120, 200, 255, 0.10), transparent 70%),
    radial-gradient(28% 25% at 55% 95%, rgba(140, 80, 255, 0.10), transparent 70%);
  animation: luci-sfondo 40s ease-in-out infinite alternate;
}
@keyframes luci-sfondo {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(4%, -3%) rotate(6deg); }
  100% { transform: translate(-3%, 4%) rotate(-4deg); }
}

/* ============================================================
   3. TITOLI CON GRADIENTE
   ------------------------------------------------------------
   Solo i titoli delle sezioni: quelli del carosello hanno
   gia' la loro parola colorata.
   Il bagliore passa da text-shadow a drop-shadow: con il
   testo "trasparente" il text-shadow si vedrebbe attraverso
   le lettere e le renderebbe sfocate.
   ============================================================ */
.section-head h1,
.section-head h2,
.cta h2 {
  background: linear-gradient(180deg, #ffffff 35%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.45));
}

/* Una lineetta luminosa sotto i titoli delle sezioni */
.section-head h2::after,
.section-head h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: .55em auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}

/* ============================================================
   4. BORDO LUMINOSO CHE GIRA
   ------------------------------------------------------------
   Sui riquadri cliccabili e sulle schede novita': passando
   col mouse una scia di luce corre lungo il bordo.
   ============================================================ */
@property --angolo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.panel--link::after,
a.news-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--angolo),
              transparent 0deg 250deg,
              var(--accent-soft) 310deg,
              #ffffff 340deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .35s ease;
  animation: bordo-gira 2.8s linear infinite;
}
.panel--link:hover::after,
a.news-card:hover::after { opacity: 1; }
@keyframes bordo-gira { to { --angolo: 360deg; } }

/* ============================================================
   5. LAMPO SUI BOTTONI PRINCIPALI
   ============================================================ */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
}
.btn--primary:hover::after {
  animation: bottone-lampo .8s ease;
}
@keyframes bottone-lampo { to { left: 130%; } }

/* ============================================================
   6. BARRA DI SCORRIMENTO E SELEZIONE DEL TESTO
   ============================================================ */
body.theme-site {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.55) var(--bg);
}
body.theme-site::-webkit-scrollbar { width: 10px; }
body.theme-site::-webkit-scrollbar-track { background: var(--bg); }
body.theme-site::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent-deep), var(--accent));
  border-radius: 99px;
  border: 2px solid var(--bg);
}
::selection {
  background: rgba(var(--accent-rgb), 0.45);
  color: #ffffff;
}

/* ============================================================
   CHI HA CHIESTO MENO ANIMAZIONI
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .loghi__nastro,
  body.theme-site::after,
  .panel--link::after,
  a.news-card::after { animation: none !important; }
  .loghi__finestra { overflow-x: auto; }
}