/* ── pop ──────────────────────────────────────────────────── */
/* The detail panel the service cards and the team profiles open into
   (js/pop.js). A native <dialog>, dressed as one of the site's own cards lifted
   off the page: charcoal ground, the orange corner brackets the cards strike on
   hover held at full size, and the page behind dimmed rather than gone. It grows
   out of the clicked card by a clip, so its own box is always its final box. */
.pop{
  /* How long the acquisition line takes to cross the panel. This is the one
     dial for a whole step: the script reads it and derives the cut and the
     cleanup from it, so the CSS and the timers cannot drift apart. */
  --pop-scan:1.6s;
  position:fixed; inset:0; margin:auto; padding:0; border:0;
  width:min(1240px, calc(100vw - 2 * var(--shell))); max-width:none;
  max-height:calc(100dvh - 48px);
  background:var(--surface); color:var(--txt);
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.pop[open]{ display:flex; flex-direction:column; }
.pop::backdrop{
  background:rgba(12,16,19,.8);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:pop-dim .35s ease both;
}
.pop.is-closing::backdrop{ animation:pop-undim .45s ease both; }
@keyframes pop-dim{ from{ opacity:0; } }
@keyframes pop-undim{ to{ opacity:0; } }
.pop::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:var(--brk-tl) left top / 40px 40px no-repeat,
             var(--brk-br) right bottom / 40px 40px no-repeat;
}
/* the page holds still behind it */
html:has(.pop[open]){ overflow:hidden; }

.pop-main{ position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; }
.pop-scroll{ position:relative; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; }
/* flex rather than min-height:100% all the way down — a percentage of a
   min-height never resolves, so the copy would not fill a tall panel */
.pop-body{ flex:1 0 auto; display:flex; flex-direction:column; transition:opacity .45s ease; }
.pop-body > *{ flex:1 0 auto; }
.pop-side{ flex:none; transition:opacity .45s ease; }
.pop[data-swap] :is(.pop-body,.pop-side){ opacity:0; transition:opacity .3s ease .1s; }

/* the card that is "out" leaves its slot empty until the panel shrinks back in */
.is-out > *{ opacity:0; }

/* phones: the whole screen, which is what a long profile needs there anyway */
@media (max-width:720px){
  .pop{ width:100vw; height:100dvh; max-height:none; box-shadow:none; }
}

/* ── stepping ──────────────────────────────────────────────
   The panel holds still and only what is inside it changes: the copy
   cross-fades in place while an acquisition line scans the panel and the new
   scene resolves behind it. The idiom is the survey gear the services describe —
   GPR, geolistrik ERT — rather than a slide, and the profiles step the same way. */
.pop-sweep{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; opacity:0; }
.pop[data-sweep] .pop-sweep{ opacity:1; }
.pop[data-sweep="-1"] .pop-sweep{ transform:scaleX(-1); }   /* same scan, mirrored */
.pop-sweep > i{
  position:absolute; top:0; bottom:0; left:0; width:34%;
  transform:translateX(-102%);
  border-right:2px solid var(--orange-br);
  background:linear-gradient(90deg,
    rgba(248,104,0,0) 0%, rgba(248,104,0,.035) 58%,
    rgba(248,104,0,.14) 93%, rgba(248,104,0,.02) 100%);
  box-shadow:0 0 30px 6px rgba(248,104,0,.22);
}
/* linear on purpose: an instrument sweeping at a steady rate. The line is 34%
   of the panel wide, so these two stops put it just off the left edge and just
   past the right one — the whole duration is spent crossing something visible. */
.pop[data-sweep] .pop-sweep > i{ animation:pop-scan var(--pop-scan) linear; }
@keyframes pop-scan{
  from{ transform:translateX(-110%); }
  to  { transform:translateX(212%); }
}
@media (prefers-reduced-motion: reduce){ .pop-sweep{ display:none; } }