/* Feestdagthema's (js/thema.js). Alles hier geldt alleen met html[data-thema]; zonder thema doet dit bestand niets. */

/* de algemene svg-regel in gc.css geeft elke vorm een lijn; de tekeningen hier hebben hun eigen lijnen */
.th-lights, .th-cap, .th-bank, .th-scene svg { stroke: none; stroke-width: 1; flex: none; }

/* deeltjes over de hele pagina: boven de inhoud, onder de kop en de reserveerknop, klikt nergens doorheen */
.th-fx { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* lichtjes onder de kop */
/* de slinger hangt aan de balk: bovenaan de homepage is de kop doorzichtig en zou hij zweven, dus hij rolt pas uit als de balk er is */
.th-lights { position: absolute; left: 0; top: 100%; width: 100%; height: auto; pointer-events: none; overflow: visible; opacity: 0; clip-path: inset(0 -20px 100% -20px); transition: opacity .2s, clip-path .45s var(--ease); }
.is-scrolled .th-lights, .is-page .th-lights { opacity: 1; clip-path: inset(-4px -20px -24px -20px); }
.nav-open .th-lights { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .th-lights { transition: none; } }
/* achter de slinger loopt de kop zacht uit, zodat tekst wegvalt voordat hij de slinger raakt */
html[data-thema] .top::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--th-hang, 0px) + 18px); background: linear-gradient(180deg, var(--bg) 0, var(--bg) 74%, transparent 100%); pointer-events: none; opacity: 0; transition: opacity .2s; }
html[data-thema].is-scrolled .top::before, html[data-thema] .is-page .top::before { opacity: 1; }
html[data-thema].nav-open .top::before, html[data-thema] .nav-open .top::before { opacity: 0; }
/* header en strook zijn één dichte band: een doorzichtige header wordt grijs boven lichte kaarten en geeft een naad */
html[data-thema].is-scrolled .top, html[data-thema] .is-page .top { background: var(--bg); backdrop-filter: none; border-color: transparent; }
/* wat onder de kop vastzit, schuift de hoogte van de slinger op */
html[data-thema] { scroll-padding-top: calc(96px + var(--bar-h) + var(--th-hang, 0px)); }
[data-thema] .mjump { padding-top: calc(14px + var(--th-hang, 0px)); }
[data-thema] .mix__side { top: calc(100px + var(--th-hang, 0px)); max-height: calc(100svh - 124px - var(--th-hang, 0px)); }
.th-bulb { animation: th-twinkle 2.6s ease-in-out var(--d) infinite alternate; }
@keyframes th-twinkle { 0%, 30% { opacity: 1; } 100% { opacity: .35; } }

/* sneeuwkapjes op de bovenrand van kaarten (binnen de kaart, dus de ronde hoeken knippen ze netjes af) */
.th-cap { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(18, 16, 21, .35)); }
.worlds__grid a, .dish figure, .ck, .greview, .post figure, .sp, .mpanel--sp { position: relative; }
.dock__main { position: relative; overflow: visible; }
.th-cap--dock { left: 50%; top: -5px; width: 86%; height: 12px; transform: translateX(-50%); filter: drop-shadow(0 1px 1px rgba(18, 16, 21, .3)); }
.th-cap--top { top: -9px; height: 14px; }
[data-thema="carnaval"] .th-cap--top { top: 0; } /* de vlaggetjes hangen vanaf de rand van de knop omlaag */
[data-thema] .ck, [data-thema] .greview { overflow: clip; }
/* boven de titel en de sterren blijft ruimte vrij voor de kaartrand */
html[data-thema] .ck, html[data-thema] .greview { padding-top: 32px; }
/* door de schaduw zouden de uitgespaarde hartjes in het kant dichtlopen */
[data-thema="valentijn"] .th-cap { filter: none; }

/* sneeuwbank onderaan de hero, in plaats van de neonlijn */
.th-bank { position: absolute; left: 0; bottom: -1px; z-index: 0; width: 100%; pointer-events: none; }
[data-thema] .hero__neon { display: none; }

/* scène onderaan de footer */
.th-scene { position: relative; margin-top: 8px; line-height: 0; pointer-events: none; }
.th-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.th-glint { animation: th-glint 3.2s ease-in-out var(--d) infinite; }
@keyframes th-glint { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.th-man { pointer-events: auto; cursor: pointer; }
.th-man.is-hop { animation: th-hop .7s var(--ease); }
.th-man.is-hop .th-hat { animation: th-hat .7s var(--ease); }
@keyframes th-hop { 30% { transform: translateY(-14px) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } }
@keyframes th-hat { 25%, 55% { transform: translateY(-16px) rotate(-12deg); } }
.th-neon { opacity: .2; filter: drop-shadow(0 0 2px rgba(217, 150, 242, 1)) drop-shadow(0 0 8px rgba(176, 72, 214, .9)) drop-shadow(0 0 22px rgba(176, 72, 214, .6)); }
.th-on .th-neon { animation: th-neon 1.6s steps(1) var(--d) forwards; }
@keyframes th-neon { 0% { opacity: .25; } 10% { opacity: 1; } 18% { opacity: .3; } 26%, 100% { opacity: 1; } } /* gaat aan zoals een neonbuis: eerst even flikkeren */
[data-thema] .foot { padding-bottom: 0; }
[data-thema] .foot__base { margin-bottom: 0; }

/* de andere feestdagen */
.th-sway { transform-box: fill-box; transform-origin: 50% 0; animation: th-sway 3.4s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes th-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.th-burst { opacity: 0; animation: th-burst 3.2s var(--ease) var(--d) infinite; }
@keyframes th-burst { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; } 55% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.06); } }
.th-rise { animation: th-rise 2.4s ease-in var(--d) infinite; }
@keyframes th-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
.th-float { animation: th-float 6s ease-in-out var(--d) infinite; }
@keyframes th-float { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .85; } 100% { opacity: 0; transform: translateY(-110px); } }
.th-bob { animation: th-bob 3.6s ease-in-out var(--d) infinite alternate; }
@keyframes th-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.th-egg { animation: th-egg 4.2s ease-in-out var(--d) infinite alternate; }
@keyframes th-egg { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.th-year { font-family: var(--display); letter-spacing: .04em; }
.th-count { position: absolute; margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.4; color: var(--ink); letter-spacing: .02em; pointer-events: none; font-variant-numeric: tabular-nums; }
/* tikken op het tafereel: proosten, wiebelen, kloppen, slingeren, wiegen */
[data-thema="oudnieuw"] .th-man.is-hop, [data-thema="pasen"] .th-man.is-hop { animation: none; }
.th-man.is-hop .th-glass--l { animation: th-clink-l .8s var(--ease); }
.th-man.is-hop .th-glass--r { animation: th-clink-r .8s var(--ease); }
@keyframes th-clink-l { 40% { transform: rotate(9deg); } }
@keyframes th-clink-r { 40% { transform: rotate(-9deg); } }
[data-thema="carnaval"] .th-man.is-hop { animation: th-wobble .9s var(--ease); }
@keyframes th-wobble { 20% { transform: rotate(-7deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-2deg); } }
[data-thema="valentijn"] .th-man.is-hop { animation: th-beat .9s var(--ease); }
@keyframes th-beat { 15% { transform: scale(1.1); } 30% { transform: scale(.98); } 45% { transform: scale(1.07); } 70% { transform: scale(1); } }
.th-man.is-hop .th-egg { animation: th-swing 1.8s var(--ease); }
@keyframes th-swing { 15% { transform: rotate(9deg); } 40% { transform: rotate(-6deg); } 65% { transform: rotate(3deg); } }
[data-thema="moederdag"] .th-man.is-hop { animation: th-bloom 1.2s var(--ease); }
@keyframes th-bloom { 25% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }

/* stilzetten */
.th-pause { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink); font: 500 16px var(--body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s; }
.th-pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.th-pause__go { display: none; }
.th-pause[aria-pressed="true"] .th-pause__p { display: none; }
.th-pause[aria-pressed="true"] .th-pause__go { display: inline; }
@media (hover: hover) { .th-pause:hover { border-color: var(--neon); } }


/* stil (knop of minder beweging): alles staat, de versiering blijft */
.th-still .th-bulb, .th-still .th-neon, .th-still .th-glint, .th-still .th-sway, .th-still .th-burst, .th-still .th-rise, .th-still .th-float, .th-still .th-egg, .th-still .th-bob { animation: none; }
.th-still .hero__img img, .th-still .hero__title em { animation: none; } /* wie stilzet, verwacht dat niets meer beweegt */
.th-still .th-burst, .th-still .th-float { opacity: .9; }
.th-still .th-neon { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .th-bulb, .th-neon, .th-glint, .th-sway, .th-burst, .th-rise, .th-float, .th-egg, .th-bob, .th-man.is-hop, .th-man.is-hop *, .th-man.is-hop .th-hat { animation: none; } .th-neon, .th-burst, .th-float { opacity: 1; } }

/* de stilzetknop staat in dezelfde rij als de copyright-regel */
.foot__base { align-items: center; }

/* de datum van de feestdag, boven het tafereel */
.th-date { margin: 40px 16px 32px; font-family: var(--display); font-size: 24px; line-height: 1.25; text-align: center; text-wrap: balance; color: var(--ink); }
@media (min-width: 761px) { .th-date { font-size: 34px; } }
.th-date span { display: block; }
.th-date span + span { margin-top: 4px; font-family: var(--body); font-size: 19px; letter-spacing: .01em; color: var(--ink-2, var(--ink)); }
@media (min-width: 761px) { .th-date span + span { font-size: 22px; } }
/* het teken in de bovenkopjes iets groter, zodat masker, ei en tulp te herkennen zijn */
[data-thema="carnaval"] svg.flower, [data-thema="pasen"] svg.flower, [data-thema="moederdag"] svg.flower { width: 18px; height: 18px; }
.th-date abbr { text-decoration: none; }