/* Techdog — bewegingslaag: binnenkomen bij het scrollen + de hover-details
   die daarbij horen.

   De beginstand van de scroll-animatie staat hier bewust NIET: die wordt door
   assets/js/animations.js vóór de eerste paint ingespoten, zodat de lijst met
   wat-er-beweegt op één plek staat. Dit bestand regelt de overgang ernaartoe.

   Alles hangt aan html.td-anim; zonder JS (of met "minder beweging" aan)
   bestaat die klasse niet en blijft de pagina staan zoals hij is. */

:root{
	--td-anim-dur:700ms;
	--td-anim-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Binnenkomen ---------------------------------------------------------
   Het element staat verschoven en onzichtbaar zolang .td-shown ontbreekt (die
   regel komt uit animations.js). Zodra die klasse erop staat, valt het terug
   op zijn gewone stand en zorgt deze overgang voor de beweging ernaartoe. Er
   is dus geen regel die achteraf een transform vasthoudt — anders zou die de
   hover-beweging verderop in dit bestand overstemmen. */
html.td-anim .td-reveal{
	transition:
		opacity var(--td-anim-dur) var(--td-anim-ease) var(--td-d,0ms),
		transform var(--td-anim-dur) var(--td-anim-ease) var(--td-d,0ms);
}
/* Bij het laden al voorbij gescrold: meteen op zijn plek. */
html.td-anim .td-reveal--now{transition:none;}

/* Vloeiend naar een anker, met de vaste header erbij gerekend. */
@media (prefers-reduced-motion:no-preference){
	html{scroll-behavior:smooth;scroll-padding-top:120px;}
	@media (max-width:980px){html{scroll-padding-top:70px;}}
}

/* ---- Header -------------------------------------------------------------- */
.td-header{transition:box-shadow .3s ease;}
.td-header.is-scrolled{box-shadow:0 2px 18px 0 rgba(28,113,185,.28);}
.td-header__logo img{transition:opacity .3s ease;}
.td-header__logo:hover img{opacity:.85;}

/* Uitklapmenu op tablet/telefoon: het paneel valt open in plaats van te
   verschijnen. display:none → block kan niet overgaan, dus een keyframe. */
@media (max-width:1279px){
	.td-nav.is-open{animation:td-nav-open 260ms var(--td-anim-ease) both;}
}
@keyframes td-nav-open{
	from{opacity:0;transform:translate3d(0,-8px,0);}
	to{opacity:1;transform:none;}
}

/* ---- Knoppen ------------------------------------------------------------- */
/* base.css zet hier al de kleurovergang; deze regel vult beweging aan. */
.td-btn{transition:background .2s,color .2s,transform .2s var(--td-anim-ease),box-shadow .25s ease;}
.td-btn:hover{transform:translate3d(0,-2px,0);box-shadow:0 6px 16px rgba(28,113,185,.22);}
.td-btn:active{transform:none;box-shadow:none;}
/* In de blauwe voettekst past een witte gloed beter dan een blauwe. */
.td-footer .td-btn--footer:hover{box-shadow:0 6px 16px rgba(0,0,0,.18);}

/* Terug-knop onder een bericht: de pijl loopt vooruit op de klik. */
.td-btn--back::before{transition:transform .25s var(--td-anim-ease);}
.td-btn--back:hover::before{transform:translate3d(-4px,0,0);}

/* ---- Kaarten ------------------------------------------------------------- */
.block-usp__card{transition:transform .35s var(--td-anim-ease),box-shadow .35s ease;}
.block-usp__card:hover{transform:translate3d(0,-6px,0);box-shadow:0 14px 30px rgba(0,0,0,.14);}

.td-postcard{transition:transform .35s var(--td-anim-ease),box-shadow .35s ease;}
.td-postcard:hover{transform:translate3d(0,-6px,0);box-shadow:0 18px 34px rgba(0,0,0,.12);}
/* De kaart snijdt zijn afbeelding al af (overflow:hidden), dus de uitsnede
   blijft staan terwijl de foto inzoomt. */
.td-postcard__media img{transition:transform .6s var(--td-anim-ease);}
.td-postcard:hover .td-postcard__media img{transform:scale(1.06);}

/* ---- Voettekst ----------------------------------------------------------- */
.td-social__icon{transition:border-color .3s,transform .3s var(--td-anim-ease);}
.td-social__icon:hover{transform:translate3d(0,-3px,0);}
.td-footer__links a{transition:opacity .25s ease;}
.td-footer__links a:hover{opacity:.8;}

/* ---- Bericht: deelknoppen en vergrootweergave ---------------------------- */
.td-share__btn{transition:color .3s ease,background-color .3s ease,transform .25s var(--td-anim-ease);}
.td-share__btn:hover{transform:translate3d(0,-3px,0);}

.td-lightbox-overlay{animation:td-lightbox-in 220ms ease both;}
.td-lightbox-overlay img{animation:td-lightbox-img 320ms var(--td-anim-ease) both;}
@keyframes td-lightbox-in{from{opacity:0;}to{opacity:1;}}
@keyframes td-lightbox-img{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}

/* ---- Minder beweging ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	.td-btn,
	.block-usp__card,
	.td-postcard,
	.td-postcard__media img,
	.td-social__icon,
	.td-share__btn,
	.td-btn--back::before{transition:none;}
	.td-btn:hover,
	.block-usp__card:hover,
	.td-postcard:hover,
	.td-postcard:hover .td-postcard__media img,
	.td-social__icon:hover,
	.td-share__btn:hover,
	.td-btn--back:hover::before{transform:none;}
	.td-nav.is-open,
	.td-lightbox-overlay,
	.td-lightbox-overlay img{animation:none;}
}