/* ============================================================
   Palma Car Rental — parallax & motion layer
   Loaded on top of the compiled build (non-destructive).
   Remove the two enhance.* lines from index.html to disable.
   ============================================================ */

html { scroll-behavior: smooth; }

/* GPU hints for the parallax hero layers */
.px-hero-img  { will-change: transform; }
.px-hero-text { will-change: transform, opacity; }

/* ---- Scroll reveal ---- */
.px-reveal {
  opacity: 0;
  transform: translateY(46px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    box-shadow .3s ease;
  transition-delay: var(--px-delay, 0ms);
}
.px-reveal.px-in { opacity: 1; transform: none; }

/* ---- Card 3D tilt + media zoom ---- */
.px-tilt { transform-style: preserve-3d; }
.px-tilt:hover {
  box-shadow:
    0 22px 48px -16px hsl(var(--foreground) / 0.30),
    0 10px 22px -12px hsl(var(--foreground) / 0.20) !important;
}
.px-tilt img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.px-tilt:hover img { transform: scale(1.07); }

/* ---- Nav: shadow once scrolled ---- */
nav.px-nav-scrolled {
  box-shadow: 0 8px 28px -14px hsl(var(--foreground) / 0.28);
  transition: box-shadow .3s ease;
}

/* ---- Location map (Contact section) ---- */
.px-map {
  max-width: 80rem;
  margin: 40px auto 0;
  padding: 0 1rem;
  text-align: center;
}
.px-map-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 18px;
  color: hsl(var(--foreground, 220 9% 20%));
}
.px-map-frame {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 44px -18px hsl(var(--foreground, 220 9% 30%) / 0.32);
  display: block;
}
.px-map-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 600;
  color: hsl(var(--primary, 16 84% 50%));
  text-decoration: none;
}
.px-map-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .px-map-frame { height: 300px; }
}

/* ---- Language toggle (RU / EN) ---- */
.px-lang {
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin-right: 12px;
  border: 1px solid hsl(var(--border, 220 13% 88%));
  border-radius: 9999px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  flex: 0 0 auto;
}
.px-lang button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font: inherit;
  color: hsl(var(--foreground, 220 9% 30%));
  transition: background-color .2s ease, color .2s ease;
}
.px-lang button:hover { background: hsl(var(--foreground, 220 9% 30%) / 0.07); }
.px-lang button.px-active {
  background: hsl(var(--primary, 16 84% 50%));
  color: #fff;
}

/* ---- Hero scroll cue ---- */
#px-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 11;
  color: #fff;
  opacity: .9;
  pointer-events: none;
  transition: opacity .4s ease;
  animation: px-bounce 1.9s ease-in-out infinite;
}
#px-scrollcue svg { filter: drop-shadow(0 2px 7px rgba(0,0,0,.5)); }

@keyframes px-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(11px); }
}

/* ---- Respect users who prefer less motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .px-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .px-hero-img, .px-hero-text { transform: none !important; }
  #px-scrollcue { display: none !important; }
}