/* ================================================================
   ObiWhere — efekty WOW (intro, scroll, micro-interactions)
   ================================================================ */

/* ---------- INTRO: podróż busa ---------- */
#intro {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(1200px 500px at 50% 120%, rgba(184,147,63,.10), transparent 60%),
    linear-gradient(160deg, #0f1830 0%, #16233f 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  transition: opacity .6s ease, visibility .6s ease;
  contain: layout style;
}
#intro.done { opacity: 0; visibility: hidden; pointer-events: none; }

/* gwiazdy / drobinki tła */
#intro::before {
  content: ''; position: absolute; inset: 0; opacity: .25;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, #d4b45f 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 14%, #ffffff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 84% 38%, #d4b45f 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 8%,  #ffffff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 55% 28%, #d4b45f 50%, transparent 51%);
  animation: introTwinkle 3s ease-in-out infinite alternate;
}
@keyframes introTwinkle { from { opacity:.15 } to { opacity:.35 } }

.intro-stage { position: relative; width: 680px; }
@media (max-width: 760px) { .intro-stage { transform: scale(.72); } }
@media (max-width: 470px) { .intro-stage { transform: scale(.5); } }

/* wzgórza na horyzoncie */
.intro-hills {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 200px; pointer-events: none;
}

/* droga: poświata + kreskowana linia */
.intro-road { width: 100%; height: 110px; display: block; position: relative; z-index: 2; }
.intro-road .road-glow {
  stroke: rgba(212,180,95,.30); stroke-width: 10; fill: none;
  stroke-linecap: round; filter: blur(4px); opacity: 0; transition: opacity .5s;
}
#intro.play .intro-road .road-glow { opacity: 1; }
.intro-road .road-line {
  stroke: rgba(212,180,95,.9); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-dasharray: 14 16;
  animation: roadFlow 1.2s linear infinite;
  opacity: 0;
}
#intro.play .intro-road .road-line { opacity: 1; }
@keyframes roadFlow { to { stroke-dashoffset: -30; } }

/* ---- BUS podąża krzywą drogi (offset-path, auto-pochylanie) ---- */
.bus-follow {
  position: absolute; top: 0; left: 0;
  width: 330px; height: 1px; z-index: 3;
  offset-path: path('M-160 88 L0 78 C 170 58, 300 96, 460 74 S 640 60, 680 70');
  offset-rotate: 0deg;
  offset-distance: 0%;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.35));
  will-change: offset-distance;
  contain: layout style;
}
#intro.play .bus-follow { animation: busFollow 2.35s cubic-bezier(.5,.05,.3,1) forwards; }
@keyframes busFollow { from { offset-distance: 0%; } to { offset-distance: 73.5%; } }

.intro-bus { width: 150px; height: auto; display: block; transform: translateY(-70px); }
#intro.play .intro-bus { animation: busBob .4s ease-in-out infinite alternate; }
@keyframes busBob { from { transform: translateY(-70px); } to { transform: translateY(-72px); } }

/* fallback dla przeglądarek bez offset-path */
@supports not (offset-path: path('M0 0 L1 1')) {
  .bus-follow { top: 8px; transform: translateX(-160px); }
  #intro.play .bus-follow { animation: busDriveX 2.35s cubic-bezier(.5,.05,.3,1) forwards; }
  @keyframes busDriveX { to { transform: translateX(293px); } }
}

/* ---- FOTO-BUS: prawdziwy Ford Transit ---- */
.intro-bus-img {
  position: absolute; left: 50%; bottom: -24px;
  width: 330px; height: auto;
  transform: translateX(-50%);
  user-select: none; -webkit-user-drag: none;
}
#intro.play .intro-bus-img { animation: busBob .38s ease-in-out infinite alternate; }
@keyframes busBob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-2.5px); }
}

/* cień pod busem */
.bus-shadow {
  position: absolute; left: 50%; bottom: -34px;
  width: 290px; height: 30px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 68%);
  filter: blur(7px);
}
#intro.play .bus-shadow { animation: shadowBob .38s ease-in-out infinite alternate; }
@keyframes shadowBob {
  from { transform: translateX(-50%) scaleX(1); opacity: 1; }
  to   { transform: translateX(-50%) scaleX(.96); opacity: .85; }
}

/* poświata reflektorów (przód po prawej) */
.bus-glow {
  position: absolute; right: -160px; bottom: 10px;
  width: 190px; height: 56px;
  background: radial-gradient(ellipse at left center, rgba(255,238,180,.55), rgba(255,238,180,.12) 55%, transparent 75%);
  filter: blur(5px); opacity: 0;
}
#intro.play .bus-glow { animation: glowPulse 1s ease-in-out .3s infinite alternate; }
@keyframes glowPulse { from { opacity: .35 } to { opacity: .85 } }

/* smugi prędkości za busem */
.bus-trail {
  position: absolute; right: calc(50% + 130px); bottom: 14px;
  width: 190px; height: 96px; opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(212,180,95,.85)) 0 10px / 165px 3.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.45)) 20px 46px / 125px 2.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(212,180,95,.6)) 8px 82px / 150px 3px no-repeat;
}
#intro.play .bus-trail { animation: trailShow 2.35s ease forwards; }
@keyframes trailShow {
  0%,10% { opacity: 0; transform: translateX(0); }
  30%    { opacity: 1; }
  75%    { opacity: .9; transform: translateX(-6px); }
  100%   { opacity: 0; transform: translateX(-14px); }
}

/* kłęby spalin (tył po lewej) */
.bus-exhaust { position: absolute; right: calc(50% + 150px); bottom: -12px; width: 20px; height: 20px; }
.bus-exhaust::before, .bus-exhaust::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 13px; height: 13px; border-radius: 999px;
  background: radial-gradient(circle, rgba(215,222,234,.75), rgba(215,222,234,0) 70%);
  opacity: 0;
}
#intro.play .bus-exhaust::before { animation: puff 1.05s ease-out .25s infinite; }
#intro.play .bus-exhaust::after  { animation: puff 1.05s ease-out .78s infinite; }
@keyframes puff {
  0%   { opacity: .55; transform: translate(0,0) scale(.55); }
  100% { opacity: 0;   transform: translate(-34px,-16px) scale(2.1); }
}


/* koła: felgi z 5 ramionami kręcą się */
.intro-bus .wheel { transform-box: fill-box; transform-origin: center; }
#intro.play .intro-bus .wheel { animation: wheelSpin .45s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }

/* reflektor: poświata pulsująca */
#intro.play .headlight-glow { animation: lightPulse 1s ease-in-out infinite alternate; }
@keyframes lightPulse { from { opacity: .12 } to { opacity: .65 } }

/* smugi prędkości: pojawiają się w trakcie jazdy, dash w ruchu */
.speed-lines { opacity: 0; }
#intro.play .speed-lines { animation: speedIn 2.35s ease forwards; }
@keyframes speedIn { 0%,12% { opacity: 0 } 28% { opacity: 1 } 78% { opacity: .85 } 100% { opacity: 0 } }
.speed-lines line { stroke-dasharray: 26 18; animation: dashMove .5s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -44; } }



/* ---- KONTYNUACJA TRASY: rusza dopiero gdy bus dojedzie ---- */
.intro-connector {
  position: absolute; top: 0; left: 0;
  width: 680px; height: 300px; z-index: 2;   /* pod busem, nad logo */
  pointer-events: none; overflow: visible;
}
.intro-connector .route-cont {
  stroke: rgba(212,180,95,.9); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-dasharray: 14 16;
  animation: roadFlow 1.2s linear infinite;
}
/* maska odsłania kreski od busa w stronę pinezki */
.intro-connector .cont-mask {
  fill: none; stroke: #fff; stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
#intro.play .cont-mask {
  animation: contReveal 1.9s cubic-bezier(.4,.15,.25,1) 2.35s forwards;
}
@keyframes contReveal { to { stroke-dashoffset: 0; } }

/* ---- LOGO pod trasą: widoczne od razu, meta na jego pinezce ---- */
.intro-logo-wrap {
  position: relative; z-index: 1;
  width: 340px; margin: 40px auto 0;
  opacity: 0; transform: translateY(14px);
}
#intro.play .intro-logo-wrap {
  animation:
    logoIn .8s cubic-bezier(.22,.61,.36,1) .35s forwards,
    logoLand .5s cubic-bezier(.34,1.56,.64,1) 4.25s;
}
@keyframes logoIn   { to { opacity: 1; transform: translateY(0); } }
@keyframes logoLand { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
.intro-logo {
  display: block; width: 100%; height: auto;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45));
}
/* pinezka logo w koordynatach wrapu (340×136): środek główki ≈ (287.6, 35.7) */
.logo-pin-ring {
  position: absolute; left: 261.6px; top: 9.7px;
  width: 52px; height: 52px; border-radius: 999px;
  border: 2px solid rgba(227,1,14,.75); opacity: 0;
}
#intro.play .logo-pin-ring  { animation: pinRing 1s ease-out 4.35s forwards; }
.logo-pin-ring::after {
  content: ''; position: absolute; inset: -2px; border-radius: 999px;
  border: 2px solid rgba(212,180,95,.6);
}
.logo-pin-flash {
  position: absolute; left: 279.6px; top: 27.7px;
  width: 16px; height: 16px; border-radius: 999px;
  background: radial-gradient(circle, #fff, rgba(227,1,14,.9) 55%, transparent 75%);
  opacity: 0;
}
#intro.play .logo-pin-flash { animation: pinFlash .55s ease-out 4.28s forwards; }
@keyframes pinFlash {
  0%   { opacity: 0;  transform: scale(.4); }
  35%  { opacity: 1;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(2.4); }
}
@keyframes pinRing {
  0%   { opacity: .85; transform: scale(.4); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* podpis pod logo */
.intro-brand {
  margin-top: 20px; text-align: center;
  opacity: 0; transform: translateY(12px);
}
#intro.play .intro-brand { animation: brandUp .7s cubic-bezier(.22,.61,.36,1) 4.4s forwards; }
@keyframes brandUp { to { opacity: 1; transform: translateY(0); } }
.intro-brand .ib-sub {
  font-family: 'DM Sans', sans-serif; font-size: .8rem; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .6rem;
}
.intro-skip {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: 'DM Sans', sans-serif; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
}

/* kurtyny odsłaniające stronę (jak drzwi busa) */
.intro-curtain {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background: linear-gradient(160deg, #0f1830, #16233f);
  z-index: -1;
}
#intro .curtain-l { left: 0; }
#intro .curtain-r { right: 0; }
#intro.exit { background: transparent; }
#intro.exit::before { display: none; }
#intro.exit .intro-stage, #intro.exit .intro-skip { opacity: 0; transition: opacity .3s; }
#intro.exit .curtain-l { animation: curtainL .8s cubic-bezier(.7,0,.3,1) forwards; }
#intro.exit .curtain-r { animation: curtainR .8s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes curtainL { to { transform: translateX(-101%); } }
@keyframes curtainR { to { transform: translateX(101%); } }

/* blokada scrolla podczas intro */
body.intro-lock { overflow: hidden; }

/* ---------- PASEK POSTĘPU SCROLLA ---------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #96742c, #d4b45f, #b8933f);
  z-index: 9998; transition: width .08s linear;
  box-shadow: 0 0 8px rgba(212,180,95,.5);
}

/* ---------- HERO: powolny zoom (Ken Burns) ---------- */
.hero-img { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero { overflow: hidden; }

/* wejście treści hero po intro */
.hero-in > * { opacity: 0; transform: translateY(26px); }
.hero-in.go > * {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.hero-in.go > *:nth-child(1) { transition-delay: .05s }
.hero-in.go > *:nth-child(2) { transition-delay: .15s }
.hero-in.go > *:nth-child(3) { transition-delay: .25s }
.hero-in.go > *:nth-child(4) { transition-delay: .35s }
.hero-in.go > *:nth-child(5) { transition-delay: .45s }
.hero-in.go > *:nth-child(6) { transition-delay: .55s }

/* ---------- MARQUEE usług ---------- */
.marquee {
  background: linear-gradient(90deg, #96742c, #b8933f 30%, #d4b45f 50%, #b8933f 70%, #96742c);
  overflow: hidden; padding: .8rem 0; position: relative;
}
.marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marqueeMove 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .85rem;
  letter-spacing: .22em; text-transform: uppercase; color: #16233f;
  display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap;
}
.marquee-item::after { content: '◆'; font-size: .6rem; opacity: .55; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ---------- LICZNIKI ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- BACK TO TOP ---------- */
#to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  width: 46px; height: 46px; border-radius: 999px;
  background: linear-gradient(135deg, #d4b45f, #b8933f); color: #16233f;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(184,147,63,.4);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s, visibility .3s, transform .3s, box-shadow .2s;
  cursor: pointer; border: none;
}
#to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#to-top:hover { box-shadow: 0 14px 34px rgba(184,147,63,.55); transform: translateY(-2px); }

/* ---------- FLOATING CONTACT: WhatsApp + Facebook ---------- */
.float-contact {
  position: fixed; right: 22px; z-index: 9000;
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .2s, box-shadow .2s;
}
.float-contact:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(0,0,0,.36); }
.float-whatsapp { bottom: 86px; background: #25D366; }
.float-facebook { bottom: 150px; background: #1877F2; }
@media (max-width:640px){
  .float-whatsapp { bottom: 78px; width:48px; height:48px; }
  .float-facebook { bottom: 134px; width:48px; height:48px; }
  #to-top { right:16px; }
  .float-contact { right:16px; }
}

/* ---------- drobne mikro-interakcje ---------- */
.svc-card { transition: box-shadow .35s ease, transform .3s ease; }
.svc-card:hover { box-shadow: 0 26px 60px rgba(22,35,63,.18); }
.price-badge { position: relative; overflow: hidden; }
.price-badge::after {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer { 0%,60% { left: -80%; } 100% { left: 130%; } }

/* ---------- reduced motion: wyłącz wszystko ---------- */
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  body.intro-lock { overflow: auto; }
  .hero-img { animation: none; }
  .hero-in > * { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
  .price-badge::after { animation: none; }
  #scroll-progress { transition: none; }
}