/* FOLLOW SECTION V23 */

/* ============================
   FOLLOW SECTION (master)
   - This approach *does not* use transform:scale(...) on wrappers.
   - The section height is the single source of truth:
     height = base-height * --scene-scale
============================ */
#follow-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  /*background: rgba(255,0,0,0.05);*/

  /* Master variables */
  --scene-scale: 1;      /* adjusted by media queries */
  --base-height: 300px;  /* visual size at scale 1 */

  /* Section height is the only thing that changes with scale */
  height: calc(var(--base-height) * var(--scene-scale));
}

/* =======================================================
   CONVOY SCALE WRAPPER — stays anchored, no transform
   ======================================================= */
.convoy-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 200vw;
  height: 100%;              /* must explicitly match parent */
  transform-origin: bottom center;
  transform: translateX(-50%);  /* no scale here */
  pointer-events: none;
  z-index: 1;

  /* NEW: create a real layout context */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* =======================================================
   CONVOY LANE — actual positioning baseline
   ======================================================= */
.convoy {
  position: relative;
  width: 100%;
  height: 100%;  /* now this will actually resolve correctly */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: auto; /* re-enable interactivity if needed */
}

/* =======================================================
   VEHICLE WRAPPERS
   ======================================================= */
.truck-wrap,
.rv-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  will-change: transform;
  height: 40%;
}

.rv-wrap {
  margin-left: calc(-0.25 * var(--base-height) * var(--scene-scale)); /* negative offset for hitch */
  margin-bottom: calc(0.07 * var(--base-height) * var(--scene-scale));
}

/* =======================================================
   TRUCK
   ======================================================= */
.truck {
  position: relative;
  height: 100%;   /* fill the convoy lane height (25% of section) */
  width: auto;
}

.truck-img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* needle size proportional to truck */
.truck-needle {
  position: absolute;
  top: 51%;
  left: 59%;
  height: 25%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

/* =======================================================
   RV
   ======================================================= */
.rv {
  position: relative;
  height: 100%;
  width: auto;
}

.rv-img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 2s ease-in-out;
}

.rv-window {
  position: absolute;
  background: white;
  filter: blur(0.7vw);
  opacity: 0;
}

.rv-window.lighton {
  opacity: 1;
}

.rv-window.front {
  top: 30%;
  left: 16%;
  width: 9%;
  height: 9%;
}

.rv-window.back {
  top: 36%;
  left: 60%;
  width: 21%;
  height: 19%;
}

/* =======================================================
   FOLLOW TEXT
   ======================================================= */
.text-follow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(0.05 * var(--base-height) * var(--scene-scale)); /* scales with scene */
  font-weight: 700;
  color: #222;
  background: #fff;
  border-radius: 0.3em;
  opacity: 0.9;
  padding: 0.2em 0.5em;
  white-space: nowrap;
}

/* =======================================================
   WHEELS (simplified)
   ======================================================= */
.wheel {
  position: absolute;
  bottom: 0;
  color: #222;
  animation: wheelSpin 1s linear infinite paused;
}
.tk-wheel { font-size: calc(0.09 * var(--base-height) * var(--scene-scale)); }
.rv-wheel { 
  font-size: calc(0.08 * var(--base-height) * var(--scene-scale)); 
  margin-bottom: -5.5%;
}

.truck .wheel-front { left: 62%; }
.truck .wheel-rear  { left: 22%; }
.rv .wheel-front    { left: 55%; }
.rv .wheel-rear     { left: 64%; }

@keyframes wheelSpin {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* === Forward Spin === */
.wheel-forward {
  animation-direction: normal;
  animation-play-state: running;
}

/* === Reverse Spin === */
.wheel-reverse {
  animation-direction: reverse;
  animation-play-state: running;
}

/* =======================================================
   BOUNCE
   ======================================================= */
.truck-bounce,
.rv-bounce {
  animation: suspensionBounce 1s ease-in-out infinite paused;
}
.rv-bounce { animation-delay: 0.5s; }

@keyframes suspensionBounce {
  0%,100% { transform: translateY(0); }
  10%  { transform: translateY(-1%); }
  30%  { transform: translateY(0.5%); }
  60%  { transform: translateY(-1.5%); }
  80%  { transform: translateY(0.8%); }
}

/* =======================================================
   LEGS (scaled)
   ======================================================= */
.rv-leg {
  position: absolute;
  width: 1.4%;
  height: 15%;
  background: black;
  transform-origin: top center;
  z-index: -1;
  transition: height 1.8s ease-in-out;
}
.rv-leg::after {
  content: "";
  position: absolute;
  bottom: -7%;
  left: 50%;
  width: 200%;
  height: 8%;
  background: black;
  transform: translateX(-50%);
}
.rv-leg.leg-left  { left: 21%; top: 86%; }
.rv-leg.leg-right { left: 75%; top: 88%; }
.rv-leg.leg-left.deployed  { height: 25%; }
.rv-leg.leg-right.deployed { height: 24%; }

.rv-img.leveling {
  animation: rvLevel 2s ease-in-out forwards;
}

.rv-img.rvRaise {
  transform: translateY(-0.265vw);
}

@keyframes rvRaise {
 0%    { transform: translateY(0); }
 100%  { transform: translateY(-0.265vw); } 
}

@keyframes rvLevel {
  0%   { transform: rotate(0deg); }
  33%  { transform: rotate(1deg); }
  67%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* ============================
   MEDIA QUERIES: only change the master variable
============================ */
/* Deciding on using @media to set --scene-scale or js resize listener
 ** See screenResize() in follow-section.js
@media (max-width: 1400px) { #follow-section { --scene-scale: 0.8; } }
@media (max-width: 992px)  { #follow-section { --scene-scale: 0.7; } }
@media (max-width: 768px)  { #follow-section { --scene-scale: 0.6; } }
@media (max-width: 576px)  { #follow-section { --scene-scale: 0.5; } }
*/