:root {
    --achtergrond: #f1f5fb;
    --tekst: #16243d;
    --tekst-zacht: #5a6b85;
    --accent: #2d68c4;
    --accent-donker: #2354a0;
    --scan: #1fc46c;       
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.welkom {
    margin: 0;
    min-height: 100dvh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tekst);
    background: var(--achtergrond);
    overflow-x: hidden;
}

.welkom__scherm {
    min-height: 100dvh;
    padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
    overflow: hidden;
}

.logo {
    margin: 0;
    font-size: clamp(3.1rem, 17vw, 6.5rem);   
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    animation: naam-in 0.5s ease-out both;
}

.logo__tekst { display: inline-block; }

.i {
    position: relative;
    display: inline-block;
    width: 0.15em;
    height: 0.53em;                
    margin: 0 0.045em 0 0.06em;
    background: currentColor;
    border-radius: 0.05em;
}


.i__tag {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.06em);
    width: 0.46em;
    height: 0.46em;
    margin-left: -0.23em;
    z-index: 2;
    filter: saturate(0.3) opacity(0.55) drop-shadow(0 0 0 transparent);
    animation:
        tag-zoek 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.3s both,
        tag-klik 0.45s ease-out 1.9s forwards;
}

.i__tag svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes tag-zoek {
    0%   { transform: translate(-2.4em, -0.9em) scale(1.25) rotate(-20deg); opacity: 0; }
    10%  { opacity: 1; }
    25%  { transform: translate(-1.1em, -0.45em) scale(1.15) rotate(12deg); }
    45%  { transform: translate(1.6em, -0.75em) scale(1.2) rotate(-8deg); }
    65%  { transform: translate(0.9em, -0.2em) scale(1.1) rotate(10deg); }
    82%  { transform: translate(-0.35em, -0.3em) scale(1.05) rotate(-4deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes tag-klik {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); filter: saturate(1) opacity(1) drop-shadow(0 0 0.14em var(--scan)); }
    100% { transform: scale(1);   filter: saturate(1) opacity(1) drop-shadow(0 0 0.07em var(--scan)); }
}


.i__golf {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.06em + 0.23em);  
    width: 0.46em;
    height: 0.46em;
    margin: 0 0 -0.23em -0.23em;
    border: 0.03em solid var(--scan);
    border-radius: 50%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    animation: golf 1.15s ease-out both;
}

.i__golf--1 { animation-delay: 2.2s; }
.i__golf--2 { animation-delay: 2.38s; }
.i__golf--3 { animation-delay: 2.56s; }

@keyframes golf {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0;   transform: scale(8); }
}


.welkom__slogan {
    margin: 0;
    font-size: 1.05rem;
    color: var(--tekst-zacht);
    animation: verschijn 0.5s ease-out 2.6s both;
}

.welkom__acties {
    width: 100%;
    max-width: 22rem;
    margin-top: 1rem;
    animation: verschijn 0.5s ease-out 3s both;
}

.welkom__knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    padding: 0 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
}

.welkom__knop:hover { background: var(--accent-donker); }

.welkom__knop:focus-visible,
.welkom__wissel a:focus-visible {
    outline: 3px solid rgba(45, 104, 196, 0.35);
    outline-offset: 3px;
}

.welkom__wissel {
    margin: 1.1rem 0 0;
    color: var(--tekst-zacht);
}

.welkom__wissel a {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-radius: 4px;
}

.welkom__wissel a:hover { text-decoration: underline; }

@keyframes naam-in {
    from { opacity: 0; transform: translateY(0.25em); }
    to   { opacity: 1; transform: none; }
}

@keyframes verschijn {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
}


@media (prefers-reduced-motion: reduce) {
    .logo,
    .welkom__slogan,
    .welkom__acties { animation: none; }

    .i__tag {
        animation: none;
        filter: none;
    }

    .i__golf { display: none; }
}