/* ===== MATO WOW LAYER — gedeelde high-tech effecten ===== */

/* Scroll progress bar */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--purple),var(--orange));
  box-shadow:0 0 12px rgba(245,133,21,.5);transition:width .08s linear}

/* Cinematic blur-reveal upgrade */
.reveal{filter:blur(10px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{filter:blur(0)}

/* Shine sweep on primary buttons */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::before{left:120%}

/* 3D tilt (desktop only) */
@media (hover:hover) and (pointer:fine){
  .rev-card,.why-col,.prin-card,.plan,.case-card,.choice-card,.c-item,.photo-frame,.c-form-card{
    transform:perspective(900px) translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    will-change:transform;
  }
  .rev-card:hover,.prin-card:hover,.why-col:hover{--lift:-8px}
  .plan:hover,.case-card:hover,.choice-card:hover{--lift:-10px}
  .photo-frame:hover{--lift:-8px}
  .c-item:hover{--lift:-2px}
}