/* Valerie Luxe — SEASONAL Fall theme (November).
   Purely decorative. To remove: delete this file and the <!-- FALL -->
   blocks in views/pages/home.php + the stylesheet link in layout.php.
   HARD RULE (owner 2026-10-31): the fleet vehicles and their photos
   NEVER change — the leaves below are frame/corner decoration AROUND
   the photos, never new imagery. */
.fall-ribbon {
    background: linear-gradient(90deg, #140b02, #33200a, #140b02);
    border-bottom: 1px solid #b98a2f;
    text-align: center;
    padding: .55rem .8rem;
}
.fall-ribbon span {
    color: #e8c15a;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.fall-ribbon b { color: #f7dc8f; }
.hero { position: relative; overflow: hidden; }
.fall-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fall-leaf { position: absolute; top: -9%; opacity: 0; animation: fall-drop linear infinite; }
.fall-leaf.l1 { left: 6%;  width: 34px; animation-duration: 13s; animation-delay: 0s; }
.fall-leaf.l2 { left: 22%; width: 22px; animation-duration: 17s; animation-delay: 4s; }
.fall-leaf.l3 { left: 44%; width: 28px; animation-duration: 15s; animation-delay: 8s; }
.fall-leaf.l4 { left: 63%; width: 20px; animation-duration: 18s; animation-delay: 2s; }
.fall-leaf.l5 { left: 79%; width: 32px; animation-duration: 14s; animation-delay: 6.5s; }
.fall-leaf.l6 { left: 92%; width: 24px; animation-duration: 16s; animation-delay: 10s; }
@keyframes fall-drop {
    0%   { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: .85; }
    50%  { transform: translate3d(2.5vw, 48vh, 0) rotate(195deg); }
    92%  { opacity: .65; }
    100% { transform: translate3d(-1.5vw, 106vh, 0) rotate(365deg); opacity: 0; }
}
.fall-hero-sub { color: #e8a33c !important; }

/* Fleet dressing — gold frame + maple leaves in the photo corners.
   Decoration around the existing photos only; images untouched. */
.fleet-card {
    border-color: rgba(217, 171, 45, .42);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35), 0 0 0 1px rgba(217, 171, 45, .07);
}
.fleet-art.fleet-photo {
    position: relative;
    border: 1px solid rgba(217, 171, 45, .55);
}
.fleet-art.fleet-photo::before,
.fleet-art.fleet-photo::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 L57 20 L72 9 L69 26 L86 19 L79 35 L96 35 L83 47 L97 54 L81 59 L87 76 L69 68 L63 86 L55 69 L50 88 L45 69 L37 86 L31 68 L13 76 L19 59 L3 54 L17 47 L4 35 L21 35 L14 19 L31 26 L28 9 L43 20 Z' fill='%23d9ab2d'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.fleet-art.fleet-photo::before { top: -11px; left: -9px; transform: rotate(-18deg); }
.fleet-art.fleet-photo::after { bottom: -11px; right: -9px; transform: rotate(158deg); }

@media (max-width: 759px) {
    .fall-leaf.l2, .fall-leaf.l4 { display: none; }
    .fall-leaf.l1 { width: 26px; }
    .fall-leaf.l5 { width: 24px; }
    .fleet-art.fleet-photo::before, .fleet-art.fleet-photo::after { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .fall-leaf { display: none; }
}