/* Maris Stella: basisanimaties op teksten en knoppen (27-10-2026). Hoort bij js/animatie.js en drie regels in templates/Page.ss.
   - Verschijnen alleen als het script in de head de klasse ms-anim op <html> zette (JavaScript aan, IntersectionObserver,
     geen prefers-reduced-motion, geen zoekrobot). Zonder JavaScript, bij reduced motion en bij afdrukken is alles meteen zichtbaar.
   - Na het verschijnen krijgt een blok de klasse ms-af en geldt hier niets meer voor dat blok: eindtoestand = de originele opmaak.
   - Alleen opacity en transform bewegen (geen layoutverschuiving). Nooit op a.button zelf: het :after-blok met z-index:-1
     zou dan boven de knopkleur komen. Daarom beweegt bij hover alleen dat blok en de pijl. */
:root{--ms-ease:cubic-bezier(.2,.7,.2,1);--ms-y:16px}
@media screen and (max-width:39.99875em){:root{--ms-y:12px}}

/* 1. Kop bovenaan (startpagina en heldenbeelden) rustig bij het laden; knoppen op de startpagina vervagen erna in */
@media screen and (prefers-reduced-motion:no-preference){
html.ms-anim #heroTitle h1,html.ms-anim #smallHero h1,html.ms-anim #orbitInfo h1,html.ms-anim body>.grid-container>.grid-x>.cell>h1{animation:ms-op .8s var(--ms-ease) .1s backwards}
html.ms-anim #orbitInfo .btnWrapper{animation:ms-vervaag .6s var(--ms-ease) .4s backwards}
html.ms-anim #orbitInfo .btnWrapper+.btnWrapper{animation-delay:.5s}

/* 2. Blokken verschijnen bij het scrollen. Deze lijst = de lijst S in animatie.js */
html.ms-anim #homeIntroButtons .introButton:not(.ms-in):not(.ms-af),
html.ms-anim #homeMainLinks .linksGrid>div:not(.ms-in):not(.ms-af),
html.ms-anim #newsList .newsItem:not(.ms-in):not(.ms-af),
html.ms-anim #newsList .cell.text-center:not(.ms-in):not(.ms-af),
html.ms-anim #contactIntroButtons .introButton:not(.ms-in):not(.ms-af),
html.ms-anim #fullPageHero #bottomInner .cell:not(.ms-in):not(.ms-af),
html.ms-anim main .grid-container>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim .component .grid-container>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim .fullWidthSlider>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim .sfeerbeeldComponent:not(.ms-in):not(.ms-af),
html.ms-anim #history .grid-container>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim #leerlingenBegeleiding .grid-container>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim #directie .grid-container>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim #schoolBestuur .grid-container>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim #watNa>.grid-x>.cell:not(.ms-in):not(.ms-af),
html.ms-anim #callToAction .cell>:not(.ms-in):not(.ms-af),
html.ms-anim body>.responsive-embed:not(.ms-in):not(.ms-af),
html.ms-anim #gMap:not(.ms-in):not(.ms-af){opacity:0;transform:translate3d(0,var(--ms-y),0)}
html.ms-anim .ms-in{transition:opacity .5s var(--ms-ease),transform .6s var(--ms-ease)}
}
@keyframes ms-op{from{opacity:0;transform:translate3d(0,var(--ms-y),0)}}
@keyframes ms-vervaag{from{opacity:0}}

/* 3. Knoppen met pijl en schaduwblok (customBtn blauw, customBtn2 groen): iets donkerder, het blok schuift weg (lift), de pijl schuift op */
@media (hover:hover){
a.button.customBtn:hover{background-color:#062d58}
a.button.customBtn2:hover{background-color:#32641a}
}
a.button.customBtn:focus-visible{background-color:#062d58}
a.button.customBtn2:focus-visible{background-color:#32641a}
@media (prefers-reduced-motion:no-preference){
a.button.customBtn,a.button.customBtn2{transition:background-color .25s ease-out,color .25s ease-out,background-position .3s var(--ms-ease)}
a.button.customBtn::after,a.button.customBtn2::after{transition:transform .3s var(--ms-ease)}
a.button.customBtn:focus-visible,a.button.customBtn2:focus-visible{background-position:calc(95% + 5px) 50%}
a.button.customBtn:focus-visible::after,a.button.customBtn2:focus-visible::after{transform:translate(3px,3px)}
a.button.customBtn:active::after,a.button.customBtn2:active::after{transform:translate(-2px,-2px);transition-duration:.08s}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
a.button.customBtn:hover,a.button.customBtn2:hover{background-position:calc(95% + 5px) 50%}
a.button.customBtn:hover::after,a.button.customBtn2:hover::after{transform:translate(3px,3px)}
a.button.customBtn:active::after,a.button.customBtn2:active::after{transform:translate(-2px,-2px)}
}

/* 4. Tekstlinks met pijl ("Meer info", vacatures, solliciteren, Smartschool): de pijl schuift op */
@media (prefers-reduced-motion:no-preference){
.introButton a::after,.vacature a::after,a.applyLink::after,#footerButtons a:last-of-type:not(.button)::after{transition:transform .3s var(--ms-ease)}
.introButton a:focus-visible::after,.vacature a:focus-visible::after,a.applyLink:focus-visible::after,#footerButtons a:last-of-type:not(.button):focus-visible::after{transform:translateX(4px)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.introButton a:hover::after,.vacature a:hover::after,a.applyLink:hover::after,#footerButtons a:last-of-type:not(.button):hover::after{transform:translateX(4px)}
}

/* 5. Nieuwskaarten: de foto zoomt licht in, binnen de eigen rand. Geen overflow:hidden op de omhulling: zonder JavaScript (of als
   een foto niet laadt) steken datum en titel boven de lege omhulling uit en moeten ze zichtbaar blijven. clip-path inset(1.923%)
   bij scale(1.04) houdt de zichtbare maat gelijk: 1,04 x (1 - 2 x 0,01923) = 1. In rust inset(-2px): knipt niets (ook geen
   randpixels), maar laat de overgang wel vloeiend verlopen. Alleen met JavaScript (html.ms-anim): zonder
   JavaScript laadt Interchange geen foto en blijft alles zoals het was. */
@media (prefers-reduced-motion:no-preference){
html.ms-anim #newsList .newsItem .imgWrapper img{clip-path:inset(-2px);transition:transform .6s var(--ms-ease),clip-path .6s var(--ms-ease)}
html.ms-anim #newsList .newsItem a:focus-visible .imgWrapper img{transform:scale(1.04);clip-path:inset(1.923%)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
html.ms-anim #newsList .newsItem a:hover .imgWrapper img{transform:scale(1.04);clip-path:inset(1.923%)}
}

/* 6. Gewone tekstlinks in de inhoud: een lijn groeit onder de link */
main a:not([class]),.component a:not([class]),#watNa a:not([class]),#directie a:not([class]),#leerlingenBegeleiding a:not([class]),#bottomInner a:not([class]){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}
#newsList a:not([class]),.vacature a:not([class]){background-image:none}
main a:not([class]):focus-visible,.component a:not([class]):focus-visible,#watNa a:not([class]):focus-visible,#directie a:not([class]):focus-visible,#leerlingenBegeleiding a:not([class]):focus-visible,#bottomInner a:not([class]):focus-visible{background-size:100% 1px}
@media (hover:hover){
main a:not([class]):hover,.component a:not([class]):hover,#watNa a:not([class]):hover,#directie a:not([class]):hover,#leerlingenBegeleiding a:not([class]):hover,#bottomInner a:not([class]):hover{background-size:100% 1px}
}
@media (prefers-reduced-motion:no-preference){
main a:not([class]),.component a:not([class]),#watNa a:not([class]),#directie a:not([class]),#leerlingenBegeleiding a:not([class]),#bottomInner a:not([class]){transition:background-size .3s var(--ms-ease),color .2s ease-out}
}

/* 7. Menu bovenaan: vloeiende kleurovergang naar groen bij hover */
@media (hover:hover){
#pageStart header .menu a:not(.button):hover{color:#3f7d20}
}
@media (prefers-reduced-motion:no-preference){
#pageStart header .menu a:not(.button){transition:color .2s ease-out}
}

/* 8. Duidelijke focusrand voor toetsenbordgebruikers (het thema zette outline:0 op alle links): wit binnenrandje en blauwe rand */
html a:focus-visible,html button:focus-visible,html [type=submit]:focus-visible,html [type=button]:focus-visible,html summary:focus-visible,html [tabindex]:focus-visible{outline:2px solid #073568;outline-offset:2px;box-shadow:0 0 0 2px #fff}
html #newsList .newsItem a:focus-visible{outline:0;box-shadow:none}
html #newsList .newsItem a:focus-visible .imgWrapper{outline:2px solid #073568;outline-offset:2px;box-shadow:0 0 0 2px #fff}

/* 9. Uitklapmenu van het hoofdmenu (desktop, Foundation-dropdown), op vraag van de eigenaar "iets moderner, geen strokes":
   geen rand of lijnen meer, een zachte schaduw, licht afgeronde hoeken, ruimere items en een rustige lichtgroene hover.
   Bij het openen een korte fade met een kleine verschuiving (niet bij reduced motion). Kleuren en letters blijven die van het thema. */
.dropdown.menu .is-dropdown-submenu{border:0;border-radius:8px;padding:.5rem;background:#fff;min-width:220px;box-shadow:0 12px 32px rgba(7,53,104,.14),0 2px 8px rgba(7,53,104,.08)}
.dropdown.menu .is-dropdown-submenu a{padding:.8rem 1.1rem;border-radius:5px}
.dropdown.menu .is-dropdown-submenu a:focus-visible{background-color:#eef4ea}
@media (hover:hover){
#pageStart header .dropdown.menu .is-dropdown-submenu a:hover{background-color:#eef4ea;color:#073568}
}
@media (prefers-reduced-motion:no-preference){
.dropdown.menu .is-dropdown-submenu a{transition:background-color .2s ease-out,color .2s ease-out}
.dropdown.menu .is-dropdown-submenu.js-dropdown-active{animation:ms-menu .22s var(--ms-ease)}
}
@keyframes ms-menu{from{opacity:0;transform:translate3d(0,-6px,0)}}