/* ============================================================
   GENNEXT — maximaal kleurrijk, maximaal inclusief.
   Progress-pride palet uit het logo; alles rond, alles beweegt.
   ============================================================ */

@font-face {
    font-family: 'Sugar Loved';
    src: url('/fonts/gennext/sugar-loved.woff2') format('woff2'),
         url('/fonts/gennext/sugar-loved.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo 2';
    src: url('/fonts/gennext/baloo2-var.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
}

.gn-page {
    font-family: 'Baloo 2', system-ui, sans-serif;
    --gn-ease: cubic-bezier(.34, 1.56, .64, 1); /* bouncy */
    --gn-red: #E40303;
    --gn-orange: #FF8C00;
    --gn-yellow: #FFED00;
    --gn-green: #008026;
    --gn-blue: #004DFF;
    --gn-purple: #750787;
    --gn-pink: #FFAFC8;
    --gn-lblue: #74D7EE;
    --gn-brown: #613915;
    --gn-rainbow: linear-gradient(90deg, var(--gn-red), var(--gn-orange), var(--gn-yellow), var(--gn-green), var(--gn-blue), var(--gn-purple));
}
.gn-display {
    font-family: 'Sugar Loved', 'Baloo 2', sans-serif;
    font-weight: 400;
}

/* ---- animated rainbow text ---- */
.gn-rainbow-text {
    background: linear-gradient(90deg, var(--gn-red), var(--gn-orange), var(--gn-yellow), var(--gn-green), var(--gn-blue), var(--gn-purple), var(--gn-red));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gn-rainbow-slide 6s linear infinite;
}
@keyframes gn-rainbow-slide { to { background-position: 300% 0; } }

/* ---- animated gradient backdrop ---- */
.gn-hero-bg {
    background: linear-gradient(120deg, var(--gn-red), var(--gn-orange), var(--gn-yellow), var(--gn-green), var(--gn-blue), var(--gn-purple), var(--gn-pink), var(--gn-lblue), var(--gn-red));
    background-size: 400% 400%;
    animation: gn-gradient-drift 16s ease infinite;
}
@keyframes gn-gradient-drift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* pride stripe bar */
.gn-stripes {
    background: linear-gradient(90deg,
        var(--gn-red) 0 16.6%, var(--gn-orange) 0 33.3%, var(--gn-yellow) 0 50%,
        var(--gn-green) 0 66.6%, var(--gn-blue) 0 83.3%, var(--gn-purple) 0 100%);
}

/* ---- reveals (zelfde contract als viper, eigen smaak: pop-in) ---- */
.gn-reveal { opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .7s var(--gn-ease), transform .9s var(--gn-ease); }
.gn-reveal.gn-in { opacity: 1; transform: none; }
/* failsafe: content mag nooit verborgen blijven */
@keyframes gn-failsafe { to { opacity: 1; transform: none; } }
.gn-reveal:not(.gn-armed) { animation: gn-failsafe .8s var(--gn-ease) 2.8s forwards; }

/* ---- wiggle / float / spin ---- */
.gn-float { animation: gn-float 5s ease-in-out infinite; }
@keyframes gn-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.gn-spin-slow { animation: gn-spin 24s linear infinite; }
@keyframes gn-spin { to { transform: rotate(360deg); } }
.gn-wiggle:hover { animation: gn-wiggle .5s var(--gn-ease); }
@keyframes gn-wiggle { 25% { transform: rotate(-3deg) scale(1.04); } 75% { transform: rotate(3deg) scale(1.04); } }

/* ---- marquee ---- */
.gn-marquee-track { display: flex; width: max-content; animation: gn-marquee 22s linear infinite; }
@keyframes gn-marquee { to { transform: translateX(-50%); } }

/* ---- slider ---- */
.gn-slide-track { display: flex; transition: transform .8s var(--gn-ease); }
.gn-thumb { transition: transform .35s var(--gn-ease), outline-color .35s; outline: 3px solid transparent; outline-offset: 3px; border-radius: 1rem; overflow: hidden; }
.gn-thumb:hover { transform: translateY(-5px) rotate(-2deg); }
.gn-thumb.gn-active { outline-color: var(--gn-purple); }

/* ---- confetti dots (pure CSS, geen emoji's) ---- */
.gn-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 5px at 12% 18%, var(--gn-yellow) 98%, transparent),
        radial-gradient(circle 4px at 78% 12%, var(--gn-pink) 98%, transparent),
        radial-gradient(circle 6px at 88% 62%, var(--gn-green) 98%, transparent),
        radial-gradient(circle 4px at 32% 78%, var(--gn-blue) 98%, transparent),
        radial-gradient(circle 5px at 58% 32%, var(--gn-red) 98%, transparent),
        radial-gradient(circle 4px at 8% 58%, var(--gn-purple) 98%, transparent),
        radial-gradient(circle 5px at 68% 88%, var(--gn-orange) 98%, transparent),
        radial-gradient(circle 4px at 44% 8%, var(--gn-lblue) 98%, transparent);
    opacity: .8;
}

/* hover: kaarten kantelen vrolijk */
.gn-card { transition: transform .5s var(--gn-ease), box-shadow .5s var(--gn-ease); }
.gn-card:hover { transform: rotate(-1.2deg) scale(1.02); box-shadow: 0 18px 50px -12px rgba(117, 7, 135, .35); }

/* de hele pagina is een gecapte canvas, net als bij viper */
.gn-page { max-width: 1680px; margin-inline: auto; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    .gn-rainbow-text, .gn-hero-bg, .gn-float, .gn-spin-slow, .gn-marquee-track { animation-duration: 120s; }
    .gn-reveal { transition-duration: .01s; }
}
@media (max-width: 640px) {
    .gn-float, .gn-wiggle:hover { animation: none; }
    .gn-card:hover { transform: none; }
}

/* de X uit het logo: progress-kleuren, diagonaal */
.gn-x {
    background: linear-gradient(135deg, #FFAFC8 0 22%, #74D7EE 22% 42%, #613915 42% 62%, #000 62% 82%, #74D7EE 82% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- collage-hero: handschrift, stickers, verfstreken ---- */
@font-face {
    font-family: 'Caveat';
    src: url('/fonts/gennext/caveat-var.woff2') format('woff2');
    font-weight: 600 700;
    font-display: swap;
}
.gn-hand { font-family: 'Caveat', cursive; font-weight: 700; }

.gn-sticker {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .28);
    transition: transform .5s var(--gn-ease);
}
.gn-sticker:hover { transform: rotate(0deg) scale(1.05) !important; }

.gn-blob {
    border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
    animation: gn-blob-morph 14s ease-in-out infinite;
}
@keyframes gn-blob-morph {
    0%, 100% { border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%; }
    50% { border-radius: 45% 55% 44% 56% / 58% 45% 55% 42%; }
}

.gn-float-slow { animation: gn-float-slow 7s ease-in-out infinite; }
@keyframes gn-float-slow { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }

.gn-underline-hand {
    background: linear-gradient(to right, var(--gn-purple), var(--gn-purple)) no-repeat left 96% / 100% .12em;
    padding-bottom: .1em;
}