/* ============================================================
   SWFT hologram city (js/swft-city.js): a canvas to the right of the
   Free Growth Audit copy on the homepage; stacks below the copy on
   tablets and phones, where it stays visible.
   ============================================================ */
.hp-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.swft-city {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
  justify-self: end;
  aspect-ratio: 1 / 1;
  cursor: grab;
  touch-action: pan-y; /* vertical swipes still scroll the page */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.swft-city.is-dragging { cursor: grabbing; }

/* The canvas is bigger than the box (15% on every side) so the glow, the
   rotating plate corners and the beacon are never cut off. It ignores the
   pointer (the box takes drags and taps), so it can't block the text or
   buttons it overlaps. js/swft-city.js reads this size, so keep it in sync. */
.swft-city canvas {
  position: absolute;
  left: -15%;
  top: -15%;
  width: 130%;
  height: 130%;
  display: block;
  pointer-events: none;
}

/* The bleed may extend past the section edge on narrow screens. Clip it there
   (clip, unlike hidden, makes no scroll container) so the page can't scroll
   sideways, and nothing else in the section gets clipped. */
.hp-booking {
  overflow-x: clip;
}

/* Hologram projector look: faint scan lines and a band sweeping down */
.swft-city::before,
.swft-city::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.swft-city::before {
  background: repeating-linear-gradient(0deg, rgba(160, 215, 250, 0.05) 0 1px, transparent 1px 4px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 55%, #000 35%, transparent 72%);
}

.swft-city::after {
  height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(120, 200, 255, 0.1), transparent);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
  animation: swft-city-sweep 5.5s linear infinite;
}

@keyframes swft-city-sweep {
  from { transform: translateY(-110%); }
  to { transform: translateY(520%); }
}

.swft-city__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  text-align: center;
  font-family: var(--swft-font-mono, "Space Mono", monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

@media (max-width: 900px) {
  .hp-booking-grid { grid-template-columns: minmax(0, 1fr); }
  .swft-city {
    justify-self: center;
    max-width: 30rem;
    aspect-ratio: 1 / 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swft-city::after { animation: none; opacity: 0; }
}