/* Clients page — "car park" logo grid (2026-11-06). Only clients.html loads this file.
   The whole top of the page is one asphalt surface: title, then bays painted row by row, each logo reverses into its bay.
   Mobile rework (same day, from an iPhone recording): everything that moves only slides (transform), so the phone's
   graphics chip does the work and nothing has to be redrawn; the rough paint edge is baked into img/paint-h|v.webp. */
.cp{position:relative;isolation:isolate;background:#0b0c0c url(../img/asphalt-tile.webp) 0 0/520px repeat}
.cp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(60vw 50vh at 18% 30%,rgba(255,196,120,.10),transparent 70%),
 radial-gradient(55vw 45vh at 84% 64%,rgba(255,196,120,.08),transparent 70%),
 linear-gradient(rgba(10,13,12,.6),rgba(10,13,12,.25) 14%,rgba(10,13,12,.15) 50%,rgba(10,13,12,.4) 88%,#0a0d0c)}
.cp-head{padding-top:clamp(6.5rem,11vw,8.5rem);padding-bottom:clamp(1.8rem,3.5vw,3rem)}
.cp-head h1{font-size:clamp(3rem,7.2vw,7.4rem);margin-top:.9rem}
.cp-lede{margin-top:1.1rem;font-size:clamp(1.05rem,1.4vw,1.3rem);color:#c9d0ca}

.lot{max-width:1320px;padding-bottom:clamp(4rem,8vw,7rem)}
.lot-in{position:relative}
.bays{display:grid;grid-template-columns:repeat(7,1fr);list-style:none;margin:0;padding:0}

/* painted lines: one strip per line, its paint slides out from under a fixed window (looks like it is being drawn) */
.paint{position:absolute;inset:0;pointer-events:none}
.lr{position:absolute;left:0;right:0;height:0}
.ln{position:absolute;overflow:hidden}
.ln i{position:absolute;inset:0;display:block;background:url(../img/paint-h.webp) 0 50%/auto 100% repeat-x;transform:translateX(-101%)}
.ln.v i{background:url(../img/paint-v.webp) 50% 0/100% auto repeat-y;transform:translateY(-101%)}
.lr.on .ln.h i{transform:none;transition:transform var(--T,1s) linear}
.lr.on .ln.v i{transform:none;transition:transform .38s cubic-bezier(.5,0,.2,1) var(--d,0s)}
.lr.inst .ln i{transition:none!important}
.marker{position:absolute;left:0;top:0;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fffef6;opacity:0;pointer-events:none;
 box-shadow:0 0 10px 3px rgba(255,255,240,.9),0 0 34px 12px rgba(255,236,190,.35),0 0 90px 40px rgba(255,210,140,.14)}

.bay{position:relative;z-index:1;aspect-ratio:1/1.34;padding:15% 12% 0}
.bay .no{position:absolute;left:10%;top:4.5%;font:400 .58rem/1 var(--m);letter-spacing:.14em;color:rgba(238,237,228,.42)}
.car{position:relative}
.car .pl{position:relative;aspect-ratio:1;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 14px 22px -8px rgba(0,0,0,.75),0 3px 0 rgba(0,0,0,.28)}
.car .pl img{width:100%;height:100%;object-fit:contain}
.car .pl img.cover{object-fit:cover}
.bay .nm{position:absolute;left:7%;right:7%;bottom:7%;text-align:center;font:400 .6rem/1.45 var(--m);letter-spacing:.11em;text-transform:uppercase;color:rgba(238,237,228,.66);transition:color .4s}
/* only hidden while the script runs, so the logos still show if it fails.
   A car waits below its bay (the bay clips it, so its shadow is kept small enough to fit), then reverses in solid:
   no fading, so no grey ghosts. */
.lot-in.anim .bay{overflow:hidden}
.lot-in.anim .car{transform:translateY(165%)}
.lot-in.anim .bay .nm{opacity:0}
.lot-in.anim .bay.in .car{transform:none;transition:transform .9s cubic-bezier(.2,.85,.3,1.05) var(--cd,0s)}
.lot-in.anim .bay.in .nm{opacity:1;transition:opacity .5s calc(var(--cd,0s) + .6s),color .4s}
.lot-in.anim .bay.inst .car,.lot-in.anim .bay.inst .nm{transition:none}
@media (hover:hover){.lot-in.anim .bay.parked:hover .car{transform:translateY(-5px);transition:transform .35s}.bay.parked:hover .nm{color:#fff}}

.cp-also{margin-top:clamp(2rem,4vw,3rem);max-width:70ch;color:rgba(238,237,228,.55);line-height:1.7}

@media (max-width:1000px){.bays{grid-template-columns:repeat(6,1fr)}}
@media (max-width:700px){.cp{background-size:340px}}
/* phones: no bay numbers, names in the normal font and big enough to read, quicker cars */
@media (max-width:600px){.bays{grid-template-columns:repeat(3,1fr)}.bay{padding:15% 10% 0}.bay .no{display:none}
 .bay .nm{left:4%;right:4%;bottom:6%;font:400 .7rem/1.38 var(--u);letter-spacing:0;text-transform:none;color:rgba(238,237,228,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .car .pl{border-radius:7px;box-shadow:0 9px 14px -6px rgba(0,0,0,.75),0 2px 0 rgba(0,0,0,.28)}
 .lot-in.anim .bay.in .car{transition-duration:.7s}}
@media (prefers-reduced-motion:reduce){.lot-in.anim .bay.in .car,.lot-in.anim .bay.in .nm,.lr.on .ln i{transition:none!important}}