/*
 * Motion layer for /parchese-la-feria-2/ — the fair's landing page, which
 * ships as static HTML with no animation of its own. Nothing here changes
 * the layout: only entrances, hovers and depth, all on transform/opacity.
 * Uses the page's own palette (--red, --purple, --yellow, --green).
 */

/* ---------- scroll progress ---------- */

.pxb-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--pxb-p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red), var(--purple) 45%, var(--yellow) 78%, var(--green));
  z-index: 9998;
  pointer-events: none;
}

/* ---------- entrances ---------- */

.pxb-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--pxb-d, 0ms);
}

.pxb-reveal.pxb-in {
  opacity: 1;
  transform: none;
}

/* Headings arrive with a coloured underline that draws itself. */
.pxb-underline {
  position: relative;
  display: inline-block;
}

.pxb-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.18em;
  height: 4px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--red), var(--purple));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1) .15s;
}

.pxb-in .pxb-underline::after,
.pxb-underline.pxb-in::after {
  transform: scaleX(1);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
}

/* Two slow colour clouds drifting behind the text. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
  animation: pxb-cloud 18s ease-in-out infinite alternate;
}

.hero::before {
  top: -16%;
  left: -12%;
  background: radial-gradient(circle, rgba(232, 64, 42, .75), transparent 70%);
}

.hero::after {
  right: -14%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(122, 60, 224, .7), transparent 70%);
  animation-duration: 24s;
  animation-direction: alternate-reverse;
}

@keyframes pxb-cloud {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6%, 8%, 0) scale(1.15); }
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

/* The edition badge gets a light sweeping across it. */
.edition {
  position: relative;
  overflow: hidden;
}

.edition::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: pxb-sheen 4.5s ease-in-out 1.2s infinite;
}

@keyframes pxb-sheen {
  0% { transform: translateX(-120%); }
  35%, 100% { transform: translateX(120%); }
}

.date-badge {
  animation: pxb-pulse 3.4s ease-in-out infinite;
}

@keyframes pxb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 201, 74, .45); }
  50% { box-shadow: 0 0 0 10px rgba(244, 201, 74, 0); }
}

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

.pxb-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  gap: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line, #2a2830);
  border-bottom: 1px solid var(--line, #2a2830);
  background: linear-gradient(90deg, rgba(232, 64, 42, .16), rgba(122, 60, 224, .16));
  user-select: none;
}

.pxb-marquee span {
  flex: 0 0 auto;
  padding-right: 2.5rem;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper, #f2ede4);
  animation: pxb-slide 26s linear infinite;
}

.pxb-marquee b {
  color: var(--yellow, #f4c94a);
  font-weight: 700;
}

@keyframes pxb-slide {
  to { transform: translateX(-100%); }
}

/* ---------- floating decorations ---------- */

.deco {
  will-change: transform;
  animation: pxb-float 9s ease-in-out infinite alternate;
}

.deco-dominante { animation-duration: 11s; animation-delay: -3s; }
.deco-bailarina { animation-duration: 13s; animation-delay: -6s; }

@keyframes pxb-float {
  from { transform: translateY(-8px) rotate(-1.2deg); }
  to { transform: translateY(10px) rotate(1.2deg); }
}

/* ---------- lists ---------- */

.bullets li {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .3s ease;
}

.bullets li:hover {
  transform: translateX(8px);
  color: var(--yellow, #f4c94a);
}

/* ---------- pricing ---------- */

.price-card {
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(244, 201, 74, .18) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.price-card:hover::before { transform: translateX(130%); }

.price-card:hover {
  transform: translateY(-8px);
  border-color: var(--yellow, #f4c94a);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(244, 201, 74, .35);
}

.price-card .price {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .3s ease;
}

.price-card:hover .price {
  transform: scale(1.06);
  color: var(--yellow, #f4c94a);
}

/* ---------- buttons ---------- */

.action-link {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, letter-spacing .3s ease;
}

.action-link:hover {
  transform: translateY(-3px);
  letter-spacing: .02em;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9);
}

.action-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 50% 120%, rgba(255, 255, 255, .35), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
}

.action-link:hover::after { opacity: 1; }

/* ---------- navigation ---------- */

.site-nav {
  transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}

.site-nav.pxb-stuck {
  background: rgba(11, 11, 13, .82);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -22px #000;
}

.nav-links a {
  position: relative;
  transition: color .3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.nav-links a:hover::after,
.nav-links a.pxb-active::after { transform: scaleX(1); }

.nav-brand {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.nav-brand:hover { transform: scale(1.04); }

/* ---------- maps ---------- */

.tab-btn {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.tab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px #000;
}

.floor-card {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}

.map-viewport:hover .floor-card { filter: saturate(1.06); }

.zone-label {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .3s ease, text-shadow .3s ease;
}

.zone-label:hover {
  transform: scale(1.12);
  color: var(--yellow, #f4c94a);
  text-shadow: 0 0 12px rgba(244, 201, 74, .6);
}

/* Sold spaces breathe softly so the list reads as live. */
.space-row strong {
  position: relative;
  animation: pxb-sold 3.2s ease-in-out infinite;
}

@keyframes pxb-sold {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}

.space-row {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background-color .28s ease;
}

.space-row:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, .05);
}

/* ---------- calmer on phones and for reduced motion ---------- */

@media (hover: none) {
  .price-card:hover,
  .action-link:hover,
  .tab-btn:hover,
  .space-row:hover,
  .bullets li:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pxb-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero::before,
  .hero::after,
  .deco,
  .edition::after,
  .date-badge,
  .pxb-marquee span,
  .space-row strong {
    animation: none !important;
  }
  .pxb-underline::after { transform: scaleX(1); }
}