/* "Being fixed" layer for the Lekker Fix home page.
   Default styles show every repair FINISHED, so the page is correct without JavaScript
   or with reduced motion. repair.js adds .repair to <html> and scrubs each repair on scroll. */

/* ── ELECTRICAL: every button is a switch plate ── */
.btn{position:relative;padding-left:62px}
.btn::before{content:'';position:absolute;left:16px;top:50%;width:28px;height:36px;margin-top:-18px;background:linear-gradient(180deg,#3A3A3A 0 50%,#0C0C0C 50% 100%);border:2px solid rgba(0,0,0,.85);border-radius:3px;box-shadow:inset 0 2px 0 rgba(255,255,255,.16);transition:background .15s}
.btn::after{content:'';position:absolute;left:27px;top:50%;width:6px;height:6px;margin-top:-12px;border-radius:50%;background:#5A5A5A;transition:background .15s,box-shadow .15s}
.btn:hover::before,.btn:focus-visible::before,.btn:active::before{background:linear-gradient(180deg,#0C0C0C 0 50%,#3A3A3A 50% 100%)}
.btn:hover::after,.btn:focus-visible::after,.btn:active::after{background:#FFF3B0;box-shadow:0 0 8px 2px rgba(255,243,176,.7);margin-top:6px}
.btn-line::before,.system-band .btn::before{border-color:rgba(245,196,0,.55)}
nav .btn{padding-left:50px}
nav .btn::before{left:12px;width:22px;height:28px;margin-top:-14px}
nav .btn::after{left:20px;margin-top:-10px}
nav .btn:hover::after,nav .btn:focus-visible::after{margin-top:4px}
.form .btn,.call-bar .btn{padding-left:62px}

/* ── PLUMBING: the pipe under the hero ── */
.pipe-run{position:relative;height:150px;background:var(--black);overflow:hidden}
.pipe-tube{position:absolute;left:-3%;right:-3%;top:52px;height:30px;background:linear-gradient(180deg,#4E2F12 0%,#B87333 18%,#F0B27A 38%,#FFD9B0 46%,#C98547 62%,#7A4A1F 85%,#35200E 100%);box-shadow:0 12px 20px rgba(0,0,0,.65)}
.pipe-joint{position:absolute;top:44px;width:34px;height:46px;margin-left:-17px;border-radius:3px;background:linear-gradient(180deg,#2E2E2E 0%,#9A9A9A 22%,#EDEDED 42%,#A8A8A8 60%,#4A4A4A 88%,#1E1E1E 100%);box-shadow:inset 6px 0 0 rgba(0,0,0,.18),inset -6px 0 0 rgba(0,0,0,.18)}
.pipe-valve{position:absolute;left:58%;top:34px;width:66px;height:66px;margin-left:-33px;transform:rotate(var(--turn,0deg))}
.drop{position:absolute;left:50%;top:44px;width:7px;height:10px;margin-left:-3px;background:#CFE3EA;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;opacity:0;display:none}
.pipe-run.leaking .drop{display:block;animation:drip 1.3s ease-in infinite}
.pipe-run.leaking .drop:nth-child(2){animation-delay:.45s;margin-left:-9px}
.pipe-run.leaking .drop:nth-child(3){animation-delay:.9s;margin-left:3px}
@keyframes drip{0%{transform:translateY(0) scale(.4);opacity:0}15%{transform:translateY(3px) scale(1);opacity:1}100%{transform:translateY(46px) scale(.8);opacity:0}}

/* ── TRADE ICONS in the ticker ── */
.ticker-item svg{width:20px;height:20px;margin-right:-28px;flex-shrink:0}
.ticker-item:hover svg{animation:tighten .8s var(--ease)}

/* ── CARPENTRY: the photo frame that hangs skew, then gets screwed level ── */
.hang{position:relative;transform-origin:14px 38px;transform:rotate(var(--tilt,0deg))}
.level{height:24px;margin-bottom:10px;position:relative;background:linear-gradient(180deg,#FFD83A,#F5C400 40%,#B99300)}
.level::before{content:'';position:absolute;left:50%;top:4px;width:76px;height:16px;margin-left:-38px;background:#DDF3B8;border:2px solid var(--ink);border-radius:8px}
.level::after{content:'';position:absolute;left:50%;top:4px;width:22px;height:16px;margin-left:-11px;border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.level i{position:absolute;left:50%;top:7px;width:16px;height:10px;margin-left:-8px;background:#fff;border-radius:50%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);transform:translateX(var(--bubble,0px));z-index:1}
.screw{position:absolute;top:42px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4F4F4,#8D8D8D 60%,#3C3C3C);box-shadow:0 2px 4px rgba(0,0,0,.6);transform:rotate(var(--screw,0deg));z-index:2}
.screw::after{content:'';position:absolute;left:3px;right:3px;top:8px;height:2px;background:#2A2A2A}
.screw.tl{left:8px}
.screw.tr{right:8px;opacity:var(--screw-in,1)}

/* ── ELECTRICAL: the cable wrapped round the six trades ── */
.circuit{position:relative;padding:30px}
.cable{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cable rect{x:9px;y:9px;width:calc(100% - 18px);height:calc(100% - 18px);rx:28px;fill:none;stroke-linecap:round}
.cable-sheath{stroke:#050505;stroke-width:12}
.cable-core{stroke:var(--yellow);stroke-width:6;stroke-dasharray:1000;stroke-dashoffset:var(--wire,0)}
.cable-pulse{stroke:#FFF3B0;stroke-width:3;stroke-dasharray:36 964;stroke-dashoffset:0;opacity:0}
.circuit.live .cable-pulse{opacity:1;animation:pulse 4s linear infinite}
@keyframes pulse{to{stroke-dashoffset:-1000}}
.dbbox{position:absolute;bottom:-10px;right:54px;width:104px;height:40px;background:linear-gradient(180deg,#3B3B3B,#1D1D1D);border:2px solid #050505;display:flex;align-items:center;gap:6px;padding:0 10px;z-index:1}
.dbbox i{width:14px;height:22px;background:linear-gradient(180deg,#0C0C0C 0 50%,#5A5A5A 50% 100%);border:1px solid #050505;border-radius:2px;transition:background .25s}
/* The light is red until the cable reaches the box, then green, and blinks as each pulse passes it.
   --tap (set by repair.js) is how far round the cable the light sits, 0 to 1. */
.dbbox b{width:9px;height:9px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px 3px rgba(61,220,132,.55);margin-left:auto;transition:background .25s,box-shadow .25s}
.repair .circuit:not(.tapped) .dbbox b{background:#E5484D;box-shadow:0 0 10px 3px rgba(229,72,77,.55)}
.circuit.live .dbbox i{background:linear-gradient(180deg,var(--yellow) 0 50%,#0C0C0C 50% 100%)}
.circuit.live .dbbox i:nth-child(2){transition-delay:.12s}
.circuit.live .dbbox i:nth-child(3){transition-delay:.24s}
.circuit.live .dbbox b{animation:tap 4s linear infinite;animation-delay:calc(var(--tap,.6) * 4s)}
@keyframes tap{0%,16%,100%{background:#3DDC84;box-shadow:0 0 10px 3px rgba(61,220,132,.55)}3%{background:#CFFFE2;box-shadow:0 0 18px 8px rgba(61,220,132,.95)}}
.ticket.in .ticket-top svg{animation:tighten-in .8s var(--ease) .5s}
@keyframes tighten-in{0%,100%{transform:rotate(0)}30%{transform:rotate(-24deg)}55%{transform:rotate(0)}78%{transform:rotate(-12deg)}}

/* ── TILING: job photos are laid like tiles ── */
.jobs-grid{perspective:1200px}
.jobs-grid .photo{transform-style:preserve-3d;backface-visibility:hidden}

/* ── PAINTING: the stats band gets rolled yellow ── */
.statsbar{position:relative;overflow:hidden}
.repair .statsbar{background:#1B1B1B}
.paint{position:relative;background:var(--yellow);clip-path:inset(0 calc(100% - var(--paint,100%)) 0 0)}
.primer{position:absolute;inset:0;display:none}
.repair .primer{display:block}
.primer .stat{border-color:rgba(255,255,255,.06)}
.primer .stat-n{color:#3A3A3A}
.primer .stat-l{color:#4A4A4A}
.roller{position:absolute;top:0;bottom:0;left:var(--paint,100%);width:44px;margin-left:-22px;display:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 3px,transparent 3px 6px),linear-gradient(90deg,#7A6000,#F5C400 22%,#FFE98A 46%,#F5C400 64%,#6E5600);border-radius:22px/10px;box-shadow:-14px 0 22px rgba(0,0,0,.45);z-index:2}
.repair .roller{display:block}

/* ── MAINTENANCE: the checklist ticks itself off ── */
.step{grid-template-columns:auto 1fr auto}
.tick{grid-column:3;grid-row:1 / span 2;align-self:center;width:46px;height:46px;color:var(--accent)}
.tick rect{fill:none;stroke:rgba(245,196,0,.45);stroke-width:2}
.tick path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .85s var(--ease) .55s}
.js .step:not(.in) .tick path{stroke-dashoffset:1}

/* ── HERO DEPTH ── */
.hero-grid{perspective:1400px}
.hero-grid .photo{transform-style:preserve-3d;will-change:transform}

/* ── REAL 3D: repair3d.js adds .gl-pipe / .gl-roller to <html> as each WebGL object starts ── */
.pipe-run canvas,.roller canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gl-pipe .pipe-tube,.gl-pipe .pipe-joint,.gl-pipe .pipe-valve{display:none}
.gl-roller .roller{width:84px;margin-left:-42px;background:none;border-radius:0;box-shadow:none}

@media (max-width:600px){
  .gl-roller .roller{width:60px;margin-left:-30px}
  .circuit{padding:22px 14px}
  .cable rect{x:5px;y:5px;width:calc(100% - 10px);height:calc(100% - 10px);rx:18px}
  .cable-sheath{stroke-width:9}
  .cable-core{stroke-width:4}
  .dbbox{right:34px;width:92px}
  .pipe-valve{left:66%}
  .tick{width:34px;height:34px}
  .roller{width:30px;margin-left:-15px}
}
@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after,.dbbox i,.dbbox b,.tick path{transition:none}
  .circuit.live .cable-pulse,.circuit.live .dbbox b,.ticket.in .ticket-top svg,.ticker-item:hover svg{animation:none}
}

/* Light mode: the unpainted stats band is pale primer instead of dark */
[data-theme="light"].repair .statsbar{background:#D8D3C7}
[data-theme="light"] .primer .stat{border-color:rgba(0,0,0,.08)}
[data-theme="light"] .primer .stat-n{color:#B9B3A6}
[data-theme="light"] .primer .stat-l{color:#A8A296}