/* TeijgelerMedia hero - animaties en effecten (home) */

/* Paginabasis: de hele pagina staat op deze donkere kleur, zoals in het origineel. */
body{background-color:#05070a;color:#eef2f6}

/* Achtergrond: mesh gradient met drift */
.elementor .s-hero-mesh{
  background:
    radial-gradient(42% 46% at 18% 28%, rgba(223,102,36,.16), transparent 60%),
    radial-gradient(38% 44% at 82% 20%, rgba(223,102,36,.12), transparent 62%),
    radial-gradient(50% 55% at 70% 90%, rgba(90,90,110,.20), transparent 65%),
    radial-gradient(45% 45% at 30% 85%, rgba(223,102,36,.07), transparent 62%);
  background-size:140% 140%;
  animation:tm-meshDrift 18s ease-in-out infinite;
}
@keyframes tm-meshDrift{0%,100%{background-position:0% 0%}50%{background-position:100% 60%}}

/* Achtergrond: rasterlijnen met radiale mask */
.elementor .s-hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 70%);
}

/* Orbs: zwevende gloed */
.elementor .s-orb-a{
  background:radial-gradient(circle, rgba(223,102,36,.4), transparent 65%);
  animation:tm-float 12s ease-in-out infinite;
}
.elementor .s-orb-b{
  background:radial-gradient(circle, rgba(223,102,36,.3), transparent 65%);
  animation:tm-float 15s ease-in-out infinite reverse;
}
@keyframes tm-float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(40px) translateX(20px)}}

/* Badge: pulserend bolletje.
   Maatvoering zit in de globale class "dot-indicator"; hier alleen de animatie. */
.elementor .dot-indicator{animation:tm-pulse 1.8s ease-in-out infinite}
@keyframes tm-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(223,102,36,.7)}
  50%{box-shadow:0 0 0 6px rgba(223,102,36,0)}
}

/* Titel: regels die omhoog komen */
.elementor .hero-title{overflow:hidden}
.elementor .hero-title{animation:tm-riseUp 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes tm-riseUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.elementor .hero-sub{animation:tm-riseUp 1s cubic-bezier(.2,.7,.2,1) .12s both}
.elementor .hero-actions{animation:tm-riseUp 1s cubic-bezier(.2,.7,.2,1) .24s both}
.elementor .hero-chips{animation:tm-riseUp 1s cubic-bezier(.2,.7,.2,1) .32s both}

/* Knoppen en chips: soepele overgang */
.elementor .btn-primary,
.elementor .btn-ghost{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .3s, border-color .3s}
.elementor .chip{transition:transform .3s cubic-bezier(.2,.7,.2,1), color .3s, border-color .3s, background .3s, box-shadow .3s}
.elementor .chip:hover{box-shadow:0 14px 30px -18px rgba(223,102,36,.55)}
.elementor .btn-primary{background-image:linear-gradient(135deg, #df6624, #df6624)}

/* Foto: gloedring die draait */
.elementor .s-photo-glow{
  background:conic-gradient(from 0deg, rgba(223,102,36,.3), rgba(223,102,36,0), rgba(223,102,36,.2), rgba(223,102,36,0), rgba(223,102,36,.3));
  animation:tm-spin 14s linear infinite;
}
@keyframes tm-spin{to{transform:rotate(360deg)}}

/* Foto: donkere verloop onderin plus trage zoom */
.elementor .photo-frame::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(to top, rgba(4,7,10,.85), transparent);
  pointer-events:none;z-index:1;
}
.elementor .photo-frame.photo-frame{padding:0;min-width:0}
.elementor .photo-frame img{display:block;width:100%;height:100%;object-fit:cover;border-radius:30px;transition:transform 6s ease;filter:saturate(.9) contrast(1.02)}
.elementor .photo-wrap:hover .photo-frame img{transform:scale(1.06)}

/* Ring-badge: draaiend rondschrift */
/* Draaiende ring-badge. De selector pakt elke pagina-variant:
   s-ring-svg (home), s-wd-ring-svg, s-dw-ring-svg, s-ai-ring-svg, ... */
.elementor [class*="ring-svg"]{animation:tm-spin 18s linear infinite;transform-origin:50% 50%}
.elementor [class*="ring-badge"] svg text{text-transform:uppercase}

/* Zwevende kaarten */
.elementor .float-card{animation:tm-floatC 7s ease-in-out infinite}
.elementor .elementor-element-float-card-2{animation-delay:1.4s}
.elementor .elementor-element-float-card-3{animation-delay:2.8s}
@keyframes tm-floatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Parallax-doel voor de muisbeweging */
.elementor .hero-visual{will-change:transform}

/* Kleinere schermen: kaarten binnen beeld houden */
@media (max-width:1024px){
  .elementor .elementor-element-float-card-1{inset-inline-start:0}
  .elementor .elementor-element-float-card-2{inset-inline-end:0}
  .elementor .hero-sub{max-width:none}
}
@media (max-width:767px){
  .elementor .float-card{display:none}
  .elementor [class*="ring-badge"]{display:none}
}
/* Marquee: Tekstmarquee-widget (Marquee Addons) in TeijgelerMedia-stijl.
   Alleen de typografie staat hier. Icoongrootte, -kleur en -afstand regel je
   in de widget zelf (tabblad Stijl > Pictogram), zodat het handmatig aanpasbaar blijft. */
.elementor .deensimc-scroll-text{
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b9c4cd;
  white-space:nowrap;
}

/* ---- Diensten-sectie ----
   Achtergronden, gradients en kaartkleuren zitten in Global Classes
   (section-tint, service-card), zodat ze ook in de
   Elementor-editor zichtbaar zijn. Hier alleen wat daar niet kan:
   pseudo-elementen en transitions. */

/* Dunne oranje lijn bovenaan de sectie */
.elementor .elementor-element-diensten::before{
  content:"";position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(223,102,36,.45), transparent);
  pointer-events:none;
}

/* Sfeerbeeld: trage zoom bij hover */
.elementor .show-band img{transition:transform 6s cubic-bezier(.2,.6,.2,1)}
.elementor .show-band:hover img{transform:scale(1.045)}

/* Servicekaart: zachte overgang plus gloed linksboven bij hover */
.elementor .service-card{transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s}
.elementor .service-card::before{
  content:"";position:absolute;top:-40%;left:-40%;width:80%;height:80%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(223,102,36,.14), transparent 70%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.elementor .service-card:hover::before{opacity:1}

/* De hele kaart klikbaar via de link */
.elementor .service-link::after{content:"";position:absolute;inset:0;z-index:2}

/* Pijl schuift mee bij hover */
.elementor .service-link svg{transition:transform .35s}
.elementor .service-card:hover .service-link svg{transform:translateX(5px)}

/* ---- Over-sectie ----
   Kleuren, gradients en layout zitten in Global Classes.
   Hier alleen de transition op de afbeelding. */
.elementor .illus-frame img{transition:transform 6s cubic-bezier(.2,.6,.2,1)}
.elementor .illus-frame:hover img{transform:scale(1.045)}

/* ---- CTA-sectie ----
   Kleuren en layout zitten in Global Classes. Hier de achtergrondfoto,
   de pseudo-elementen en de animaties. */

/* Achtergrondfoto met overlay over de hele sectie */
.elementor .elementor-element-contact::before{
  content:"";position:absolute;inset:0;
  background:url("/wp-content/uploads/2026/09/home-cta.jpg") center/cover no-repeat;
  opacity:.32;
  filter:brightness(1.25) contrast(1.05);
  pointer-events:none;
}
.elementor .elementor-element-contact > .container,
.elementor .elementor-element-contact-container{position:relative;z-index:1}

/* Zachte oranje gloed die pulseert */
.elementor .cta-wrap::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(45% 60% at 50% 0%, rgba(223,102,36,.18), transparent 65%);
  animation:tm-pulseSoft 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tm-pulseSoft{0%,100%{opacity:.6}50%{opacity:1}}

/* Draaiende randgloed */
.elementor .cta-wrap::after{
  content:"";position:absolute;inset:-2px;border-radius:34px;padding:1px;
  background:conic-gradient(from 0deg, rgba(223,102,36,.5), transparent 25%, rgba(223,102,36,.4), transparent 60%, rgba(223,102,36,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:tm-spin 12s linear infinite;
  pointer-events:none;
}

/* Cirkelbanen die langzaam ronddraaien */
/* Werkt op elke pagina: de orbits delen de Global Class .cta-orbit.
   De eerste draait met de klok mee, de tweede tegen de klok in. */
.elementor .cta-orbit,
.elementor .elementor-element-cta-orbit-1,
.elementor .elementor-element-cta-orbit-2{animation:tm-spin 26s linear infinite}
.elementor .cta-orbit:nth-of-type(2),
.elementor .elementor-element-cta-orbit-2{animation-direction:reverse}

/* ---- Header en footer (Elementor-templates) ----
   Het menu komt uit WordPress (Weergave > Menu's) via de nav-menu widget.
   Kleuren en layout zitten in Global Classes en de widget zelf.
   Hier alleen de scroll-state, die geen widget-instelling is. */

/* Header wordt compacter zodra je scrolt */
.elementor #site-nav{transition:padding .45s ease, background .45s ease, box-shadow .45s ease}
.elementor #site-nav.scrolled{
  padding-block-start:12px;
  padding-block-end:12px;
  background:rgba(6,9,13,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid #242c36;
  box-shadow:0 10px 40px -20px rgba(0,0,0,.7);
}

/* Nav-balk: logo links, menu in het midden, knop rechts.
   De nav-menu widget is een v3-widget met een eigen wrapper; die moet
   expliciet als flex-item worden ingesteld, anders duwt hij de rest weg. */
.elementor .nav-bar > .elementor-widget-nav-menu{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:center;
}
.elementor .nav-bar > .elementor-widget-nav-menu > .elementor-widget-container{
  width:100%;
}
.elementor .nav-bar .elementor-nav-menu--main .elementor-nav-menu{
  justify-content:center;
  flex-wrap:nowrap;
}
.elementor .nav-cta{white-space:nowrap}

/* Menu-hover: oranje streepje dat van links naar rechts uitschuift.
   De ingebouwde pointer van de widget staat op "none"; dit is het
   effect uit het origineel, met een verloop naar transparant. */
.elementor .nav-bar .elementor-nav-menu--main .elementor-item{
  position:relative;
  transition:color .3s;
}
.elementor .nav-bar .elementor-nav-menu--main .elementor-item::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, #df6624, transparent);
  transition:width .35s;
}
.elementor .nav-bar .elementor-nav-menu--main .elementor-item:hover::after,
.elementor .nav-bar .elementor-nav-menu--main .elementor-item.elementor-item-active::after{
  width:100%;
}
.elementor .nav-bar .elementor-nav-menu--main .elementor-nav-menu a{
  white-space:nowrap;
}

/* Footer: op smallere schermen wel onder elkaar */
@media (max-width:1024px){
  .elementor .footer-top{flex-wrap:wrap}
}
@media (max-width:767px){
  .elementor .foot-cols{gap:40px}
}

/* Footer-links */
.elementor .foot-link{transition:color .3s}

@media (prefers-reduced-motion: reduce){
  .elementor .s-hero-mesh,
  .elementor .s-orb-a,
  .elementor .s-orb-b,
  .elementor .dot-indicator,
  .elementor .s-photo-glow,
  .elementor [class*="ring-svg"],
  .elementor .float-card,
  .elementor .hero-title,
  .elementor .hero-sub,
  .elementor .hero-actions,
  .elementor .hero-chips,
  .elementor .deensimc-marquee-track{animation:none !important}
  .elementor .show-band:hover img{transform:none}
  .elementor .illus-frame:hover img{transform:none}
  .elementor .cta-wrap::before,
  .elementor .cta-wrap::after,
  .elementor .cta-orbit,
  .elementor .elementor-element-cta-orbit-1,
  .elementor .elementor-element-cta-orbit-2{animation:none !important}
  .elementor .photo-wrap:hover .photo-frame img{transform:none}
}


/* ---- Meterbalken (webdesign > optimalisatie) ----
   De eindbreedte staat in de element-style, dus zonder JS klopt het beeld.
   Zodra JS aanwezig is (html.js-meters) starten de balken op 0 en vullen ze
   zich bij het scrollen, zoals in het origineel. */
.elementor .meter-fill-anim{
  transition:width 1.4s cubic-bezier(.2,.7,.2,1) .25s;
}
@media (prefers-reduced-motion:no-preference){
  html.js-meters .elementor .meter-fill-anim:not(.is-filled){width:0 !important;}
}

/* glans die over de balk loopt */
.elementor .meter-fill-anim::after{
  content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  background-size:200% 100%;
  animation:tm-shimmer 2.4s linear infinite;
}
@keyframes tm-shimmer{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .elementor .meter-fill-anim{transition:none}
  .elementor .meter-fill-anim::after{animation:none}
}

/* ---- Scrollbar in de huisstijl (bron: style.css regel 15-18) ----
   Donkere baan met grijze duim die oranje kleurt bij hover.
   scrollbar-color is voor Firefox, dat ::-webkit-scrollbar niet kent. */
html{scrollbar-color:#2a323c #080b0f;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#080b0f}
::-webkit-scrollbar-thumb{background:#2a323c;border-radius:20px;border:3px solid #080b0f}
::-webkit-scrollbar-thumb:hover{background:#df6624}

/* ---- Homepage: geen horizontale scroll ----
   Decoratieve elementen (orb-b, photo-glow, cta-orbit, float-card-3) staan
   absoluut gepositioneerd en steken bewust buiten hun sectie voor het
   diepte-effect. Dat duwde de pagina 23px (mobiel) tot 86px (desktop) breder
   dan het venster.

   Oplossing: de secties die zulke elementen bevatten kappen ze af. Dat mag
   veilig, want het gaat om sfeer-elementen die aan de rand toch al wegvallen -
   geen inhoud. `overflow-x` in plaats van `overflow`, zodat schaduwen en
   float-cards verticaal nog buiten de sectie mogen vallen.

   `overflow-x:clip` en niet `hidden`: hidden zou van de sectie een
   scroll-container maken en `position:sticky` erin breken. clip doet dat niet. */
.elementor .elementor-element-hero,
.elementor .elementor-element-diensten,
.elementor .elementor-element-over,
.elementor .elementor-element-contact{
  overflow-x:clip;
  /* Expliciet nodig: staat overflow-y op visible, dan behandelt de browser die
     as ook als clip zodra de andere as clip is. Zonder deze regel worden de
     badge boven de kop en de chips onder de knoppen afgesneden. */
  overflow-y:visible;
  overflow-clip-margin:0;
}

/* De marquee-band is bedoeld om breder te zijn dan het scherm - dat IS de
   lopende band. Alleen de wrapper mag niet meescrollen. */
.elementor .elementor-element-marquee-wrap{overflow-x:clip;}

/* Laatste vangnet op body: als er ooit een nieuw element buiten de rand valt,
   groeit de pagina niet mee. Op html gezet zou dit position:sticky breken. */
body{overflow-x:clip;}

/* ---- Homepage desktop: hero vult het scherm, marquee sluit onderaan aan ----
   De hero staat op calc(100vh - 112px) via de lokale klasse s-home-hero-vh in
   _elementor_data; 112px is de hoogte van de marquee-band. Samen precies één
   viewport, met de marquee als afsluiting onderin.

   Alleen vanaf 1025px: op tablet en mobiel is de hero-inhoud hoger dan het
   scherm en zou een vaste hoogte de tekst afkappen. */
@media (min-width:1025px){
  .elementor .elementor-element-marquee-wrap{
    /* geen marge, zodat de band direct tegen de hero sluit */
    margin-top:0;
  }

  /* De hero-inhoud moet binnen calc(100vh - 112px) passen. Op een laptop van
     800px hoog is dat 688px en werd de inhoud afgesneden: de badge bovenaan
     verdween achter het menu en de chips onderaan werden doormidden gesneden.

     Onder 900px schaalt de inhoud daarom mee: kleinere kop, minder ruimte
     tussen de blokken. Onder 740px valt de vaste hoogte helemaal weg, dan
     scrollt de pagina liever dan dat er inhoud verdwijnt. */
  @media (max-height:899px){
    .elementor .elementor-element-hero{
      padding-top:74px !important;
      padding-bottom:24px !important;
    }
    .elementor .elementor-element-hero .hero-title{
      font-size:clamp(2.4rem, 4.2vw, 3.4rem) !important;
      line-height:1.08 !important;
    }
    .elementor .elementor-element-hero .hero-sub{
      font-size:1rem !important;
      line-height:1.55 !important;
    }
    .elementor .elementor-element-hero-grid{gap:34px !important;}
  }

  @media (max-height:739px){
    .elementor .elementor-element-hero{
      height:auto !important;
      min-height:0 !important;
      padding-top:110px !important;
      padding-bottom:60px !important;
    }
  }
}

/* Onder 1025px groeit de hero gewoon mee met zijn inhoud. */
@media (max-width:1024px){
  .elementor .elementor-element-hero{
    height:auto !important;
    min-height:0 !important;
  }
}