/* How It Works page — 3D styling. Builds on home-3d.css (tilt cards,
   .services-3d cards, wheel keyframes, scroll reveal). */

/* Only the truck icon is used on this page */
.hiw-vehicle svg,
.journey-truck svg { display: none; overflow: visible; }
.hiw-vehicle svg[data-vehicle="dealer"],
.journey-truck svg[data-vehicle="dealer"] { display: block; width: 100%; height: auto; }
.hiw-vehicle .wheel,
.journey-truck .wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroWheel 0.45s linear infinite;
}
.hiw-vehicle .vbody,
.journey-truck .vbody { animation: heroBounce 0.32s ease-in-out infinite alternate; }

/* ---------- Header with extruded title and a truck driving across ---------- */
.hiw-header {
  position: relative;
  overflow: hidden;
  padding-bottom: 110px;
  background:
    radial-gradient(ellipse at 50% -40%, rgba(47, 92, 134, 0.6), transparent 70%),
    var(--color-primary-dark);
}
.hiw-header h1 {
  text-shadow:
    0 1px 0 #d9e1ea, 0 2px 0 #c9d3de, 0 3px 0 #b8c4d2, 0 4px 0 #a7b5c5,
    0 5px 0 #96a6b8, 0 6px 0 #f06203, 0 7px 0 #cf5202,
    0 14px 22px rgba(0, 0, 0, 0.5);
}
.hiw-drive {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86px;
  pointer-events: none;
}
.hiw-drive::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 6px;
  height: 46px;
  transform: perspective(500px) rotateX(58deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 30px, transparent 30px 64px) 0 50% / 64px 3px repeat-x,
    linear-gradient(180deg, #24364a, #0f1a26);
  box-shadow: inset 0 3px 0 rgba(240, 98, 3, 0.8), inset 0 -3px 0 rgba(240, 98, 3, 0.8);
}
.hiw-vehicle {
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 110px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
  animation: hiwDrive 11s linear infinite;
}
@keyframes hiwDrive {
  from { transform: translateX(-140px); }
  to { transform: translateX(calc(100vw + 20px)); }
}

/* ---------- 5 steps as a journey with a truck on a 3D road ---------- */
.journey-3d {
  position: relative;
  padding-bottom: 110px;
}
.journey-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
}
.journey-road::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 52px;
  border-radius: 8px;
  transform: perspective(600px) rotateX(55deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 28px, transparent 28px 60px) 0 50% / 60px 3px repeat-x,
    linear-gradient(180deg, #2a3a4b, #121c27);
  box-shadow: inset 0 3px 0 rgba(240, 98, 3, 0.8), inset 0 -3px 0 rgba(240, 98, 3, 0.8), 0 18px 30px rgba(2, 28, 51, 0.2);
}
.journey-truck {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 120px;
  translate: calc(var(--p, 0) * (var(--road, 600px) - 120px)) 0;
  transition: translate 120ms linear;
  filter: drop-shadow(0 8px 10px rgba(2, 28, 51, 0.35));
}

.journey-steps .step {
  border-color: #d5dce4;
  box-shadow:
    1px 1px 0 #dfe5ec, 2px 2px 0 #dfe5ec, 3px 3px 0 #d5dce4, 4px 4px 0 #d5dce4,
    5px 5px 0 #cbd2db, 6px 6px 0 #cbd2db, 7px 7px 0 #c2cad4, 8px 8px 0 #c2cad4,
    18px 22px 30px rgba(2, 28, 51, 0.12);
  transition: transform 450ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms ease, border-color 300ms ease;
}
.journey-steps .step-number {
  background: radial-gradient(circle at 32% 28%, #4f7fae, var(--color-navy-mid) 55%, var(--color-navy));
  box-shadow: 0 4px 0 #0a2540, 0 8px 14px rgba(2, 28, 51, 0.3);
  transition: background 300ms ease, box-shadow 300ms ease;
}
.journey-steps .step.is-done {
  transform: translateY(-10px);
  border-color: #f2bd96;
  box-shadow:
    1px 1px 0 #f8d7bf, 2px 2px 0 #f8d7bf, 3px 3px 0 #f2bd96, 4px 4px 0 #f2bd96,
    5px 5px 0 #e9a06b, 6px 6px 0 #e9a06b, 7px 7px 0 #cf5202, 8px 8px 0 #cf5202,
    22px 28px 34px rgba(240, 98, 3, 0.18);
}
.journey-steps .step.is-done .step-number {
  background: radial-gradient(circle at 32% 28%, #ff9a52, var(--color-orange) 55%, var(--color-orange-dark));
  box-shadow: 0 4px 0 #a84302, 0 8px 14px rgba(240, 98, 3, 0.35);
}

/* Narrower screens: steps stack, road runs down the left side */
@media (max-width: 1100px) {
  .journey-3d {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 0 96px;
  }
  .journey-3d .journey-steps { grid-template-columns: 1fr; }
  .journey-road { left: 0; right: auto; top: 0; bottom: 0; width: 72px; height: auto; }
  .journey-road::before {
    left: 10px;
    right: 10px;
    top: 0;
    bottom: 0;
    height: auto;
    transform: none;
    background:
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0 28px, transparent 28px 60px) 50% 0 / 3px 60px repeat-y,
      linear-gradient(90deg, #2a3a4b, #121c27);
    box-shadow: inset 3px 0 0 rgba(240, 98, 3, 0.8), inset -3px 0 0 rgba(240, 98, 3, 0.8), 8px 8px 0 #c2cad4;
  }
  .journey-truck {
    left: 50%;
    top: 0;
    bottom: auto;
    width: 96px;
    margin-left: -48px;
    rotate: 90deg;
    translate: 0 calc(var(--p, 0) * (var(--road, 600px) - 96px));
  }
  .journey-steps .step.is-done { transform: translateX(6px); }
}
@media (max-width: 640px) {
  .journey-3d { padding-left: 70px; }
  .journey-road { width: 54px; }
  .journey-truck { width: 80px; margin-left: -40px; }
  .hiw-vehicle { width: 86px; }
}

/* ---------- FAQ as raised 3D blocks ---------- */
.hiw-faq { background: linear-gradient(180deg, #ffffff, #f4f7fa); }
.hiw-faq .faq-item {
  background: #fff;
  border-color: #dfe5ec;
  margin-bottom: 18px;
  box-shadow: 2px 2px 0 #dfe5ec, 4px 4px 0 #d5dce4, 6px 6px 0 #c2cad4, 14px 18px 24px rgba(2, 28, 51, 0.08);
  transition: translate 300ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms ease, border-color 300ms ease;
}
.hiw-faq .faq-item:hover { translate: -2px -2px; }
.hiw-faq .faq-item[open] {
  translate: -3px -3px;
  border-color: #f2bd96;
  box-shadow: 2px 2px 0 #f8d7bf, 4px 4px 0 #f2bd96, 6px 6px 0 #e9a06b, 8px 8px 0 #cf5202, 18px 24px 30px rgba(240, 98, 3, 0.14);
}
.hiw-faq .faq-item summary { gap: 16px; }
.hiw-faq .faq-item summary::after {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-navy-soft);
  color: var(--color-navy);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 3px 0 #c3ced9;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.hiw-faq .faq-item[open] summary::after {
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 3px 0 #a84302;
}

/* ---------- "Ready to Get Started?" banner ---------- */
.hiw-cta {
  box-shadow:
    0 2px 0 #cf5202, 0 4px 0 #bd4b02, 0 6px 0 #ab4402, 0 8px 0 #993d01, 0 10px 0 #873601,
    0 28px 44px rgba(240, 98, 3, 0.3);
  background:
    radial-gradient(circle at 15% -30%, rgba(255, 255, 255, 0.3), transparent 50%),
    linear-gradient(120deg, var(--color-accent), var(--color-accent-dark));
}
.hiw-cta h2 { text-shadow: 0 2px 0 #a84302, 0 6px 12px rgba(0, 0, 0, 0.2); }
.hiw-cta .btn { transition: translate 120ms ease, box-shadow 120ms ease, background var(--transition-base); }
.hiw-cta .btn-primary { box-shadow: 0 5px 0 #061b31, 0 12px 20px rgba(0, 0, 0, 0.25); }
.hiw-cta .btn-outline-dark { background: #fff; box-shadow: 0 5px 0 #a84302, 0 12px 20px rgba(0, 0, 0, 0.18); }
.hiw-cta .btn:hover { translate: 0 -2px; }
.hiw-cta .btn:active { translate: 0 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }

@media (prefers-reduced-motion: reduce) {
  .hiw-vehicle { animation: none; transform: translateX(24px); }
  .hiw-vehicle .wheel, .hiw-vehicle .vbody,
  .journey-truck .wheel, .journey-truck .vbody { animation: none; }
  .journey-truck { transition: none; }
}

/* Shared vehicle gradients live in this svg; it must never be display:none
   (cine-hero.css hides every svg in the hero buttons by default). */
svg.vehicle-defs { display: block !important; position: absolute; width: 0; height: 0; overflow: hidden; }