/* Shared animations. Header and footer stay put; only page content animates in. */

@keyframes reveal {
    from { opacity: 0; transform: translateY(0.4em); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Block of content fading up. Set --delay inline to stagger. */
.rise {
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--delay, 0s);
}

/* Word or letter reveal. Set --i on each piece; --base and --step on the parent. */
.reveal {
    display: inline-block;
    animation: reveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--base, 0.3s) + var(--i, 0) * var(--step, 0.09s));
}

/* Underline draws in from the left on hover */
.draw-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.draw-underline:hover,
.draw-underline:focus-visible {
    background-size: 100% 1px;
}

html {
    scroll-behavior: smooth;
}

/* Definition panel brightens briefly when jumped to from its word */
@keyframes highlight {
    from { background-color: rgba(255, 255, 255, 0.12); }
    to   { background-color: rgba(255, 255, 255, 0.04); }
}
.definition:target {
    animation: highlight 1.6s ease-out 0.3s both;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .definition:target { animation: none; }
    .rise, .reveal { animation: none; }
    .draw-underline { transition: none; }
}