/* Tour — startpagina als game ("Missie gestart"). Bouwt voort op tour.css (huiskleuren). */
body.gs { overflow-x: hidden; }
body.gs > footer { background: var(--navy); border-top: 4px solid var(--orange); }

/* Strepen zoals de waarschuwingstape uit de huisstijl, langzaam bewegend */
.gs-tape { height: 16px; background-color: var(--orange); background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent); background-size: 32px 32px; animation: gs-tape 1.6s linear infinite; }
@keyframes gs-tape { from { background-position: 0 0; } to { background-position: 32px 0; } }

.gs-hero { position: relative; text-align: center; color: #fff; background: radial-gradient(circle at 50% 30%, #1a56a8 0%, var(--navy) 55%, #0b2557 100%); padding: 1.25rem 1rem 2rem; }
.gs-logo { display: block; margin: 0 auto 1rem; width: min(78%, 20rem); height: auto; }
.gs-kicker { display: inline-block; margin: 0 0 .6rem; padding: .25rem .8rem; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; animation: gs-blink 1.4s steps(2, jump-none) infinite; }
@keyframes gs-blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.gs-title { margin: 0 0 .5rem; font-size: 2.3rem; line-height: 1.05; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.gs-title em { font-style: normal; color: var(--orange); }
.gs-lead { max-width: 26rem; margin: 0 auto 1.1rem; font-size: 1.05rem; font-weight: 600; }

/* De vijf tokenplekken: nog niet gevonden = het echte token, doorzichtig en wat grijs; gevonden = vol in kleur met gloed */
.gs-slots { display: flex; justify-content: center; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.gs-slots .tour-token { width: 58px; height: 58px; filter: none; opacity: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); animation: gs-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * .09s + .2s); }
.gs-slots .tour-token img { filter: grayscale(.55) opacity(.42); transition: filter .4s; }
.gs-slots .tour-token .tour-token__n { display: none; }
.gs-slots .tour-token.is-found { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(255, 190, 90, .85); }
.gs-slots .tour-token.is-found img { filter: none; }
.gs-slots .tour-token.is-new { animation: gs-new 1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes gs-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gs-new { 0% { transform: scale(.4) rotate(-200deg); } 60% { transform: scale(1.35) rotate(15deg); } 100% { transform: scale(1) rotate(0); } }

/* Voortgangsbalk met de popcorn bij 3 van de 5 */
.gs-xp { position: relative; max-width: 24rem; margin: 0 auto .35rem; height: 20px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.gs-xp__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--xp, 0%); min-width: 20px; border-radius: 999px; background: linear-gradient(90deg, #ffb347, var(--orange)); transition: width .8s cubic-bezier(.2, 1, .3, 1); }
.gs-xp__mark { position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.gs-xp__text { margin: 0 0 1.25rem; font-weight: 800; font-size: .95rem; letter-spacing: .03em; }

.gs-start { display: inline-block; padding: 1rem 2.4rem; border: 0; border-bottom: 7px solid #b8480a; border-radius: 18px; background: var(--orange); color: #fff; font: inherit; font-size: 1.5rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; animation: gs-pulse 1.5s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.gs-start::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: gs-shine 2.8s ease-in-out infinite; }
.gs-start:active { transform: translateY(4px); border-bottom-width: 3px; animation: none; }
body.gs-started .gs-start { animation: none; background: #1f8a4c; border-bottom-color: #14502f; }
@keyframes gs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gs-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.gs-press { margin: .6rem 0 0; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .8; }

/* De delen eronder: kaarten met een nummer, die er bij het scrollen in schuiven */
.gs-js .gs-reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s, transform .5s cubic-bezier(.2, 1, .3, 1); }
.gs-js .gs-reveal.is-in { opacity: 1; transform: none; }
.gs-head { display: flex; align-items: center; gap: .6rem; margin: 1.75rem 0 .75rem; }
.gs-head__n { flex: none; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 900; box-shadow: 0 3px 0 #b8480a; }
.gs-head h2 { margin: 0; font-size: 1.4rem; line-height: 1.15; color: var(--blue); text-transform: uppercase; }

.gs-screen { position: relative; padding: .5rem; border-radius: 18px; background: var(--navy); box-shadow: 0 6px 0 #0b2557, 0 10px 22px rgba(18, 40, 90, .35); }
.gs-screen__tag { position: absolute; z-index: 2; top: -.7rem; left: 1rem; padding: .15rem .7rem; border-radius: 6px; background: var(--orange); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gs-screen .tour-frame, .gs-screen .tour-video { margin: 0; border-radius: 12px; }

.gs-steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gs-step { display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: #fff; border-bottom: 6px solid rgba(18, 58, 122, .18); box-shadow: 0 2px 8px rgba(18, 40, 90, .12); }
.gs-step__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 14px; background: var(--blue); color: #fff; }
.gs-step__icon svg { width: 2.2rem; height: 2.2rem; }
.gs-step b { display: block; font-size: 1.1rem; color: var(--blue); text-transform: uppercase; }
.gs-step span { font-size: .98rem; }
.gs-reward { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 16px; background: #fff3dd; border: 3px dashed var(--orange); text-align: center; font-weight: 800; color: var(--ink); }

@media (min-width: 40rem) {
	.gs-title { font-size: 3rem; }
	.gs-slots .tour-token { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
	.gs-tape, .gs-kicker, .gs-start, .gs-start::after, .gs-slots .tour-token, .gs-slots .tour-token.is-new { animation: none; }
	.gs-js .gs-reveal { opacity: 1; transform: none; transition: none; }
	.gs-xp__fill { transition: none; }
}