/* Services panels (homepage, night ground): four expanding panels that each demonstrate their service.
   Ported from homepage/_src-v6.html (SERVICES + SERVICES D). Only the open panel moves; closed panels are calm stills.
   Desktop: hover or focus opens a panel. Phones: panels stack, each demo plays when it is the one in view.
   The animated start states (wipe hidden, walls flat…) apply only under html.motion-on and outside the editor
   (.is-static), so with reduced motion, no JavaScript, or in the editor every demo shows its finished state. */

.services-panels{padding:clamp(4rem,2.5rem + 4.5vw,7rem) 0 var(--space-xl)}
.services-panels .svc-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:none;margin-bottom:var(--space-l)}
.services-panels .svc-head h2{max-width:21ch;text-wrap:balance}
.services-panels .svc-head p{max-width:min(100%,780px);text-wrap:balance;color:var(--text-muted);font-size:var(--fs-lead);line-height:1.45}

.services-panels .svd{--h:min(80svh,720px);padding:0 6px}
.services-panels .svd-row{display:flex;gap:6px;height:var(--h)}
.services-panels .pn{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:18px;background:#0d0b09;color:var(--plot-bone);outline:none;
  transition:flex-grow 800ms var(--ease-settle);cursor:pointer}
.services-panels .pn.on{flex-grow:3.3;cursor:default}
.services-panels .pn:focus-visible{box-shadow:inset 0 0 0 2px var(--plot-bone)}
.services-panels .pn picture{display:contents}
.services-panels .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--mss-fx,50% 50%);
  filter:saturate(.9) brightness(.8);transition:opacity .6s,filter .6s}
.services-panels .pn:not(.on):hover .still{filter:saturate(1) brightness(.92)}
.services-panels .pn.on .still{opacity:0}
.services-panels .demo{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-settle);pointer-events:none}
.services-panels .pn.on .demo{opacity:1}
.services-panels .nm{position:absolute;left:26px;bottom:22px;right:26px;width:max-content;max-width:calc(100% - 52px);background:var(--plot-night);border-radius:12px;padding:10px 15px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,.92rem + .35vw,1.25rem);letter-spacing:-.01em;line-height:1.2;text-wrap:balance;transition:opacity .3s}
.services-panels .pn.on .nm{opacity:0}
.services-panels .tx{position:absolute;left:22px;bottom:22px;max-width:min(430px,calc(100% - 44px));background:var(--plot-night);border-radius:16px;padding:20px 22px;z-index:5;
  opacity:0;transform:translateY(16px);transition:opacity .5s .2s var(--ease-settle),transform .7s .2s var(--ease-settle);pointer-events:none}
.services-panels .pn.on .tx{opacity:1;transform:none;pointer-events:auto}
.services-panels .tx h3{font-size:clamp(1.4rem,1.1rem + .9vw,2rem);letter-spacing:-.025em;line-height:1.08}
.services-panels .tx p{margin-top:8px;font-size:17px;line-height:1.45;color:rgba(243,238,230,.86)}
.services-panels .tx .from{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px}
.services-panels .tx .from b{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--plot-bone)}
.services-panels .tx .fr{font-size:15px;color:var(--text-muted);white-space:nowrap}
.services-panels .more{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:17px;text-decoration:none;color:var(--plot-bone);border-bottom:1px solid var(--plot-glow);padding-bottom:2px}

/* 1. Real estate photography: the phone snapshot, then a clean vertical line wipes Jon's edit across it */
.services-panels .re img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.services-panels .re .after{position:absolute;inset:0;clip-path:none}
.services-panels .re .line{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--plot-bone);box-shadow:0 0 0 1px rgba(21,18,15,.25);opacity:0}
.motion-on .services-panels:not(.is-static) .re .after{clip-path:inset(0 100% 0 0)}
.motion-on .services-panels:not(.is-static) .pn.run .re .after{animation:svpWipe 1.9s .9s var(--ease-settle) forwards}
.motion-on .services-panels:not(.is-static) .pn.run .re .line{animation:svpLine 1.9s .9s var(--ease-settle) forwards}
@keyframes svpWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes svpLine{0%{left:0;opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}

/* 2. Aerial & drone: Jon's drone footage, and the drone itself gliding across once */
.services-panels .aer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.services-panels .aer .fly{position:absolute;left:0;top:14%;width:clamp(150px,22%,260px);transform:translate(-130%,0);will-change:transform;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.45));display:none}
.motion-on .services-panels:not(.is-static) .aer .fly{display:block}
.motion-on .services-panels:not(.is-static) .pn.run .aer .fly{animation:svpFly 5.2s .5s cubic-bezier(.45,0,.55,1) forwards}
@keyframes svpFly{0%{transform:translate(-130%,30%) rotate(5deg)}30%{transform:translate(60%,-6%) rotate(-1deg)}55%{transform:translate(160%,4%) rotate(1deg)}
  100%{transform:translate(520%,-20%) rotate(-4deg)}}
/* The shared drone (buildDrone() in js/plot-motion.js injects its own model styles); the flight wrapper sets its width. */
.services-panels .drone-model{width:100%;aspect-ratio:867/431}
.services-panels .drone-model:not(.is-built) > picture{display:block}
.services-panels .drone-model:not(.is-built) > picture > img{width:100%;height:auto}

/* 3. Video & social: Jon's vertical reel, playing in a generic short-video phone that rises into the panel */
.services-panels .vid{background:#15120F}
.services-panels .vid .bg{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.1)}
.services-panels .reel{position:absolute;left:50%;top:4%;height:calc(100% - 230px);max-height:560px;aspect-ratio:9/19.5;border-radius:34px;background:#0c0a09;padding:7px;
  translate:-50% 0;transform:translateY(0);box-shadow:0 0 0 1px #4a433b,0 34px 60px -20px rgba(0,0,0,.7)}
.motion-on .services-panels:not(.is-static) .pn.run .vid .reel{animation:svpRise 1.1s var(--ease-settle) both}
@keyframes svpRise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.services-panels .reel .scr{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#000;color:#fff}
.services-panels .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.services-panels .reel .island{position:absolute;z-index:2;left:50%;top:9px;translate:-50% 0;width:32%;height:18px;border-radius:999px;background:#000}
.services-panels .reel .ui{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 38%)}
.services-panels .reel .side{position:absolute;right:9px;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:14px}
.services-panels .reel .side svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.services-panels .reel .meta{position:absolute;left:11px;right:46px;bottom:18px;font-size:13px;line-height:1.3}
.services-panels .reel .meta p{margin:5px 0 0}
.services-panels .reel .who{display:flex;align-items:center;gap:7px;font-weight:600}
.services-panels .reel .av{width:22px;height:22px;border-radius:50%;flex:none;background:url(../../assets/img/blocks/services-panels/plot-mark-white.webp) center/60% no-repeat #15120F;box-shadow:0 0 0 1.5px #fff}
.services-panels .reel .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.28)}
.services-panels .reel .prog i{display:block;height:100%;width:0;background:#fff}

/* 4. Floor plans & 3D tours: the plan draws itself (walls, then doors, then labels), tilts and rises into 3D rooms */
.services-panels .pl{background:#12100D;perspective:1300px}
.services-panels .pl .fit{--s:.85;position:absolute;left:50%;top:38%;width:640px;height:440px;margin:-220px 0 0 -320px;transform:scale(var(--s,1));transform-style:preserve-3d}
.services-panels .pl .plane{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-32deg) translateY(-6%)}   /* resting state: the finished 3D plan */
.services-panels .pl svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.services-panels .pl .w{fill:none;stroke:#F3EEE6;stroke-width:4;stroke-linecap:square;stroke-dasharray:1 1;stroke-dashoffset:0}
.services-panels .pl .d{fill:none;stroke:rgba(243,238,230,.7);stroke-width:2}
.services-panels .pl .lb{fill:#F3EEE6;font-family:var(--font-text);font-size:17px}
.services-panels .pl .lb .m{fill:var(--plot-glow);font-size:14px}
.services-panels .pl .wall{position:absolute;height:64px;transform-origin:0 0;background:linear-gradient(rgba(233,184,114,.22),rgba(233,184,114,.06));
  box-shadow:inset 0 0 0 1.5px rgba(233,184,114,.75);transform:var(--r) rotateX(90deg) scaleY(1)}
.motion-on .services-panels:not(.is-static) .pn.run .pl .w{animation:svpDraw .9s var(--ease-settle) both;animation-delay:calc(var(--i) * 70ms)}
.motion-on .services-panels:not(.is-static) .pn.run .pl .d{animation:svpFade .5s 1.5s both}
.motion-on .services-panels:not(.is-static) .pn.run .pl .lb{animation:svpFade .6s 2.1s both}
.motion-on .services-panels:not(.is-static) .pn.run .pl .plane{animation:svpTilt 1.4s 2.9s var(--ease-settle) both}
.motion-on .services-panels:not(.is-static) .pn.run .pl .wall{animation:svpRaise 1s var(--ease-settle) both;animation-delay:calc(3.5s + var(--i) * 45ms)}
@keyframes svpDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes svpFade{from{opacity:0}to{opacity:1}}
@keyframes svpTilt{from{transform:none}to{transform:rotateX(56deg) rotateZ(-32deg) translateY(-6%)}}
@keyframes svpRaise{from{transform:var(--r) rotateX(90deg) scaleY(0)}to{transform:var(--r) rotateX(90deg) scaleY(1)}}

@media (max-width:760px){
  .services-panels .svd-row{flex-direction:column;height:auto;gap:12px}
  .services-panels .pn{flex:none;height:560px}
  .services-panels .pn .still,.services-panels .pn .nm{display:none}
  .services-panels .pn .demo{opacity:1}
  .services-panels .pn .tx{opacity:1;transform:none;pointer-events:auto;left:12px;right:12px;bottom:12px;max-width:none}
  .services-panels .pl .fit{top:34%;--s:.45}
  .services-panels .reel{top:4%;height:calc(100% - 250px)}
}
@media (prefers-reduced-motion:reduce){
  .services-panels .pn,.services-panels .still,.services-panels .demo,.services-panels .tx{transition:none}
}
/* The editor and the inserter preview: no transitions, the finished demos. */
.services-panels.is-static .pn,.services-panels.is-static .still,.services-panels.is-static .demo,.services-panels.is-static .tx{transition:none}
/* Only the open panel's words show in the editor (pick another with the editor's service tabs). Hidden with
   display:none, not a fade, so the editor does not unfold every closed panel's text on top of its photo. */
.services-panels.is-static .tx{opacity:1;transform:none;pointer-events:auto}
.services-panels.is-static .pn:not(.on) .tx{display:none}