/* ============================================================
   app.css — FastRent.lk motion & experience layer
   "Bold gradient & immersive" — animated mesh, marquee,
   magnetic buttons, tilt cards, scroll reveals, glow.
   Layered on Tailwind (Play CDN). No build step.
   ============================================================ */

:root {
  --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb;
  --brand-700:#1d4ed8; --brand-800:#1e40af; --brand-900:#1e3a8a;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }
body { overflow-x: hidden; }
::selection { background: #2563eb; color: #fff; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity:1; transform:none; }
.reveal-zoom { opacity:0; transform: scale(.94); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-zoom.in { opacity:1; transform:none; }
.reveal-delay-1{transition-delay:.08s} .reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s} .reveal-delay-4{transition-delay:.32s}
.reveal-delay-5{transition-delay:.40s} .reveal-delay-6{transition-delay:.48s}
@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal-zoom{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .mesh,.marquee__track,.aurora,.blob,.shine-sweep::after{animation:none!important}
}

/* ---------- Animated gradient mesh (hero) ---------- */
.mesh {
  position:absolute; inset:-20%; z-index:0; filter: blur(60px); opacity:.85;
  background:
    radial-gradient(40% 50% at 20% 25%, #3b82f6 0%, transparent 60%),
    radial-gradient(35% 45% at 80% 20%, #6366f1 0%, transparent 60%),
    radial-gradient(45% 55% at 65% 80%, #0ea5e9 0%, transparent 60%),
    radial-gradient(40% 50% at 25% 75%, #2563eb 0%, transparent 60%);
  background-size: 200% 200%;
  animation: meshMove 18s ease-in-out infinite;
}
@keyframes meshMove {
  0%,100%{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%}
  50%{background-position:60% 40%, 30% 60%, 40% 30%, 70% 50%}
}
.grain { position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Floating blobs ---------- */
.blob{position:absolute;border-radius:9999px;filter:blur(50px);opacity:.5;pointer-events:none}
.blob-1{background:#60a5fa;width:340px;height:340px;animation:float1 14s ease-in-out infinite}
.blob-2{background:#a5b4fc;width:300px;height:300px;animation:float2 17s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,44px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:.75rem;width:max-content;animation:marquee 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Glass ---------- */
.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.glass-dark{background:rgba(255,255,255,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18)}

/* ---------- Cards: lift + tilt ---------- */
.card-lift{transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease}
.card-lift:hover{transform:translateY(-8px)}
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease-out)}
.tilt__inner{transform:translateZ(40px)}

/* ---------- Magnetic button + shine ---------- */
.magnetic{transition:transform .25s var(--ease-out)}
.shine-sweep{position:relative;overflow:hidden}
.shine-sweep::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s ease}
.shine-sweep:hover::after{left:150%}

/* ---------- Gradient text + animated gradient ---------- */
.text-gradient{background:linear-gradient(90deg,#1e3a8a,#2563eb 50%,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-gradient-anim{background:linear-gradient(90deg,#1e3a8a,#2563eb,#38bdf8,#2563eb,#1e3a8a);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s linear infinite}
@keyframes gradShift{to{background-position:200% center}}

/* ---------- Gradient border (CTA cards) ---------- */
.grad-border{position:relative;background:#fff;border-radius:1.25rem}
.grad-border::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;
  background:linear-gradient(135deg,#3b82f6,#6366f1,#0ea5e9);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ---------- Skeleton shimmer ---------- */
.skeleton{position:relative;overflow:hidden;background:#e9eef5}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- Heart pop ---------- */
.heart-pop{animation:pop .35s cubic-bezier(.16,1.4,.3,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ---------- Toasts + modal ---------- */
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.toast-item{animation:toast-in .3s var(--ease-out)}

/* ---------- Sticky filter bar ---------- */
.filterbar{transition:box-shadow .25s ease,background .25s ease}
.filterbar.stuck{box-shadow:0 10px 30px -14px rgba(30,58,138,.3)}

/* ---------- Inputs ---------- */
.field{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}

/* modern custom-chevron selects inside the mega search */
.mega-search select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:1.05rem;padding-right:2.4rem;
}

/* ---------- Pulse dot ---------- */
.pulse-dot{position:relative}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:9999px;background:inherit;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}

/* ---------- Utility ---------- */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.bg-grid{background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:44px 44px}