/* issue 4: KRAZY KONRAD'S STARSHIP HANGAR.
   A used-starship lot at night — neon, bunting, floodlights, and a
   window sticker on every certified pre-flown rig. EVERYTHING MUST GO. */

:root {
  --void: #0a0a16;
  --pink: #ff2d95;
  --pink-soft: #ff6cb6;
  --cyan: #23f0ff;
  --gold: #ffd400;
  --amber: #ffb200;
  --paper: #f4f1e6;
  --paper-line: #cbbf9f;
  --ink: #1b1a24;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Oswald', sans-serif;
  color: #e9e6f5;
  background:
    radial-gradient(120% 80% at 50% -10%, #241640 0%, #14122c 40%, var(--void) 100%) fixed;
  padding-bottom: 3rem;
  overflow-x: hidden;
}

::selection {
  background: var(--pink);
  color: #fff;
}

/* ---- pennant bunting --------------------------------------------- */

.bunting {
  height: 1.5rem;
  background:
    repeating-linear-gradient(
      90deg,
      var(--pink) 0 1.6rem,
      var(--cyan) 1.6rem 3.2rem,
      var(--gold) 3.2rem 4.8rem,
      #ffffff 4.8rem 6.4rem
    );
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.2rem, transparent 0.2rem 0.28rem),
    linear-gradient(180deg, #000 0 0);
  /* triangular pennants hanging from a string */
  clip-path: polygon(
    0 0, 100% 0, 100% 22%,
    100% 22%, 96% 100%, 92% 22%, 88% 22%, 84% 100%, 80% 22%, 76% 22%, 72% 100%,
    68% 22%, 64% 22%, 60% 100%, 56% 22%, 52% 22%, 48% 100%, 44% 22%, 40% 22%,
    36% 100%, 32% 22%, 28% 22%, 24% 100%, 20% 22%, 16% 22%, 12% 100%, 8% 22%,
    4% 22%, 0 100%
  );
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  opacity: 0.95;
}

/* ---- neon marquee ------------------------------------------------ */

header {
  text-align: center;
  padding: 1.8rem 1rem 0.5rem;
}

.kicker {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(35, 240, 255, 0.6);
}

.neon {
  margin: 0;
  font-family: 'Monoton', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 1.05;
  color: #ffe9f6;
  text-shadow:
    0 0 4px #fff,
    0 0 12px var(--pink),
    0 0 26px var(--pink),
    0 0 48px var(--pink),
    0 0 70px rgba(255, 45, 149, 0.6);
  animation: buzz 6s infinite;
}

@keyframes buzz {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}

.sub {
  margin: 0.4rem 0 0;
  font-weight: 700;
  font-size: clamp(1.1rem, 3.5vw, 1.7rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 212, 0, 0.65);
}

/* ---- Konrad's patter --------------------------------------------- */

.barker {
  max-width: 40rem;
  margin: 1.6rem auto 0.4rem;
  padding: 0 1.2rem;
  text-align: center;
  font-size: 1.2rem;
  font-style: italic;
  color: #f4ead0;
  min-height: 3.4em;
}

.barker .who {
  display: inline-block;
  margin-right: 0.5em;
  padding: 0.05em 0.5em;
  transform: rotate(-2deg);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--void);
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255, 212, 0, 0.5);
}

.barker em {
  color: var(--pink-soft);
  font-style: normal;
  font-weight: 700;
}

/* ---- showroom floor ---------------------------------------------- */

.floor {
  position: relative;
  max-width: 40rem;
  margin: 0.6rem auto 0;
  padding: 2.6rem 1.2rem 2.2rem;
}

.spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 40%, rgba(255, 224, 168, 0.16), transparent 70%),
    radial-gradient(85% 60% at 50% 100%, rgba(35, 240, 255, 0.08), transparent 72%);
}

/* ---- the window sticker ------------------------------------------ */

.sticker {
  position: relative;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  border: 1px solid var(--paper-line);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);
  transform: rotate(-1deg);
}

.sticker.fresh {
  animation: rollin 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes rollin {
  0% {
    opacity: 0;
    transform: translateX(3.5rem) rotate(4deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(-1deg) scale(1);
  }
}

.sticker-head {
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  /* keep the certified banner clear of the badge hanging off the corner */
  padding-right: 6.5rem;
}

.cert {
  font-weight: 700;
  text-transform: uppercase;
}

.stockline {
  margin: 0;
  padding: 0.7rem 1.4rem 0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #8a8270;
}

.makemodel {
  margin: 0;
  padding: 0.35rem 1.4rem 0.85rem;
  border-bottom: 2px dashed var(--paper-line);
}

.mm-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
}

.mm-value {
  display: block;
  margin-top: 0.1rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.12;
  color: var(--ink);
}

.desc {
  margin: 0;
  padding: 0.9rem 1.4rem 1.5rem;
  font-size: 1.08rem;
  line-height: 1.6;
  border-bottom: 2px dashed var(--paper-line);
}

.desc em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255, 212, 0, 0.6) 60%);
}

/* price band */

.price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.1rem 1.4rem 1.5rem;
}

.fine-print {
  flex: 1 1 11rem;
  max-width: 16rem;
  font-size: 0.62rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a8270;
}

.price-tag {
  text-align: right;
  line-height: 1.05;
}

.was {
  display: block;
  font-size: 0.95rem;
  color: #9a3b3b;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.now-label {
  display: block;
  margin-top: 0.25rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--pink);
}

.now {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--ink);
}

/* ---- the KRAZY DEAL sunburst badge ------------------------------- */

.badge {
  position: absolute;
  z-index: 2;
  top: -2rem;
  right: -1.4rem;
  width: 7rem;
  height: 7rem;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.badge-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--gold) 0deg 9deg,
    var(--pink) 9deg 18deg
  );
  animation: spin 9s linear infinite;
}

.badge-label {
  position: absolute;
  inset: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--void);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid #fff;
  transform: rotate(-8deg);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- the big garish button --------------------------------------- */

.center {
  text-align: center;
  margin-top: 2rem;
}

#download input[type='submit'] {
  appearance: none;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--void);
  padding: 0.7em 1.9em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  box-shadow: 0 5px 0 #b57e00, 0 10px 22px rgba(255, 178, 0, 0.4);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

#download input[type='submit']:hover,
#download input[type='submit']:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

#download input[type='submit']:focus-visible {
  outline: 3px dashed var(--cyan);
  outline-offset: 4px;
}

#download input[type='submit']:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #b57e00, 0 3px 10px rgba(255, 178, 0, 0.4);
}

/* ---- footer ------------------------------------------------------ */

footer {
  margin: 2.8rem auto 0;
  max-width: 40rem;
  padding: 0 1.2rem;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(233, 230, 245, 0.7);
}

footer a {
  color: var(--cyan);
}

footer a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---- small screens ----------------------------------------------- */

@media only screen and (max-width: 480px) {
  .badge {
    width: 6rem;
    height: 6rem;
    top: -2rem;
    right: -0.6rem;
  }

  .badge-label {
    inset: 0.95rem;
    font-size: 0.68rem;
  }

  .sticker-head {
    padding-right: 5rem;
  }

  .now {
    font-size: 2.2rem;
  }
}

/* ---- decency ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .neon,
  .badge-rays,
  .sticker.fresh {
    animation: none;
  }
}