/* Theme and language are toggled by two hidden checkboxes via :has(), no JS. */

:root {
    --bg: #fff1c9;
    --card: #fffdf7;
    --ink: #1c1b22;
    --soft: #4d4a57;
    --pop: #ff5a36;
    --pop2: #3a86ff;
    --round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
}

:root:has(#theme:checked) {
    --bg: #1d1b33;
    --card: #28264a;
    --ink: #f4efe2;
    --soft: #c2bdd8;
    --pop: #ff7a59;
    --pop2: #7cb2ff;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--bg);
    color: var(--ink);
    font: 500 1.05rem/1.6 var(--round);
    transition: background-color 0.3s, color 0.3s;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Language: Dutch by default, English when #lang is checked */
body:not(:has(#lang:checked)) [lang="en"],
body:not(:has(#lang:checked)) .show-en,
body:has(#lang:checked) main [lang="nl"],
body:has(#lang:checked) footer [lang="nl"],
body:has(#lang:checked) .show-nl,
body:not(:has(#theme:checked)) .sun,
body:has(#theme:checked) .moon {
    display: none;
}

/* Toggle buttons */
.toggles {
    justify-self: end;
    display: flex;
    gap: 0.6rem;
}

.btn {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.6rem;
    border: 2.5px solid var(--ink);
    border-radius: 0.9rem;
    background: var(--card);
    box-shadow: 3px 3px 0 var(--ink);
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: translate 0.15s, box-shadow 0.15s, background-color 0.3s;
}

.btn:hover {
    translate: -1px -1px;
    box-shadow: 4px 4px 0 var(--ink);
}

.btn:active {
    translate: 3px 3px;
    box-shadow: 0 0 0 var(--ink);
}

body:has(#lang:focus-visible) .lang-toggle,
body:has(#theme:focus-visible) .theme-toggle {
    outline: 3px solid var(--pop2);
    outline-offset: 3px;
}

/* The card */
.card {
    position: relative;
    align-self: center;
    width: min(100%, 34rem);
    padding: clamp(1.75rem, 6vw, 3rem);
    border: 3px solid var(--ink);
    border-radius: 1.75rem;
    background: var(--card);
    box-shadow: 8px 8px 0 var(--ink);
    rotate: -1.5deg;
    transition: background-color 0.3s;
}

.sticker {
    position: absolute;
    top: -2.75rem;
    right: -2rem;
    width: clamp(5.5rem, 22vw, 7.5rem);
    animation: spin 18s linear infinite;
}

.sticker circle {
    fill: var(--pop);
    stroke: var(--ink);
    stroke-width: 2;
}

.sticker text {
    fill: #fff;
    font: 800 9px var(--round);
    letter-spacing: 0.5px;
}

.sticker .star {
    font-size: 26px;
    text-anchor: middle;
    dominant-baseline: central;
}

.hello {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pop2);
}

.wave {
    display: inline-block;
    transform-origin: 70% 80%;
    animation: wave 2.4s ease-in-out infinite;
}

h1 {
    margin: 0.25rem 0 1rem;
    font: 900 clamp(3.25rem, 14vw, 5.75rem)/1 var(--round);
    letter-spacing: -0.04em;
}

.letters span {
    display: inline-block;
    transition: translate 0.2s cubic-bezier(0.3, 1.8, 0.5, 1), rotate 0.2s, color 0.2s;
}

.letters span:hover {
    translate: 0 -0.15em;
    rotate: -8deg;
    color: var(--pop);
}

.letters span:nth-child(even):hover {
    rotate: 8deg;
    color: var(--pop2);
}

.letters .dot {
    color: var(--pop);
}

.text {
    color: var(--soft);
}

footer {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--soft);
}

@keyframes spin {
    to { rotate: 360deg; }
}

@keyframes wave {
    0%, 60%, 100% { rotate: 0deg; }
    10%, 30% { rotate: 16deg; }
    20%, 40% { rotate: -10deg; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}