/*
 * footer_home — the home page footer, layered bottom to top:
 *   1. .d0-fhome__floor  demo15's flying photo floor (.h18-floor) over the whole footer height, no text;
 *   2. .d0-fhome__veil   grey veil rgba(24 23 26 / 0.1)  (--d0-footer-veil);
 *   3. .d0-fhome__word   the huge DEPO letters of demo5 (.h3-close__mast);
 *   4. .d0-fhome__shade  a second translucent layer that keeps the text readable (--d0-footer-shade);
 *   5. the ordinary footer (footer.html), its own background removed.
 * The block above the footer (blok8 on home) is stretched so that block + footer ≈ one screen
 * (footer_home.js, cfg fitScreen).
 */
.d0-fhome {
    --fh-tilt: 58deg;
    --fh-cols: 10;
    --fh-gap: 10px;
    --fh-speed: 120s;
    --fh-plane-w: 130%;
    --fh-perspective: 900px;
    --fh-photo-opacity: 1;
    --fh-word-size: 32vw;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: var(--fh-min-h, auto);
}
.d0-fhome__floor {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    perspective: var(--fh-perspective); perspective-origin: 50% 0;
}
.d0-fhome__plane {
    display: grid; grid-template-columns: repeat(var(--fh-cols), minmax(0, 1fr)); gap: var(--fh-gap);
    width: var(--fh-plane-w); margin-left: calc((100% - var(--fh-plane-w)) / 2);
    transform-origin: 50% 0; transform: rotateX(var(--fh-tilt));
    animation: d0-fhome-floor var(--fh-speed) linear infinite;
    opacity: var(--fh-photo-opacity);
}
.d0-fhome__plane img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@keyframes d0-fhome-floor {
    from { transform: rotateX(var(--fh-tilt)) translate3d(0, 0, 0); }
    to { transform: rotateX(var(--fh-tilt)) translate3d(0, calc(-33.333% - var(--fh-gap) / 3), 0); }
}
.d0-fhome.is-paused .d0-fhome__plane { animation-play-state: paused; }
.d0-fhome__veil { position: absolute; inset: 0; z-index: 1; background: var(--d0-footer-veil); }
.d0-fhome__word {
    position: absolute; left: 50%; bottom: 0; z-index: 2; margin: 0; pointer-events: none; user-select: none;
    transform: translate(-50%, 8%); white-space: nowrap; text-align: center;
    font: 900 var(--fh-word-size)/0.72 var(--d0-font-display); letter-spacing: -0.07em;
    color: var(--d0-footer-word);
}
.d0-fhome__shade {
    position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(180deg, var(--d0-footer-shade) 0%, var(--d0-footer-shade) 60%, var(--d0-footer-shade-end) 100%);
    backdrop-filter: blur(var(--fh-shade-blur, 0px));
}
.d0-fhome__content { position: relative; z-index: 4; }
.d0-fhome #site-footer.d0-footer { background: none; color: var(--d0-footer-ink); }
.d0-fhome .d0-footer__word { display: none; }
.d0-fhome #site-footer .site-footer__copyright { padding-bottom: var(--fh-bottom, 106px); }

/* the block right above the footer: together they take about one screen */
.d0-before-footer { min-height: var(--d0-before-footer-h, auto); }

@media (max-width: 899px) {
    .d0-fhome { --fh-plane-w: 260%; --fh-word-size: 38vw; }
}
@media (prefers-reduced-motion: reduce) {
    .d0-fhome__plane { animation: none; }
}
