/* ============================================================
   STARFIVR — 90s TV-COMMERCIAL edition.
   Not a webpage: a Saturday-morning toy ad. Orange apocalypse sky,
   Impact-font shouting, VHS scanlines, spiders and chihuahuas.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  /* the whole sky is on fire and that is the brand */
  background: linear-gradient(180deg,
    #ffd23f 0%, #ffa62b 22%, #ff6a00 48%, #d63a00 72%, #7a1600 100%);
  background-attachment: fixed;
  color: #1a0c04;
  font-family: "Arial Black", Impact, Arial, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---------- backdrop layers ---------- */
#lightning { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }

/* jagged black wasteland horizon pinned to the bottom of the sky */
.horizon {
  position: fixed; left: 0; right: 0; bottom: 0; height: 18vh; z-index: 2; pointer-events: none;
  background: #100500;
  clip-path: polygon(0 55%, 6% 30%, 11% 62%, 18% 38%, 26% 58%, 33% 22%, 41% 60%,
    50% 45%, 58% 65%, 66% 30%, 74% 58%, 82% 40%, 90% 62%, 96% 35%, 100% 55%, 100% 100%, 0 100%);
}

#critters { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.spider { position: absolute; top: 0; font-size: 30px; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.silk   { position: absolute; top: 0; width: 2px; background: rgba(255,255,255,.75); transform-origin: top; }
.dog    { position: absolute; bottom: 4vh; font-size: 34px; will-change: transform; }

/* the VHS you taped this commercial onto */
.scanlines {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}

.page { position: relative; z-index: 5; max-width: 900px; margin: 0 auto; padding: 30px 16px 22vh; }

/* ---------- header ---------- */
header { text-align: center; padding: 40px 0 10px; position: relative; }

.logo {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.4rem, 14vw, 8rem);
  font-style: italic; letter-spacing: 2px; line-height: .9;
  color: #fff;
  -webkit-text-stroke: 3px #1a0c04;
  text-shadow: 0 6px 0 #1a0c04, 0 12px 24px rgba(0,0,0,.45);
  transform: skewX(-6deg);
}

.subtitle { margin-top: 14px; font-size: 1.15rem; color: #fff; text-shadow: 2px 2px 0 #1a0c04; letter-spacing: 1px; }
.subtitle em { color: #ffd23f; font-style: normal; }

/* rotating commercial bumper line ("NO GRAVITY!" -> "NO MERCY!" ...) */
.bumper {
  display: inline-block; margin-top: 18px; padding: 8px 26px;
  background: #1a0c04; color: #ffd23f;
  font-size: 1.6rem; letter-spacing: 3px;
  transform: rotate(-2deg);
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}

/* corner badge, straight off the toy box */
.badge {
  position: absolute; top: -10px; right: 2vw; z-index: 6;
  width: 96px; height: 96px; border-radius: 50%;
  background: #ffd23f; color: #7a1600; border: 4px solid #1a0c04;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .9rem; line-height: 1.1; font-weight: 900;
  transform: rotate(12deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}

/* ---------- panels: white cards slammed onto the screen ---------- */
.panel {
  background: #fff7ec;
  border: 5px solid #1a0c04;
  box-shadow: 12px 12px 0 rgba(26,12,4,.55);
  padding: 26px 30px; margin: 34px 0;
  transform: rotate(-1.2deg);
}
.panel.flip { transform: rotate(1.3deg); }
.panel h2 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 2rem; color: #d63a00; letter-spacing: 1px; margin-bottom: 10px;
  text-transform: uppercase;
}
.panel p { line-height: 1.6; font-family: Verdana, Arial, sans-serif; font-weight: normal; }

.announcer .vo { font-size: 1.5rem; color: #7a1600; letter-spacing: 2px; font-family: Impact, sans-serif; }
.shout {
  margin-top: 14px; font-family: Impact, sans-serif; font-size: 2.4rem;
  color: #1a0c04; letter-spacing: 2px;
}

/* ---------- slam-in: every section punches in like a commercial cut ---------- */
.slam { opacity: 0; transform: translateY(60px) rotate(-4deg) scale(.9); transition: none; }
.slam.in {
  opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1);
  transition: transform .28s cubic-bezier(.2, 1.6, .4, 1), opacity .2s;
}
.slam.flip.in { transform: translateY(0) rotate(1.3deg) scale(1); }
header.slam.in, .shots-title.slam.in, .cta.slam.in, footer.slam.in, .shot.slam.in { transform: none; }

/* ---------- footage ---------- */
.shots-title { text-align: center; color: #fff; text-shadow: 2px 2px 0 #1a0c04; margin: 40px 0 16px; font-family: Impact, sans-serif; letter-spacing: 2px; }
.shots-title small { color: #ffd23f; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

.shot {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border: 6px solid #1a0c04; background: #000;
  box-shadow: 10px 10px 0 rgba(26,12,4,.55);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #ffd23f; font-size: 1.15rem; letter-spacing: 2px;
  font-family: Impact, sans-serif; text-shadow: 2px 2px 0 #d63a00;
}
.shot span { position: relative; z-index: 2; }
.static {
  position: absolute; inset: 0; opacity: .3;
  background: repeating-linear-gradient(0deg, #241105 0 2px, #4d2508 2px 3px, #120800 3px 5px);
  animation: staticRoll .35s steps(4) infinite;
}
@keyframes staticRoll { to { transform: translateY(5px); } }

/* ---------- call now ---------- */
.cta { text-align: center; margin: 52px 0 10px; }
.pricetag {
  display: inline-block; vertical-align: middle; margin-right: 20px; padding: 18px 22px;
  background: #d63a00; color: #fff; border: 4px solid #1a0c04; border-radius: 50%;
  font-family: Impact, sans-serif; font-size: 1.6rem; line-height: 1;
  transform: rotate(-8deg); box-shadow: 5px 5px 0 rgba(0,0,0,.35);
}
.pricetag small { font-size: .65rem; letter-spacing: 1px; }

.bigbutton {
  display: inline-block; vertical-align: middle; padding: 20px 46px;
  font-family: Impact, sans-serif; font-size: 1.9rem; letter-spacing: 3px; text-decoration: none;
  color: #fff; background: #1a0c04;
  border: 5px solid #ffd23f;
  box-shadow: 8px 8px 0 rgba(26,12,4,.55);
  transform: skewX(-6deg);
  transition: transform .12s;
}
.bigbutton:hover { transform: skewX(-6deg) scale(1.08); background: #d63a00; }

.callnow { margin-top: 18px; color: #fff; text-shadow: 2px 2px 0 #1a0c04; letter-spacing: 1px; font-size: .95rem; }
.blinky { animation: blinky 1s steps(1) infinite; }
@keyframes blinky { 50% { opacity: .25; } }

/* ---------- footer legalese ---------- */
footer { text-align: center; margin-top: 40px; color: #ffdba8; font-size: .78rem; line-height: 1.9; font-family: Verdana, sans-serif; text-shadow: 1px 1px 0 #1a0c04; }

@media (max-width: 720px) {
  .badge { width: 74px; height: 74px; font-size: .72rem; top: -14px; }
  .pricetag { display: block; margin: 0 auto 18px; width: max-content; }
}