/* ============================================================
   STRASBOURG · web3 — versión dinámica (hero-slider, carruseles)
   Fondo claro + acentos de marca. El grueso va con Tailwind.
   ============================================================ */

/* ---------- Oswald (display) ---------- */
@font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Light.ttf") format("truetype");   font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Bold.ttf") format("truetype");    font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Oktah Round (texto) ---------- */
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Light.otf") format("opentype");   font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Book.otf") format("opentype");     font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Regular.otf") format("opentype");  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Medium.otf") format("opentype");   font-weight:600; font-style:normal; font-display:swap; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.font-display { font-family:"Oswald","Arial Narrow",sans-serif; }

/* ---------- Blobs flotantes ---------- */
@keyframes float { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-18px) scale(1.04);} }
.animate-float      { animation: float 9s ease-in-out infinite; }
.animate-float-slow { animation: float 13s ease-in-out infinite; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

/* ---------- Marquee ---------- */
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.animate-marquee { animation: marquee 26s linear infinite; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* animación de entrada del contenido del slide activo */
.slide.active [data-anim] {
  animation: slideUp .8s both;
}
.slide.active [data-anim="2"] { animation-delay: .12s; }
.slide.active [data-anim="3"] { animation-delay: .24s; }
.slide.active [data-anim="4"] { animation-delay: .36s; }
@keyframes slideUp { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }

/* barra de progreso del autoplay */
.slider-progress > span { transform-origin: left; transform: scaleX(0); }
.slider-progress.run > span { animation: progress var(--dur,6s) linear forwards; }
@keyframes progress { from{transform:scaleX(0);} to{transform:scaleX(1);} }

/* ============================================================
   CARRUSEL (scroll-snap)
   ============================================================ */
.snap-x-track {
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.snap-x-track::-webkit-scrollbar { display: none; }
.snap-item { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .animate-float,.animate-float-slow,.animate-marquee { animation:none; }
  .slide { transition:none; }
  .slide.active [data-anim] { animation:none; }
  .slider-progress.run > span { animation:none; transform:scaleX(1); }
}