/* ============================================================
   SWOP CANVAS — EFFECTLAAG
   Alle effecten als losse klassen (swop-fx-*).
   Puur CSS waar mogelijk, met @supports-fallback en respect
   voor prefers-reduced-motion. Kleuren via theme-tokens, dus
   elk effect werkt bij elk palet.
   ============================================================ */

/* ------------------------------------------------------------
   1. INSTELBARE GLOED
   Variabelen: --fx-glow-x/y (positie), --fx-glow-size,
   --fx-glow-strength (0-1), --fx-glow-color, --fx-glow-blur.
   Gebruik: class="swop-fx-glow" style="--fx-glow-x:20%"
   ------------------------------------------------------------ */
.swop-fx-glow{position:relative;isolation:isolate;overflow:hidden}
.swop-fx-glow::before{
  content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none;
  background:radial-gradient(
    circle at var(--fx-glow-x,32%) var(--fx-glow-y,40%),
    color-mix(in srgb, var(--fx-glow-color, #7EB6FF) calc(var(--fx-glow-strength,.55) * 100%), transparent) 0%,
    color-mix(in srgb, var(--fx-glow-color, #7EB6FF) calc(var(--fx-glow-strength,.55) * 62%), transparent) 14%,
    color-mix(in srgb, var(--fx-glow-color, #7EB6FF) calc(var(--fx-glow-strength,.55) * 36%), transparent) 26%,
    color-mix(in srgb, var(--fx-glow-color, #7EB6FF) calc(var(--fx-glow-strength,.55) * 18%), transparent) 38%,
    color-mix(in srgb, var(--fx-glow-color, #7EB6FF) calc(var(--fx-glow-strength,.55) * 8%), transparent) 50%,
    transparent var(--fx-glow-size,66%));
  filter:blur(var(--fx-glow-blur,22px));
}
.swop-fx-glow>*{position:relative;z-index:1}
/* Tweede, tegenoverliggende gloed in accentkleur */
.swop-fx-glow--dual::after{
  content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at var(--fx-glow2-x,70%) var(--fx-glow2-y,74%),
    color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent) 22%,
    transparent 58%);
  filter:blur(30px);
}
/* Diagonaal invallend licht */
.swop-fx-glow--diagonal::before{
  background:radial-gradient(ellipse 62% 78% at var(--fx-glow-x,18%) var(--fx-glow-y,8%),
    color-mix(in srgb, var(--fx-glow-color,#96C8FF) 42%, transparent) 0%,
    color-mix(in srgb, var(--fx-glow-color,#96C8FF) 26%, transparent) 18%,
    color-mix(in srgb, var(--fx-glow-color,#96C8FF) 15%, transparent) 32%,
    color-mix(in srgb, var(--fx-glow-color,#96C8FF) 7%, transparent) 46%,
    transparent 68%);
  filter:blur(26px);
}
.swop-fx-glow--soft{--fx-glow-strength:.32;--fx-glow-blur:34px}
.swop-fx-glow--strong{--fx-glow-strength:.85;--fx-glow-blur:16px}

/* ------------------------------------------------------------
   2. OPPERVLAK
   ------------------------------------------------------------ */
.swop-fx-noise{position:relative;isolation:isolate}
.swop-fx-noise::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:var(--fx-noise-opacity,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.swop-fx-noise>*{position:relative;z-index:1}

.swop-fx-glass{
  background:color-mix(in srgb, #fff 16%, transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid color-mix(in srgb, #fff 40%, transparent);
  border-radius:var(--wp--custom--radius--md,12px);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
.swop-fx-glass--dark{
  background:color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent);
  border-color:color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

.swop-fx-pattern-dots{background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:var(--fx-pattern-size,22px) var(--fx-pattern-size,22px);}
.swop-fx-pattern-grid{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:var(--fx-pattern-size,44px) var(--fx-pattern-size,44px);}
.swop-fx-pattern-stripes{background-image:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--wp--preset--color--accent) 30%,transparent) 0 2px,transparent 2px 11px);}
.swop-fx-pattern-dots,.swop-fx-pattern-grid{--fx-pattern-opacity:.08}
.swop-fx-pattern-dots>*,.swop-fx-pattern-grid>*,.swop-fx-pattern-stripes>*{position:relative}

/* ------------------------------------------------------------
   3. TEKST
   ------------------------------------------------------------ */
.swop-fx-gradient-text{
  background:linear-gradient(92deg,
    var(--fx-grad-from, var(--wp--preset--color--primary)) 0%,
    var(--fx-grad-via, var(--wp--preset--color--accent)) 48%,
    var(--fx-grad-to, var(--wp--preset--color--secondary)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.swop-fx-mark{position:relative;display:inline-block;padding:0 4px;z-index:0}
.swop-fx-mark::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:1px;
  height:var(--fx-mark-height,.42em);
  background:color-mix(in srgb, var(--wp--preset--color--accent) 85%, transparent);
  z-index:-1;transform:rotate(var(--fx-mark-tilt,-1.2deg));border-radius:3px;
}
.swop-fx-balance{text-wrap:balance}
.swop-fx-outline-text{
  -webkit-text-stroke:1.5px var(--wp--preset--color--accent);
  color:transparent;
}

/* ------------------------------------------------------------
   4. BEELD
   ------------------------------------------------------------ */
.swop-fx-duotone{position:relative;overflow:hidden;isolation:isolate}
.swop-fx-duotone img{filter:grayscale(1) contrast(1.15)}
.swop-fx-duotone::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg, var(--wp--preset--color--secondary), var(--wp--preset--color--primary));
  mix-blend-mode:color;opacity:var(--fx-duotone-strength,.92);
}
.swop-fx-duotone::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 35% 40%, var(--wp--preset--color--accent), transparent 62%);
  mix-blend-mode:overlay;opacity:.55;
}
.swop-fx-fade-edge{-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
.swop-fx-fade-edges{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.swop-fx-zoom-hover{overflow:hidden}
.swop-fx-zoom-hover img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.swop-fx-zoom-hover:hover img{transform:scale(1.06)}

/* ------------------------------------------------------------
   5. INTERACTIE
   ------------------------------------------------------------ */
.swop-fx-lift{transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s}
.swop-fx-lift:hover{transform:translateY(-5px);box-shadow:0 14px 32px color-mix(in srgb,var(--wp--preset--color--secondary) 18%,transparent)}
.swop-fx-tilt{transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;transform-style:preserve-3d}
.swop-fx-tilt:hover{transform:perspective(700px) rotateX(6deg) rotateY(-7deg) translateY(-6px);box-shadow:-14px 20px 44px color-mix(in srgb,var(--wp--preset--color--secondary) 22%,transparent)}
.swop-fx-spotlight{position:relative;overflow:hidden;isolation:isolate}
.swop-fx-spotlight::after{
  content:"";position:absolute;width:min(60%,340px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--wp--preset--color--accent) 50%,transparent), transparent 66%);
  top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.2,.8,.3,1);
  z-index:0;pointer-events:none;
}
.swop-fx-spotlight:hover::after{transform:translate(-50%,-50%) scale(1)}
.swop-fx-spotlight>*{position:relative;z-index:1}
.swop-fx-shine{position:relative;overflow:hidden}
.swop-fx-shine::after{
  content:"";position:absolute;top:0;left:-130%;width:70%;height:100%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 80%,transparent),transparent);
  animation:swop-shine 2.8s ease-in-out infinite;pointer-events:none;
}
@keyframes swop-shine{0%,55%{left:-130%}100%{left:170%}}
.swop-fx-glow-border{padding:2px;border-radius:14px;background:conic-gradient(from 0deg,var(--wp--preset--color--accent),var(--wp--preset--color--primary),var(--wp--preset--color--secondary),var(--wp--preset--color--accent));box-shadow:0 0 28px color-mix(in srgb,var(--wp--preset--color--accent) 40%,transparent)}
.swop-fx-glow-border>*{background:var(--wp--preset--color--surface);border-radius:12px}
.swop-fx-underline{position:relative;text-decoration:none}
.swop-fx-underline::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--wp--preset--color--accent);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.swop-fx-underline:hover::after{width:100%}

/* ------------------------------------------------------------
   6. RANDEN
   ------------------------------------------------------------ */
.swop-fx-corners{position:relative}
.swop-fx-corners::before,.swop-fx-corners::after{content:"";position:absolute;width:18px;height:18px;border-color:var(--wp--preset--color--accent);border-style:solid;pointer-events:none}
.swop-fx-corners::before{top:0;left:0;border-width:2px 0 0 2px}
.swop-fx-corners::after{bottom:0;right:0;border-width:0 2px 2px 0}
.swop-fx-offset-frame{position:relative;isolation:isolate}
.swop-fx-offset-frame::after{content:"";position:absolute;inset:8px -8px -8px 8px;border:1px solid var(--wp--preset--color--accent);z-index:-1;border-radius:inherit}
.swop-fx-double-line{border-top:1px solid var(--wp--preset--color--secondary);border-bottom:3px double var(--wp--preset--color--accent)}
.swop-fx-shadow-layered{box-shadow:0 1px 2px color-mix(in srgb,var(--wp--preset--color--secondary) 10%,transparent),0 6px 14px color-mix(in srgb,var(--wp--preset--color--secondary) 8%,transparent),0 16px 36px color-mix(in srgb,var(--wp--preset--color--secondary) 6%,transparent)}

/* ------------------------------------------------------------
   7. SCROLL-EFFECTEN (scroll-driven animations)
   Volledig CSS. Fallback: content is gewoon zichtbaar.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .swop-fx-reveal{animation:swop-reveal linear both;animation-timeline:view();animation-range:entry 5% cover 32%}
    @keyframes swop-reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

    .swop-fx-slide-left{animation:swop-slide-l linear both;animation-timeline:view();animation-range:entry 5% cover 34%}
    @keyframes swop-slide-l{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}

    .swop-fx-slide-right{animation:swop-slide-r linear both;animation-timeline:view();animation-range:entry 5% cover 34%}
    @keyframes swop-slide-r{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}

    .swop-fx-zoom-in{animation:swop-zoom linear both;animation-timeline:view();animation-range:entry 5% cover 36%}
    @keyframes swop-zoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

    /* Stagger: kinderen komen na elkaar */
    .swop-fx-stagger>*{animation:swop-reveal linear both;animation-timeline:view();animation-range:entry 2% cover 30%}

    /* Parallax in drie sterktes */
    .swop-fx-parallax>img,.swop-fx-parallax>.swop-parallax-layer{animation:swop-plx linear both;animation-timeline:view();animation-range:cover;will-change:transform}
    @keyframes swop-plx{from{transform:translateY(calc(var(--fx-plx,12%) * -1)) scale(calc(1 + var(--fx-plx-scale,.16)))}to{transform:translateY(var(--fx-plx,12%)) scale(calc(1 + var(--fx-plx-scale,.16)))}}
    .swop-fx-parallax--subtle{--fx-plx:6%;--fx-plx-scale:.1}
    .swop-fx-parallax--strong{--fx-plx:20%;--fx-plx-scale:.26}

    /* Tekst kleurt in tijdens scroll */
    .swop-fx-text-fill{color:color-mix(in srgb,currentColor 22%,transparent)}
    .swop-fx-text-fill>span,.swop-fx-text-fill{background:linear-gradient(90deg,var(--wp--preset--color--text) 50%,color-mix(in srgb,var(--wp--preset--color--text) 20%,transparent) 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:swop-textfill linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
    @keyframes swop-textfill{from{background-position:100% 0}to{background-position:0 0}}

    /* Voortgangsbalk bovenaan de pagina */
    .swop-fx-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--wp--preset--color--accent);transform-origin:0 50%;z-index:100;animation:swop-progress linear;animation-timeline:scroll(root)}
    @keyframes swop-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* Gordijn: beeld opent van binnen naar buiten */
    .swop-fx-curtain{clip-path:inset(0 50% 0 50% round 10px);animation:swop-curtain linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    @keyframes swop-curtain{to{clip-path:inset(0 0 0 0 round 10px)}}

    /* Sticky hero die krimpt */
    .swop-fx-sticky-shrink{position:sticky;top:0}
    .swop-fx-sticky-shrink>*{animation:swop-shrink linear both;animation-timeline:view(block);animation-range:contain 0% contain 100%}
    @keyframes swop-shrink{from{transform:scale(1);opacity:1}to{transform:scale(.66);opacity:.35}}

    /* Horizontaal scrollen binnen verticale scroll */
    .swop-fx-hscroll{position:sticky;top:0;overflow:hidden;display:flex;align-items:center;min-height:60vh}
    .swop-fx-hscroll>*{display:flex;gap:var(--wp--preset--spacing--lg);animation:swop-hscroll linear both;animation-timeline:view(block);animation-range:contain 0% contain 100%}
    @keyframes swop-hscroll{from{transform:translateX(0)}to{transform:translateX(var(--fx-hscroll,-46%))}}
  }
}

/* Panelen die stapelen — werkt ook zonder scroll-timeline */
.swop-fx-stack>*{position:sticky;border-radius:var(--wp--custom--radius--md,12px);box-shadow:0 -6px 26px color-mix(in srgb,var(--wp--preset--color--secondary) 16%,transparent)}
.swop-fx-stack>*:nth-child(1){top:16px}
.swop-fx-stack>*:nth-child(2){top:38px}
.swop-fx-stack>*:nth-child(3){top:60px}
.swop-fx-stack>*:nth-child(4){top:82px}

/* ------------------------------------------------------------
   8. SECTIE-OVERGANGEN
   ------------------------------------------------------------ */
.swop-fx-blend-top{position:relative}
.swop-fx-blend-top::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--fx-blend-height,90px);transform:translateY(-100%);background:linear-gradient(to bottom, transparent, var(--fx-blend-color, var(--wp--preset--color--secondary)));pointer-events:none}
.swop-fx-blend-bottom{position:relative}
.swop-fx-blend-bottom::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fx-blend-height,90px);transform:translateY(100%);background:linear-gradient(to top, transparent, var(--fx-blend-color, var(--wp--preset--color--secondary)));pointer-events:none;z-index:1}
.swop-divider{display:block;width:100%;line-height:0}
.swop-divider svg{display:block;width:100%;height:var(--fx-divider-height,60px)}

/* ------------------------------------------------------------
   9. KLEINE COMPONENTEN
   ------------------------------------------------------------ */
.swop-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:var(--wp--preset--font-size--small);font-weight:600;line-height:1.4}
.swop-badge--accent{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary)}
.swop-badge--outline{background:transparent;border:1px solid currentColor}
.swop-badge--soft{background:color-mix(in srgb,var(--wp--preset--color--primary) 12%,transparent);color:var(--wp--preset--color--primary)}
.swop-badge--dot::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}

.swop-avatars{display:flex}
.swop-avatars>*{width:38px;height:38px;border-radius:99px;border:2px solid var(--wp--preset--color--surface);margin-left:-10px;object-fit:cover;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--wp--preset--color--secondary),var(--wp--preset--color--primary));color:var(--wp--preset--color--text-inverse);font-size:var(--wp--preset--font-size--small);font-weight:600}
.swop-avatars>*:first-child{margin-left:0}

.swop-progress{width:100%;height:7px;background:var(--wp--preset--color--surface-alt);border-radius:99px;overflow:hidden}
.swop-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--wp--preset--color--primary),var(--wp--preset--color--accent));border-radius:99px;width:var(--fx-progress,50%)}

.swop-stars{color:var(--wp--preset--color--accent);letter-spacing:2px}

.swop-tooltip{position:relative;border-bottom:1px dotted var(--wp--preset--color--primary);cursor:help}
.swop-tooltip::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%) scale(.9);background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--text-inverse);font-size:var(--wp--preset--font-size--small);padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s;z-index:10}
.swop-tooltip:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

.swop-skeleton{display:grid;gap:8px}
.swop-skeleton>i{display:block;height:10px;border-radius:4px;background:linear-gradient(90deg,var(--wp--preset--color--surface-alt) 25%,var(--wp--preset--color--surface) 50%,var(--wp--preset--color--surface-alt) 75%);background-size:200% 100%;animation:swop-shimmer 1.4s infinite}
@keyframes swop-shimmer{to{background-position:-200% 0}}

.swop-to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:99px;background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--text-inverse);display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 14px color-mix(in srgb,var(--wp--preset--color--secondary) 30%,transparent);opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}
.swop-to-top[data-visible="true"]{opacity:1;pointer-events:auto}

/* ------------------------------------------------------------
   10. INTENSITEITSNIVEAUS
   Zet op <body> of een sectie: swop-motion-calm / -normal / -expressive
   ------------------------------------------------------------ */
.swop-motion-calm .swop-fx-zoom-in,.swop-motion-calm .swop-fx-parallax>*,.swop-motion-calm .swop-fx-text-fill{animation:none!important;opacity:1!important;transform:none!important;color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.swop-motion-calm .swop-fx-shine::after,.swop-motion-calm .swop-fx-spotlight::after{display:none}
.swop-motion-expressive .swop-fx-reveal{animation-range:entry 0% cover 45%}
.swop-motion-expressive .swop-fx-lift:hover{transform:translateY(-8px)}

/* View transitions tussen pagina's (native) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:swop-vt-out .22s ease both}
  ::view-transition-new(root){animation:swop-vt-in .28s ease both}
  @keyframes swop-vt-out{to{opacity:0}}
  @keyframes swop-vt-in{from{opacity:0;transform:translateY(8px)}}
}

/* Fallback voor browsers zonder scroll-driven animations */
@media (prefers-reduced-motion: no-preference){
  [data-fx-pending="true"]{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
  [data-fx-pending="false"]{opacity:1;transform:none}
  .swop-fx-spotlight--follow::after{top:var(--fx-spot-y,50%);left:var(--fx-spot-x,50%);transform:translate(-50%,-50%) scale(1);opacity:0;transition:opacity .3s}
  .swop-fx-spotlight--follow:hover::after{opacity:1}
}