/* ============================================================
   PAHADI DRIVER — motion, ambient & fix layer (additive)
   Loaded AFTER style.css. Enhances existing classes; no markup needed.
   Includes: header-logo badge fix, mobile hero composition,
   hover micro-interactions, cursor glow, ripple, tilt, magnetic,
   Google-Translate toggle UI, PWA install banner, reduced-motion.
   ============================================================ */

/* ---- FIX: header logo must render as a neat badge (never a giant slab) ---- */
header .logo{display:inline-flex;align-items:center}
header .logo-chip{display:inline-flex;align-items:center;background:#05080f;border-radius:12px;padding:6px 10px;overflow:hidden;box-shadow:var(--sh-sm)}
header .logo-chip img{height:40px;width:auto;max-width:240px;display:block}
header.scrolled .logo-chip img{height:34px}
header .logo > img{height:40px;width:auto;max-width:240px;display:block;border-radius:10px;background:#05080f;padding:4px 8px}
header.scrolled .logo > img{height:34px}

/* ---- cursor glow (desktop only) ---- */
.fx-cursor{position:fixed;top:0;left:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(30,111,255,.12),rgba(30,111,255,0) 62%);opacity:0;transition:opacity .35s;will-change:transform}
.fx-cursor.on{opacity:1}
@media (pointer:coarse){.fx-cursor{display:none}}

/* ---- button ripple + shine ---- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none}
.btn:hover::after{left:140%}
.fx-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.5);animation:fxrip .6s ease-out;pointer-events:none}
.btn-out .fx-ripple,.btn-line .fx-ripple,.btn-ghost .fx-ripple{background:rgba(30,111,255,.16)}
@keyframes fxrip{to{transform:scale(2.8);opacity:0}}

/* ---- scroll reveal: blur accent only (opacity handled by style.css + .in) ---- */
[data-anim]{transition:opacity .8s ease,transform .8s cubic-bezier(.16,.84,.3,1),filter .8s ease}
[data-anim]:not(.in){filter:blur(6px)}
.in[data-anim]{filter:blur(0)}
.svc[data-anim],.pkg[data-anim],.fcard[data-anim]{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.25,1.25),filter .7s ease,box-shadow .3s ease}

/* ---- hover micro-interactions ---- */
.svc,.pkg,.fcard{position:relative;will-change:transform}
.svc:hover,.pkg:hover,.fcard:hover{transform:translateY(-8px) scale(1.012)}
.svc::before,.pkg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(120% 80% at 50% -10%,rgba(30,111,255,.10),transparent 60%)}
.svc:hover::before,.pkg:hover::before{opacity:1}
.chip-city{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s,box-shadow .25s;will-change:transform}
.chip-city:hover{box-shadow:0 10px 24px -12px rgba(30,111,255,.5)}

/* ---- ambient drift on dark bands + subtle grain ---- */
.final,.join{background-size:170% 170%;animation:fxdrift 20s ease-in-out infinite alternate}
@keyframes fxdrift{from{background-position:0% 50%}to{background-position:100% 50%}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:95;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Google Translate: keep site English by default, hide GT chrome ---- */
#google_translate_element{position:absolute!important;left:-9999px!important;top:-9999px!important}
.goog-te-banner-frame{display:none!important}
body{top:0!important}
.gt-wrap{position:relative}
.gt-btn{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:.25s}
.gt-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.gt-btn svg{width:18px;height:18px}
.gt-menu{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:6px;display:none;flex-direction:column;min-width:150px;z-index:160}
.gt-menu.open{display:flex}
.gt-menu button{text-align:left;padding:10px 12px;border-radius:9px;font-weight:700;font-size:14px;color:var(--ink)}
.gt-menu button:hover{background:var(--soft);color:var(--blue)}
.gt-menu button.on{background:var(--blue-l);color:var(--blue-d)}

/* ---- PWA install banner ---- */
.pwa-banner{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(22px);width:min(430px,92%);background:#0D1E3E;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 26px 64px -22px rgba(0,0,0,.65);display:flex;align-items:center;gap:12px;padding:14px 16px;z-index:155;opacity:0;visibility:hidden;transition:.35s cubic-bezier(.2,.8,.2,1)}
.pwa-banner.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pwa-banner__ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#4D8DFF,#0A47C2);display:grid;place-items:center;flex:none}
.pwa-banner__ic svg{width:24px;height:24px}
.pwa-banner__t{flex:1;min-width:0}
.pwa-banner__t b{display:block;font-size:14px}
.pwa-banner__t span{font-size:12px;color:#9FB0CC}
.pwa-banner__btn{background:linear-gradient(135deg,#4D8DFF,#0A47C2);color:#fff;font-weight:800;font-size:13px;padding:9px 16px;border-radius:10px;white-space:nowrap}
.pwa-banner__x{color:#9FB0CC;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.pwa-banner__x:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---- MOBILE hero composition (fixes floating/awkward fare card + coin) ---- */
@media (max-width:760px){
  header .logo-chip img,header .logo > img{height:34px}
  header.scrolled .logo-chip img,header.scrolled .logo > img{height:30px}
  .hero{padding-bottom:118px}
  .hero .wrap{gap:18px}
  .hero h1{font-size:clamp(33px,9.5vw,50px)}
  .h-ctas{gap:10px}
  .h-ctas .btn{flex:1 1 auto}
  .h-vis{min-height:0;margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .offer-card{position:static;width:100%;max-width:420px;animation:none}
  .coin{position:static;width:92px;height:92px;animation:none;order:-1}
  .mini-stat{position:static;animation:none;width:100%;max-width:420px;justify-content:center}
  .pwa-banner{bottom:84px}
}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .fx-cursor{display:none}
  [data-anim]{filter:none!important}
}