/* The Polish Company — beweging en effecten (gedeeld door alle pagina's) */

/* Voortgangsbalk bovenaan */
.tpc-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--ivory))}

/* Zwevende lichtvlekken achter de bovenkant van de pagina */
.tpc-aurora{position:absolute;top:0;left:0;right:0;height:1100px;z-index:-1;pointer-events:none;overflow:hidden;animation:tpcFade 1.8s cubic-bezier(.16,1,.3,1) both}
.tpc-aurora i{position:absolute;border-radius:50%;will-change:transform}
.tpc-aurora i:nth-child(1){width:780px;height:780px;right:-200px;top:-260px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 65%);animation:tpcDrift1 22s ease-in-out infinite alternate}
.tpc-aurora i:nth-child(2){width:600px;height:600px;right:24%;top:160px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%);animation:tpcDrift2 26s ease-in-out infinite alternate}
.tpc-aurora i:nth-child(3){width:700px;height:700px;left:-280px;top:60px;background:radial-gradient(circle,color-mix(in srgb,var(--ivory) 7%,transparent),transparent 65%);animation:tpcDrift3 30s ease-in-out infinite alternate}
.tpc-aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--ivory) 14%,transparent) 1px,transparent 1.2px);background-size:28px 28px;-webkit-mask:radial-gradient(70% 55% at 70% 30%,#000,transparent 75%);mask:radial-gradient(70% 55% at 70% 30%,#000,transparent 75%)}
body{position:relative;isolation:isolate}
@keyframes tpcDrift1{to{transform:translate(-150px,130px) scale(1.12)}}
@keyframes tpcDrift2{to{transform:translate(170px,-90px) scale(.9)}}
@keyframes tpcDrift3{to{transform:translate(130px,170px) scale(1.15)}}
@keyframes tpcFade{from{opacity:0}}

/* Menubalk: verdwijnt bij naar beneden scrollen, komt terug bij omhoog scrollen */
.nav{animation:tpcNavIn .9s cubic-bezier(.16,1,.3,1) backwards;transition:background .4s,transform .55s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.nav.tpc-weg{transform:translate(-50%,-150%)}
.nav.tpc-scrolled{box-shadow:0 14px 40px -18px rgba(0,0,0,.45)}
@keyframes tpcNavIn{from{opacity:0;transform:translate(-50%,-24px)}}
.nav-logo{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.nav-brand:hover .nav-logo{transform:rotate(-10deg) scale(1.08)}

/* Magnetische knoppen */
.btn,.pill,.plate button{translate:var(--bx,0) var(--by,0);transition:translate .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s,opacity .3s}

/* Foto in de hero kantelt mee met de muis */
.js .lamp{animation:tpcFadeUp 1.4s .3s cubic-bezier(.16,1,.3,1) both;transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
@keyframes tpcFadeUp{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* Spotlicht dat de muis volgt in donkere vlakken */
.tpc-spot-host{position:relative;isolation:isolate}
.tpc-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(560px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%)}
.tpc-spot-host:hover .tpc-spot{opacity:1}

/* Foto's worden "onthuld" met een gordijn-effect */
.tpc-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.tpc-wipe img{scale:1.18;transition:scale 1.8s cubic-bezier(.16,1,.3,1)}
.tpc-wipe.tpc-in{clip-path:inset(0 0 0 0)}
.tpc-wipe.tpc-in img{scale:1}

/* Dienstenregels schuiven van links in */
.js .row.reveal:not(.in){transform:translateX(-36px)}
.row a{position:relative}
.row a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.row a:hover::before{transform:scaleX(1)}
.row a::after{content:"→";position:absolute;right:-6px;top:50%;font-family:var(--serif);font-size:30px;color:var(--accent);opacity:0;transform:translate(-20px,-50%);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
@media (min-width:961px){ .row a{padding-right:44px} .row a:hover::after{opacity:1;transform:translate(0,-50%)} }

/* Grote naam onderaan: letters schuiven één voor één omhoog */
.footer-big{overflow:hidden;padding-top:.08em}
.footer-big .tpc-l{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i)*35ms),color .6s}
.footer-big.tpc-in .tpc-l{transform:none}
.footer-big{pointer-events:auto}

/* ================= Zilver uit het logo ================= */
:root{
  --zilver:linear-gradient(90deg,rgba(140,146,152,.25),rgba(244,245,246,.7) 22%,rgba(157,163,169,.45) 48%,rgba(218,221,224,.65) 72%,rgba(140,146,152,.25));
  --zilver-vol:linear-gradient(100deg,#8c9298 0%,#f4f5f6 22%,#9da3a9 44%,#dadde0 64%,#8c9298 84%,#c6cace 100%);
  --zilver-piek:#ffffff; --zilver-mid:#c6cace;
  --zilver-naam:linear-gradient(100deg,#6c7278 0%,#f4f5f6 11%,#8c9298 24%,#e8e9ea 37%,#7e848a 50%,#f4f5f6 63%,#9da3a9 76%,#dadde0 88%,#6c7278 100%);
}
:root[data-palette="L"]{
  --zilver-naam:linear-gradient(100deg,#4d5358 0%,#b4b8bc 11%,#5e646a 24%,#a9aeb3 37%,#53595f 50%,#b4b8bc 63%,#6c7278 76%,#9da3a9 88%,#4d5358 100%);
  --zilver:linear-gradient(90deg,rgba(108,114,120,.3),rgba(126,132,138,.85) 22%,rgba(169,174,179,.6) 48%,rgba(108,114,120,.8) 72%,rgba(108,114,120,.3));
  --zilver-vol:linear-gradient(100deg,#6c7278 0%,#b4b8bc 22%,#7e848a 44%,#a9aeb3 64%,#6c7278 84%,#9da3a9 100%);
  --zilver-piek:#ffffff; --zilver-mid:#a9aeb3;
}

/* 1. Zilveren scheidingslijnen */
.index,.row,.step,.spec,.spec div,.why-list > div,.svc-list,.svc,.lines,.lines li{border-image:var(--zilver) 1}

/* 3. Poetsglans die één keer over de grote kop veegt */
.hero-title .line > span,.page-title .line > span{
  display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(110deg,var(--ivory) 0 42%,var(--zilver-mid) 46%,var(--zilver-piek) 50%,var(--zilver-mid) 54%,var(--ivory) 58% 100%);
  background-size:300% 100%;background-position:100% 0;
  animation:rise 1.4s cubic-bezier(.16,1,.3,1) forwards,tpcPoets 1.9s cubic-bezier(.55,0,.25,1) 1.3s forwards}
.hero-title .line:nth-child(2) > span,.page-title .line:nth-child(2) > span{animation-delay:.12s,1.45s}
.hero-title .line:nth-child(3) > span{animation-delay:.24s,1.6s}
.hero-title em,.page-title em{color:transparent}
@keyframes tpcPoets{to{background-position:0 0}}

/* 4. Grote naam onderaan in geborsteld zilver, met licht dat de muis volgt */
@property --la{syntax:'<number>';inherits:true;initial-value:0}
.footer-big{transition:--la .6s}
.footer-big:hover{--la:.95}
/* Het verloop ligt over de hele naam (--bw breed); elke letter toont zijn eigen stukje (--ox) */
.footer-big .tpc-l{color:transparent;-webkit-text-stroke:0;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
  background-image:radial-gradient(360px circle at calc(var(--mx,-9999px) - var(--ox,0px)) var(--my,50%),rgba(255,255,255,var(--la)),transparent 60%),var(--zilver-naam);
  background-size:100% 100%,var(--bw,100%) 100%;background-position:0 0,calc(var(--ox,0px) * -1) 0}

/* Naar-boven-knop met voortgangsring */
.tpc-top{position:fixed;right:20px;bottom:20px;z-index:46;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--bg-2);cursor:pointer;box-shadow:0 14px 30px -10px rgba(0,0,0,.55),inset 0 0 0 1px var(--line);opacity:0;transform:translateY(24px) scale(.7);pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tpc-top.tpc-toon{opacity:1;transform:none;pointer-events:auto}
.tpc-top svg{width:100%;height:100%;display:block}
.tpc-top .bg{fill:none;stroke:var(--line);stroke-width:2}
.tpc-top .ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:calc(150.8 * (1 - var(--p,0)));transform:rotate(-90deg);transform-origin:26px 26px}
.tpc-top .pijl{fill:none;stroke:var(--ivory);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tpc-top:hover .pijl{transform:translateY(-3px)}
@media (max-width:640px){ .tpc-top{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:14px;width:48px;height:48px} }

/* Cursor-volger (alleen met muis) */
.tpc-cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);display:flex;align-items:center;justify-content:center;opacity:0;transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),margin .45s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s,opacity .3s}
.tpc-cursor span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#0e110f;opacity:0;transition:opacity .25s}
.tpc-cursor.tpc-zichtbaar{opacity:1}
.tpc-cursor.tpc-link{width:58px;height:58px;margin:-29px 0 0 -29px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tpc-cursor.tpc-bekijk{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--accent);border-color:var(--accent)}
.tpc-cursor.tpc-bekijk span{opacity:1}
.tpc-cursor.tpc-weg{opacity:0}

/* Getal in het afspraakoverzicht "tikt" bij een wijziging */
.tpc-tik{animation:tpcTik .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes tpcTik{40%{transform:scale(1.08)}}
.total .amt{display:inline-block;transform-origin:100% 60%}

@media (prefers-reduced-motion:reduce){
  .tpc-aurora i,.nav{animation:none!important}
  .tpc-wipe{clip-path:none!important}
  .tpc-wipe img{scale:1!important}
  .footer-big .tpc-l{transform:none!important}
  .tpc-cursor{display:none}
}