/* ===========================================================================
   Verso knoppen, gedeelde signatuur "Scanlijn"
   ---------------------------------------------------------------------------
   Eén definitie voor alle knoppen van versodevelopment.nl. Wordt geladen door
   de homepage (homepage/index.src.html) en door de subpagina's (BaseLayout.astro).

   Het effect: een lichtgevende voorrand die over de knop veegt, dezelfde
   laser als in de scan-sectie boven de cases. Sinds 22/07 is de knop zelf ook
   geen dekkende kleur meer maar licht teal glas (sectie 1c), en is de veeg
   overal teal in plaats van teal-naar-paars (WhatsApp uitgezonderd, eigen
   merkgroen).

     ::before   de vulling      scaleX(0) -> scaleX(1), vanaf links
     ::after    de lichtlijn    translateX(-26px) -> translateX(100% - 26px)

   Beide dezelfde duur en easing, dus de lijn rijdt precies op de rand van de
   vulling mee.

   DRIE DINGEN DIE HIER BEWUST ZO STAAN:

   1. Alles zit in pseudo-elementen, er verandert geen enkele regel HTML. De
      taalschakelaar op de homepage vervangt de innerHTML van een element zodra
      er een "<" in de data-nl-waarde staat. Bij .vtl-case is daar op 18/07 al
      een span door gesneuveld. Wat via ::before/::after kan, gaat via
      ::before/::after.

   2. Alleen transform, geen width of clip-path. Dat draait op de compositor,
      en het is bovendien nodig omdat #heroCta zijn eigen transform al gebruikt
      voor de show-state en de pulse-animatie.

   3. De gloed zit als gradient IN het ::after-element, niet als box-shadow.
      Een shadow zou door de overflow:hidden worden weggeknipt.

   De transition-regels op .hero-cta, .btn-submit en .btn-ghost herhalen wat er
   nu in verso-home.css, diensten.css en case.css staat, met color erbij. Dat is
   tijdelijk: zodra deze uitrol is geverifieerd verdwijnen de originelen daar en
   is dit bestand de enige plek waar een knopstijl staat.
   =========================================================================== */

:root{
  --vb-dur:.62s;
  --vb-ease:cubic-bezier(.62,.02,.24,1);
  --vb-line:#A9FFF6;                                  /* de kop van de lijn */
  --vb-tail:rgba(14,200,200,.16);                     /* wat er achteraan sleept */
  --vb-fill:linear-gradient(135deg,rgba(14,200,200,.32),rgba(26,165,181,.16));  /* teal-veeg (22/07, was paars) */
  --vb-focus:#7EF3F3;
  --vb-glass-bg:linear-gradient(135deg,rgba(14,200,200,.30),rgba(26,165,181,.14));  /* rustglas, zie sectie 1c */
  --vb-glass-border:rgba(14,200,200,.4);
  --vb-glass-text:#eef0ff;
}

/* ---------------------------------------------------------------------------
   1. Basis: elke knop moet zijn pseudo-elementen kunnen dragen en clippen
   --------------------------------------------------------------------------- */

#heroCopy .hc-cta,
.vtl-case,
.hero-cta,
.btn-submit,
.btn-ghost,
.btn,
.footer-btn,
.wa-cta,
.msg-cta,
.cta-glow{
  overflow:hidden;
  isolation:isolate;
}

/* position:relative alleen waar er nog geen positie is.
   #heroCta is position:fixed (zwevende knop rechtsonder op de homepage) en
   moet dat blijven; een fixed element is al een containing block, dus de
   pseudo-elementen werken daar gewoon. */
.hero-cta:not(#heroCta),
.btn-submit,
.btn-ghost,
.btn,
.footer-btn,
.wa-cta,
.msg-cta{
  position:relative;
}

/* ---------------------------------------------------------------------------
   1b. Rechte hoeken (21/07)

   Alle knoppen waren pills (9999px) of afgeronde tegels (20px). Nu recht.
   Staat hier en niet in de vier oorspronkelijke stylesheets, zodat de vorm op
   dezelfde plek zit als het gedrag. Dit bestand laadt na verso-home.css,
   diensten.css en case.css, dus bij gelijke specificiteit wint het.

   .cta-glow staat hier niet bij: die wordt in het inline blok van de homepage
   met !important vormgegeven, dus zijn hoeken zijn daar rechtgezet.
   --------------------------------------------------------------------------- */

#heroCopy .hc-cta,
.vtl-case,
.hero-cta,
.btn-submit,
.btn-ghost,
.btn,
.footer-btn,
.wa-cta,
.msg-cta,
.wa-cta .wa-ic,
.msg-cta .msg-ic{
  border-radius:0;
}

/* ---------------------------------------------------------------------------
   1c. Glasknop-basis (22/07)

   De dekkende teal/paars-vullingen zijn vervangen door hetzelfde lichte glas
   als de WhatsApp/formulier-tegels in de contact-overlay: één accentkleur
   (teal, niet meer teal-naar-paars), transparant, met een dunne rand zodat
   de knop ook zonder de Scanlijn-veeg zijn vorm houdt. De veeg (sectie 2/3)
   speelt er nu overheen in plaats van een compleet andere kleur in te vegen.

   !important is hier nodig, niet optioneel: de homepage heeft precies één
   inline <style>-blok (34KB, alle homepage-specifieke overrides) dat NA deze
   externe stylesheet in de <head> staat. #heroCopy .hc-cta en .vtl-case
   hebben daar allebei hun eigen background-declaratie zonder !important, dus
   zonder !important hier wint gewoon dat latere blok, gelijke specificiteit.
   Ontdekt doordat een eerste versie zonder !important zichtbaar niets deed
   op de hero-knop. .cta-glow staat hier niet bij, die heeft zijn eigen
   !important-regel in sectie 5 (dat inline blok zet ook color/background
   met !important, dus moet het sowieso al). WhatsApp (.wa-cta) blijft zijn
   eigen merkgroen.
   --------------------------------------------------------------------------- */

#heroCopy .hc-cta,
.vtl-case,
.hero-cta,
.btn-submit,
.footer-btn--primary,
.btn{
  background:var(--vb-glass-bg)!important;
  border:1px solid var(--vb-glass-border)!important;
  color:var(--vb-glass-text)!important;
}
.vtl-case .cta-txt{
  color:var(--vb-glass-text)!important;
}

/* ---------------------------------------------------------------------------
   2. De vulling
   --------------------------------------------------------------------------- */

#heroCopy .hc-cta::before,
.vtl-case::before,
.hero-cta::before,
.btn-submit::before,
.btn-ghost::before,
.btn::before,
.footer-btn::before,
.wa-cta::before,
.msg-cta::before,
.cta-glow::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;              /* onder de tekst, boven de eigen achtergrond */
  pointer-events:none;
  background:var(--vb-fill);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--vb-dur) var(--vb-ease);
}

#heroCopy .hc-cta:hover::before,   #heroCopy .hc-cta:focus-visible::before,
.vtl-case:hover::before,           .vtl-case:focus-visible::before,
.hero-cta:hover::before,           .hero-cta:focus-visible::before,
.btn-submit:hover::before,         .btn-submit:focus-visible::before,
.btn-ghost:hover::before,          .btn-ghost:focus-visible::before,
.btn:hover::before,                .btn:focus-visible::before,
.footer-btn:hover::before,         .footer-btn:focus-visible::before,
.wa-cta:hover::before,             .wa-cta:focus-visible::before,
.msg-cta:hover::before,            .msg-cta:focus-visible::before,
.cta-glow:hover::before,            .cta-glow:focus-visible::before{
  transform:scaleX(1);
}

/* ---------------------------------------------------------------------------
   3. De lichtlijn

   Het element is even breed als de knop. De lijn zelf staat op 24,5-26px in de
   gradient, met de gloed ervoor als sleep. Beginstand -26px zet de lijn precies
   op de linkerrand, eindstand (100% - 26px) precies op de rechterrand, dus hij
   loopt exact mee met de rand van de vulling.
   --------------------------------------------------------------------------- */

#heroCopy .hc-cta::after,
.vtl-case::after,
.hero-cta::after,
.btn-submit::after,
.btn-ghost::after,
.btn::after,
.footer-btn::after,
.wa-cta::after,
.msg-cta::after,
.cta-glow::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:100%;
  z-index:2;               /* mag over de tekst heen, dat is juist de scan */
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0,
    var(--vb-tail) 6px,
    var(--vb-line) 24.5px 26px,
    transparent 26px);
  transform:translateX(-26px);
  opacity:0;
  transition:transform var(--vb-dur) var(--vb-ease), opacity .2s ease .08s;
}

#heroCopy .hc-cta:hover::after,   #heroCopy .hc-cta:focus-visible::after,
.vtl-case:hover::after,           .vtl-case:focus-visible::after,
.hero-cta:hover::after,           .hero-cta:focus-visible::after,
.btn-submit:hover::after,         .btn-submit:focus-visible::after,
.btn-ghost:hover::after,          .btn-ghost:focus-visible::after,
.btn:hover::after,                .btn:focus-visible::after,
.footer-btn:hover::after,         .footer-btn:focus-visible::after,
.wa-cta:hover::after,             .wa-cta:focus-visible::after,
.msg-cta:hover::after,            .msg-cta:focus-visible::after,
.cta-glow:hover::after,            .cta-glow:focus-visible::after{
  transform:translateX(calc(100% - 26px));
  opacity:1;
  transition:transform var(--vb-dur) var(--vb-ease), opacity .12s ease;
}

/* ---------------------------------------------------------------------------
   4. Per soort: kleur van de vulling en van het label
   --------------------------------------------------------------------------- */

/* 4a. Primaire pills. Tekst is sinds 22/07 al licht in rust (sectie 1c), deze
       transitie is nu vooral een no-op-vangnet, geen wisseling meer nodig. */
#heroCopy .hc-cta .cta-txt,
.vtl-case .cta-txt,
#heroCta .cta-label{
  transition:color .5s var(--vb-ease) .06s;
}
#heroCopy .hc-cta:hover .cta-txt, #heroCopy .hc-cta:focus-visible .cta-txt,
.vtl-case:hover .cta-txt,         .vtl-case:focus-visible .cta-txt,
#heroCta:hover .cta-label,        #heroCta:focus-visible .cta-label{
  color:#F3F0FF;
}

/* De knoppen op de diensten- en casepagina's hebben geen span om het label,
   dus daar gaat de kleur op het element zelf. De transition herhaalt die van
   diensten.css regel 30 met color erbij. */
.hero-cta:not(#heroCta){
  transition:filter .2s ease, transform .2s ease, color .5s var(--vb-ease) .06s;
}
.hero-cta:not(#heroCta):hover,
.hero-cta:not(#heroCta):focus-visible{
  color:#F3F0FF;
}

/* Contactformulier. Transition spiegelt verso-home.css. */
.btn-submit{
  transition:transform .25s cubic-bezier(.16,1,.3,1), filter .25s, box-shadow .25s,
             color .5s var(--vb-ease) .06s;
}
.btn-submit:hover,
.btn-submit:focus-visible{
  color:#F3F0FF;
}

/* 4b. Outline-knop op de dienstenpagina's: geen volle veeg maar een wash,
       en de rand licht op (was violet, nu teal, geen tweede kleur meer). */
.btn-ghost{
  border-color:var(--vb-glass-border);
  transition:border-color .5s var(--vb-ease), color .5s var(--vb-ease) .06s;
}
.btn-ghost::before{
  background:var(--vb-glass-bg);
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color:var(--vb-line);
  color:#EEF0FF;
  background:transparent;   /* de oude teal-wash uit diensten.css is nu overbodig */
}

/* 4c. Case-sidebar. Kreeg via sectie 1c al de teal-glasbasis, de veeg erover
       heen is dezelfde --vb-fill als de rest (geen aparte kleur meer nodig). */

/* 4d. Glasknoppen in de footer: was een wit/paars glas, nu teal zoals de rest. */
.footer-btn{
  border-color:var(--vb-glass-border);
  background:linear-gradient(145deg,rgba(14,200,200,.14),rgba(14,200,200,.05));
}
.footer-btn::before{
  background:var(--vb-glass-bg);
}
/* De primaire footerknop krijgt de gedeelde glasbasis (sectie 1c) + veeg. */
.footer-btn--primary::before{
  background:var(--vb-fill);
}
.footer-btn--primary{
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease,
             box-shadow .35s ease, color .5s var(--vb-ease) .06s;
}
.footer-btn--primary:hover,
.footer-btn--primary:focus-visible{
  color:#F3F0FF;
}

/* 4e. De twee tegels in de contact-overlay. WhatsApp houdt zijn eigen
       merkgroen (een teal veeg zou daar vals staan); msg-cta was lichtpaars
       en is nu teal, zoals de rest van de site. */
.wa-cta{
  --vb-line:#B8FFD4;
  --vb-tail:rgba(37,211,102,.18);
}
.wa-cta::before{
  background:linear-gradient(135deg,rgba(37,211,102,.26),rgba(20,120,90,.10));
}
.msg-cta{
  border-color:var(--vb-glass-border);
  background:var(--vb-glass-bg);
}
.msg-cta::before{
  background:var(--vb-glass-bg);
}

/* ---------------------------------------------------------------------------
   5. De knop in de fullscreen CTA

   Deze heet .cta-glow en is in verso-home.css een ronde orb, maar het inline
   blok van de homepage overschrijft dat met !important tot een gewone pill
   van minstens 190px breed. Hij krijgt daarom hier zijn eigen glasbasis in
   plaats van via sectie 1c (die kan niet tegen een inline !important op).

   De !important hieronder is niet fraai maar wel nodig: datzelfde inline blok
   zet background en color óók met !important.
   --------------------------------------------------------------------------- */

.cta-glow{
  background:var(--vb-glass-bg)!important;
  border:1px solid var(--vb-glass-border);
  border-radius:0!important;
  color:var(--vb-glass-text)!important;
  transition:color .5s var(--vb-ease) .06s, border-color .5s var(--vb-ease);
}
.cta-glow.lit:hover,
.cta-glow.lit:focus-visible{
  color:#F3F0FF!important;
  border-color:var(--vb-line);
}

/* ---------------------------------------------------------------------------
   6. Toetsenbord

   Dit ontbrak tot nu toe op elke knop van de site: tabben leverde geen enkele
   zichtbare aanwijzing op. Outline wordt niet geknipt door overflow:hidden.
   --------------------------------------------------------------------------- */

#heroCopy .hc-cta:focus-visible,
.vtl-case:focus-visible,
.hero-cta:focus-visible,
.btn-submit:focus-visible,
.btn-ghost:focus-visible,
.btn:focus-visible,
.footer-btn:focus-visible,
.wa-cta:focus-visible,
.msg-cta:focus-visible,
.cta-glow:focus-visible{
  outline:2px solid var(--vb-focus);
  outline-offset:3px;
}

/* ---------------------------------------------------------------------------
   7. Touch

   Op een telefoon bestaat hover niet, dus de veeg was daar tot nu toe
   onzichtbaar. Hij speelt nu bij het indrukken, iets korter.
   --------------------------------------------------------------------------- */

@media (hover:none){
  #heroCopy .hc-cta,
  .vtl-case,
  .hero-cta,
  .btn-submit,
  .btn-ghost,
  .btn,
  .footer-btn,
  .wa-cta,
  .msg-cta,
  .cta-glow{
    --vb-dur:.42s;
  }

  #heroCopy .hc-cta:active::before,
  .vtl-case:active::before,
  .hero-cta:active::before,
  .btn-submit:active::before,
  .btn-ghost:active::before,
  .btn:active::before,
  .footer-btn:active::before,
  .wa-cta:active::before,
  .msg-cta:active::before,
  .cta-glow:active::before{
    transform:scaleX(1);
  }

  #heroCopy .hc-cta:active::after,
  .vtl-case:active::after,
  .hero-cta:active::after,
  .btn-submit:active::after,
  .btn-ghost:active::after,
  .btn:active::after,
  .footer-btn:active::after,
  .wa-cta:active::after,
  .msg-cta:active::after,
  .cta-glow:active::after{
    transform:translateX(calc(100% - 26px));
    opacity:1;
    transition:transform var(--vb-dur) var(--vb-ease), opacity .1s ease;
  }

  #heroCopy .hc-cta:active .cta-txt,
  .vtl-case:active .cta-txt,
  #heroCta:active .cta-label{ color:#F3F0FF }

  .hero-cta:not(#heroCta):active,
  .btn-submit:active,
  .footer-btn--primary:active{ color:#F3F0FF }
}

/* ---------------------------------------------------------------------------
   8. Wie beweging heeft uitgezet krijgt de eindstand, direct en zonder sweep
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  #heroCopy .hc-cta::before,
  .vtl-case::before,
  .hero-cta::before,
  .btn-submit::before,
  .btn-ghost::before,
  .btn::before,
  .footer-btn::before,
  .wa-cta::before,
  .msg-cta::before,
  .cta-glow::before{
    transition:none;
  }

  #heroCopy .hc-cta::after,
  .vtl-case::after,
  .hero-cta::after,
  .btn-submit::after,
  .btn-ghost::after,
  .btn::after,
  .footer-btn::after,
  .wa-cta::after,
  .msg-cta::after,
  .cta-glow::after{
    display:none;
  }

  #heroCopy .hc-cta .cta-txt,
  .vtl-case .cta-txt,
  #heroCta .cta-label,
  .hero-cta:not(#heroCta),
  .btn-submit,
  .btn-ghost,
  .footer-btn--primary{
    transition:none;
  }

}