/* Feather landing-page styles. Keep animation tuning isolated from content pages. */
.feather-page {
    /* Quick controls for the main motion. */
    --feather-fall-duration: 4.5s;
    --feather-breathe-duration: 1.26s;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fbfbfa;
    cursor: pointer;
    transition: background 5s cubic-bezier(.55, .01, .24, 1);
}

.feather-page .site-menu {
    /* Keep links laid out while hidden so row dividers can be measured. */
    pointer-events: none;
    transition: background 5s ease, box-shadow 5s ease;
    transition-delay: 4s;
}

.feather-page .site-menu a {
    opacity: 0;
    /* Firefox <112 fallback for the detailed linear() curve. */
    transition-timing-function: cubic-bezier(.22, 1.25, .36, 1) !important;
    transition-timing-function:
        linear(0, 0.196 16.8%, 0.366 28.2%, 0.543 37.3%, 0.999 57.7%, 0.884 65.6%, 0.857 69.2%, 0.848 72.9%, 0.871 79%, 0.982 92.6%, 0.996 96.1%, 1) !important;
}

.feather-page.falling {
    background: #000;
    cursor: default;
}

.feather-page.falling .site-menu {
    pointer-events: auto;
    box-shadow: 0 0 1em 2em #000a;
    background: #000a;
}

.feather-page.falling .site-menu a { opacity: 1; }

.scene {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 16%, rgba(0, 0, 0, .32) 100%);
    transition: opacity 4s ease;
}

.falling .vignette { opacity: 1; }
.falling .prompt { opacity: 0; }

.feather-wrap {
    position: absolute;
    top: 2vh;
    left: 47%;
    z-index: 1;
    width: clamp(280px, 25vw, 600px);
    transform-origin: 0% 50%;
}

.feather-rotate {
    width: 100%;
    height: 100%;
    transform: translateX(-50%) rotate(60deg);
}

.feather {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.falling .feather-wrap {
    animation: descend var(--feather-fall-duration) ease-out 0s 1 normal both;
}

.falling .feather {
    animation: breathe var(--feather-breathe-duration) ease-in-out infinite alternate;
}

@keyframes breathe {
    from { transform: skewX(-2deg) scaleX(.98); }
    to { transform: skewX(2.5deg) scaleX(1.02); }
}

@keyframes descend {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
    26% {
        transform: translateX(9vh) translateY(15vh) rotate(-15deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
    64% {
        transform: translateX(-15.5vh) translateY(28vh) rotate(18deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
    90% { opacity: 1; }
    100% {
        transform: translateX(0) translateY(50vh) rotate(0deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
        opacity: 0;
    }
}

/* Starfield layers are separate so each reveal can be tuned alone. */
#stars,
#stars2 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
}

#stars {
    transition: background 6s ease, opacity 6s ease;
    transition-delay: 12s;
}

#stars2 {
    transition: background 10s ease, opacity 10s ease;
    transition-delay: 8s;
}

#stars3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background: url("tenticles.png") no-repeat center bottom -35%;
    background-size: 50%;
    mix-blend-mode: lighten;
    opacity: 0;
    transition: background 60s ease-in, opacity 100s ease-in-out;
    transition-delay: 60s;
}

.feather-page.falling #stars {
    background: url("stars.png") repeat-x;
    opacity: 70%;
}

.feather-page.falling #stars2 {
    background: url("stars2.png");
    background-size: cover;
    mask-image: linear-gradient(to top, #000, #0005 20%, transparent 90%);
    opacity: 100%;
}

.feather-page.falling #stars3 {
    background-size: 60%;
    background-position-y: bottom 0;
    opacity: 90%;
}

/* Reduced-motion behavior can be enabled here without affecting content pages. */
/*
@media (prefers-reduced-motion: reduce) {
    .feather-page { transition-duration: 1s; }
    .falling .feather-wrap { animation-duration: 1s; }
    .falling .feather { animation: none; }
}
*/