/* Brand decoration stays behind content and clips only its own movement. */
.ambient-section {
    position: relative;
    isolation: isolate;
}
.favicon-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.favicon-field .favicon-float {
    position: absolute;
    width: var(--mark-size, 64px);
    height: auto;
    aspect-ratio: 1;
    top: var(--mark-top);
    left: var(--mark-left);
    background: url('../img/favicon.ico') center / contain no-repeat;
    opacity: var(--mark-opacity, .07);
    animation: brand-drift var(--mark-duration, 24s) ease-in-out var(--mark-delay, 0s) infinite;
}
.favicon-field .favicon1 { --mark-top: 9%; --mark-left: 3%; --mark-size: 86px; --mark-duration: 27s; --mark-delay: -8s; --mark-tilt: -14deg; }
.favicon-field .favicon2 { --mark-top: 14%; --mark-left: 86%; --mark-size: 44px; --mark-duration: 22s; --mark-delay: -15s; --mark-tilt: 12deg; --mark-opacity: .1; }
.favicon-field .favicon3 { --mark-top: 45%; --mark-left: 95%; --mark-size: 110px; --mark-duration: 32s; --mark-delay: -21s; --mark-tilt: -8deg; --mark-opacity: .05; }
.favicon-field .favicon4 { --mark-top: 66%; --mark-left: 1%; --mark-size: 48px; --mark-duration: 25s; --mark-delay: -12s; --mark-tilt: 16deg; }
.favicon-field .favicon5 { --mark-top: 82%; --mark-left: 76%; --mark-size: 72px; --mark-duration: 29s; --mark-delay: -5s; --mark-tilt: -18deg; }
.favicon-field .favicon6 { --mark-top: 54%; --mark-left: 39%; --mark-size: 36px; --mark-duration: 23s; --mark-delay: -18s; --mark-tilt: 10deg; --mark-opacity: .045; }
/* Alternate composition so neighboring sections do not repeat the same pattern. */
.ambient-section:nth-of-type(even) .favicon1 { --mark-top: 18%; --mark-left: 88%; }
.ambient-section:nth-of-type(even) .favicon2 { --mark-top: 8%; --mark-left: 7%; }
@keyframes brand-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--mark-tilt, 0deg)); }
    35% { transform: translate3d(10px, -16px, 0) rotate(4deg); }
    70% { transform: translate3d(-6px, 12px, 0) rotate(-5deg); }
}
[data-ambient="paused"] .favicon-float,
html.motion-paused .favicon-float { animation-play-state: paused; }
@media (max-width: 600px) {
    .favicon-field .favicon-float { width: min(var(--mark-size), 52px); opacity: .055; }
    .favicon-field .favicon3 { --mark-left: 91%; }
    .favicon-field .favicon6 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .favicon-field .favicon-float { animation: none; }
}
@media print { .favicon-field { display: none; } }