/* ============================================
   MORYA AUTOMOBILES — Bike Animation
   ============================================ */

.bike-scene {
  width: 100%;
  height: 230px;
  position: relative;
  overflow: hidden;
  background: transparent;
  margin: 32px 0 0 0;
}

/* ── OWNER DETAILS BADGE ── */
.owner-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  outline: none;
}
.owner-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #f9c400;
  background: #1a1a1a;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.owner-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.owner-initials {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #f9c400;
  background: #1a1a1a;
}
.owner-badge:hover .owner-circle,
.owner-badge:focus .owner-circle {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(249,196,0,0.45);
}

/* Name tag: a small dark card, hidden by default, revealed on hover/focus */
.owner-name-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(20,20,20,0.92);
  border: 1px solid rgba(249,196,0,0.3);
  border-radius: 10px;
  padding: 8px 0;
  transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.owner-badge:hover .owner-name-tag,
.owner-badge:focus .owner-name-tag,
.owner-badge:focus-within .owner-name-tag {
  max-width: 190px;
  opacity: 1;
  padding: 8px 14px;
}
.owner-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.owner-role {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  color: #f9c400;
  margin-top: 1px;
}
.owner-phone {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: #ccc;
  text-decoration: none;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.owner-phone:hover { color: #f9c400; }

/* Touch devices: no hover, so always show the name card below the circle */
@media (hover: none) {
  .owner-badge {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    top: 12px;
    right: 12px;
  }
  .owner-name-tag,
  .owner-badge:focus-within .owner-name-tag {
    max-width: none;
    opacity: 1;
    overflow: visible;
    white-space: normal;
    align-items: center;
    text-align: center;
    padding: 6px 10px;
  }
  .owner-circle {
    width: 48px;
    height: 48px;
  }
}

/* Road */
.road {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 56px;
  background: #2d2d2d;
}
.road-line {
  position: absolute;
  bottom: 22px; left: 0;
  width: 100%; height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #f9c400 0px, #f9c400 60px,
    transparent 60px, transparent 110px
  );
  animation: road-scroll 0.85s linear infinite;
}
@keyframes road-scroll {
  from { background-position: 0 0; }
  to   { background-position: -170px 0; }
}
.road-edge {
  position: absolute;
  bottom: 56px; left: 0;
  width: 100%; height: 3px;
  background: #777;
}

/* ── BIKE WRAPPER ── */
.bike-wrapper {
  position: absolute;
  bottom: 56px;          /* sits on top of road */
  left: -300px;          /* starts off-screen left */
  width: 240px;
  height: 150px;
  z-index: 5;
  overflow: visible;
  animation: bike-ride 10s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ── BIKE IMAGE ── */
.bike-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;

  /* WHITE BACKGROUND FIX:
     If your bike photo has a white background (not transparent),
     uncomment the line below — it makes white invisible: */
  /* mix-blend-mode: multiply; */

  /* WRONG DIRECTION FIX:
     If your bike faces RIGHT instead of LEFT, uncomment this: */
  /* transform: scaleX(-1); */
}

/* ── RIDE ANIMATION ── */
@keyframes bike-ride {
  0%   { left: -300px; }
  60%  { left: calc(100% - 310px); }
  72%  { left: calc(100% - 280px); }
  85%  { left: calc(100% - 300px); }
  100% { left: calc(100% - 300px); }
}

.bike-wrapper.stopped {
  animation:
    bike-ride 10s cubic-bezier(0.25,0.46,0.45,0.94) forwards,
    bike-wobble 0.45s ease-out 10s forwards;
}
@keyframes bike-wobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2deg); }
  55%  { transform: rotate(-1.5deg); }
  80%  { transform: rotate(0.8deg); }
  100% { transform: rotate(0deg); }
}

/* Shop Sign */
.shop-sign {
  position: absolute;
  right: 55px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
}
.shop-sign.visible {
  animation: sign-rise 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes sign-rise {
  to { opacity: 1; transform: scaleY(1); }
}
.sign-pole {
  width: 5px; height: 72px;
  background: linear-gradient(180deg, #888 0%, #555 100%);
  border-radius: 3px;
}
.sign-board {
  background: var(--red, #D32F2F);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 11px;
  padding: 7px 14px;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.35;
  border: 3px solid #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.25);
  position: relative;
}
.sign-board::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--red, #D32F2F);
}
.sign-glow {
  position: absolute;
  bottom: 56px; right: 45px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,47,47,0.18) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.sign-glow.active { opacity: 1; }

/* Tagline */
.bike-tagline {
  position: absolute;
  top: 10px; right: 55px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--red, #D32F2F);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s, transform 0.5s;
  background: rgba(255,255,255,0.92);
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--red, #D32F2F);
  white-space: nowrap;
  z-index: 12;
}
.bike-tagline.visible { opacity: 1; transform: translateY(0); }

/* Exhaust */
.exhaust {
  position: absolute;
  bottom: 80px;
  left: -310px;
  z-index: 4;
  display: flex;
  gap: 4px;
  animation: exhaust-ride 10s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes exhaust-ride {
  0%   { left: -340px; opacity: 1; }
  60%  { left: calc(100% - 360px); opacity: 1; }
  85%  { left: calc(100% - 330px); opacity: 0; }
  100% { left: calc(100% - 330px); opacity: 0; }
}
.puff {
  width: 13px; height: 13px;
  background: rgba(160,160,160,0.5);
  border-radius: 50%;
  animation: puff-anim 0.5s ease-out infinite alternate;
}
.puff:nth-child(2) { width: 9px; height: 9px; animation-delay: 0.15s; }
.puff:nth-child(3) { width: 6px; height: 6px; animation-delay: 0.3s; }
@keyframes puff-anim {
  from { transform: translateY(0) scale(1); opacity: 0.7; }
  to   { transform: translateY(-12px) scale(1.4); opacity: 0; }
}

/* Speed lines */
.speed-lines {
  position: absolute;
  bottom: 115px;
  left: -300px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 3;
  animation: exhaust-ride 10s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.speed-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(211,47,47,0.4));
  border-radius: 2px;
  animation: speed-flash 0.15s linear infinite alternate;
}
.speed-line:nth-child(1) { width: 55px; }
.speed-line:nth-child(2) { width: 38px; margin-left: 10px; }
.speed-line:nth-child(3) { width: 22px; margin-left: 20px; }
@keyframes speed-flash { from { opacity: 1; } to { opacity: 0.3; } }

/* Dust */
.dust {
  position: absolute;
  bottom: 58px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(150,120,80,0.5);
  pointer-events: none;
  animation: dust-fly 0.8s ease-out forwards;
}
@keyframes dust-fly {
  from { transform: translate(0,0) scale(1); opacity: 0.7; }
  to   { transform: translate(-42px,-18px) scale(0); opacity: 0; }
}

/* Sparks */
.spark {
  position: absolute;
  bottom: 62px;
  pointer-events: none;
  font-size: 18px;
  animation: spark-pop 0.6s ease-out forwards;
  z-index: 15;
}
@keyframes spark-pop {
  0%   { transform: translate(0,0) scale(0); opacity: 1; }
  60%  { transform: translate(var(--tx), var(--ty)) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--tx), calc(var(--ty) - 10px)) scale(0.8); opacity: 0; }
}

/* Replay button */
.replay-btn {
  position: absolute;
  bottom: 68px; left: 50%;
  transform: translateX(-50%);
  background: var(--red, #D32F2F);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 6px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: none;
  gap: 6px;
  align-items: center;
  box-shadow: 0 2px 10px rgba(211,47,47,0.3);
  transition: background 0.2s, transform 0.1s;
  z-index: 20;
}
.replay-btn:hover { background: #E64A19; transform: translateX(-50%) scale(1.04); }
.replay-btn.show { display: inline-flex; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .bike-scene  { height: 185px; }
  .bike-wrapper { width: 190px; height: 118px; }
  .sign-pole   { height: 52px; }
  .sign-board  { font-size: 9px; padding: 5px 10px; }
  .shop-sign   { right: 26px; }
  .sign-glow   { right: 18px; }
  .bike-tagline { font-size: 11px; right: 24px; }
}
@media (max-width: 480px) {
  .bike-scene  { height: 160px; }
  .bike-wrapper { width: 160px; height: 100px; }
  .sign-board  { font-size: 8px; }
}