/* Janny Weenk – warm paper, soft watercolour in the corners, a brush stroke under the name */
:root { --paper: #f7f1e8; --ink: #3b302a; --terra: #b85c3e; --muted: #7a6b60; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 18px/1.6 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    display: flex; align-items: center; justify-content: center; overflow-x: hidden; }

/* the paper's grain, and watercolour blots that come up softly */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(45deg, rgba(90, 70, 50, .025) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(90, 70, 50, .02) 0 1px, transparent 1px 5px); }
.paint { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.paint span { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0; animation: bloom 2.6s ease-out forwards; }
.paint .p1 { width: 46vmax; height: 38vmax; left: -14vmax; top: -12vmax; background: radial-gradient(circle at 40% 40%, rgba(184, 92, 62, .38), rgba(184, 92, 62, 0) 70%); }
.paint .p2 { width: 40vmax; height: 34vmax; right: -12vmax; top: -8vmax; background: radial-gradient(circle at 55% 45%, rgba(214, 170, 82, .34), rgba(214, 170, 82, 0) 70%); animation-delay: .25s; }
.paint .p3 { width: 44vmax; height: 36vmax; left: -10vmax; bottom: -16vmax; background: radial-gradient(circle at 45% 55%, rgba(122, 150, 120, .34), rgba(122, 150, 120, 0) 70%); animation-delay: .45s; }
.paint .p4 { width: 38vmax; height: 32vmax; right: -12vmax; bottom: -12vmax; background: radial-gradient(circle at 50% 50%, rgba(98, 132, 170, .28), rgba(98, 132, 170, 0) 70%); animation-delay: .65s; }

.stage { text-align: center; padding: 40px 24px; }
.name { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(2.6rem, 9vw, 5.4rem); letter-spacing: .01em; line-height: 1.05; }
.stroke { display: block; width: min(420px, 78vw); height: auto; margin: 6px auto 18px; overflow: visible; }
.stroke path { fill: none; stroke: var(--terra); stroke-width: 7; stroke-linecap: round; opacity: .85;
    stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 1.1s cubic-bezier(.4, .1, .2, 1) 1s forwards; }
.what { margin: 0 0 1.8rem; color: var(--muted); font-size: clamp(1.15rem, 3.4vw, 1.5rem); letter-spacing: .06em; }
.btn { display: inline-block; padding: 11px 24px; border: 1.5px solid var(--terra); border-radius: 999px; color: var(--terra); text-decoration: none;
    font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .02em; transition: background .25s, color .25s; }
.btn:hover, .btn:focus-visible { background: var(--terra); color: #fff; }
.btn:focus-visible { outline: 3px solid rgba(184, 92, 62, .35); outline-offset: 3px; }

/* one after the other: the name, the stroke being painted, the words, the address */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bloom { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.name { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .2s both; }
.what { animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.5s both; }
.mail { margin: 0; animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.8s both; }

@media (prefers-reduced-motion: reduce) {
    .paint span, .name, .what, .mail { animation: none; opacity: 1; }
    .stroke path { animation: none; stroke-dashoffset: 0; }
    .btn { transition: none; }
}