/* LOSBARLAND — couche d'effets (poussière, projecteur, glitch, halos). Tout se coupe en mode "réduire les animations". */

::selection { background: var(--yellow); color: #0a0b0c; }
html { scrollbar-color: #3a3d42 var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2b2e33; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--yellow); }

/* barre de progression de lecture */
.fx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 300; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--rust), var(--yellow), var(--yellow-hi)); box-shadow: 0 0 12px rgba(240, 191, 44, 0.7); pointer-events: none; }

/* poussière et braises */
.fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* faisceau de projecteur qui balaie la centrale */
.fx-beam { position: absolute; right: 6%; top: -10%; width: 55%; height: 120%; z-index: 1; pointer-events: none; transform-origin: 100% 0; mix-blend-mode: screen; opacity: 0.55;
  background: conic-gradient(from 195deg at 100% 0, transparent 0deg, rgba(240, 191, 44, 0.16) 7deg, transparent 15deg);
  animation: beam 14s ease-in-out infinite alternate; }
@keyframes beam { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }

/* titre: halo + glitch rare */
.hero h1 { position: relative; text-shadow: 0 0 40px rgba(240, 191, 44, 0.16); }
.hero h1::before, .hero h1::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; }
.hero h1::before { color: #ff4d3a; animation: glitch-a 7s steps(1) infinite; }
.hero h1::after { color: #3fd0ff; animation: glitch-b 7s steps(1) infinite; }
@keyframes glitch-a {
  0%, 92%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  93% { opacity: 0.8; transform: translate(-5px, 1px); clip-path: inset(10% 0 62% 0); }
  95% { opacity: 0.8; transform: translate(4px, -1px); clip-path: inset(58% 0 12% 0); }
  97% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 93%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  94% { opacity: 0.7; transform: translate(5px, -1px); clip-path: inset(40% 0 38% 0); }
  96% { opacity: 0.7; transform: translate(-4px, 1px); clip-path: inset(75% 0 4% 0); }
  98% { opacity: 0; }
}
.hero h1 span { animation: flick 9s linear infinite; }
@keyframes flick { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.55; } 43% { opacity: 1; } 44% { opacity: 0.7; } 45% { opacity: 1; } }

/* liseré lumineux entre les sections */
.section { position: relative; }
.section::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(240, 191, 44, 0.9), transparent) 0 0 / 28% 100% no-repeat, var(--line);
  animation: glint 9s linear infinite; }
@keyframes glint { from { background-position: -30% 0, 0 0; } to { background-position: 130% 0, 0 0; } }

/* grand numéro fantôme derrière les titres de section */
.section-head { position: relative; }
.section-head[data-n]::before { content: attr(data-n); position: absolute; right: 0; top: -34px; font-family: var(--head); font-weight: 700; font-size: clamp(110px, 17vw, 230px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(240, 191, 44, 0.14); pointer-events: none; user-select: none; }

/* cartes: projecteur qui suit le curseur + coins de viseur */
.card, .perk, .faction, .mod-card, .ws-card, .install { overflow: hidden; }
.card::after, .perk::after, .faction::after, .mod-card::after, .ws-card::after, .install::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 191, 44, 0.13), transparent 62%); }
.card:hover::after, .perk:hover::after, .faction:hover::after, .mod-card:hover::after, .ws-card:hover::after, .install:hover::after { opacity: 1; }
.perk::before, .faction::before, .ws-card::before { content: ''; position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; pointer-events: none; border-top: 2px solid rgba(240, 191, 44, 0.0); border-right: 2px solid rgba(240, 191, 44, 0.0); transition: border-color 0.3s ease, transform 0.3s ease; transform: translate(4px, -4px); }
.perk:hover::before, .faction:hover::before, .ws-card:hover::before { border-color: var(--yellow); transform: none; }

/* pastilles d'icônes: anneau qui pulse */
.f-emblem { position: relative; }
.f-emblem::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--c); opacity: 0; animation: ring 3.6s ease-out infinite; }
.faction:nth-child(2) .f-emblem::after { animation-delay: 0.6s; } .faction:nth-child(3) .f-emblem::after { animation-delay: 1.2s; }
.faction:nth-child(4) .f-emblem::after { animation-delay: 1.8s; } .faction:nth-child(5) .f-emblem::after { animation-delay: 2.4s; } .faction:nth-child(6) .f-emblem::after { animation-delay: 3s; }
@keyframes ring { 0% { transform: scale(0.85); opacity: 0.7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }

/* boutons principaux: halo respirant */
.hero .btn-primary { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 191, 44, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(240, 191, 44, 0.55)); } }

/* entrée des cartes en cascade */
.js .grid > .reveal:nth-child(2) { transition-delay: 0.07s; } .js .grid > .reveal:nth-child(3) { transition-delay: 0.14s; }
.js .grid > .reveal:nth-child(4) { transition-delay: 0.07s; } .js .grid > .reveal:nth-child(5) { transition-delay: 0.14s; } .js .grid > .reveal:nth-child(6) { transition-delay: 0.21s; }

@media (max-width: 760px) {
  .section-head[data-n]::before { font-size: 120px; top: -18px; opacity: 0.7; }
  .fx-beam { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-beam, .fx-dust, .fx-progress { display: none; }
  .hero h1::before, .hero h1::after { display: none; }
  .hero h1 span, .section::before, .f-emblem::after, .hero .btn-primary { animation: none; }
}

.hero .wrap, .hero-copy { position: relative; z-index: 2; }

.workshop-coll { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 8px; }
.workshop-coll span { color: var(--muted); font-size: 15px; }