/* ==========================================================================
   Tema especial: Valencia Music x Star Wars
   Capa de personalización temporal — quitar el <link> en index.html para
   regresar al tema estándar sin tocar style.css.
   ========================================================================== */

:root {
  --color-blue-light: #ffe81f;   /* dorado Star Wars reemplaza el acento azul claro */
  --color-blue: #c9a227;         /* dorado profundo para degradados/hover */
  --color-blue-dark: #8a6f1a;
  --sw-blue: #2f7fc4;            /* azul de la boquilla del logo, uso puntual */
}

body {
  position: relative;
}

/* ---------- Fondo del hero: batalla espacial + carnaval ---------- */
.hero-bg {
  background: url('../images/hero-bg-starwars.svg') center center / cover no-repeat;
  transform: scale(1.02);
}

/* ---------- Campo de estrellas de fondo ---------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.starfield-small,
.starfield-mid,
.starfield-big {
  position: absolute;
  inset: -10% -10%;
}

.starfield-small {
  background-image: radial-gradient(1.20px 1.20px at 156px 117px, #ffffff, transparent),
    radial-gradient(0.97px 0.97px at 174px 45px, #ffffff, transparent),
    radial-gradient(1.21px 1.21px at 71px 162px, #ffffff, transparent),
    radial-gradient(1.22px 1.22px at 123px 65px, #ffffff, transparent),
    radial-gradient(0.74px 0.74px at 194px 80px, #ffffff, transparent),
    radial-gradient(1.03px 1.03px at 130px 179px, #ffffff, transparent),
    radial-gradient(1.19px 1.19px at 1px 122px, #ffffff, transparent),
    radial-gradient(0.62px 0.62px at 13px 154px, #ffffff, transparent),
    radial-gradient(0.73px 0.73px at 69px 16px, #ffffff, transparent),
    radial-gradient(0.62px 0.62px at 204px 138px, #ffffff, transparent),
    radial-gradient(0.94px 0.94px at 45px 219px, #ffffff, transparent),
    radial-gradient(0.91px 0.91px at 210px 83px, #ffffff, transparent),
    radial-gradient(0.99px 0.99px at 10px 13px, #ffffff, transparent),
    radial-gradient(1.05px 1.05px at 155px 64px, #ffffff, transparent),
    radial-gradient(1.12px 1.12px at 54px 79px, #ffffff, transparent),
    radial-gradient(0.74px 0.74px at 223px 132px, #ffffff, transparent),
    radial-gradient(0.65px 0.65px at 74px 76px, #ffffff, transparent),
    radial-gradient(1.09px 1.09px at 172px 177px, #ffffff, transparent),
    radial-gradient(1.26px 1.26px at 241px 23px, #ffffff, transparent),
    radial-gradient(0.70px 0.70px at 112px 245px, #ffffff, transparent),
    radial-gradient(0.85px 0.85px at 29px 4px, #ffffff, transparent),
    radial-gradient(1.23px 1.23px at 125px 159px, #ffffff, transparent),
    radial-gradient(1.25px 1.25px at 20px 187px, #ffffff, transparent),
    radial-gradient(0.73px 0.73px at 72px 184px, #ffffff, transparent),
    radial-gradient(0.68px 0.68px at 135px 214px, #ffffff, transparent),
    radial-gradient(1.24px 1.24px at 259px 146px, #ffffff, transparent),
    radial-gradient(0.84px 0.84px at 113px 150px, #ffffff, transparent),
    radial-gradient(1.11px 1.11px at 155px 84px, #ffffff, transparent),
    radial-gradient(1.19px 1.19px at 77px 117px, #ffffff, transparent),
    radial-gradient(1.22px 1.22px at 181px 258px, #ffffff, transparent),
    radial-gradient(0.81px 0.81px at 112px 142px, #ffffff, transparent),
    radial-gradient(0.82px 0.82px at 26px 181px, #ffffff, transparent),
    radial-gradient(0.67px 0.67px at 204px 235px, #ffffff, transparent),
    radial-gradient(0.69px 0.69px at 124px 214px, #ffffff, transparent),
    radial-gradient(1.10px 1.10px at 253px 46px, #ffffff, transparent),
    radial-gradient(0.89px 0.89px at 182px 58px, #ffffff, transparent),
    radial-gradient(0.84px 0.84px at 42px 170px, #ffffff, transparent),
    radial-gradient(1.22px 1.22px at 54px 164px, #ffffff, transparent),
    radial-gradient(0.88px 0.88px at 85px 206px, #ffffff, transparent),
    radial-gradient(0.86px 0.86px at 34px 225px, #ffffff, transparent),
    radial-gradient(1.04px 1.04px at 2px 192px, #ffffff, transparent),
    radial-gradient(0.75px 0.75px at 228px 236px, #ffffff, transparent),
    radial-gradient(0.73px 0.73px at 157px 127px, #ffffff, transparent),
    radial-gradient(1.10px 1.10px at 12px 183px, #ffffff, transparent),
    radial-gradient(0.84px 0.84px at 76px 72px, #ffffff, transparent),
    radial-gradient(1.30px 1.30px at 8px 57px, #ffffff, transparent),
    radial-gradient(0.71px 0.71px at 149px 257px, #ffffff, transparent),
    radial-gradient(0.80px 0.80px at 44px 146px, #ffffff, transparent),
    radial-gradient(0.89px 0.89px at 103px 113px, #ffffff, transparent),
    radial-gradient(0.84px 0.84px at 178px 104px, #ffffff, transparent),
    radial-gradient(0.95px 0.95px at 233px 85px, #ffffff, transparent),
    radial-gradient(1.01px 1.01px at 159px 142px, #ffffff, transparent),
    radial-gradient(0.81px 0.81px at 61px 85px, #ffffff, transparent),
    radial-gradient(0.75px 0.75px at 83px 174px, #ffffff, transparent),
    radial-gradient(0.82px 0.82px at 44px 181px, #ffffff, transparent);
  background-repeat: repeat;
  background-size: 260px 260px;
  animation: twinkle-a 7s ease-in-out infinite alternate, star-drift-a 150s linear infinite;
}

.starfield-mid {
  background-image: radial-gradient(1.13px 1.13px at 42px 107px, #ffe81f, transparent),
    radial-gradient(1.44px 1.44px at 196px 71px, #ffe81f, transparent),
    radial-gradient(1.74px 1.74px at 129px 242px, #ffe81f, transparent),
    radial-gradient(1.21px 1.21px at 276px 149px, #ffe81f, transparent),
    radial-gradient(1.69px 1.69px at 295px 179px, #ffe81f, transparent),
    radial-gradient(1.20px 1.20px at 304px 153px, #ffe81f, transparent),
    radial-gradient(1.25px 1.25px at 210px 275px, #ffe81f, transparent),
    radial-gradient(1.79px 1.79px at 132px 186px, #ffe81f, transparent),
    radial-gradient(1.69px 1.69px at 167px 292px, #ffe81f, transparent),
    radial-gradient(1.15px 1.15px at 253px 18px, #ffe81f, transparent),
    radial-gradient(1.57px 1.57px at 58px 172px, #ffe81f, transparent),
    radial-gradient(1.67px 1.67px at 259px 337px, #ffe81f, transparent),
    radial-gradient(1.70px 1.70px at 215px 285px, #ffe81f, transparent),
    radial-gradient(1.41px 1.41px at 204px 119px, #ffe81f, transparent),
    radial-gradient(1.34px 1.34px at 299px 232px, #ffe81f, transparent),
    radial-gradient(1.33px 1.33px at 319px 213px, #ffe81f, transparent),
    radial-gradient(1.36px 1.36px at 287px 52px, #ffe81f, transparent),
    radial-gradient(1.55px 1.55px at 7px 29px, #ffe81f, transparent),
    radial-gradient(1.72px 1.72px at 247px 325px, #ffe81f, transparent),
    radial-gradient(1.20px 1.20px at 159px 241px, #ffe81f, transparent),
    radial-gradient(1.13px 1.13px at 93px 47px, #ffe81f, transparent),
    radial-gradient(1.50px 1.50px at 99px 150px, #ffe81f, transparent);
  background-repeat: repeat;
  background-size: 340px 340px;
  animation: twinkle-b 5s ease-in-out infinite alternate, star-drift-b 100s linear infinite;
}

.starfield-big {
  background-image: radial-gradient(2.23px 2.23px at 301px 333px, #ffffff, transparent),
    radial-gradient(2.01px 2.01px at 82px 280px, #ffffff, transparent),
    radial-gradient(1.97px 1.97px at 186px 197px, #ffffff, transparent),
    radial-gradient(1.85px 1.85px at 179px 139px, #ffffff, transparent),
    radial-gradient(1.81px 1.81px at 62px 212px, #ffffff, transparent),
    radial-gradient(2.12px 2.12px at 223px 230px, #ffffff, transparent),
    radial-gradient(1.60px 1.60px at 184px 57px, #ffffff, transparent),
    radial-gradient(1.66px 1.66px at 62px 396px, #ffffff, transparent),
    radial-gradient(2.00px 2.00px at 366px 181px, #ffffff, transparent),
    radial-gradient(1.65px 1.65px at 41px 345px, #ffffff, transparent);
  background-repeat: repeat;
  background-size: 420px 420px;
  animation: twinkle-c 9s ease-in-out infinite alternate, star-drift-c 65s linear infinite;
}

@keyframes twinkle-a { from { opacity: .55; } to { opacity: .95; } }
@keyframes twinkle-b { from { opacity: .35; } to { opacity: .8; } }
@keyframes twinkle-c { from { opacity: .5; } to { opacity: 1; } }

/* Deriva sutil de las estrellas: da sensación de desplazamiento por el
   espacio. Cada capa se mueve a distinta velocidad (paralaje) y recorre
   exactamente el tamaño de su patrón para que el "repeat" no salte. */
@keyframes star-drift-a { from { background-position: 0 0; } to { background-position: -260px -130px; } }
@keyframes star-drift-b { from { background-position: 0 0; } to { background-position: 340px -170px; } }
@keyframes star-drift-c { from { background-position: 0 0; } to { background-position: -420px 210px; } }

@media (prefers-reduced-motion: reduce) {
  .starfield-small, .starfield-mid, .starfield-big { animation: none; }
}

/* Secciones con fondo propio quedan por encima del starfield fijo */
.hero, section, footer { position: relative; z-index: 1; }
.bg-alt, #horarios { background: rgba(18, 22, 30, 0.75); backdrop-filter: blur(2px); }
body > section:not(.bg-alt):not(#horarios):not(.hero),
.site-footer { background: rgba(10, 13, 18, 0.55); }
.cta-band { background:
    linear-gradient(135deg, rgba(138, 111, 26, 0.45), rgba(10, 13, 18, 0.85)),
    url('../images/neon-music.jpg') center / cover no-repeat;
}

/* ---------- Logo estilo Star Wars en el hero ---------- */
.hero-logo.sw-crawl-logo {
  width: 300px;
  opacity: 0;
  transform: scale(0.6);
  filter: drop-shadow(0 0 0 rgba(255,232,31,0)) blur(6px);
}
.hero-logo.sw-crawl-logo.sw-in {
  animation: sw-logo-in 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes sw-logo-in {
  0%   { opacity: 0; transform: scale(0.6); filter: drop-shadow(0 0 0 rgba(255,232,31,0)) blur(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 26px rgba(255, 232, 31, 0.45)) drop-shadow(0 14px 30px rgba(0,0,0,0.6)) blur(0); }
}

.hero .tagline,
.hero h1,
.hero .lead,
.hero .hero-actions {
  opacity: 0;
  transform: translateY(14px);
}
.hero .tagline.sw-in,
.hero h1.sw-in,
.hero .lead.sw-in,
.hero .hero-actions.sw-in {
  animation: sw-fade-in 1s ease-out forwards;
}

@keyframes sw-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Opening crawl ---------- */
.sw-crawl-viewport {
  position: relative;
  width: 100vw;
  height: 560px;
  max-width: 1700px;
  /* Se sale del ancho limitado (760px) de .hero-content para ocupar casi
     toda la pantalla. left:50% + translateX(-50%) centra la caja respecto
     al viewport sin importar su ancho real — a diferencia de márgenes con
     calc(50% - 50vw), que solo cuadran cuando el ancho es exactamente
     100vw y se desbalancean en cuanto max-width recorta un lado. */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 90%);
  mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 90%);
  transition: height 0.6s ease, opacity 0.5s ease, margin-bottom 0.6s ease;
}

.sw-crawl-viewport.sw-collapsed {
  height: 0;
  opacity: 0;
  margin-bottom: 0;
}

.sw-crawl-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 30px;
  text-align: center;
  color: var(--color-blue-light);
  font-family: var(--font-display);
  transform-origin: 50% 100%;
  transform: rotateX(30deg) translateY(var(--sw-start, 55vh));
  will-change: transform;
}

.sw-crawl-text.sw-playing {
  animation-name: sw-crawl;
  animation-duration: var(--sw-duration, 26s);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.sw-crawl-text h3 {
  font-size: 3.4rem;
  line-height: 1.25;
  margin: 16px 0 26px;
  letter-spacing: 2px;
  color: var(--color-blue-light);
}

.sw-crawl-text p {
  font-size: 2rem;
  line-height: 1.55;
  margin: 0 0 34px;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
}

.sw-crawl-intro { font-style: italic; opacity: 0.85; }
.sw-crawl-episode { font-weight: 700; letter-spacing: 2px; }
.sw-crawl-outro { font-weight: 600; opacity: 0.9; }

@keyframes sw-crawl {
  from { transform: rotateX(30deg) translateY(var(--sw-start, 55vh)); }
  to   { transform: rotateX(30deg) translateY(var(--sw-end, -1400px)); }
}

@media (max-width: 760px) {
  .sw-crawl-viewport { height: 380px; }
  .sw-crawl-text { padding: 0 12px; }
  .sw-crawl-text h3 { font-size: 2.1rem; }
  .sw-crawl-text p { font-size: 1.3rem; margin-bottom: 20px; }
}

/* ---------- Botones y detalles dorados ---------- */
.btn-outline { border-color: rgba(255, 232, 31, 0.4); }
.btn-outline:hover { border-color: var(--color-blue-light); background: rgba(255, 232, 31, 0.08); }

.class-tag { border-color: rgba(255, 232, 31, 0.4); }

.hours-card, .contact-card, .map-frame { border-color: rgba(255, 232, 31, 0.18); }

/* ---------- Ajustes de header ---------- */
.brand img { height: 80px; }
.site-header.scrolled .brand img { height: 65px; }
.nav-cta { padding: 4px 10px !important; }
.brand-text { display: none; }