/* ═══════════════════════════════════════════════════════════ SEENN — de effecten Gebouwd door Smeulders Digital. Alles in dit bestand hangt aan de klasse "fx" op . Die zet js/effecten.js erop, en alleen wanneer het mag: geen effecten voor wie in zijn systeem minder beweging gevraagd heeft, en de dingen die een muis nodig hebben verschijnen niet op een toestel zonder muis. Komt dit bestand of dat script er niet door, dan staat de site er gewoon zoals ze was. Er hangt hier niets aan vast dat de inhoud nodig heeft. De gedachte achter het geheel: het is een donkere zaak waar het licht meebeweegt met wie er binnenkomt. De oogjes kijken je aan, het kaarslicht volgt je muis, de tekst komt op terwijl je zakt. Niets beweegt vanzelf; alles beweegt omdat jij er bent. Volgorde hieronder: 1. de lagen op elkaar 2. het kaarslicht 4. de korrel 5. tekst die woord per woord opkomt 6. beelden die opengeveegd worden 14. wie minder beweging wil 15. het startscherm als een deur De nummers lopen niet door. Dat is met opzet: op 3 sep 2026 zijn de blokken 3, 7, en 9 tot en met 13 eruit gehaald omdat de site te druk werd, en dan is een gat duidelijker dan alles hernummeren. ═══════════════════════════════════════════════════════════ */ /* ── 1. De lagen op elkaar ───────────────────────────────── De site zelf gebruikt 35 tot 50 voor de kopbalk en de duimbalk, 100 voor de link naar de inhoud en 200 voor het startscherm. Alles hieronder blijft daar netjes tussen of erboven. */ :root { --laag-korrel: 64; /* de filmkorrel */ --laag-licht: 210; /* het kaarslicht, net boven het startscherm */ } /* Het kaarslicht ligt net boven het startscherm: je draagt je licht dus al mee voor je binnen bent. */ /* ── 2. Het kaarslicht ───────────────────────────────────── Een warme vlek die je muis volgt, met vertraging, zoals je een kaars door een donkere zaak draagt. Hij licht alleen op, hij maakt niets donkerder: dat doet de blendmodus screen. Javascript zet --lx en --ly; de vertraging zit daar ook, want die moet frame per frame en niet in een css-overgang. */ .kaarslicht { display: none; } html.fx.wijst .kaarslicht { display: block; position: fixed; left: 0; top: 0; z-index: var(--laag-licht); width: 52rem; height: 52rem; margin: -26rem 0 0 -26rem; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle closest-side, rgba(217, 196, 143, .26), rgba(192, 163, 96, .12) 34%, rgba(192, 163, 96, .04) 58%, transparent 74%); transform: translate3d(var(--lx, 50vw), var(--ly, 50vh), 0); opacity: 0; transition: opacity .9s ease; will-change: transform; } html.fx.wijst.licht-aan .kaarslicht { opacity: 1; } /* Op de kaartpagina staat veel tekst dicht op elkaar; daar mag het licht wat zachter zijn. */ html.fx.wijst.licht-aan .p-wijnbar .kaarslicht { opacity: .7; } /* ── 4. De korrel ────────────────────────────────────────── Een heel fijne laag ruis over alles heen. Je ziet hem niet bewust, maar zonder korrel ziet een groot zwart vlak er plat en digitaal uit, en met korrel ziet het eruit als film. */ html.fx .korrel { position: fixed; inset: 0; z-index: var(--laag-korrel); pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E"); background-size: 200px 200px; } .korrel { display: none; } html.fx .korrel { display: block; } /* ── 5. Tekst die woord per woord opkomt ─────────────────── Javascript hakt elke titel in woorden en zet elk woord in een vakje dat afsnijdt. Het woord staat eronder en schuift omhoog naar binnen, het ene na het andere. Dat is het verschil tussen tekst die verschijnt en tekst die aankomt. --i is de plaats van het woord in de zin en bepaalt de vertraging. Die zet javascript erop. */ html.fx .split { display: block; } html.fx .split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; /* anders knipt hij de staart van een g of een j af */ } html.fx .split .w__i { display: inline-block; transform: translateY(115%); transition: transform 1s var(--veer); transition-delay: calc(var(--i, 0) * .06s); } html.fx .split.is-in .w__i { transform: none; } /* De titel van het eerste scherm heeft in style.css al zijn eigen opkomst. Die zetten we hier uit, anders lopen er twee door elkaar. */ html.fx.js .held__titel { opacity: 1; clip-path: none; transform: none; animation: none; } /* ── 6. Beelden die opengeveegd worden ───────────────────── In plaats van alleen uitzoomen wordt een foto nu ook van onderaf opengeveegd. Twee bewegingen tegelijk, met een klein verschil in snelheid, en dat verschil is wat het duur maakt. */ html.fx.js .zoem img { clip-path: inset(0 0 100% 0); transform: scale(1.16); transition: clip-path 1.25s var(--veer), transform 1.7s var(--veer); } html.fx.js .zoem.is-in img, html.fx.js .is-in .zoem img { clip-path: inset(0 0 0 0); transform: none; } /* ── 14. Wie minder beweging wil ─────────────────────────── Javascript zet de klasse fx dan al niet, dus hier hoeft eigenlijk niets meer te gebeuren. Dit staat er als tweede slot op de deur, voor het geval de klasse er langs een andere weg toch op raakt. */ @media (prefers-reduced-motion: reduce) { html.fx .split .w__i { transform: none; transition: none; } html.fx.js .zoem img { clip-path: none; transform: none; transition: none; } html.fx .kaarslicht { display: none; } } /* ── 15. Het startscherm als een deur ────────────────────── In style.css vervaagt het startscherm bij het binnenkomen. Dat is netjes maar het is niets. Hier wordt het een deur: het bovenste luik gaat omhoog, het onderste omlaag, en daartussen komt de zaak tevoorschijn. Sinds 17 sep 2026 staat er een beeld over het hele scherm; elk luik draagt dan zijn helft van dat beeld mee (een tweede en derde kopie van dezelfde foto, precies dezelfde uitsnede), zodat de deur met het beeld en al opengaat. Zonder foto zijn de luiken de bronzen muur zelf. De klassen blijven exact dezelfde als daarvoor. Het stukje javascript in delen/kop.php dat de uitwegen regelt, weet hier niets van en hoeft er niets van te weten. */ html.fx.intro-toont .intro { background: transparent; transition: none; } html.fx.intro-toont .intro.is-weg { opacity: 1; transform: none; } /* Met de luiken erover hoeft het hele beeld eronder niet meer; het gaat meteen weg zodra de deur opengaat, anders blijft het in de kier staan. */ html.fx.intro-toont .intro.is-weg .intro__foto { opacity: 0; transition: opacity .2s ease; } .intro__luik { display: none; } html.fx.intro-toont .intro__luik { display: block; position: absolute; left: -1px; right: -1px; height: 50.5%; overflow: hidden; background: radial-gradient(70% 60% at 30% 40%, rgba(150, 98, 52, .45), rgba(150, 98, 52, 0) 70%), radial-gradient(50% 50% at 85% 85%, rgba(110, 70, 36, .35), rgba(110, 70, 36, 0) 70%), var(--nacht); z-index: 0; transition: transform 1.05s cubic-bezier(.76, 0, .24, 1); } /* Zonder foto is de muur één gradiënt over het hele scherm; elk luik toont dan zijn eigen helft ervan. */ html.fx.intro-toont .intro__luik { background-size: 100% 200%; } html.fx.intro-toont .intro__luik--boven { top: 0; background-position: top; } html.fx.intro-toont .intro__luik--onder { bottom: 0; background-position: bottom; } /* Met foto: in elk luik staat het hele beeld, even groot als het scherm, en het onderste luik laat zijn onderkant zien. */ html.fx.intro-toont .intro__luik picture { position: absolute; left: 0; right: 0; height: 100vh; height: 100svh; display: block; } html.fx.intro-toont .intro__luik img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } html.fx.intro-toont .intro__luik--boven picture { top: 0; } html.fx.intro-toont .intro__luik--onder picture { bottom: 0; } html.fx.intro-toont .intro.is-weg .intro__luik--boven { transform: translateY(-100%); } html.fx.intro-toont .intro.is-weg .intro__luik--onder { transform: translateY(100%); } /* Het logo, de druiven en de knop gaan als eerste weg, anders zweven ze nog even in het gat tussen de twee luiken. */ html.fx.intro-toont .intro__midden, html.fx.intro-toont .intro__druiven, html.fx.intro-toont .intro__binnen { z-index: 1; transition: opacity .34s ease, transform .5s var(--veer); } html.fx.intro-toont .intro.is-weg .intro__midden, html.fx.intro-toont .intro.is-weg .intro__druiven, html.fx.intro-toont .intro.is-weg .intro__binnen { opacity: 0; transform: scale(.96); } /* De knipperende oogjes van het oude startscherm (ogen--intro) zijn er sinds 17 sep 2026 niet meer; het startscherm is nu een beeld. */ /* De titels binnen een blok dat opkomt, hoeven niet ook nog eens te vervagen: de woorden doen het werk al. */ html.fx .rijs > .titel, html.fx .rijs > .split { opacity: 1; transform: none; filter: none; } /* Het randje rond Kom binnen is er voor wie met de tab-toets werkt. Het staat er alleen wanneer de browser vindt dat het nodig is. */ html.fx .intro__binnen:focus-visible { outline: 1px solid rgba(192, 163, 96, .8); outline-offset: .75rem; border-radius: 2px; }