/* ============================================================================
   revanim.css — "handheld console talks to the lift" banner
   Sits at the TOP of the #reverse-eng teaser on the landing page.
   Story at a glance: our handheld diagnostic tool plugs into your lift and
   brings it back to life — data pulses run down the service cable, the car
   rides the shaft, the floor indicator ticks.

   Matches the site's "Brass & Rail" identity (landing.css): reuses
   --brass-grad / --brass2 / --display tokens (with identical literal
   fallbacks so the standalone preview renders the same), and mirrors the
   existing .la-* running-elevator + .circuit-bg .flow dash-pulse motifs.

   Performance: pure CSS + SVG. Only transform / opacity / stroke-dashoffset
   animate. Fixed heights per breakpoint => zero layout shift.
   prefers-reduced-motion => clean static "console connected to lift" scene
   (defaults ARE the static scene; animation only layers motion on top).
   ========================================================================== */

.revanim{
  position:relative;width:100%;max-width:760px;margin:0 auto clamp(28px,4.5vw,46px);
  height:280px;pointer-events:none;
  /* geometry (px because the car travel must stay exact, like .la-car) */
  --rv-toolw:180px;   /* console width  */
  --rv-shaftw:140px;  /* shaft width    */
  --rv-travel:164px;  /* car travel: 280 - 40(top) - 64(car) - 12(pit) */
  --rv-floor:93.3px;  /* floor tick spacing (3 landings)               */
  /* brand tokens (from landing.css :root, literal fallbacks identical) */
  --rv-grad:var(--brass-grad,linear-gradient(135deg,#E3C572 0%,#B68F3C 55%,#C7A24A 100%));
  --rv-font:var(--display,'Space Grotesk','Inter',-apple-system,sans-serif);
}
/* soft brass ambience behind the scene (static, cheap — same trick as .cta-band) */
.revanim::before{content:"";position:absolute;inset:-34px -14px;pointer-events:none;
  background:radial-gradient(58% 72% at 50% 54%, rgba(199,162,74,.15), transparent 70%);}

.rv-scene{position:relative;height:100%;}

/* ── handheld diagnostic console ─────────────────────────────────────────── */
.rv-tool{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;
  width:var(--rv-toolw);border-radius:16px;padding:13px 12px 11px;
  background:linear-gradient(180deg,#262a33,#15171c);
  border:1px solid rgba(201,162,74,.5);
  box-shadow:0 14px 30px rgba(16,24,40,.35),0 0 22px rgba(199,162,74,.16),
             inset 0 1px 0 rgba(255,255,255,.07);}
.rv-tool-top{position:absolute;top:0;left:16px;right:16px;height:4px;
  border-radius:0 0 4px 4px;background:var(--rv-grad);opacity:.9;}

.rv-screen{position:relative;background:#0f1116;border-radius:9px;padding:10px 10px 9px;
  box-shadow:inset 0 0 0 1px rgba(231,203,120,.22),inset 0 2px 10px rgba(0,0,0,.7);}
.rv-scrhead{display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font:700 11px/1 var(--rv-font);letter-spacing:.14em;color:#E7CB78;
  text-shadow:0 0 10px rgba(231,203,120,.55);}
.rv-cursor{width:6px;height:11px;background:#E7CB78;
  box-shadow:0 0 8px rgba(231,203,120,.8);animation:rvBlink 1.1s step-end infinite;}
.rv-wave{display:block;width:100%;height:30px;}
.rv-wave polyline{fill:none;stroke:#c9a24a;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:62 38;
  filter:drop-shadow(0 0 4px rgba(199,162,74,.7));
  animation:rvWave 2.6s linear infinite;}
.rv-dots{display:flex;gap:5px;margin-top:7px;}
.rv-dots i{width:5px;height:5px;border-radius:50%;background:#c9a24a;
  box-shadow:0 0 5px rgba(199,162,74,.8);animation:rvDot 1.5s ease-in-out infinite;}
.rv-dots i:nth-child(2){animation-delay:.25s;}
.rv-dots i:nth-child(3){animation-delay:.5s;}

.rv-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 16px 0;}
.rv-keys span{aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#3a3f48,#23262d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.4);}
.rv-keys .on{background:var(--rv-grad);
  box-shadow:0 0 0 3px rgba(199,162,74,.28),inset 0 1px 0 rgba(255,255,255,.5);}

.rv-toolfoot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:11px;
  font:600 9.5px/1 var(--rv-font);letter-spacing:.24em;color:#9c8a5e;}
.rv-led{width:7px;height:7px;border-radius:50%;background:#E7CB78;
  box-shadow:0 0 8px rgba(231,203,120,.9);animation:rvLed 2.6s ease-in-out infinite;}
/* cable socket on the console's right edge */
.rv-port{position:absolute;right:-7px;top:calc(50% - 8px);width:10px;height:16px;
  border-radius:0 5px 5px 0;background:var(--rv-grad);box-shadow:0 2px 6px rgba(0,0,0,.4);}

/* ── service cable + live data pulses (circuit-bg .flow language) ─────────── */
.rv-cable{position:absolute;z-index:1;top:42%;height:38%;
  left:calc(var(--rv-toolw) - 8px);
  /* svg is a replaced element: left+right is over-constrained, so set width */
  width:calc(100% - var(--rv-toolw) - var(--rv-shaftw) + 16px);
  overflow:visible;}
.rv-wire{fill:none;stroke:#6E531B;stroke-width:4;vector-effect:non-scaling-stroke;
  stroke-linecap:round;}
.rv-wire2{fill:none;stroke:#c9a24a;stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linecap:round;opacity:.55;}
.rv-pulse{fill:none;stroke:#E7CB78;stroke-width:2.4;vector-effect:non-scaling-stroke;
  stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(240,212,136,.9));}
.rv-pulse.out{stroke-dasharray:7 43;animation:rvFlowOut 1.8s linear infinite;}   /* console → lift */
.rv-pulse.back{stroke-width:1.4;opacity:.55;stroke-dasharray:3 47;
  animation:rvFlowBack 3.2s linear infinite;}                                    /* lift → console */

/* junction box where the cable enters the shaft (controller tap-in point) */
.rv-jbox{position:absolute;z-index:3;right:calc(var(--rv-shaftw) - 7px);
  top:calc(62% - 10px);width:14px;height:20px;border-radius:3px;
  background:var(--rv-grad);
  box-shadow:0 3px 8px rgba(0,0,0,.45),0 0 10px rgba(199,162,74,.35);}
.rv-jbox::after{content:"";position:absolute;inset:4px 3px;border-radius:2px;
  background:rgba(20,22,27,.35);}

/* ── lift shaft (matches .la-shaft) ──────────────────────────────────────── */
.rv-shaft{position:absolute;right:0;top:0;bottom:0;z-index:2;width:var(--rv-shaftw);
  border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#181b22,#23262f);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 44px rgba(0,0,0,.6),0 14px 30px rgba(16,24,40,.25);}
.rv-shaft::before{content:"";position:absolute;inset:0;pointer-events:none; /* landing ticks */
  background:repeating-linear-gradient(180deg,
    transparent 0 calc(var(--rv-floor) - 1px),
    rgba(199,162,74,.12) calc(var(--rv-floor) - 1px) var(--rv-floor));}
.rv-shaft::after{content:"";position:absolute;top:0;bottom:0;left:17%;right:17%; /* guide rails */
  pointer-events:none;
  border-left:2px solid rgba(199,162,74,.08);border-right:2px solid rgba(199,162,74,.08);}

/* floor indicator (ticks G → 1 → 2 with the car) */
.rv-readout{position:absolute;z-index:4;top:8px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  background:rgba(15,17,22,.92);border-radius:7px;padding:4px 9px;
  box-shadow:inset 0 0 0 1px rgba(231,203,120,.25);}
.rv-arr{font-size:8px;line-height:1;color:#d8b455;opacity:.25;
  filter:drop-shadow(0 0 4px rgba(199,162,74,.6));}
.rv-arr.up{animation:rvUp 12s linear infinite;}
.rv-arr.dn{animation:rvDn 12s linear infinite;}
.rv-floorbox{position:relative;width:12px;height:14px;}
.rv-fl{position:absolute;inset:0;text-align:center;opacity:0;
  font:700 13px/14px var(--rv-font);color:#E7CB78;
  text-shadow:0 0 10px rgba(231,203,120,.7);}
.rv-fl.g{opacity:1;animation:rvFlG 12s linear infinite;}   /* default = static "G" */
.rv-fl.f1{animation:rvFl1 12s linear infinite;}
.rv-fl.f2{animation:rvFl2 12s linear infinite;}

/* the car (matches .la-car) — default transform = parked at ground = static scene */
.rv-car{position:absolute;top:40px;left:50%;width:58%;margin-left:-29%;height:64px;
  z-index:2;border-radius:7px;border:2px solid #c7a24a;background:#23262e;
  box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 20px rgba(199,162,74,.25);
  transform:translateY(var(--rv-travel));will-change:transform;
  animation:rvCar 12s ease-in-out infinite;}
.rv-rope{position:absolute;bottom:100%;left:50%;width:3px;margin-left:-1.5px;height:400px;
  border-radius:2px;background:linear-gradient(180deg,#d8b455,#8a6a24);} /* rides with car, clipped by shaft */
.rv-cage{position:absolute;inset:0;border-radius:5px;overflow:hidden;display:flex;}
.rv-roof{position:absolute;top:0;left:0;right:0;height:6px;z-index:4;
  background:linear-gradient(180deg,#d8b455,#a07f30);}
.rv-interior{position:absolute;inset:0;
  background:radial-gradient(130% 60% at 50% 0%,rgba(255,238,196,.55),transparent 60%),
             linear-gradient(180deg,#3b3e47,#262931);}
.rv-interior::before{content:"";position:absolute;top:11px;left:24%;right:24%;height:4px;
  border-radius:3px;background:rgba(255,238,200,.9);box-shadow:0 0 12px rgba(255,228,160,.85);}
.rv-interior::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:rgba(0,0,0,.4);}
.rv-cdoor{position:relative;z-index:2;flex:1;background:linear-gradient(180deg,#3b3f49,#2a2d35);}
.rv-cdoor.l{transform:translateX(-92%);box-shadow:1px 0 0 rgba(0,0,0,.4);
  animation:rvDoorL 12s ease-in-out infinite;}
.rv-cdoor.r{transform:translateX(92%);box-shadow:-1px 0 0 rgba(199,162,74,.25);
  animation:rvDoorR 12s ease-in-out infinite;}

/* ── 12s master loop (seamless: 100% state == 0% state) ───────────────────
   0–12%  parked at ground, doors open→close
   12–44% rides up (▲ lit, floor ticks G→1→2)
   44–60% parked at top, doors open→close
   60–92% rides down (▼ lit, 2→1→G)
   92–100% back at ground, doors reopen                                     */
@keyframes rvCar{
  0%,12%{transform:translateY(var(--rv-travel));}
  44%,60%{transform:translateY(0);}
  92%,100%{transform:translateY(var(--rv-travel));}
}
@keyframes rvDoorL{
  0%,4%{transform:translateX(-92%);} 10%,46%{transform:translateX(0);}
  50%,55%{transform:translateX(-92%);} 59%,90%{transform:translateX(0);}
  96%,100%{transform:translateX(-92%);}
}
@keyframes rvDoorR{
  0%,4%{transform:translateX(92%);} 10%,46%{transform:translateX(0);}
  50%,55%{transform:translateX(92%);} 59%,90%{transform:translateX(0);}
  96%,100%{transform:translateX(92%);}
}
@keyframes rvUp{0%,12%{opacity:.25;} 16%,40%{opacity:1;} 46%,100%{opacity:.25;}}
@keyframes rvDn{0%,58%{opacity:.25;} 64%,88%{opacity:1;} 94%,100%{opacity:.25;}}
@keyframes rvFlG{0%,14%{opacity:1;} 20%,86%{opacity:0;} 92%,100%{opacity:1;}}
@keyframes rvFl1{0%,18%{opacity:0;} 24%,32%{opacity:1;} 38%,68%{opacity:0;}
  74%,82%{opacity:1;} 88%,100%{opacity:0;}}
@keyframes rvFl2{0%,36%{opacity:0;} 44%,60%{opacity:1;} 66%,100%{opacity:0;}}

/* console + cable life */
@keyframes rvBlink{0%,49%{opacity:1;} 50%,100%{opacity:0;}}
@keyframes rvWave{from{stroke-dashoffset:100;} to{stroke-dashoffset:0;}}
@keyframes rvDot{0%,100%{opacity:.2;} 50%{opacity:1;}}
@keyframes rvLed{0%,100%{opacity:.35;} 50%{opacity:1;}}
/* pathLength=100, dash period 50 => offset shift of 50 loops seamlessly */
@keyframes rvFlowOut{from{stroke-dashoffset:50;} to{stroke-dashoffset:0;}}
@keyframes rvFlowBack{from{stroke-dashoffset:0;} to{stroke-dashoffset:50;}}

/* ── phones (fixed height per breakpoint => zero layout shift) ───────────── */
@media(max-width:600px){
  .revanim{height:230px;
    --rv-toolw:138px;--rv-shaftw:104px;
    --rv-travel:134px;   /* 230 - 34 - 52 - 10 */
    --rv-floor:76.6px;}
  .rv-tool{padding:11px 10px 9px;border-radius:14px;}
  .rv-scrhead{font-size:10px;margin-bottom:6px;}
  .rv-wave{height:24px;}
  .rv-keys{gap:7px;margin:10px 5px 0;}
  .rv-toolfoot{margin-top:9px;font-size:9px;letter-spacing:.2em;}
  .rv-car{top:34px;height:52px;}
  .rv-readout{padding:3px 7px;gap:6px;}
  .rv-fl{font-size:12px;line-height:14px;}
}

/* ── reduced motion: clean static "console connected to lift" scene ───────
   (defaults already draw it: car parked at G, doors open, cabin lit, "G" on
   the indicator, cable dashes visible = link in place)                      */
@media (prefers-reduced-motion: reduce){
  .rv-car,.rv-cdoor.l,.rv-cdoor.r,.rv-arr.up,.rv-arr.dn,
  .rv-fl.g,.rv-fl.f1,.rv-fl.f2,.rv-cursor,.rv-wave polyline,
  .rv-dots i,.rv-led,.rv-pulse.out,.rv-pulse.back{animation:none;}
  .rv-pulse.out{stroke-dashoffset:0;}   /* static data marks on the wire */
  .rv-pulse.back{display:none;}
}