/* ==========================================================================
   KHAJNI LOCAL PAGE — SCROLL "TRUCK" SERVICE SCENE
   --------------------------------------------------------------------------
   Restoration of the original truck experience for /website-developer-in-khajni.

   Loaded on that page ONLY, via $dw_extra_head. Every selector is scoped under
   the `dw-khajni-page` body class (set on that page alone), so nothing here can
   reach any other page even if the file is later bundled into the shared theme.
   No rule in Includes/redesign/theme.css was changed.

   The original design was already built on the Digrow palette -- its
   --orange (#ea5c1f) and --black (#090a0f) are this site's --dw-accent and
   --dw-bg -- so the values below are kept as authored and simply re-expressed
   through the theme tokens where they coincide.

   Layout contract (unchanged from the original):
     #dwTruck        outer element, owns the 620vh of scroll distance
       .dwtr-stage   the element that gets PINNED; stays 100vh
   The pin uses pinSpacing:false, so the stage's fixed height never changes the
   document height, and everything after the section keeps its normal position.

   Overflow: .dwtr-stage and #dwTruck are both overflow:hidden, so the truck
   starting off-screen left and leaving at 110% can never widen the document.
   No `body { overflow-x }` rule is introduced anywhere.
   ========================================================================== */

.dw-khajni-page #dwTruck {
  position: relative;
  height: 620vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(234, 92, 31, .09), transparent 34%),
    var(--dw-bg);
}

/* ---------- Pinned stage ---------- */
.dw-khajni-page .dwtr-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .025), transparent 40%);
}

.dw-khajni-page .dwtr-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity: .5;
}

/* ---------- Heading ---------- */
.dw-khajni-page .dwtr-heading {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.dw-khajni-page .dwtr-eyebrow {
  color: var(--dw-accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  margin-bottom: 15px;
}

.dw-khajni-page .dwtr-heading__title {
  font-family: var(--dw-display);
  font-size: clamp(42px, 6vw, 85px);
  line-height: .95;
  letter-spacing: -4px;
  font-weight: 700;
  margin: 0;
  color: var(--dw-text);
}

.dw-khajni-page .dwtr-heading__title span { color: var(--dw-accent); }

.dw-khajni-page .dwtr-heading p {
  color: var(--dw-muted);
  margin: 20px 0 0;
  font-size: 15px;
  max-width: 46ch;
  margin-inline: auto;
}

/* ---------- Service cards ---------- */
.dw-khajni-page .dwtr-cards {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(1160px, 92%);
  height: 230px;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

.dw-khajni-page .dwtr-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--dw-line-2);
  border-radius: 18px;
  background: rgba(18, 20, 28, .92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 80px, 0) scale(.82);
  will-change: transform, opacity;
}

.dw-khajni-page .dwtr-card__idx {
  color: var(--dw-accent);
  font-size: 10px;
  letter-spacing: 2px;
}

.dw-khajni-page .dwtr-card__icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dw-accent-soft);
  border: 1px solid rgba(234, 92, 31, .3);
  color: var(--dw-accent);
  font-size: 18px;
  margin-bottom: 15px;
}

.dw-khajni-page .dwtr-card__title {
  font-family: var(--dw-display);
  font-size: 17px;
  font-weight: 600;
  margin: 10px 0 7px;
  color: var(--dw-text);
}

.dw-khajni-page .dwtr-card p {
  color: var(--dw-muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Road ----------
   --dwtr-road-top is the single source of truth for the driving surface: the
   distance from the bottom of the stage to the top of the tarmac. The truck and
   its wheels are positioned from the same variable, so the wheels cannot drift
   off the road at any breakpoint. */
.dw-khajni-page .dwtr-stage {
  --dwtr-road-top: calc(21% - 90px);
  --dwtr-road-h: 22px;
}

.dw-khajni-page .dwtr-road {
  position: absolute;
  left: 0;
  bottom: calc(var(--dwtr-road-top) - var(--dwtr-road-h));
  width: 100%;
  height: var(--dwtr-road-h);
  overflow: hidden;
  background: linear-gradient(180deg, #1b1e26 0%, #121419 46%, #0a0c10 100%);
  border-top: 1px solid rgba(255, 255, 255, .17);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* The lane marking. Positioned with top/margin rather than a transform, so the
   transform is left entirely to the scrubbed xPercent the timeline drives. */
.dw-khajni-page .dwtr-roadline {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1px;
  width: 200%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    transparent 0 30px,
    rgba(234, 92, 31, .8) 30px 70px);
  will-change: transform;
}

/* ---------- Truck ---------- */
/* bottom is the road's driving surface, so the tyres land on the tarmac rather
   than floating above or sinking through it. */
.dw-khajni-page .dwtr-truck {
  position: absolute;
  width: 440px;
  height: 190px;
  left: 0;
  bottom: var(--dwtr-road-top);
  z-index: 20;
  transform-origin: center bottom;
  will-change: transform;
}

/* Contact shadow, cast onto the road under the vehicle. It is a pseudo-element
   of the truck, so it travels and scales with the truck automatically and can
   never lag behind it. */
.dw-khajni-page .dwtr-truck::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 1%;
  bottom: -7px;
  height: 20px;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 72%);
  filter: blur(5px);
  z-index: -1;
  pointer-events: none;
}

.dw-khajni-page .dwtr-truck__body {
  position: absolute;
  left: 0;
  bottom: 35px;
  width: 300px;
  height: 152px;
  border-radius: 12px 5px 5px 12px;
  background: linear-gradient(145deg, #262a35, #11131a);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 15px 50px rgba(0, 0, 0, .5);
}

.dw-khajni-page .dwtr-truck__body::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 100%;
  height: 5px;
  background: var(--dw-accent);
  box-shadow: 0 0 15px rgba(234, 92, 31, .6);
}

/* ---------- Service label printed on the trailer ----------
   Rendered server-side from the same $dw_services array that renders the cards,
   so it always shows a real service name. The timeline swaps its text at the
   moment each card is loaded (see khajni-truck.js), which is why there is no
   separate rotation here.

   Sized in truck-local units, so it is compensated per breakpoint for the
   --dwtr-scale applied to the whole vehicle: 17px on a 300px-wide body becomes
   ~9.5px of real text once the truck is scaled to .56 on a phone. */
.dw-khajni-page .dwtr-truck__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-left: 3px solid var(--dw-accent);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-family: var(--dw-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  /* Long names wrap to a second line inside the panel rather than spilling
     out of the trailer or being clipped. */
  overflow-wrap: break-word;
  hyphens: auto;
  z-index: 3;
}

.dw-khajni-page .dwtr-bay {
  position: absolute;
  left: 25px;
  top: 26px;
  width: 250px;
  height: 70px;
}

.dw-khajni-page .dwtr-box {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 5px;
  background: linear-gradient(145deg, var(--dw-accent-hi), var(--dw-accent));
  border: 1px solid rgba(255, 255, 255, .25);
  opacity: 0;
  transform: translateY(-80px) scale(.5);
  box-shadow: 0 8px 20px rgba(234, 92, 31, .3);
  will-change: transform, opacity;
}

/* The crate carries its load number instead of a brand stamp. */
.dw-khajni-page .dwtr-box::before {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.dw-khajni-page .dwtr-box--1 { left: 0;    top: 20px; }
.dw-khajni-page .dwtr-box--2 { left: 48px; top: 20px; }
.dw-khajni-page .dwtr-box--3 { left: 96px; top: 20px; }
.dw-khajni-page .dwtr-box--4 { left: 48px; top: -25px; }
.dw-khajni-page .dwtr-box--5 { left: 96px; top: -25px; }

.dw-khajni-page .dwtr-cabin {
  position: absolute;
  right: 0;
  bottom: 35px;
  width: 135px;
  height: 105px;
  border-radius: 5px 25px 8px 5px;
  background: linear-gradient(145deg, #343945, #171922);
  border: 1px solid rgba(255, 255, 255, .12);
}

.dw-khajni-page .dwtr-cabin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--dw-accent);
}

.dw-khajni-page .dwtr-glass {
  position: absolute;
  top: 18px;
  right: 15px;
  width: 75px;
  height: 40px;
  border-radius: 5px 14px 5px 5px;
  background: linear-gradient(145deg, #151923, #080a0e);
  border: 1px solid rgba(255, 255, 255, .15);
}

.dw-khajni-page .dwtr-glass::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  left: 45%;
  top: 0;
  background: rgba(255, 255, 255, .12);
  transform: skew(-15deg);
}

.dw-khajni-page .dwtr-lamp {
  position: absolute;
  right: -5px;
  bottom: 20px;
  width: 10px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 15px #fff;
}

/* bottom:0 puts the tyre's contact patch exactly on the truck's baseline, which
   is the road surface. */
.dw-khajni-page .dwtr-wheel {
  position: absolute;
  bottom: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #090a0e;
  border: 7px solid #171922;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
  will-change: transform;
}

.dw-khajni-page .dwtr-wheel span {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #454956;
  top: 12px;
  left: 12px;
}

.dw-khajni-page .dwtr-wheel--rear { left: 50px; }
.dw-khajni-page .dwtr-wheel--front { right: 50px; }

/* ---------- Closing message ---------- */
.dw-khajni-page .dwtr-final {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%, -50%) scale(.85);
  text-align: center;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.dw-khajni-page .dwtr-final span {
  color: var(--dw-accent);
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 700;
}

.dw-khajni-page .dwtr-final__title {
  font-family: var(--dw-display);
  font-size: clamp(45px, 7vw, 100px);
  line-height: .9;
  letter-spacing: -5px;
  font-weight: 700;
  margin: 15px 0 0;
  color: var(--dw-text);
}

.dw-khajni-page .dwtr-final__title b { color: var(--dw-accent); }

/* ---------- Progress ---------- */
.dw-khajni-page .dwtr-progress {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: min(300px, 70%);
  z-index: 30;
  opacity: .8;
  pointer-events: none;
}

.dw-khajni-page .dwtr-progress__track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  position: relative;
}

.dw-khajni-page .dwtr-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 1px;
  background: var(--dw-accent);
  box-shadow: 0 0 12px rgba(234, 92, 31, .8);
}

/* ==========================================================================
   RESPONSIVE — same breakpoints and scale steps as the original
   ========================================================================== */
@media (max-width: 991px) {
  .dw-khajni-page #dwTruck { height: 570vh; --dwtr-scale: .8; }

  .dw-khajni-page .dwtr-heading { top: 9vh; }

  .dw-khajni-page .dwtr-cards { width: 100%; top: 43%; }

  .dw-khajni-page .dwtr-card { width: 190px; }

  /* The label is set in truck-local units, so it is scaled up here to offset the
     .8 applied to the whole vehicle and keep the same on-screen size. */
  .dw-khajni-page .dwtr-truck__label { font-size: 21px; }
}

@media (max-width: 767px) {
  .dw-khajni-page #dwTruck { height: 540vh; --dwtr-scale: .68; }

  .dw-khajni-page .dwtr-stage { height: 100svh; min-height: 620px; }

  /* Road surface and label size move with the truck's scale step. */
  .dw-khajni-page .dwtr-stage { --dwtr-road-top: calc(19% - 90px); }

  .dw-khajni-page .dwtr-heading { top: 10vh; padding: 0 20px; }

  .dw-khajni-page .dwtr-heading__title { font-size: 43px; letter-spacing: -2.5px; }

  .dw-khajni-page .dwtr-heading p { font-size: 13px; }

  .dw-khajni-page .dwtr-cards { top: 43%; height: 205px; }

  .dw-khajni-page .dwtr-card {
    width: min(310px, 76vw);
    min-height: 180px;
    padding: 20px;
  }

  /* Long names get a tighter panel and a slightly smaller face so that e.g.
     "Website Design for Local Businesses" still reads at .68 scale. */
  .dw-khajni-page .dwtr-truck__label { font-size: 25px; letter-spacing: 0; }

  .dw-khajni-page .dwtr-final__title { font-size: 54px; letter-spacing: -3px; }

  .dw-khajni-page .dwtr-final span { letter-spacing: 2px; }
}

@media (max-width: 480px) {
  .dw-khajni-page #dwTruck { --dwtr-scale: .56; }

  .dw-khajni-page .dwtr-heading__title { font-size: 38px; }

  .dw-khajni-page .dwtr-final__title { font-size: 47px; }

  /* Offsets the .56 scale step. The longest service name has to stay legible
     here, so the panel is allowed two lines and the face is trimmed to suit. */
  .dw-khajni-page .dwtr-truck__label { font-size: 30px; padding: 5px 6px; }
}

/* ==========================================================================
   REDUCED MOTION
   No pin, no scrub, no RAF. The section collapses to a single static panel
   that shows the road, the truck with all five boxes loaded, and the closing
   line — so the scene still communicates what it is, and the page does not
   gain 620vh of meaningless scrolling.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dw-khajni-page #dwTruck { height: auto; }

  .dw-khajni-page .dwtr-stage {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    padding: clamp(3.5rem, 8vw, 6rem) 0;
  }

  .dw-khajni-page .dwtr-heading { position: relative; top: auto; }

  .dw-khajni-page .dwtr-cards {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(1160px, 92%);
    height: auto;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
  }

  .dw-khajni-page .dwtr-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dw-khajni-page .dwtr-road { position: relative; bottom: auto; margin: clamp(2rem, 5vw, 3rem) auto 0; width: min(1160px, 92%); }

  .dw-khajni-page .dwtr-roadline { animation: none; }

  .dw-khajni-page .dwtr-truck {
    position: relative;
    left: auto;
    bottom: auto;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    transform: scale(.68);
  }

  /* The label is part of the truck, so it keeps riding along with it here too. */
  .dw-khajni-page .dwtr-truck__label { font-size: 22px; }

  .dw-khajni-page .dwtr-box { opacity: 1; transform: none; }

  .dw-khajni-page .dwtr-wheel { transform: none; }

  .dw-khajni-page .dwtr-final {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    width: min(1160px, 92%);
    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  }

  .dw-khajni-page .dwtr-final__title { font-size: clamp(34px, 6vw, 64px); }

  .dw-khajni-page .dwtr-progress { display: none; }
}