/* =========================================================
   Ben I.T. Services – PRO-laag
   Extra animaties en functies bovenop het bestaande ontwerp.
   Wordt als laatste geladen; verandert de basisstijl niet.
   ========================================================= */

/* ---------- hero: intro ---------- */
.pw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.pw > span{ display:inline-block; will-change:transform; }
.js.pro-on .z-hero .z-h1,
.js.pro-on .z-hero .z-eyebrow,
.js.pro-on .z-hero .z-lead,
.js.pro-on .z-hero .z-cta,
.js.pro-on .z-hero .z-hero-meta,
.js.pro-on .z-hero .z-panel{ visibility:hidden; animation:pro-failsafe 0s 4s forwards; }
.pro-ready .z-hero .z-h1,
.pro-ready .z-hero .z-eyebrow,
.pro-ready .z-hero .z-lead,
.pro-ready .z-hero .z-cta,
.pro-ready .z-hero .z-hero-meta,
.pro-ready .z-hero .z-panel{ visibility:visible!important; animation:none!important; }
@keyframes pro-failsafe{ to{ visibility:visible; } }
@media (max-width:760px){
  .js.pro-on .z-hero .z-h1,.js.pro-on .z-hero .z-eyebrow,.js.pro-on .z-hero .z-lead,.js.pro-on .z-hero .z-cta,.js.pro-on .z-hero .z-hero-meta{ visibility:visible; animation:none; }
  .loader{ display:none!important; }
}

/* lichtvlek die de muis volgt */
.pro-glow{ position:absolute; z-index:-1; left:0; top:0; width:780px; height:780px; margin:-390px 0 0 -390px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent) 55%,transparent);
  opacity:0; transition:opacity .6s; filter:blur(10px); will-change:transform; }
.z-hero:hover .pro-glow{ opacity:.85; }

/* dashboard in de hero: 3D en levend */
.z-hero-grid{ perspective:1400px; }
.z-panel{ transform-style:preserve-3d; will-change:transform; position:relative; }
.z-panel::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; padding:1px;
  background:linear-gradient(var(--pro-ang,130deg),color-mix(in srgb,var(--accent-2) 80%,transparent),transparent 40%,transparent 60%,color-mix(in srgb,var(--accent) 60%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; }
.z-row{ position:relative; }
.z-row.pro-ping .z-st::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid currentColor; animation:pro-ping 1.1s ease-out forwards; }
.z-st{ position:relative; color:var(--z-ok); }
.z-st-warn{ color:var(--z-warn); }
@keyframes pro-ping{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(1.8); opacity:0; } }
.z-row .pro-typing::after{ content:"▍"; margin-left:1px; color:var(--accent-2); animation:pro-blink .8s steps(1) infinite; }
@keyframes pro-blink{ 50%{ opacity:0; } }

/* ---------- kaarten: 3D-tilt + lichtvlek ---------- */
.pro-tilt{ transform-style:preserve-3d; will-change:transform; }
.pro-spot{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 60%); }
.pro-tilt:hover .pro-spot{ opacity:1; }
.z-tt .pro-spot{ background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),#ffffff2e,transparent 60%); }
.z-svc .z-ic,.z-adv .z-ic{ transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.z-svc:hover > .z-ic,.z-svc:hover .z-svc-txt > .z-ic,.z-adv:hover .z-ic{ transform:rotate(-8deg) scale(1.15); }
.z-tt img{ transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.z-tt:hover img{ transform:scale(1.06); }

/* ---------- werkwijze: lijn die meegroeit met scrollen ---------- */
.z-steps{ position:relative; }
.pro-line{ position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:0 50%; transform:scaleX(0); z-index:1; }
.z-step > *{ transition:opacity .5s; }
.pro-steps-on .z-step > *{ opacity:.38; }
.pro-steps-on .z-step.is-on > *{ opacity:1; }
.z-step .z-step-n{ transition:color .4s,transform .5s cubic-bezier(.3,1.6,.5,1); display:inline-block; }
.z-step.is-on .z-step-n{ color:var(--accent); transform:scale(1.25); transform-origin:0 50%; }
@media (max-width:860px){ .pro-line{ display:none; } .pro-steps-on .z-step > *{ opacity:1; } }

/* ---------- portfolio ---------- */
.pro-work-head{ display:flex; justify-content:space-between; align-items:end; gap:1.5rem 2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem); }
.pro-work-head .z-head{ margin:0; text-align:left; }
.pro-filter{ display:flex; flex-wrap:wrap; gap:.45rem; }
.pro-filter button{ border:1px solid var(--line); background:var(--card); color:var(--text); padding:.55rem 1rem; border-radius:999px; font-weight:600; font-size:.92rem; transition:background .25s,color .25s,border-color .25s; }
.pro-filter button:hover{ border-color:var(--accent); }
.pro-filter button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pro-filter small{ opacity:.7; margin-left:.25rem; font-weight:500; }
.pro-cases{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; }
.pro-case{ grid-column:span 2; position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--z-shadow); }
.pro-case.is-big{ grid-column:span 3; }
.pro-case[hidden]{ display:none; }
.pro-case-art{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--z-dark); isolation:isolate; }
.pro-case.is-big .pro-case-art{ aspect-ratio:16/9; }
.pro-case-art::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 80% at 85% 0%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 70%); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.pro-case:hover .pro-case-art::before{ transform:scale(1.15) rotate(4deg); }
.pro-case-body{ padding:1.3rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.pro-case-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.pro-case-tags span{ font-size:.76rem; font-weight:650; padding:.22rem .55rem; border-radius:999px; background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent-ink,var(--accent)); }
.pro-case h3{ margin:.2rem 0 0; font-size:1.25rem; letter-spacing:-.02em; }
.pro-case p{ margin:0; color:var(--muted); font-size:.96rem; line-height:1.55; }
.pro-case-more{ margin-top:auto; padding-top:.6rem; font-weight:650; font-size:.93rem; color:var(--accent-ink,var(--accent)); display:inline-flex; align-items:center; gap:.4rem; }
.pro-case-more .z-ar{ transition:transform .3s; }
.pro-case:hover .pro-case-more .z-ar{ transform:translateX(4px); }
.pro-cases-note{ margin:1.4rem 0 0; color:var(--muted); font-size:.95rem; }
@media (max-width:980px){ .pro-cases{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pro-case,.pro-case.is-big{ grid-column:span 1; } }
@media (max-width:620px){ .pro-cases{ grid-template-columns:minmax(0,1fr); } }

/* illustraties per project (puur CSS, scherp op elk scherm) */
.art-browser{ position:absolute; left:9%; right:9%; top:14%; bottom:-6%; background:#141821; border:1px solid #ffffff1c; border-radius:12px 12px 0 0; box-shadow:0 30px 60px -20px #000c; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.pro-case:hover .art-browser{ transform:translateY(-6%); }
.art-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid #ffffff14; }
.art-bar i{ width:8px; height:8px; border-radius:50%; background:#ffffff2a; }
.art-bar b{ margin-left:10px; flex:1; max-width:60%; font:600 11px/1 var(--f); color:#ffffffa0; background:#ffffff0d; padding:6px 10px; border-radius:6px; }
.art-page{ padding:14px; display:grid; gap:9px; }
.art-h{ height:16px; width:62%; border-radius:4px; background:#fff; opacity:.9; }
.art-h.sm{ height:8px; width:40%; opacity:.4; }
.art-btn{ height:18px; width:30%; border-radius:5px; background:var(--accent); }
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; }
.art-grid i{ aspect-ratio:1; border-radius:6px; background:#ffffff12; }
.art-grid i:nth-child(2){ background:color-mix(in srgb,var(--accent-2) 55%,#141821); }
.art-shirt{ position:absolute; right:12%; bottom:10%; width:26%; aspect-ratio:1; background:#fff; clip-path:polygon(28% 0,72% 0,100% 18%,88% 38%,80% 32%,80% 100%,20% 100%,20% 32%,12% 38%,0 18%); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.art-shirt::after{ content:"K"; position:absolute; inset:0; display:grid; place-items:center; font:900 2.2rem/1 var(--f); color:var(--accent); }
.pro-case:hover .art-shirt{ transform:rotate(-8deg) scale(1.08); }
.art-score{ position:absolute; right:10%; bottom:12%; width:30%; aspect-ratio:1; border-radius:50%; background:conic-gradient(#36c486 0 86%,#ffffff1a 0); display:grid; place-items:center; box-shadow:0 20px 40px -15px #000a; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.art-score::before{ content:""; position:absolute; inset:9%; border-radius:50%; background:#141821; }
.art-score b{ position:relative; font:800 1.8rem/1 var(--f); color:#fff; }
.pro-case:hover .art-score{ transform:rotate(-10deg) scale(1.08); }
.art-dash{ position:absolute; inset:16% 10% -4%; background:#141821; border:1px solid #ffffff1c; border-radius:12px 12px 0 0; padding:14px; display:grid; grid-template-columns:28% 1fr; gap:12px; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.pro-case:hover .art-dash{ transform:translateY(-6%); }
.art-side{ display:grid; gap:8px; align-content:start; }
.art-side i{ height:9px; border-radius:3px; background:#ffffff18; } .art-side i:first-child{ background:var(--accent); }
.art-rows{ display:grid; gap:8px; align-content:start; }
.art-rows i{ height:20px; border-radius:5px; background:#ffffff0e; position:relative; }
.art-rows i::after{ content:""; position:absolute; left:8px; top:7px; width:var(--w,40%); height:6px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.art-mark{ position:absolute; inset:0; display:grid; place-items:center; }
.art-mark b{ font:900 clamp(4rem,9vw,7rem)/1 var(--f); letter-spacing:-.05em; color:#fff; transition:letter-spacing .8s cubic-bezier(.2,.8,.2,1); }
.pro-case:hover .art-mark b{ letter-spacing:.02em; }
.art-swatches{ position:absolute; left:8%; bottom:10%; display:flex; gap:6px; }
.art-swatches i{ width:22px; height:22px; border-radius:50%; border:2px solid #ffffff30; }
.art-cards{ position:absolute; right:8%; top:14%; width:34%; aspect-ratio:85/55; }
.art-cards i{ position:absolute; inset:0; border-radius:6px; background:#fff; box-shadow:0 12px 30px -10px #000c; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.art-cards i:nth-child(1){ background:var(--accent); transform:rotate(-12deg) translate(-14%,6%); }
.art-cards i:nth-child(2){ transform:rotate(6deg); }
.art-cards i:nth-child(2)::after{ content:""; position:absolute; left:12%; top:30%; width:40%; height:12%; border-radius:2px; background:#141821; box-shadow:0 14px 0 -2px #14182166; }
.pro-case:hover .art-cards i:nth-child(1){ transform:rotate(-20deg) translate(-26%,10%); }
.pro-case:hover .art-cards i:nth-child(2){ transform:rotate(12deg) translate(6%,-4%); }
.art-phone{ position:absolute; left:50%; top:12%; width:30%; aspect-ratio:9/17; margin-left:-15%; border-radius:18px; background:#141821; border:2px solid #ffffff26; padding:10px 8px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; align-content:start; box-shadow:0 30px 60px -20px #000c; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.art-phone i{ aspect-ratio:1; border-radius:3px; background:#ffffff14; }
.art-phone i:nth-child(1),.art-phone i:nth-child(5),.art-phone i:nth-child(9){ background:color-mix(in srgb,var(--accent) 70%,#141821); }
.art-phone i:nth-child(3),.art-phone i:nth-child(7){ background:color-mix(in srgb,var(--accent-2) 40%,#141821); }
.pro-case:hover .art-phone{ transform:translateY(-6%) rotate(-4deg); }
.art-heart{ position:absolute; right:22%; top:30%; width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--accent); font-size:1.3rem; box-shadow:0 10px 30px -8px #000a; animation:pro-float 3s ease-in-out infinite; }
@keyframes pro-float{ 50%{ transform:translateY(-10px); } }

/* ---------- ticker: snelheid volgt het scrollen ---------- */
.z-tick ul{ will-change:transform; }

/* ---------- pagina-overgang met logo ---------- */
.wipe{ display:grid; place-items:center; background:var(--z-dark,#0B0D12); }
.wipe::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%); }
.wipe::after{ content:""; position:relative; width:180px; height:52px; background:url(../images/benit-logo-op-donker.svg) center/contain no-repeat; }
.loader{ background:var(--z-dark,#0B0D12); }
.loader-in img{ height:64px; width:auto; }
.loader-name{ color:#fff; font-size:clamp(1.6rem,4vw,2.4rem)!important; }

/* ---------- terug naar boven, met voortgangsring ---------- */
.pro-top{ position:fixed; z-index:85; right:20px; bottom:20px; width:52px; height:52px; border-radius:50%; border:0; background:var(--card); color:var(--text); box-shadow:0 10px 30px -10px #0006,0 0 0 1px var(--line); display:grid; place-items:center; opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1); }
.pro-top.on{ opacity:1; transform:none; pointer-events:auto; }
.pro-top svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.pro-top circle{ fill:none; stroke-width:2.5; }
.pro-top .bg{ stroke:var(--line); } .pro-top .fg{ stroke:var(--accent); stroke-linecap:round; }
.pro-top b{ position:relative; font-size:1.2rem; line-height:1; }
.pro-top:hover{ color:var(--accent); }

/* ---------- mobiele actiebalk ---------- */
.pro-bar{ display:none; }
@media (max-width:760px){
  .pro-bar{ position:fixed; z-index:90; left:12px; right:12px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:5px; padding:5px; border-radius:14px; background:color-mix(in srgb,var(--z-dark,#0B0D12) 92%,transparent); backdrop-filter:blur(14px); box-shadow:0 18px 40px -12px #000a; transform:translateY(140%); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
  .pro-bar.on{ transform:none; }
  .pro-bar a{ display:flex; align-items:center; justify-content:center; gap:.35rem; min-height:42px; border-radius:10px; color:#fff; text-decoration:none; font-weight:650; font-size:.86rem; background:#ffffff12; white-space:nowrap; }
  .pro-bar a:last-child{ background:var(--accent); }
  .pro-bar svg{ width:16px; height:16px; flex:none; }
  .menu-open .pro-bar{ transform:translateY(140%); }
  .pro-top{ display:none; }   /* op gsm: de actiebalk volstaat, minder knoppen over de inhoud */
  .cc{ bottom:84px!important; }
}

/* menu is donker: dan ook het lichte logo */
.menu-open .head .logo-op-licht{ display:none!important; }
.menu-open .head .logo-op-donker{ display:block!important; }

@media (prefers-reduced-motion: reduce){
  .pro-glow,.art-heart{ display:none; animation:none; }
  .pro-tilt,.art-browser,.art-dash,.art-phone,.art-shirt,.art-score,.art-cards i,.z-tt img{ transition:none!important; }
}
.z-h1 .pw,.z-h1 .pw > span{ color:inherit; }

/* nieuw logo: iets groter in de kopbalk */
.logo-img.logo-op-licht,.logo-img.logo-op-donker{ height:52px; }
@media (max-width:480px){ .logo-img.logo-op-licht,.logo-img.logo-op-donker{ height:42px; } }
@media (max-width:760px){ .z-net{ display:none!important; } }  /* bewegend netwerk alleen op computer: scheelt rekenwerk op gsm */