/* Tier-C motion: snappy, playful, spring-easing. Dependency-free, accessible.
   Vibe: energetic — short durations, overshoot curves, bigger hovers, real
   page transitions that feel like an app, not a flat website.
   Honors prefers-reduced-motion. */

/* ── Spring easing tokens (CSS custom props) ─────────────────────── */
:root {
  --rl-spring:        cubic-bezier(.18, .89, .32, 1.28);  /* overshoots end */
  --rl-spring-soft:   cubic-bezier(.34, 1.32, .64, 1);    /* gentle overshoot */
  --rl-snap:          cubic-bezier(.2, .9, .25, 1);       /* snappy ease-out */
  --rl-snap-in:       cubic-bezier(.55, .1, .85, .55);    /* snappy ease-in */
}

/* ── Reveal-on-scroll initial states ─────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.94);
  transition: opacity .42s var(--rl-snap),
              transform .55s var(--rl-spring);
  will-change: opacity, transform;
}
[data-reveal="fade"]    { transform: scale(0.96); }
[data-reveal="left"]    { transform: translate3d(-44px, 0, 0) scale(0.97); }
[data-reveal="right"]   { transform: translate3d(44px, 0, 0) scale(0.97); }
[data-reveal="zoom"]    { transform: scale(0.82); }
[data-reveal="up-lg"]   { transform: translate3d(0, 60px, 0) scale(0.9); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered entrance — punchy 50ms increments (was 60–120ms). */
[data-reveal-stagger] > [data-reveal] { transition-delay: 0ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(1)  { transition-delay:  30ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(2)  { transition-delay:  80ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(3)  { transition-delay: 130ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(4)  { transition-delay: 180ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(5)  { transition-delay: 230ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(6)  { transition-delay: 280ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(7)  { transition-delay: 330ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(8)  { transition-delay: 380ms; }
[data-reveal-stagger] > [data-reveal].is-visible:nth-child(n+9) { transition-delay: 430ms; }

/* ── Card lift + image zoom: springy ─────────────────────────────── */
.rl-lift {
  transition: transform .28s var(--rl-spring),
              box-shadow .28s var(--rl-snap),
              border-color .2s ease;
  will-change: transform;
}
.rl-lift:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 56px -16px rgba(15, 23, 42, 0.30),
              0 8px 20px -6px rgba(15, 23, 42, 0.18);
}
.rl-lift:active {
  transform: translateY(-2px) scale(.995);
  transition-duration: .12s;
}

/* Listing-card image: punchier zoom + tiny rotate on hover. */
.rl-lift img,
[data-reveal] img {
  transition: transform .55s var(--rl-snap);
}
.rl-lift:hover img {
  transform: scale(1.10) rotate(.5deg);
}

/* ── Press / CTA shimmer ─────────────────────────────────────────── */
.rl-press {
  position: relative;
  overflow: hidden;
  transition: transform .14s var(--rl-spring-soft),
              box-shadow .2s var(--rl-snap),
              filter .2s ease;
}
.rl-press::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-22deg);
  transition: left .55s var(--rl-snap);
  pointer-events: none;
}
.rl-press:hover {
  filter: brightness(1.12) saturate(1.05);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px -8px rgba(4, 120, 87, 0.55);
}
.rl-press:hover::before { left: 130%; }
.rl-press:active {
  transform: scale(.95);
  transition-duration: .08s;
}

/* ── Filter chip: scale-in + gold halo pulse ─────────────────────────
   Active-filter chips on /listings get a subtle spring entrance and a
   periodic gold halo so the eye lands on what's narrowing the result
   set. Calm, not flashy — 3 pulses then idle. */
@keyframes rl-chip-in {
  from { opacity: 0; transform: translateY(-4px) scale(.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes rl-chip-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
  50%      { box-shadow: 0 0 0 4px rgba(201,162,39,.35); }
}
.rl-chip {
  animation: rl-chip-in .35s var(--rl-spring) both,
             rl-chip-halo 2.4s ease-in-out 3;
  will-change: transform, box-shadow;
}
.rl-chip:hover {
  background: #1E40AF !important;
  transform: translateY(-1px);
  transition: transform .15s var(--rl-spring), background .18s ease;
}

/* Animated link underline (now slightly springier) */
.rl-link-underline {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .32s var(--rl-spring-soft);
}
.rl-link-underline:hover { background-size: 100% 1.5px; }

/* Hero float — bigger amplitude, faster cycle */
@keyframes rl-float {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-12px) rotate(.4deg); }
}
.rl-float { animation: rl-float 4.5s ease-in-out infinite; }

/* Pulsing ring — gold sweep, always-on, punchier */
@keyframes rl-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.6), 0 0 0 0 rgba(217,119,6,.3); }
  60%  { box-shadow: 0 0 0 14px rgba(217,119,6,0), 0 0 0 28px rgba(217,119,6,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,119,6,0), 0 0 0 0 rgba(217,119,6,0); }
}
.rl-pulse { animation: rl-pulse-ring 1.8s var(--rl-snap) infinite; }

/* New: bounce-in on scroll (apply via data-reveal="bounce") */
@keyframes rl-bounce-in {
  0%   { opacity: 0; transform: translateY(40px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
[data-reveal="bounce"] { opacity: 0; transform: translateY(40px) scale(0.85); }
[data-reveal="bounce"].is-visible {
  animation: rl-bounce-in .55s var(--rl-spring) forwards;
  transition: none;
}

/* ── Parallax hero ──────────────────────────────────────────────── */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, calc(var(--rl-scroll, 0px) * var(--rl-parallax, 0.3)), 0);
  transition: none;
}

/* Hero scroll-progress bar */
.rl-hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #D97706 0%, #fbbf24 50%, #f59e0b 100%);
  box-shadow: 0 0 12px rgba(217,119,6,.6);
  transform-origin: left center;
  transform: scaleX(var(--rl-progress, 0));
  transition: transform .15s linear;
  pointer-events: none;
}

/* Ambient mouse-tracking gradient sheen on dark hero sections */
.rl-hero-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    1000px circle at calc(var(--rl-mouse-x, 50%) * 1%) calc(var(--rl-mouse-y, 50%) * 1%),
    rgba(217,119,6,0.22),
    transparent 42%
  );
  pointer-events: none;
  transition: background-position .2s ease;
}

/* ── Smooth anchor scroll ────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── View Transitions API (page-to-page slide + scale) ────────────── */
@view-transition { navigation: auto; }

/* Snappy slide+scale: outgoing page drifts left-and-shrinks; incoming
   pops in from the right slightly oversized then settles. Feels like
   pages have weight and direction. */
::view-transition-old(root) {
  animation: rl-vt-slide-out .28s var(--rl-snap-in) both;
}
::view-transition-new(root) {
  animation: rl-vt-slide-in .42s var(--rl-spring) both;
}
@keyframes rl-vt-slide-out {
  from { opacity: 1; transform: translateX(0)    scale(1);    filter: blur(0); }
  to   { opacity: 0; transform: translateX(-24px) scale(0.985); filter: blur(2px); }
}
@keyframes rl-vt-slide-in {
  0%   { opacity: 0; transform: translateX(36px) scale(1.02); filter: blur(2px); }
  60%  { opacity: 1; transform: translateX(-4px) scale(0.998); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0)    scale(1);    filter: blur(0); }
}

/* ── Hero word-by-word reveal ────────────────────────────────────── */
.rl-hero-headline { display: inline; }
.rl-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  animation: rl-hero-word-in .72s var(--rl-spring) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
  will-change: opacity, transform;
}
@keyframes rl-hero-word-in {
  from { opacity: 0; transform: translate3d(0, 32px, 0); filter: blur(4px); }
  to   { opacity: 1; transform: none;                    filter: blur(0); }
}

/* ── Hero background crossfade ───────────────────────────────────── */
/* Pure-CSS slideshow: every slide is absolutely-positioned at the same
   spot; each runs the same keyframe with a stagger so only one slide is
   at opacity:1 at any time. The first slide gets a slight head-start so
   the page opens on a real image instead of a blank fade. The Ken-Burns
   drift adds parallax even when the cycle pauses. */
.rl-hero-bg { z-index: 0; }
.rl-hero-bg-slide {
  opacity: 0;
  animation-name: rl-hero-fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* No fill-mode: keep the CSS rule's opacity:0 during the delay phase
     so off-cycle slides stay invisible. */
  transform-origin: center center;
  will-change: opacity, transform;
}
/* Single combined keyframe (opacity + ken-burns scale). Within each
   slide's own animation, it fades in over 5% of the cycle, stays at
   peak through 22%, fades out by 27%, then stays invisible. With N
   slides × 5s slot, the cycle is 5N seconds. For 4 slides (20s cycle)
   that means each slide is visible roughly 1s–4.4s of its own slot. */
@keyframes rl-hero-fade {
  0%   { opacity: 0; transform: scale(1.04); }
  5%   { opacity: 1; }
  22%  { opacity: 1; transform: scale(1.10); }
  27%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; }
}
/* ── Reduced motion: collapse all to instant fades ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .rl-float, .rl-pulse { animation: none; }
  .rl-press::before { display: none; }
  .rl-hero-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rl-hero-bg-slide { animation: none !important; transform: none !important; opacity: 0 !important; }
  .rl-hero-bg-slide:first-child { opacity: 1 !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}