/* ================================================================
   RENTVALA — Motion & Fluid UI layer
   Pairs with assets/js/motion.js. Animates ONLY transform/opacity.
   Every ornamental effect dies under prefers-reduced-motion (the
   global kill-switch lives in tokens.css).
   ================================================================ */

/* ─── Reveal on scroll ───────────────────────────────────────── */
.rv-reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-dist), 0);
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.rv-reveal.rv-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
/* No-JS / crawler safety: content is only hidden once JS confirms it */
html:not(.rv-motion) .rv-reveal { opacity: 1; transform: none; }

/* ─── Slow ambient float (decorative only) ───────────────────── */
@keyframes rvFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}
.rv-float { animation: rvFloat 5.5s ease-in-out infinite; }
.stat-item .icon            { animation: rvFloat 6s ease-in-out infinite; }
.stat-item:nth-child(2) .icon { animation-delay: .8s; }
.stat-item:nth-child(3) .icon { animation-delay: 1.6s; }
.cat-card .arrow            { animation: rvFloat 5s ease-in-out infinite; }
.cat-card:nth-child(2) .arrow { animation-delay: .7s; }
.cat-card:nth-child(3) .arrow { animation-delay: 1.4s; }
.rv-service-icon            { animation: rvFloat 6.5s ease-in-out infinite; }

/* ─── Animated link underline ────────────────────────────────── */
.link-underline, .ft-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .3s var(--ease-out), color var(--t-fast);
}
.link-underline:hover, .ft-link:hover { background-size: 100% 1.5px; }

/* ─── Button micro-interactions ──────────────────────────────── */
.btn { transform: translateZ(0); }
.btn:active { transform: scale(.97); }
.btn .bi { transition: transform var(--t-fast); display: inline-block; }
.btn-primary:hover .bi, .search-btn:hover .bi { transform: translateX(2px); }

/* ─── Scroll progress bar ────────────────────────────────────── */
.rv-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10010;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dd) 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ─── Image fade-in + skeleton shimmer ───────────────────────── */
@keyframes rvShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.prop-img, .sy-gallery, .sy-thumb, .bg-city-card .thumb { position: relative; }
.prop-img::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation: rvShimmer 1.4s ease-in-out infinite;
  opacity: 1; transition: opacity .4s ease; pointer-events: none;
}
[data-theme="dark"] .prop-img::before {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
}
.prop-img.rv-img-loaded::before { opacity: 0; animation: none; }
.prop-img img { opacity: 0; transition: opacity .45s ease, transform .5s var(--ease); }
.prop-img.rv-img-loaded img { opacity: 1; }
html:not(.rv-motion) .prop-img img { opacity: 1; }
html:not(.rv-motion) .prop-img::before { display: none; }

/* ─── Hero slot-machine roller (structure in main.css) ───────── */
.hero-city-line {
  color: rgba(255,255,255,.92);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  margin-top: .5rem;
  display: flex; align-items: baseline; gap: .45rem;
}

/* ─── Page transitions (fade between internal pages) ─────────── */
@keyframes rvPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.rv-motion body { animation: rvPageIn .3s var(--ease-out); }
body.rv-page-leave { opacity: 0; transition: opacity .16s ease; }

/* ─── Loading overlay (JS-injected, crawlers never see it) ───── */
#rvLoader {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bg);
  cursor: pointer;
  transition: opacity .35s ease;
}
#rvLoader.rv-hide { opacity: 0; pointer-events: none; }
#rvLoader .rvl-logo { animation: rvFloat 2.2s ease-in-out infinite; }
#rvLoader .rvl-logo svg { filter: drop-shadow(0 6px 18px var(--glow-color)); }
#rvLoader .rvl-name {
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1.35rem;
  color: var(--ink); letter-spacing: -.02em;
}
#rvLoader .rvl-name span { color: var(--loader-accent, var(--primary)); }
#rvLoader .rvl-city {
  font-size: .85rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}
#rvLoader .rvl-bar {
  width: 130px; height: 3px; border-radius: 99px; overflow: hidden;
  background: var(--line);
  position: relative;
}
#rvLoader .rvl-bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--loader-accent, var(--primary));
  transform-origin: 0 50%;
  animation: rvLoadBar .9s var(--ease-out) forwards;
}
@keyframes rvLoadBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#rvLoader .rvl-skyline { opacity: .55; }
#rvLoader .rvl-skyline path { fill: var(--loader-accent, var(--primary)); }

/* ─── Generic hover lift utility ─────────────────────────────── */
.hover-lift { transition: transform var(--t-med), box-shadow var(--t-med); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.rv-works-step { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.rv-works-step:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }