/* ==========================================================================
   proof.css: Proof in the field, on the Smart Agriculture System page.

   The base rules are a composed, static section. Without script, with reduced
   motion, or without WebGL it reads correctly from them alone. The pinned scene
   is layered on top only when script is running and motion is welcome.
   ========================================================================== */

/* over a dark section that scrolls as ordinary page the bar keeps a dark ground,
   the same one the About page uses, so words never slide under clear links */
.nav.over-flat:not(.menu-open){background:rgba(23,29,19,.84);border-bottom-color:rgba(245,239,229,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}

/* ============================== 02 proof in the field ============================== */
.pf{position:relative;background:#0B1006;color:var(--bone);overflow:hidden}
.pf-stage{position:relative;display:grid;gap:clamp(24px,4vh,42px);
  padding:calc(var(--nav-h) + clamp(40px,8vh,90px)) var(--pad) clamp(64px,10vh,110px);
  max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto}
.pf-copy{order:1}
.pf-copy .kicker{color:var(--sand)}
.pf-copy h2{font-family:var(--display);font-weight:400;color:var(--bone);
  font-size:clamp(2.3rem,5.2vw,4.4rem);letter-spacing:-.026em;line-height:1.02;max-width:15ch}
.pf-copy p{margin-top:clamp(14px,2vh,22px);color:#CFD6BC;font-size:clamp(1rem,1.3vw,1.18rem);
  line-height:1.62;max-width:44ch}
/* without script the still stands in for the model; with script the canvas does, unless WebGL is refused */
.pf-canvas{order:2;display:none;width:100%;height:min(62vh,640px);border-radius:18px;background:#0B1006}
.pf-still{order:2;display:block;width:100%;height:auto;border-radius:18px}
.js .pf-canvas{display:block}
.js .pf-still,.js .pf.nogl .pf-canvas{display:none}
.js .pf.nogl .pf-still{display:block}
.pf-veil{display:none}
.pf-block{order:3;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,3vw,40px);border-top:1px solid rgba(245,239,229,.22);padding-top:clamp(18px,3vh,28px)}
.pf-block .r{display:flex;flex-direction:column-reverse;gap:8px;min-width:0}
.pf-block dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.pf-block dd{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,5vw,3.8rem);
  letter-spacing:-.03em;line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}
.pf-note{order:4;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;line-height:1.7;
  text-transform:uppercase;color:rgba(245,239,229,.55);max-width:52ch}
.pf-site{order:5;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#171E12}
.pf-site img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.pf-stat,.pf-lines,.pf-pick,.pf-signal,.pf-dark{display:none}

@media (prefers-reduced-motion:no-preference){
  .js .pf{height:560vh;overflow:visible}
  .js .pf-stage{position:sticky;top:0;display:block;height:100vh;height:100svh;overflow:hidden;
    isolation:isolate;padding:0;max-width:none;margin:0}
  .js .pf-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
  .js .pf-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
  /* the edges fall away into the dark, and the bar and the readouts keep a ground */
  .js .pf-veil{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(118% 92% at 52% 50%,rgba(11,16,6,0) 42%,rgba(11,16,6,.5) 76%,rgba(11,16,6,.92) 100%),
               linear-gradient(to bottom,rgba(11,16,6,.78),rgba(11,16,6,0) 24%,rgba(11,16,6,0) 72%,rgba(11,16,6,.7))}

  .js .pf-copy{position:absolute;z-index:3;left:var(--pad);top:calc(var(--nav-h) + clamp(10px,4vh,48px));
    max-width:min(600px,86vw);opacity:var(--cp,1);transform:translate3d(0,calc((1 - var(--cp,1)) * -26px),0)}
  .js .pf-copy h2{text-shadow:var(--tshadow)}
  .js .pf-copy p{text-shadow:0 1px 14px rgba(8,12,4,.85)}

  /* a drawing's title block: each figure is entered as the scene proves it */
  .js .pf-block{position:absolute;z-index:3;left:var(--pad);bottom:clamp(20px,4.5vh,48px);display:block;
    min-width:260px;padding:0;border-top:1px solid rgba(245,239,229,.28);opacity:var(--bo,1)}
  .js .pf-block .r{flex-direction:row;justify-content:space-between;align-items:baseline;gap:30px;
    padding:9px 0;border-bottom:1px solid rgba(245,239,229,.12)}
  .js .pf-block dt{color:rgba(245,239,229,.62);letter-spacing:.2em}
  .js .pf-block dd{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--bone)}
  .js .pf-block .r1{opacity:calc(.22 + .78 * var(--b1,0))}
  .js .pf-block .r2{opacity:calc(.22 + .78 * var(--b2,0))}
  .js .pf-block .r3{opacity:calc(.22 + .78 * var(--b3,0))}

  .js .pf-note{position:absolute;z-index:3;right:var(--pad);bottom:clamp(20px,4.5vh,48px);
    max-width:30ch;text-align:right;opacity:var(--nt,0)}

  /* the figures rise out of the scene, anchored to the map by home.js */
  .js .pf-stat{display:block;position:absolute;z-index:3;left:0;top:0;text-align:center;pointer-events:none;
    transform:translate3d(var(--x,50vw),var(--y,40vh),0) translate(-50%,-100%);will-change:transform,opacity}
  .pf-stat .n{font-family:var(--display);font-weight:400;line-height:.9;color:var(--bone);letter-spacing:-.045em;
    font-size:clamp(4.4rem,11vw,9.6rem);font-variant-numeric:tabular-nums;white-space:nowrap;
    text-shadow:0 10px 60px rgba(8,12,4,.95)}
  .pf-stat .n i{font-style:normal;color:var(--accent);margin-left:.03em;opacity:0;transition:opacity .4s var(--ease)}
  .pf-stat.full .n i,.pf-states .n i{opacity:1}
  .pf-stat .l{margin-top:12px;font-family:var(--mono);font-size:clamp(10.5px,1vw,12px);letter-spacing:.32em;
    text-transform:uppercase;color:var(--sand);text-shadow:0 1px 10px rgba(8,12,4,.9)}
  .js .pf-sites{opacity:var(--s1,0)}
  .js .pf-sites .n{display:inline-block;transform:translateY(calc(var(--sr,1) * 46px))}
  .js .pf-states{opacity:var(--s2,0)}
  .js .pf-lines{display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;
    pointer-events:none;overflow:visible;opacity:var(--s2,0)}
  .pf-lines line{stroke:rgba(245,239,229,.5);stroke-width:1;stroke-dasharray:3 4}
  .pf-lines circle{fill:none;stroke:var(--accent);stroke-width:1.5}

  .js .pf-pick{display:block;position:absolute;z-index:2;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;
    border-radius:50%;border:1.5px solid var(--accent);pointer-events:none;
    box-shadow:0 0 0 6px rgba(224,86,22,.14),0 0 26px rgba(224,86,22,.55);
    transform:translate3d(var(--px,-99px),var(--py,-99px),0) scale(var(--pks,1));opacity:var(--pk,0)}
  .js .pf-pick::after{content:"";position:absolute;inset:-11px;border-radius:50%;border:1px solid rgba(240,117,46,.55);
    animation:pfping 2.4s var(--ease-soft) infinite}
  @keyframes pfping{0%{transform:scale(.55);opacity:.9}100%{transform:scale(2.3);opacity:0}}

  /* the chosen point opens onto a real site */
  .js .pf-site{position:absolute;inset:0;z-index:4;aspect-ratio:auto;border-radius:0;visibility:hidden;
    clip-path:circle(var(--r,0px) at var(--cx,50%) var(--cy,50%))}
  .js .pf.ap .pf-site{visibility:visible}
  .js .pf-site img{object-position:50% 62%;transform-origin:38% 74%;will-change:transform;
    transform:scale(calc((1.5 - .5 * var(--ap,0)) * (1 + .55 * var(--dv,0)))) translateY(calc(var(--dv,0) * -13%));
    filter:brightness(calc(1 - .62 * var(--dv,0))) saturate(calc(1 - .3 * var(--dv,0)))}
  .js .pf-site::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(92% 74% at 50% 52%,rgba(11,16,6,0) 38%,rgba(11,16,6,.72) 100%)}

  /* from site to signal: down into the ground, a sensor line, one reading's pulse */
  .js .pf-signal{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:var(--sg,0)}
  .pf-signal .soil{position:absolute;inset:0;
    background:linear-gradient(to top,#0B0F06 0%,#140F0A 34%,rgba(28,20,12,.9) 54%,rgba(28,20,12,0) 78%);
    transform:translateY(calc((1 - var(--sg,0)) * 36%))}
  .pf-signal .soil::after{content:"";position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(rgba(201,169,107,.2) .7px,transparent .8px);background-size:6px 6px;
    -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 72%);mask-image:linear-gradient(to top,#000 30%,transparent 72%)}
  .pf-signal .probe{position:absolute;left:var(--sx,38%);top:44%;width:1px;height:30%;transform-origin:50% 0;
    background:linear-gradient(to bottom,rgba(245,239,229,.85),var(--accent));transform:scaleY(var(--pr,0))}
  .pf-signal .probe::after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 16px rgba(240,117,46,.9);opacity:var(--pr,0)}
  .pf-signal .ring{position:absolute;left:var(--sx,38%);top:74%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;
    border:1px solid rgba(240,117,46,.75)}
  .pf-signal .ring.r1{opacity:calc(var(--p1,0) * (1 - var(--p1,0)) * 3.4);transform:scale(calc(.15 + var(--p1,0) * 2.6))}
  .pf-signal .ring.r2{opacity:calc(var(--p2,0) * (1 - var(--p2,0)) * 3);transform:scale(calc(.15 + var(--p2,0) * 3.6))}
  .pf-signal .read{position:absolute;left:calc(var(--sx,38%) + 40px);top:57%;opacity:var(--rd,0);
    transform:translate3d(0,calc((1 - var(--rd,0)) * 12px),0)}
  .pf-signal .read .k{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
  .pf-signal .read ul{list-style:none;margin:13px 0 0;padding:0;display:flex;gap:9px}
  .pf-signal .read li{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--bone);
    border:1px solid rgba(201,169,107,.45);border-radius:999px;padding:4px 10px}
  /* the hand over: the frame goes to the drop sequence's own dark */
  .js .pf-dark{display:block;position:absolute;inset:0;z-index:6;opacity:var(--dk,0);pointer-events:none;
    background:linear-gradient(to bottom,#0B0F06 0%,#16110A 52%,#1B150B 100%)}

  .js .pf.nogl .pf-still{display:block;opacity:calc(1 - var(--ap,0))}
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px){
  .js .pf{height:460vh}
  .js .pf-copy h2{font-size:clamp(2rem,8.6vw,2.9rem)}
  .js .pf-copy p{font-size:.96rem;max-width:34ch}
  .js .pf-block{left:var(--pad);right:var(--pad);min-width:0}
  .js .pf-block dt{font-size:9.5px;letter-spacing:.16em}
  .js .pf-note{left:var(--pad);right:auto;text-align:left;bottom:calc(clamp(20px,4.5vh,48px) + 124px);
    max-width:36ch;font-size:9.5px}
  .pf-stat .n{font-size:clamp(3.8rem,19vw,5.6rem)}
  .pf-signal .read{left:var(--pad);top:auto;bottom:16vh}
  .pf-signal .read ul{flex-wrap:wrap}
}

/* a portrait screen shows the whole height of the site photograph, so the station sits near the middle */
@media (prefers-reduced-motion:no-preference) and (max-aspect-ratio:1/1){
  .js .pf-site img{object-position:12% 60%;transform-origin:54% 70%}
  .js .pf-signal{--sx:54%}
}

/* above a light section the scene hands over into the page's own ground instead of the soil */
@media (prefers-reduced-motion:no-preference){
  .js .pf[data-end="light"] .pf-dark{opacity:1;background:var(--bg);
    clip-path:inset(calc((1 - var(--dk,0)) * 100%) 0 0 0)}
}