/* ==========================================================
   PROJECTEN — cinematic scroll-intro "Signaal gevonden"
   Hoort bij assets/projecten-intro.js. Gebruikt uitsluitend
   bestaande Signaalveld-tokens uit style.css.
   ========================================================== */

.pintro{position:relative;background:var(--pine)}
.pintro-sticky{position:relative;height:100vh;height:100svh;overflow:hidden}

/* media-laag */
.pintro-media{position:absolute;inset:0}
.pintro-poster,.pintro-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%}
.pintro-canvas{display:none}
.pintro-shade{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(14,32,24,0) 0%, rgba(14,32,24,.55) 100%),
    linear-gradient(to bottom, rgba(14,32,24,.38) 0%, rgba(14,32,24,0) 24%, rgba(14,32,24,0) 70%, rgba(14,32,24,.72) 92%, #0E2018 100%)}
.pintro-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
.pintro-exit{position:absolute;inset:0;background:var(--pine);opacity:0;pointer-events:none}

/* tekstlagen */
.pintro-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}
.pintro-stage{position:absolute;left:0;right:0;padding:0 var(--gut);will-change:opacity,transform,filter}
.pintro-label{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:20px;text-shadow:0 1px 14px rgba(14,32,24,.7)}
.pintro-h{font-family:var(--disp);font-weight:800;line-height:1.02;letter-spacing:-.02em;font-size:clamp(40px,6.6vw,92px);color:var(--bone);text-shadow:0 2px 34px rgba(14,32,24,.6)}
.pintro-h em{font-style:normal;color:var(--signal)}
.pintro-b .pintro-h,.pintro-sub{will-change:opacity,transform,filter}
.pintro-sub{max-width:52ch;margin:24px auto 0;font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:rgba(242,239,230,.82);text-shadow:0 1px 12px rgba(14,32,24,.65)}

/* scanlijn onder "Signaal zoeken" — echo van de homepage-preloader */
.pintro-scan{width:min(340px,52vw);height:2px;margin:26px auto 0;background:rgba(242,239,230,.14);position:relative;overflow:hidden;border-radius:2px}
.pintro-scan i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--signal);box-shadow:0 0 12px var(--signal);border-radius:2px}

/* glow-beat op "gevonden" zodra de tekst staat */
.pintro-b.is-found .pintro-h em{animation:pintroFound 1.1s cubic-bezier(.22,1,.36,1) 1}
@keyframes pintroFound{
  0%{text-shadow:0 0 0 rgba(67,224,138,0)}
  28%{text-shadow:0 0 42px rgba(67,224,138,.85),0 0 90px rgba(67,224,138,.35)}
  100%{text-shadow:0 0 18px rgba(67,224,138,.25)}
}

/* voortgangslijn onderin het beeld */
.pintro-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(242,239,230,.08)}
.pintro-line i{display:block;height:100%;width:0%;background:var(--signal);box-shadow:0 0 10px rgba(67,224,138,.6)}

/* scrollhint */
.pintro-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,239,230,.6);will-change:opacity;display:flex;flex-direction:column;align-items:center;gap:8px}
.pintro-hint svg{width:14px;height:14px;stroke:var(--signal);stroke-width:2;fill:none;animation:pintroChev 1.6s ease-in-out infinite}
@keyframes pintroChev{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(6px);opacity:.4}}

/* zoek-puntjes ("Signaal zoeken...") */
.pintro-dots span{display:inline-block;animation:pintroDot 1.3s infinite}
.pintro-dots span:nth-child(2){animation-delay:.22s}
.pintro-dots span:nth-child(3){animation-delay:.44s}
@keyframes pintroDot{0%,60%,100%{opacity:.15}30%{opacity:1}}

/* ---- STANDAARD (geen JS / reduced motion): statisch eindbeeld ---- */
.pintro-a{display:none}
.pintro-b{opacity:1}
.pintro-hint,.pintro-line{display:none}

/* ---- MET JS (html.pintro-anim): scroll-scrub actief ---- */
html.pintro-anim .pintro{height:250vh}
html.pintro-anim .pintro-sticky{position:sticky;top:0}
html.pintro-anim .pintro-canvas{display:block}
html.pintro-anim .pintro-a{display:block;opacity:1}
html.pintro-anim .pintro-b{opacity:0}
html.pintro-anim .pintro-b .pintro-h{opacity:0;transform:translateY(34px) scale(.97);filter:blur(10px)}
html.pintro-anim .pintro-b .pintro-sub{opacity:0;transform:translateY(26px)}
html.pintro-anim .pintro-hint{display:flex}
html.pintro-anim .pintro-line{display:block}

@media(max-width:767px){
  html.pintro-anim .pintro{height:185vh}
  .pintro-h{font-size:clamp(36px,10.5vw,52px)}
  .pintro-sub{font-size:15px;max-width:34ch}
  .pintro-scan{margin-top:20px}
}

/* reduced motion wint altijd, ook als de klasse er per ongeluk staat */
@media (prefers-reduced-motion:reduce){
  html.pintro-anim .pintro{height:auto}
  html.pintro-anim .pintro-sticky{position:relative}
  html.pintro-anim .pintro-canvas,html.pintro-anim .pintro-a,html.pintro-anim .pintro-hint,html.pintro-anim .pintro-line{display:none}
  html.pintro-anim .pintro-b{opacity:1!important}
  html.pintro-anim .pintro-b .pintro-h,html.pintro-anim .pintro-b .pintro-sub{opacity:1!important;transform:none!important;filter:none!important}
  .pintro-dots span,.pintro-hint svg{animation:none}
}

/* ==========================================================
   CASE-VELD — glaskaarten over het bos + popups
   ========================================================== */
.pfield{position:relative;background:var(--pine)}
.pfield-bg{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;z-index:0}
.pfield-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.pfield-bg .pintro-shade{background:radial-gradient(ellipse at 50% 45%, rgba(14,32,24,.18) 0%, rgba(14,32,24,.62) 100%),linear-gradient(to bottom, #0E2018 0%, rgba(14,32,24,0) 14%, rgba(14,32,24,.25) 100%)}
.pfield-inner{position:relative;z-index:2;max-width:1060px;margin:0 auto;padding:0 var(--gut) 16vh;display:flex;flex-direction:column}
.pfield-hud{position:sticky;top:92px;z-index:5;margin-left:auto;width:max-content;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,239,230,.55);pointer-events:none}
.pfield-hud b{color:var(--signal);font-weight:500}

/* kop van het veld (voormalige page-hero) */
.pfield-head{padding:14vh 0 4vh;max-width:760px}
.pfield-head .crumb{margin-bottom:22px}
.pfield-head h1{font-size:clamp(40px,6.2vw,84px);max-width:16ch;color:var(--bone)}
.pfield-head .hero-sub{max-width:56ch;color:rgba(242,239,230,.8);margin-top:22px;line-height:1.65}

/* glaskaart */
.pcard{position:relative;margin:11vh 0;padding:clamp(26px,4vw,48px) clamp(24px,4.5vw,56px);border:1px solid rgba(242,239,230,.13);border-radius:8px;background:linear-gradient(160deg, rgba(20,41,28,.58), rgba(14,32,24,.72));-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);box-shadow:0 30px 80px rgba(0,0,0,.35);max-width:880px}
.pcard-num{position:absolute;top:18px;right:26px;font-family:var(--disp);font-weight:800;font-size:clamp(64px,8vw,112px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,239,230,.16);pointer-events:none}
.pcard-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);border:1px solid rgba(242,239,230,.25);border-radius:999px;padding:6px 14px;margin-bottom:20px}
.pcard-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.pcard-chip.is-wait{color:var(--amber);border-color:rgba(232,163,61,.4)}
.pcard-chip.is-wait::before{background:var(--amber);box-shadow:0 0 10px rgba(232,163,61,.7)}
.pcard-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,230,.5);display:block;margin-bottom:12px}
.pcard h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em;line-height:1.05;color:var(--bone);max-width:15ch}
.pcard-teaser{margin-top:14px;max-width:52ch;font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:rgba(242,239,230,.78)}
.pcard-rows{margin-top:26px;border-top:1px solid rgba(242,239,230,.14)}
.pcard-rows>div{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(242,239,230,.14)}
.pcard-rows dt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,230,.5)}
.pcard-rows dd{font-size:clamp(15px,1.25vw,17px);color:var(--bone);line-height:1.5}
.pcard-cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);padding:4px 0;position:relative}
.pcard-cta::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--signal);box-shadow:0 0 10px rgba(67,224,138,.5);transform:scaleX(1);transform-origin:left;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.pcard-cta:hover::after{transform:scaleX(.4)}
.pcard-cta i{font-style:normal;color:var(--signal)}
.pcard-pending{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(242,239,230,.55)}

/* kaart-reveal (alleen met JS en zonder reduced motion) */
html.case-js .pcard{opacity:0;transform:translateY(34px)}
html.case-js .pcard.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
html.case-js .pfield-head{opacity:0;transform:translateY(26px)}
html.case-js .pfield-head.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}

/* ---- POPUP: zonder JS een gewone lichte sectie, met JS een overlay ---- */
.pmodal-close{display:none}
.pmodal .rv{opacity:1!important;transform:none!important}
html.case-js .pmodal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:clamp(10px,3vh,40px) clamp(10px,3vw,40px);background:rgba(10,22,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.case-js .pmodal.open{display:flex}
html.case-js .pmodal-panel{position:relative;width:min(1060px,100%);max-height:100%;overflow:auto;border-radius:10px;background:var(--bone);box-shadow:0 40px 120px rgba(0,0,0,.5);overscroll-behavior:contain}
html.case-js .pmodal-panel .sec-light{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)}
html.case-js .pmodal-close{display:flex;position:sticky;top:14px;margin:14px 14px -50px auto;z-index:10;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-light);background:var(--bone);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;font-size:20px;line-height:1}
html.case-js .pmodal-close:hover{background:var(--ink);color:var(--bone)}
body.pmodal-open{overflow:hidden}

@media(max-width:767px){
  .pfield-head{padding-top:16vh}
  .pcard{margin:9vh 0;border-radius:6px}
  .pcard-num{font-size:56px;top:14px;right:16px}
  .pcard-rows>div{grid-template-columns:1fr;gap:4px;padding:13px 0}
  .pfield-hud{top:76px}
}

@media (prefers-reduced-motion:reduce){
  html.case-js .pcard,html.case-js .pfield-head{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================
   POPUP IN DONKER GLAS — zelfde beeldtaal als de kaarten
   (alleen actief mét JS; zonder JS blijven het lichte secties)
   ========================================================== */
html.case-js .pmodal{background:rgba(8,18,13,.55)}
html.case-js .pmodal-panel{background:linear-gradient(165deg, rgba(19,38,27,.82), rgba(11,24,17,.92));-webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1);border:1px solid rgba(242,239,230,.14);box-shadow:0 40px 120px rgba(0,0,0,.55)}
html.case-js .pmodal-panel .sec-light{background:transparent;color:var(--bone)}
html.case-js .pmodal-close{background:rgba(19,38,27,.85);color:var(--bone);border:1px solid rgba(242,239,230,.25)}
html.case-js .pmodal-close:hover{background:var(--signal);color:var(--pine);border-color:var(--signal)}

/* artikel-omhulsel: van witte kaart naar glas */
html.case-js .pmodal .proj{background:transparent;border:1px solid rgba(242,239,230,.1)}
html.case-js .pmodal .proj:hover{transform:none;box-shadow:none;border-color:rgba(242,239,230,.16)}
html.case-js .pmodal .projects-wrap{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(28px,4vw,52px)}

/* typografie naar bone/signal */
html.case-js .pmodal .proj-content h3{color:var(--bone)}
html.case-js .pmodal .proj-tag{color:var(--signal);opacity:.85}
html.case-js .pmodal .proj-label{color:var(--signal)}
html.case-js .pmodal .proj-block p,
html.case-js .pmodal .proj-body{color:rgba(242,239,230,.8);opacity:1}
html.case-js .pmodal .proj-work li,
html.case-js .pmodal .proj-result li{color:rgba(242,239,230,.82);opacity:1}
html.case-js .pmodal .proj-work li::before,
html.case-js .pmodal .proj-result li::before{color:var(--signal)}
html.case-js .pmodal .proj-points li{color:rgba(242,239,230,.72);border-color:rgba(242,239,230,.18);opacity:1}
html.case-js .pmodal .proj-rich .proj-points{border-top-color:rgba(242,239,230,.14)}
html.case-js .pmodal .proj-note{color:rgba(242,239,230,.8);opacity:1;border-left-color:var(--signal)}
html.case-js .pmodal .proj-client{color:rgba(242,239,230,.65)}
html.case-js .pmodal .proj-clientrow .proj-client a{color:var(--signal)}
html.case-js .pmodal .proj-clientrow .proj-client a:hover{border-bottom-color:var(--signal)}
html.case-js .pmodal .proj-fig{border-color:rgba(242,239,230,.14)}

/* logo's leesbaar houden op donker glas:
   donkere logo's krijgen een bone-chip; witte logo's houden hun zwarte chip */
html.case-js .pmodal .proj-logo:not(.proj-logo-chip){background:var(--bone);border-radius:8px;padding:10px 16px;max-height:60px;box-sizing:content-box}

/* ---- fysio-sfeerfoto's in de popup ---- */
.proj-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.proj-fig-wide{max-width:none}
.proj-fig-wide img{aspect-ratio:16/10;object-fit:cover;width:100%}
@media(max-width:680px){.proj-gallery{grid-template-columns:1fr}}

/* ---- Rons AI Automatisering: glazen tegels in het veld ---- */
.ptools{margin-top:14vh;padding-top:9vh;border-top:1px solid rgba(242,239,230,.14)}
.ptools-h{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.6vw,50px);letter-spacing:-.02em;line-height:1.06;color:var(--bone);max-width:16ch}
.ptools-sub{margin-top:16px;max-width:58ch;font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:rgba(242,239,230,.75)}
.ptools-sub a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(67,224,138,.4)}
.ptools-sub a:hover{border-bottom-color:var(--signal)}
.ptools-grid{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ptool{display:block;padding:26px 28px;border:1px solid rgba(242,239,230,.12);border-radius:8px;background:linear-gradient(160deg, rgba(20,41,28,.5), rgba(14,32,24,.66));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s}
.ptool:hover{border-color:rgba(67,224,138,.45);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.ptool-chip{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(232,163,61,.35);border-radius:999px;padding:5px 11px;display:inline-block;margin-bottom:14px}
.ptool h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.01em;color:var(--bone);margin-bottom:8px}
.ptool p{font-size:14.5px;line-height:1.6;color:rgba(242,239,230,.72);margin-bottom:16px}
.ptool-link{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
@media(max-width:767px){.ptools-grid{grid-template-columns:1fr}.ptools{margin-top:9vh;padding-top:7vh}}

/* ---- meetfiguur (proj-fig) op donker glas: ruimer en zichtbaar ---- */
html.case-js .pmodal .proj-block-fig{grid-template-columns:1fr 240px}
@media(max-width:680px){html.case-js .pmodal .proj-block-fig{grid-template-columns:1fr}}
html.case-js .pmodal .proj-fig{max-width:240px;background:rgba(242,239,230,.06);border:1px solid rgba(242,239,230,.2);border-radius:10px;padding:8px}
html.case-js .pmodal .proj-fig img{background:transparent;border-radius:6px}
html.case-js .pmodal .proj-fig figcaption{background:transparent;color:rgba(242,239,230,.68);padding:9px 4px 2px}
html.case-js .pmodal .proj-fig-wide{max-width:none}