/* =========================================================
   PREMIUM TOWER CRANE — projects.php filter row
   Brand colors: white / orange (#F58220) / blue (#005AA9),
   light gray (#E5E7EB) / dark gray (#555555). SVG + CSS only.

   Structure:
     .crane-scene              -> positioning context, sized by --scene-h
       .crane-tower              -> static SVG: mast, base, cabin, ladder,
                                    platform railing, counterweight, rear
                                    jib, apex pulley
       .crane-boom                -> horizontal beam, left/width set by crane.js
         .crane-boom-beam            -> main beam
         .crane-boom-lower-rail       -> secondary rail + truss struts (depth)
         .crane-boom-joint            -> small gusset bracket at the boom root
         .crane-trolley                -> the ONLY part that translates horizontally
           .crane-trolley-block
             .crane-trolley-pulley
           .crane-rig                    -> height animates (lower / lift / idle)
             .crane-cable
             .crane-hook-arm (x2)           -> tiny arms that "grip" the button below
             .crane-hook-svg
   .status-filter-btn.is-lifted  -> the button currently held by the hook
========================================================= */

.crane-scene{
  --crane-white: #FFFFFF;
  --crane-orange: #F58220;
  --crane-blue: #005AA9;
  --crane-gray-light: #E5E7EB;
  --crane-gray-dark: #555555;

  --scene-h: 210;  /* px, overridden per-breakpoint by crane.js */
  --boom-top: 20;  /* px, overridden by crane.js */

  position: relative;
  width: 100%;
  height: calc(var(--scene-h) * 1px);
  margin: 0 0 2px;
  pointer-events: none; /* never intercept clicks meant for the filter buttons */
  user-select: none;
}

/* ---------- Tower (mast, base, cabin, counterweight, rear jib) ---------- */
.crane-tower{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
}
.crane-tower-svg{
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 3px 5px rgba(20, 30, 45, .18));
}
.crane-tower-shadow{ /* soft ambient shadow cast on the ground beneath the base */
  position: absolute;
  left: 38%;
  bottom: -3px;
  width: 34%;
  height: 6px;
  background: radial-gradient(ellipse at center, rgba(20, 20, 20, .28) 0%, rgba(20, 20, 20, 0) 72%);
  filter: blur(1px);
}

/* ---------- Boom (never moves) ---------- */
.crane-boom{
  position: absolute;
  top: calc(var(--boom-top) * 1px);
  left: 0;
  height: 0;
}
.crane-boom-beam{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--crane-white) 0%, #EAF1F8 100%);
  border: 1px solid var(--crane-blue);
  box-shadow: 0 3px 6px rgba(20, 30, 45, .14);
}
.crane-boom-beam::before{ /* subtle truss texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(245, 130, 32, .35) 0,
    rgba(245, 130, 32, .35) 1px,
    transparent 1px,
    transparent 10px
  );
  border-radius: 2px;
  opacity: .85;
}
.crane-boom-lower-rail{ /* secondary rail beneath the main beam, joined by truss struts */
  position: absolute;
  top: 14px;
  left: 4%;
  width: 92%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #EAF1F8 0%, var(--crane-white) 100%);
  border: 1px solid var(--crane-gray-light);
  opacity: .9;
}
.crane-boom-lower-rail::before{ /* diagonal struts connecting the two rails */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background-image: repeating-linear-gradient(
    64deg,
    var(--crane-gray-light) 0,
    var(--crane-gray-light) 1px,
    transparent 1px,
    transparent 22px
  );
  opacity: .8;
}
.crane-boom-joint{ /* gusset bracket where the boom meets the tower */
  position: absolute;
  top: -5px;
  left: -3px;
  width: 14px;
  height: 23px;
  background: var(--crane-white);
  border: 1px solid var(--crane-gray-dark);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  box-shadow: 0 1px 2px rgba(20, 30, 45, .18);
}

/* ---------- Trolley (the only translating part) ---------- */
.crane-trolley{
  position: absolute;
  top: -6px;
  left: 0;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.crane-trolley-block{
  position: relative;
  width: 20px;
  height: 13px;
  margin: 0 auto;
  background: var(--crane-blue);
  border: 1px solid var(--crane-gray-dark);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(20, 30, 45, .16);
}
.crane-trolley-pulley{ /* small wheel riding the beam */
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--crane-orange);
  border: 1px solid var(--crane-gray-dark);
}
.crane-trolley-wheel{ /* small side wheels, subtle metallic highlight */
  position: absolute;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, var(--crane-gray-light) 45%, var(--crane-gray-dark) 100%);
  border: 0.5px solid var(--crane-gray-dark);
}
.crane-trolley-wheel--left{ left: 1px; }
.crane-trolley-wheel--right{ right: 1px; }

/* ---------- Cable + Hook rig ---------- */
.crane-rig{
  position: relative;
  width: 2px;
  height: 0; /* animated by crane.js: 0 -> cableFull -> cableLift */
  margin: 0 auto;
  transform-origin: top center;
  transition: height .8s cubic-bezier(.22, .61, .36, 1);
}
.crane-cable{
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4px;
  height: 100%;
  background: linear-gradient(90deg, var(--crane-gray-dark) 0%, #C9CDD2 45%, var(--crane-gray-dark) 100%);
  opacity: .7;
  display: block;
  box-shadow: 0 0 1px rgba(0, 0, 0, .25);
}
.crane-hook-svg{
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 18px;
  height: 23px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(20, 30, 45, .2));
}
.crane-hook-arm{ /* tiny arms flanking the hook, suggesting it grips the button below */
  position: absolute;
  bottom: -6px;
  width: 9px;
  height: 1.4px;
  background: var(--crane-blue);
  border-radius: 1px;
  opacity: .85;
  transition: opacity .3s var(--ease, ease);
}
.crane-hook-arm--left{  left: 50%; margin-left: -10px; transform: rotate(28deg); transform-origin: right center; }
.crane-hook-arm--right{ left: 50%; margin-left: 1px;   transform: rotate(-28deg); transform-origin: left center; }

/* ---------- Idle sway (max 2deg per spec, kept subtle) ---------- */
.crane-scene.is-idle .crane-rig{
  animation: craneIdleSway 4.4s ease-in-out infinite;
}
@keyframes craneIdleSway{
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(.8deg); }
}

/* ---------- Mechanical "carrying weight" swing while the trolley moves ----------
   --swing-dir is set by crane.js to 1 or -1 depending on travel direction, so the
   hook realistically lags opposite the direction the trolley just moved in. */
.crane-scene.is-swinging .crane-rig{
  animation: craneSwing .6s cubic-bezier(.22, .61, .36, 1);
}
@keyframes craneSwing{
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(calc(var(--swing-dir, 1) * 2deg)); }
  55%  { transform: rotate(calc(var(--swing-dir, 1) * -1.2deg)); }
  80%  { transform: rotate(calc(var(--swing-dir, 1) * .5deg)); }
  100% { transform: rotate(0deg); }
}

/* Small settle-bounce on the trolley block, like it just took up slack */
.crane-trolley.is-bouncing .crane-trolley-block{
  animation: craneBounce .55s cubic-bezier(.22, .61, .36, 1);
}
@keyframes craneBounce{
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-3px); }
  62%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* ---------- Suspended button — the button currently held by the hook ----------
   .is-lifted is the resting "held" state; .is-lifting is a brief bounce
   applied at the same moment the hook itself bounces, then removed.
   No new transition needed here — pages.css already gives .status-filter-btn
   a `transition: all .3s var(--ease)`, which covers transform/box-shadow too. */
.status-filter-btn.is-lifted{
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(20, 30, 45, .14);
}
.status-filter-btn.is-lifted::after{ /* small ground shadow beneath the "suspended" button */
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -7px;
  height: 5px;
  background: radial-gradient(ellipse at center, rgba(20, 20, 20, .16) 0%, rgba(20, 20, 20, 0) 75%);
  pointer-events: none;
}
.status-filter-btn.is-lifting{
  animation: craneButtonLift .55s cubic-bezier(.22, .61, .36, 1);
}
@keyframes craneButtonLift{
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-6px); }
  65%  { transform: translateY(-2px); }
  100% { transform: translateY(-4px); }
}

/* ---------- Responsive scaling ----------
   Desktop 1200px+: 100%  | Laptop 1025-1199px: 95%
   Tablet  768-1024px: 85% | Mobile <768px: 60% (still visible, never hidden)
   Actual numbers are computed in crane.js; these are just guard defaults
   so there is no flash of the wrong size before JS runs. */
@media (max-width: 1199px){
  .crane-scene{ --scene-h: 200; --boom-top: 19; }
}
@media (max-width: 1024px){
  .crane-scene{ --scene-h: 179; --boom-top: 17; }
}
@media (max-width: 767px){
  .crane-scene{ --scene-h: 126; --boom-top: 12; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .crane-trolley,
  .crane-rig,
  .status-filter-btn{
    transition: none !important;
  }
  .crane-scene.is-idle .crane-rig,
  .crane-scene.is-swinging .crane-rig,
  .crane-trolley.is-bouncing .crane-trolley-block,
  .status-filter-btn.is-lifting{
    animation: none !important;
  }
}