/* ============================================================
   KolkataCabRental — Immersive 3D Scroll Experience
   ============================================================ */

:root{
  --gold:#FFC300;
  --gold-dark:#E0A800;
  --dark:#0A0A0A;
  --dark-2:#141414;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body.exp-body{
  margin:0; background:var(--dark); color:#fff;
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
  cursor:default;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.02em; margin:0;}
.exp-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
  font-weight:700; color:var(--gold); margin-bottom:14px;
}
a{color:inherit;}

/* progress bar */
.exp-progress{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--gold),#fff5cf); width:0%; z-index:999; transition:width .05s linear;}

/* ---------------- Nav ---------------- */
.exp-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw; transition:background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.exp-nav.scrolled{
  background:rgba(10,10,10,.75); backdrop-filter:blur(16px) saturate(160%);
  padding:14px 5vw; border-bottom:1px solid rgba(255,255,255,.08);
}
.exp-nav img{height:34px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
.exp-nav .exp-cta-btn{
  background:var(--gold); color:#111; font-weight:700; font-size:.85rem;
  padding:.65rem 1.4rem; border-radius:100px; text-decoration:none;
  box-shadow:0 8px 22px -4px rgba(255,195,0,.5); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.exp-nav .exp-cta-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px -4px rgba(255,195,0,.6);}

/* ---------------- Hero: 3D parallax ---------------- */
.exp-hero{
  position:relative; height:100vh; min-height:640px;
  overflow:hidden; perspective:1200px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1400px 900px at 50% 20%, #1c1c1c, var(--dark) 65%);
}
.exp-layer{position:absolute; inset:0; will-change:transform; transform-style:preserve-3d;}
.exp-layer-glow{
  background:
    radial-gradient(560px 460px at 15% 20%, rgba(255,195,0,.20), transparent 60%),
    radial-gradient(520px 420px at 85% 75%, rgba(255,195,0,.14), transparent 60%);
}
.exp-layer-grid{
  opacity:.35;
  background-image:
    linear-gradient(rgba(255,195,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,195,0,.08) 1px, transparent 1px);
  background-size:60px 60px;
  transform:perspective(700px) rotateX(60deg) translateY(10%) scale(1.6);
  transform-origin:center bottom;
  bottom:-10%; top:auto; height:70%;
  mask-image:linear-gradient(to top, rgba(0,0,0,1), transparent 85%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1), transparent 85%);
}
.exp-layer-city{
  background:url('../images/hero-bg-taxi.jpg') center 25%/cover no-repeat;
  opacity:.5; filter:saturate(1.1) brightness(.85);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 75%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 75%, transparent 100%);
}
.exp-layer-noise{
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
}

.exp-hero-content{
  position:relative; z-index:3; text-align:center; padding:0 20px;
  transform-style:preserve-3d;
}
.exp-hero-title{
  font-size:clamp(2.6rem, 8vw, 6.4rem); line-height:.98; color:#fff;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.22em;
}
.exp-hero-title .exp-word{display:inline-flex; color:inherit;}
.exp-hero-title .exp-word.exp-gold{color:var(--gold);}
.exp-hero-title .exp-char{
  display:inline-block; opacity:0; transform:translateY(60px) rotateX(-40deg); color:inherit;
  animation:expCharIn .9s var(--ease) forwards;
}
@keyframes expCharIn{ to{opacity:1; transform:translateY(0) rotateX(0);} }

.exp-hero-tagline{
  margin-top:22px; font-size:clamp(1rem,2vw,1.3rem); color:#ccc; font-weight:400;
  opacity:0; animation:expFadeUp .9s var(--ease) 1.1s forwards;
}
.exp-hero-ctas{
  margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:expFadeUp .9s var(--ease) 1.3s forwards;
}
@keyframes expFadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }

.exp-btn-primary{
  background:var(--gold); color:#111; font-weight:700; padding:.95rem 2.2rem; border-radius:100px;
  text-decoration:none; box-shadow:0 14px 34px -8px rgba(255,195,0,.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.exp-btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 18px 40px -8px rgba(255,195,0,.65); color:#111;}
.exp-btn-ghost{
  border:1.5px solid rgba(255,255,255,.35); color:#fff; padding:.95rem 2.2rem; border-radius:100px;
  text-decoration:none; transition:.3s var(--ease); backdrop-filter:blur(6px);
}
.exp-btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px);}

.exp-scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#aaa; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; animation:expFadeUp .9s var(--ease) 1.6s forwards;
}
.exp-scroll-cue .exp-mouse{
  width:24px; height:38px; border:2px solid rgba(255,255,255,.4); border-radius:14px; position:relative;
}
.exp-scroll-cue .exp-mouse::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--gold);
  border-radius:2px; transform:translateX(-50%); animation:expScrollDot 1.6s ease-in-out infinite;
}
@keyframes expScrollDot{ 0%{opacity:1; top:6px;} 70%{opacity:0; top:20px;} 100%{opacity:0; top:6px;} }

.exp-car-wrap{
  position:absolute; z-index:2; left:50%; bottom:6%;
  width:min(640px, 70vw); transform:translate3d(-50%,0,0);
  will-change:transform;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
.exp-car-wrap img{width:100%; display:block;}

/* ---------------- Section shell ---------------- */
.exp-section{position:relative; z-index:2; background:var(--dark);}
.exp-section-inner{max-width:1200px; margin:0 auto; padding:0 5vw;}
.exp-section-head{text-align:center; max-width:640px; margin:0 auto 60px;}
.exp-section-head h2{font-size:clamp(2rem,4.4vw,3.2rem); color:#fff;}
.exp-section-head p{color:#999; margin-top:14px; font-size:1.05rem;}

/* ---------------- Why choose us: pinned fly-in cards ---------------- */
.exp-pin-outer{position:relative; height:320vh;}
.exp-pin-sticky{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; perspective:1400px;
}
.exp-pin-sticky .exp-section-head{margin-bottom:50px;}
.exp-fly-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; width:100%; max-width:1200px; padding:0 5vw;
  transform-style:preserve-3d;
}
.exp-fly-card{
  background:linear-gradient(160deg, #1a1a1a, #0f0f0f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:30px 22px; text-align:center;
  will-change:transform, opacity;
  transform-style:preserve-3d;
}
.exp-fly-card .exp-ic{
  width:56px; height:56px; border-radius:16px; margin:0 auto 18px;
  background:linear-gradient(145deg, var(--gold), var(--gold-dark));
  display:flex; align-items:center; justify-content:center; color:#111; font-size:1.4rem;
}
.exp-fly-card h4{font-size:1.05rem; color:#fff; margin-bottom:8px;}
.exp-fly-card p{color:#999; font-size:.85rem; margin:0; line-height:1.5;}
@media (max-width:900px){ .exp-fly-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .exp-fly-grid{grid-template-columns:1fr;} }

/* ---------------- Fleet: 3D coverflow ---------------- */
.exp-coverflow-outer{position:relative; height:280vh; background:var(--dark-2);}
.exp-coverflow-sticky{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; perspective:1600px;
}
.exp-coverflow-stage{
  position:relative; width:100%; max-width:1100px; height:420px;
  transform-style:preserve-3d;
}
.exp-cf-card{
  position:absolute; top:0; left:50%; width:300px; height:420px; margin-left:-150px;
  border-radius:22px; overflow:hidden; background:#161616; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -12px rgba(0,0,0,.6);
  will-change:transform, opacity;
  transform-style:preserve-3d;
  display:flex; flex-direction:column;
}
.exp-cf-card img{width:100%; height:230px; object-fit:cover; display:block;}
.exp-cf-card .exp-cf-body{padding:20px; text-align:center;}
.exp-cf-card h4{color:#fff; font-size:1.1rem; margin-bottom:6px;}
.exp-cf-card .exp-cf-price{color:var(--gold); font-weight:700;}

/* ---------------- Stats: 3D flip ---------------- */
.exp-stats{padding:140px 0; background:var(--dark);}
.exp-stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center;}
.exp-stat-box{perspective:600px;}
.exp-stat-num{
  font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem); color:var(--gold);
  transform:rotateX(-90deg); opacity:0; transition:transform .8s var(--ease), opacity .8s var(--ease);
  transform-origin:center bottom;
}
.exp-stat-box.in-view .exp-stat-num{transform:rotateX(0deg); opacity:1;}
.exp-stat-label{color:#999; font-size:.85rem; margin-top:10px; text-transform:uppercase; letter-spacing:.12em;}
@media (max-width:768px){ .exp-stats-grid{grid-template-columns:repeat(2,1fr); row-gap:50px;} }

/* ---------------- Final CTA ---------------- */
.exp-final{
  position:relative; padding:160px 0 140px; overflow:hidden;
  background:radial-gradient(1200px 700px at 50% 100%, #1c1c1c, var(--dark) 60%);
  text-align:center;
}
.exp-final::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(520px 420px at 20% 30%, rgba(255,195,0,.15), transparent 60%),
             radial-gradient(480px 400px at 80% 70%, rgba(255,195,0,.12), transparent 60%);
  animation:expGlowDrift 12s ease-in-out infinite alternate;
}
@keyframes expGlowDrift{ from{transform:translate(0,0);} to{transform:translate(-3%,3%);} }
.exp-final h2{font-size:clamp(2.2rem,5vw,4rem); color:#fff; position:relative;}
.exp-final p{color:#aaa; margin:18px 0 40px; position:relative; font-size:1.1rem;}
.exp-final .exp-cta-row{position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.exp-footer-note{text-align:center; padding:30px 20px 40px; color:#666; font-size:.82rem; background:var(--dark);}
.exp-footer-note a{color:var(--gold); text-decoration:none;}

@media (prefers-reduced-motion: reduce){
  .exp-hero-title .exp-char, .exp-hero-tagline, .exp-hero-ctas, .exp-scroll-cue{animation:none !important; opacity:1 !important; transform:none !important;}
  .exp-final::before{animation:none;}
}