/* Phoenix Valley Live — site header banner (vaporwave marquee) */
:root{
  --pvl-night:   #0d0221;
  --pvl-dusk:    #2b0a4e;
  --pvl-magenta: #ff2ec4;
  --pvl-cyan:    #00f0ff;
  --pvl-sun-hi:  #ffd36b;
  --pvl-sign:    #16062e;
}

.pvl-header *,.pvl-header *::before,.pvl-header *::after{box-sizing:border-box}

/* ============ HEADER SHELL ============ */
.pvl-header{
  font-family:'Oxanium',sans-serif;
  position:relative;
  height:420px;
  overflow:hidden;
  background:linear-gradient(180deg,
    var(--pvl-night) 0%,
    var(--pvl-dusk) 46%,
    #6a0f8e 62%,
    #c81d9c 74%,
    #ff5e62 82%);
}

/* ============ STARS ============ */
.pvl-stars,.pvl-stars--2{
  position:absolute;inset:0;height:65%;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 100%, transparent),
    radial-gradient(1px 1px at 28% 8%,  #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 41% 30%, #ffd 100%, transparent),
    radial-gradient(1px 1px at 57% 12%, #fff 100%, transparent),
    radial-gradient(1px 1px at 66% 25%, #cff 100%, transparent),
    radial-gradient(1.5px 1.5px at 79% 6%, #fff 100%, transparent),
    radial-gradient(1px 1px at 90% 18%, #fdf 100%, transparent),
    radial-gradient(1px 1px at 5% 45%,  #fff 100%, transparent),
    radial-gradient(1px 1px at 96% 38%, #cff 100%, transparent);
  animation:pvl-twinkle 4s ease-in-out infinite alternate;
}
.pvl-stars--2{
  background-image:
    radial-gradient(1px 1px at 20% 35%, #fff 100%, transparent),
    radial-gradient(1px 1px at 35% 18%, #fdf 100%, transparent),
    radial-gradient(1px 1px at 50% 6%,  #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 63% 40%, #cff 100%, transparent),
    radial-gradient(1px 1px at 73% 15%, #fff 100%, transparent),
    radial-gradient(1px 1px at 85% 32%, #fff 100%, transparent);
  animation-delay:2s;
}
@keyframes pvl-twinkle{from{opacity:.35}to{opacity:1}}

/* ============ VAPORWAVE SUN (fully behind the sign) ============ */
.pvl-sun{
  position:absolute;left:50%;bottom:100px;
  width:230px;height:230px;margin-left:-115px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--pvl-sun-hi) 0%,#ff8a3d 45%,var(--pvl-magenta) 100%);
  -webkit-mask:linear-gradient(180deg,
    #000 0 55%,
    transparent 55% 58%, #000 58% 66%,
    transparent 66% 70%, #000 70% 77%,
    transparent 77% 82%, #000 82% 88%,
    transparent 88% 94%, #000 94% 100%);
  mask:linear-gradient(180deg,
    #000 0 55%,
    transparent 55% 58%, #000 58% 66%,
    transparent 66% 70%, #000 70% 77%,
    transparent 77% 82%, #000 82% 88%,
    transparent 88% 94%, #000 94% 100%);
  filter:drop-shadow(0 0 35px rgba(255,90,160,.55));
}

/* ============ SCENERY (taller: crowns rise above the sign) ============ */
.pvl-scene{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:96px;height:320px;display:block;
  width:max(100%,1200px); /* never skinnier than 1200px; stretches on wide screens instead of cropping its top */
}

/* ============ GRID FLOOR ============ */
.pvl-grid{
  position:absolute;left:0;right:0;bottom:0;height:100px;
  background:
    linear-gradient(180deg,transparent 0,transparent 4%,var(--pvl-magenta) 4%,transparent 5%,
      transparent 14%,var(--pvl-magenta) 14%,transparent 15.5%,
      transparent 28%,var(--pvl-magenta) 28%,transparent 30%,
      transparent 47%,var(--pvl-magenta) 47%,transparent 49.5%,
      transparent 71%,var(--pvl-magenta) 71%,transparent 74%),
    #14032b;
  overflow:hidden;
}
.pvl-grid::before{
  content:"";position:absolute;left:50%;top:0;
  width:300vw;height:100%;transform:translateX(-50%) perspective(90px) rotateX(50deg);
  transform-origin:top center;
  background:repeating-linear-gradient(90deg,var(--pvl-cyan) 0 2px, transparent 2px 90px);
  opacity:.45;
}
.pvl-grid::after{
  content:"";position:absolute;left:0;right:0;top:-14px;height:24px;
  background:radial-gradient(50% 100% at 50% 100%,rgba(0,240,255,.5),transparent 70%);
}

/* ============ FOREGROUND SAGUAROS ============ */
.pvl-cactus{
  position:absolute;bottom:-6px;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(61,255,176,.35));
}
.pvl-cactus--l{left:1.5%;height:200px;width:auto}
.pvl-cactus--r{right:2%;height:240px;width:auto;transform:scaleX(-1)}

/* ============ SCANLINE OVERLAY ============ */
.pvl-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}

/* ============ THE MARQUEE SIGN ============ */
.pvl-marquee{
  position:absolute;left:50%;top:78px;transform:translateX(-50%);
  padding:26px 42px 22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),
    var(--pvl-sign);
  border:3px solid #3a1266;
  border-radius:14px;
  box-shadow:
    0 0 0 3px #0a0118,
    0 0 28px rgba(255,46,196,.45),
    0 0 70px rgba(0,240,255,.25),
    0 14px 40px rgba(0,0,0,.6);
  text-align:center;
  z-index:3;
}
/* Bulbs: four separate strips, each exactly one bulb-row thick, so the
   dot pattern physically cannot tile onto the sign's face or its text.
   Animating background-position makes the bulbs chase around the ring. */
.pvl-marquee{--bulbTile:26px;--bulbBand:12px;--r1:2.6px;--r2:3.6px;--r3:4.6px}
.pvl-bulbs,.pvl-bulbs--alt,.pvl-marquee::before,.pvl-marquee::after{
  position:absolute;pointer-events:none;
  background-image:radial-gradient(circle,var(--pvl-sun-hi) var(--r1),rgba(255,211,107,.35) var(--r2),transparent var(--r3));
  background-repeat:repeat;
}
/* top + bottom rows */
.pvl-bulbs,.pvl-marquee::before{
  left:15px;right:15px;height:var(--bulbBand);
  background-size:var(--bulbTile) var(--bulbBand);
  background-position:0 50%;
  animation:pvl-chase-x 1s steps(2) infinite;
}
.pvl-bulbs{top:5px}
.pvl-marquee::before{content:"";bottom:5px;animation-direction:reverse}
/* left + right columns */
.pvl-bulbs--alt,.pvl-marquee::after{
  top:15px;bottom:15px;width:var(--bulbBand);
  background-size:var(--bulbBand) var(--bulbTile);
  background-position:50% 0;
  animation:pvl-chase-y 1s steps(2) infinite;
}
.pvl-bulbs--alt{left:5px;animation-direction:reverse}
.pvl-marquee::after{content:"";right:5px}
@keyframes pvl-chase-x{to{background-position:var(--bulbTile) 50%}}
@keyframes pvl-chase-y{to{background-position:50% var(--bulbTile)}}

.pvl-title{
  margin:0;
  font-family:'Limelight',cursive;
  font-size:clamp(28px,6vw,58px);
  letter-spacing:.06em;
  line-height:1.05;
  color:#fff;
  text-transform:uppercase;
}
.pvl-title .pvl-word-a{
  color:#dffcff;
  text-shadow:0 0 6px #fff,0 0 14px var(--pvl-cyan),0 0 34px var(--pvl-cyan),0 0 60px rgba(0,240,255,.6);
}
.pvl-title .pvl-word-b{
  color:#ffe3f7;
  text-shadow:0 0 6px #fff,0 0 14px var(--pvl-magenta),0 0 34px var(--pvl-magenta),0 0 60px rgba(255,46,196,.7);
  animation:pvl-flicker 6s linear infinite;
}
@keyframes pvl-flicker{
  0%,86%,88%,92%,100%{opacity:1}
  87%,91%{opacity:.35}
  93.5%{opacity:.7}
}
.pvl-tagline{
  margin:10px 0 0;
  font-size:clamp(10px,1.6vw,14px);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--pvl-sun-hi);
  text-shadow:0 0 10px rgba(255,211,107,.6);
}

/* ============ RESPONSIVE + MOTION ============ */
@media (max-width:640px){
  .pvl-header{height:340px}
  .pvl-marquee{top:64px;padding:18px 22px 16px;width:min(92%,480px)}
  .pvl-tagline{font-size:10px;letter-spacing:.2em}
  .pvl-sun{width:160px;height:160px;margin-left:-80px;bottom:92px}
  .pvl-scene{height:236px}
  .pvl-cactus--l{height:130px;left:-6px}
  .pvl-cactus--r{height:155px;right:-6px}
}
/* Small phones, portrait: shrink the whole sign so the city shows */
@media (max-width:480px){
  .pvl-header{height:300px}
  .pvl-marquee{top:44px;padding:13px 15px 11px;width:min(86%,330px);border-radius:12px}
  .pvl-marquee{--bulbTile:20px;--bulbBand:9px;--r1:2px;--r2:2.8px;--r3:3.6px}
  .pvl-bulbs,.pvl-marquee::before{left:11px;right:11px}
  .pvl-bulbs--alt,.pvl-marquee::after{top:11px;bottom:11px}
  .pvl-bulbs{top:4px}.pvl-marquee::before{bottom:4px}
  .pvl-bulbs--alt{left:4px}.pvl-marquee::after{right:4px}
  .pvl-title{font-size:clamp(18px,6.5vw,25px);letter-spacing:.04em}
  .pvl-tagline{font-size:8px;letter-spacing:.16em;margin-top:6px}
  .pvl-sun{width:120px;height:120px;margin-left:-60px;bottom:86px}
  .pvl-scene{height:206px}
  .pvl-cactus--l{height:96px}
  .pvl-cactus--r{height:116px}
}
@media (prefers-reduced-motion:reduce){
  .pvl-stars,.pvl-stars--2,.pvl-bulbs,.pvl-bulbs--alt,.pvl-marquee::before,.pvl-marquee::after,.pvl-title .pvl-word-b{animation:none}
}