/* Decorative motion never shifts the hero copy or captures pointer events. */
.hero-copy { position: relative; z-index: 2; }

/* A crisp light passes through the letters, then catches the star above Stage.
   Static styles stay readable without JavaScript and under reduced motion. */
[data-wf-application] .hero-title {
    --hero-title-delay: 1.5s;
    color: inherit;
    text-shadow: none;
}
.hero-title-word { display: inline-block; }
.hero-title-stage { position: relative; margin-right: .35em; }
.hero-title-star {
    position: absolute;
    top: -.23em;
    right: -.4em;
    width: .65em;
    height: .65em;
    color: inherit;
    opacity: 1;
    pointer-events: none;
    filter: none;
}
.hero-title-playing .hero-title-letter {
    animation: hero-letter-light 1.6s ease-in-out calc(var(--hero-title-delay) + var(--letter-order) * .12s) both;
}
.hero-title-playing .hero-title-star {
    animation: hero-star-light 1.15s ease-out calc(var(--hero-title-delay) + 3.4s) both;
}
@keyframes hero-letter-light {
    0% { color: var(--wf-color-ink); }
    32% { color: var(--wf-color-paper-strong); }
    70%, 100% {
        color: color-mix(in srgb, var(--wf-color-muted) 70%, var(--wf-color-paper-strong));
    }
}
@keyframes hero-star-light {
    0% { color: var(--wf-color-paper-strong); opacity: 0; transform: scale(.35) rotate(-25deg); filter: drop-shadow(0 0 0 transparent); }
    48% { opacity: 1; transform: scale(1.2) rotate(8deg); filter: drop-shadow(0 0 .16em var(--wf-color-on-accent)) drop-shadow(0 0 .4em var(--wf-color-selection)); }
    100% { color: var(--wf-color-paper-strong); opacity: 1; transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 transparent); }
}
#hero-lights, #hero-sparks {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    mask-image: linear-gradient(to right, #000 0%, #000 16%, transparent 36%, transparent 64%, #000 84%, #000 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 16%, transparent 36%, transparent 64%, #000 84%, #000 100%);
}
#hero-lights { filter: blur(14px); }
#hero-sparks { filter: drop-shadow(0 0 4px #bdeff6); }
#hero-lights canvas, #hero-sparks canvas { pointer-events: none; }
@media (max-width: 1023px) {
    #hero-lights, #hero-sparks { top: auto; height: calc(100vw / 3); }
}

/* Scope hover movement to devices with a precise pointer. Keyboard focus stays still. */
.book-card-interactive { transition: transform 220ms ease, box-shadow 220ms ease; }
.book-card-interactive:focus-within {
    box-shadow: 0 0 0 2px #fff8e7, 0 0 0 3px #b8c8c8, 0 8px 22px rgb(3 27 45 / 10%);
}
@media (hover: hover) and (pointer: fine) {
    .book-card-interactive:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 0 2px #fff8e7, 0 0 0 3px #d7dfdb, 0 8px 22px rgb(3 27 45 / 10%);
    }
}

/* JavaScript only arms below-fold sections. Without it, all content is visible. */
[data-reveal].reveal-pending { opacity: 0; transform: translateY(10px); }
[data-reveal].reveal-entering {
    opacity: 1;
    transform: none;
    transition: opacity 480ms ease-out, transform 480ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .hero-title-playing .hero-title-letter, .hero-title-playing .hero-title-star { animation: none; }
    #hero-lights, #hero-sparks { display: none; }
    .book-card-interactive, .book-card-interactive:hover,
    [data-reveal].reveal-pending, [data-reveal].reveal-entering {
        transform: none;
        opacity: 1;
        transition: none;
    }
}