html {
    min-height: 100vh;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: clip;
    line-height: 1.55;
    scroll-behavior: smooth;
    color-scheme: light;
}

html,
body,
button,
input {
    font-family: var(--font-body);
    font-feature-settings: "ss01", "cv11";
}

body {
    color: var(--text);
    background-color: var(--page-background);
    overflow-x: clip;
}

p, h1, h2, h3, h4, h5, h6, li, blockquote, span, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img, video {
    max-width: 100%;
    height: auto;
}

a {
    color: currentColor;
    text-decoration: none;
}

address {
    font-style: normal;
}

::selection {
    background-color: var(--pink);
    color: var(--surface);
}

::-moz-selection {
    background-color: var(--pink);
    color: var(--surface);
}

/* === Motion utilities === */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }
.reveal[data-reveal-delay="5"] { transition-delay: 0.40s; }
.reveal[data-reveal-delay="6"] { transition-delay: 0.48s; }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes float-y-slow {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-22px) rotate(calc(var(--rot, 0deg) + 1.5deg)); }
}

@keyframes drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(4%, -6%, 0) scale(1.05); }
    66% { transform: translate3d(-3%, 4%, 0) scale(0.97); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes spin-slow {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 190, 0.45); }
    50% { box-shadow: 0 0 0 16px rgba(255, 79, 190, 0); }
}

@keyframes underline-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.is-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    background-size: 240px 240px;
    mix-blend-mode: multiply;
    opacity: 0.06;
    z-index: 1;
}