/* NContact — motion-laag
 * Bevat de knopanimatie (Osmo Button 009) en de opmaak die hoort bij de
 * titel-reveal (Osmo Masked Text Reveal). Timing, easing en afstanden zijn
 * 1-op-1 uit die resources overgenomen; alleen de selectors zijn aangepast op
 * Elementors markup, zodat alles native bewerkbaar blijft.
 */

:root{
  --nc-btn-icon-size:12px;
  --nc-btn-gap:8px;
  --nc-btn-pad-left:24px;
  --nc-btn-click-scale:0.955 0.925;
  --nc-btn-ease-hover:cubic-bezier(0.32,0.72,0,1);
  --nc-btn-ease-click:cubic-bezier(0.4,0,0.2,1);
  /* Deze ontbrak, waardoor var(--nc-pijl) leeg was en de linkerpijl
     helemaal niet renderde. */
  --nc-pijl:url('/wp-content/uploads/ncontact-figma/pijl-rechts.svg');
}

/* ---------- Knoppen ----------
 * .elementor-button                  = de geclipte binnenkant
 * ::after                            = pijl rechts (stond al per widget)
 * ::before                           = pijl links (nieuw)
 * .elementor-button-content-wrapper  = de tekst
 * .nc-btn-arrow staat op de widget-wrapper van knoppen mét pijl.
 */
.elementor-button{
  transition: scale .15s var(--nc-btn-ease-click);
  -webkit-tap-highlight-color: transparent;
}
.elementor-button:active{ scale: var(--nc-btn-click-scale); }

.nc-btn-arrow{ position:relative; }
.nc-btn-arrow .elementor-button{ overflow:clip; position:relative; }

.nc-btn-arrow .elementor-button::before{
  content:"";
  position:absolute;
  left:var(--nc-btn-pad-left);
  width:var(--nc-btn-icon-size);
  height:var(--nc-btn-icon-size);
  background:var(--nc-pijl) no-repeat center;
  background-size:8.5px 8.5px;
  opacity:0;
  translate:-1.5em 0 0;
  transition: translate .5s var(--nc-btn-ease-hover), opacity .15s ease-out;
}
.nc-btn-arrow .elementor-button .elementor-button-content-wrapper{
  transition: translate .5s var(--nc-btn-ease-hover);
}
.nc-btn-arrow .elementor-button::after{
  transition: translate .5s var(--nc-btn-ease-hover), opacity .15s ease-out;
}

/* overflow:clip zou de focusring wegknippen; die zetten we daarom op de wrapper */
.nc-btn-arrow:has(.elementor-button:focus-visible)::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:34px;
  box-shadow:0 0 0 2px #241018;
  pointer-events:none;
  z-index:1;
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nc-btn-arrow .elementor-button:is(:hover,:focus-visible) .elementor-button-content-wrapper{
    translate: calc(var(--nc-btn-icon-size) + var(--nc-btn-gap)) 0 0;
    transition: translate .5s .075s var(--nc-btn-ease-hover);
  }
  .nc-btn-arrow .elementor-button:is(:hover,:focus-visible)::before{
    translate:0 0 0;
    opacity:1;
    transition: translate .5s .075s var(--nc-btn-ease-hover), opacity .15s .075s ease-out;
  }
  .nc-btn-arrow .elementor-button:is(:hover,:focus-visible)::after{
    translate:1.5em 0 0;
    opacity:0;
    transition: translate .5s .05s var(--nc-btn-ease-hover), opacity .15s .075s ease-out;
  }
}

/* ---------- Titel-reveal ----------
 * Koppen worden verborgen tot ze geanimeerd worden, anders zie je ze eerst
 * staan en dan pas bewegen. Zie motion.js voor de noodrem die ze alsnog
 * toont als GSAP niet laadt.
 */
html.nc-split-ready [data-split="heading"]{ visibility:hidden; }
.elementor-editor-active [data-split="heading"],
.elementor-editor-preview [data-split="heading"]{ visibility:visible !important; }

@media (prefers-reduced-motion: reduce){
  [data-split="heading"]{ visibility:visible !important; }
}