/* Seasonal layer. One class on <html> (season-fall, season-holidays, season-winter, season-spring, season-summer)
   picks the palette and the weather. Everything here is decorative and switches off for reduced motion. */
:root{--season-accent:#d9772b;--season-glow:#ffd68a}
.season-fall{--season-accent:#d9772b}
.season-holidays{--season-accent:#e0a33a}
.season-winter{--season-accent:#9fc3d6}
.season-spring{--season-accent:#e3a6b4}
.season-summer{--season-accent:#e8c45a}

/* ---------- storefront life: swaying bushes, flickering lamps (desktop image only) ---------- */
.scene-fx{position:absolute;top:0;left:0;width:100%;aspect-ratio:1536/672;pointer-events:none;z-index:1;display:none}
@media (min-width:701px){.scene-fx{display:block}}
.fx{position:absolute;inset:0;background:url(assets/storefront-brand.webp) 0 0/100% 100% no-repeat;will-change:transform,filter}
.fx-bush1{clip-path:ellipse(4.9% 19% at 7.9% 66%);transform-origin:7.9% 86%;animation:sway 5.8s ease-in-out infinite alternate}
.fx-bush2{clip-path:ellipse(5.2% 9.6% at 17.2% 77%);transform-origin:17.2% 87%;animation:sway 7.2s ease-in-out -2s infinite alternate}
.fx-bush3{clip-path:ellipse(3.1% 10.5% at 70.8% 73%);transform-origin:70.8% 83%;animation:sway 6.4s ease-in-out -4s infinite alternate}
@keyframes sway{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
.fx-lamp{animation:flicker 7s steps(1,end) infinite}
.fx-lamp3{clip-path:circle(2.2% at 46.8% 42.5%);animation-delay:-1.4s;animation-duration:11s}
.fx-lamp4{clip-path:circle(1.6% at 89.8% 58.5%);animation-delay:-5s;animation-duration:8s}
.fx-lamp5{clip-path:circle(1.6% at 97% 58.8%);animation-delay:-2.2s;animation-duration:10s}
@keyframes flicker{0%,100%{filter:brightness(1.18)}12%{filter:brightness(.92)}14%{filter:brightness(1.25)}47%{filter:brightness(1.1)}49%{filter:brightness(.85)}51%{filter:brightness(1.22)}80%{filter:brightness(1.15)}}

/* ---------- weather ---------- */
.weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.wx{position:absolute;top:-6%;display:block;animation:fall linear infinite}
@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0)}100%{transform:translate3d(var(--drift,40px),110cqw,0) rotate(var(--spin,360deg))}}
.wx-leaf{width:var(--s,18px);height:var(--s,18px);background:var(--c,#c8642b);clip-path:polygon(50% 0,63% 20%,100% 28%,80% 50%,92% 88%,56% 74%,50% 100%,44% 74%,8% 88%,20% 50%,0 28%,37% 20%);opacity:.9}
.wx-snow{width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:#f4efe6;opacity:.75}
.wx-petal{width:var(--s,10px);height:calc(var(--s,10px)*.7);border-radius:60% 40% 60% 40%;background:#f0bccb;opacity:.85}
.wx-fly{width:5px;height:5px;border-radius:50%;background:#ffe9a3;animation:float 6s ease-in-out infinite alternate,blink 2.6s ease-in-out infinite}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(var(--drift,30px),-40px)}}
@keyframes blink{0%,100%{opacity:.1}50%{opacity:1}}

/* holiday string lights across the top of the storefront */
.stringlights{position:absolute;left:0;right:0;top:0;height:5cqw;display:none;pointer-events:none;z-index:2}
.season-holidays .stringlights{display:block}
.stringlights svg{width:100%;height:100%;display:block}
.stringlights path{fill:none;stroke:#2a1a10;stroke-width:2}
.stringlights circle{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- slimmer marquee with chasing bulbs ---------- */
.marquee{width:min(560px,100%);aspect-ratio:auto;background:none;margin:0 auto 28px;position:relative;display:block}
.marquee-svg{display:block;width:100%;height:auto}
.marquee-board{position:absolute;inset:0;display:grid;place-items:center;padding:0 12%}
.marquee h2{font-size:clamp(1.35rem,3.6vw,2.2rem)!important;color:var(--amber-soft);margin:0;letter-spacing:.04em}
.marquee .bulb{fill:#ffe1a1;animation:chase 2.4s linear infinite}
.marquee .frame-o{fill:#5a3620}.marquee .frame-i{fill:#3b2415}.marquee .board{fill:#140c08}
.marquee .slat{stroke:#1f140e;stroke-width:1.5}
@keyframes chase{0%,100%{opacity:1}40%{opacity:.35}60%{opacity:.35}}
.season-fall .marquee .frame-o{fill:#6b3a1e}
.season-holidays .marquee .bulb:nth-of-type(3n){fill:#e8574a}.season-holidays .marquee .bulb:nth-of-type(3n+1){fill:#7fbf8a}

/* a small seasonal note under the marquee */
.season-note{display:block;text-align:center;font:600 .95rem var(--body);color:var(--season-accent);margin:-14px 0 22px;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){.weather,.stringlights circle,.fx{animation:none!important}.weather{display:none}}

/* ---------- the hanging sign: swings a touch in the breeze, and the lamp light slides across the branded wood ---------- */
.fx-sign{clip-path:polygon(9.6% 13.2%,37.8% 13.2%,37.8% 45%,9.6% 45%);transform-origin:23.7% 13.2%;animation:swing 5.5s ease-in-out infinite alternate,signlight 5.5s ease-in-out infinite alternate}
.fx-sheen{position:absolute;inset:0;clip-path:polygon(12% 20.3%,34.1% 20.3%,34.1% 38.6%,12% 38.6%);transform-origin:23.7% 13.2%;mix-blend-mode:screen;opacity:.85;
  background:radial-gradient(ellipse 7% 12% at 21% 24%,rgba(255,214,150,.55),rgba(255,214,150,0) 70%) no-repeat;background-size:100% 100%; /* taste-skill-ignore: a soft lamp reflection needs a falloff */
  animation:swing 5.5s ease-in-out infinite alternate,sheen 5.5s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@keyframes signlight{from{filter:brightness(1.04)}50%{filter:brightness(.97)}to{filter:brightness(1.08)}}
@keyframes sheen{from{background-position:-3cqw 0}to{background-position:9cqw 0}}
/* phone picture has its own sign position */
.scene-fx-m{position:absolute;top:0;left:0;width:100%;aspect-ratio:800/1421;pointer-events:none;z-index:1;display:block}
@media (min-width:701px){.scene-fx-m{display:none}}
.fxm{position:absolute;inset:0;background:url(assets/storefront-mobile-brand.webp) 0 0/100% 100% no-repeat;will-change:transform,filter}
.fxm-sign{clip-path:polygon(15.4% 10%,82.6% 10%,82.6% 30.6%,15.4% 30.6%);transform-origin:49% 10%;animation:swing 5.5s ease-in-out infinite alternate,signlight 5.5s ease-in-out infinite alternate}
.fxm-sheen{position:absolute;inset:0;clip-path:polygon(21.5% 16%,74.9% 16%,74.9% 28%,21.5% 28%);transform-origin:49% 10%;mix-blend-mode:screen;opacity:.85;
  background:radial-gradient(ellipse 18% 6% at 42% 18%,rgba(255,214,150,.55),rgba(255,214,150,0) 70%) no-repeat;background-size:100% 100%; /* taste-skill-ignore */
  animation:swing 5.5s ease-in-out infinite alternate,sheen 5.5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.scene-fx-m{display:none}}

/* ---------- patrons moving around inside (silhouettes behind the glass) ---------- */
.patrons{position:absolute;inset:0;pointer-events:none}
.patrons-d1{clip-path:polygon(47.5% 41%,59.9% 41%,59.9% 64%,47.5% 64%)}
.patrons-d2{clip-path:polygon(61.8% 41%,67.9% 41%,67.9% 64%,61.8% 64%)}
.patrons-m1{clip-path:polygon(28.2% 33.5%,45.5% 33.5%,45.5% 51.3%,28.2% 51.3%)}
.patrons-m2{clip-path:polygon(53.2% 33.5%,68% 33.5%,68% 51.3%,53.2% 51.3%)}
.patron{position:absolute;aspect-ratio:20/46;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 46'%3E%3Ccircle cx='10' cy='6' r='5.2' fill='%23140904'/%3E%3Cpath d='M4 13c2-1.6 10-1.6 12 0 2.4 2 3.4 8 3.6 15H17l-.4 18H3.4L3 28H.4C.6 21 1.6 15 4 13z' fill='%23140904'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.88;filter:blur(.8px);will-change:transform}
.patrons-d1 .patron,.patrons-d2 .patron{height:12.5cqw;top:50%}
.patrons-m1 .patron,.patrons-m2 .patron{height:21cqw;top:38.5%}
.walk-a{left:44cqw;animation:walkA 26s linear infinite}
.walk-b{left:69cqw;animation:walkB 34s linear -11s infinite}
.lean{left:55cqw;height:11.5cqw!important;top:51.5%!important;animation:lean 6s ease-in-out infinite alternate}
.walk-m1{left:20cqw;animation:walkM 22s linear infinite}
.walk-m2{left:62cqw;animation:walkM2 29s linear -9s infinite}
@keyframes walkA{0%{transform:translateX(0)}38%{transform:translateX(9cqw)}55%{transform:translateX(9cqw)}100%{transform:translateX(26cqw)}}
@keyframes walkB{0%{transform:translateX(0) scaleX(-1)}45%{transform:translateX(-12cqw) scaleX(-1)}60%{transform:translateX(-12cqw) scaleX(-1)}100%{transform:translateX(-28cqw) scaleX(-1)}}
@keyframes lean{from{transform:rotate(-1.5deg) translateX(0)}to{transform:rotate(1.5deg) translateX(.6cqw)}}
@keyframes walkM{0%{transform:translateX(0)}40%{transform:translateX(18cqw)}55%{transform:translateX(18cqw)}100%{transform:translateX(60cqw)}}
@keyframes walkM2{0%{transform:translateX(0) scaleX(-1)}50%{transform:translateX(-22cqw) scaleX(-1)}65%{transform:translateX(-22cqw) scaleX(-1)}100%{transform:translateX(-50cqw) scaleX(-1)}}

/* ---------- time of day, from the visitor's own clock ---------- */
.tod-day .scene picture img,.tod-day .scene-fx,.tod-day .scene-fx-m{filter:brightness(1.38) contrast(.86) saturate(.82) hue-rotate(-6deg)}
.tod-day .scene::before{content:"";position:absolute;inset:0;z-index:3;background:#9fc3e6;mix-blend-mode:soft-light;opacity:.55;pointer-events:none}
.tod-day .patron{opacity:.6}
.tod-dusk .scene picture img,.tod-dusk .scene-fx,.tod-dusk .scene-fx-m{filter:brightness(1.14) saturate(1.08)}
.tod-dusk .scene::before{content:"";position:absolute;inset:0;z-index:3;background:#e2875a;mix-blend-mode:soft-light;opacity:.45;pointer-events:none}
.tod-dawn .scene picture img,.tod-dawn .scene-fx,.tod-dawn .scene-fx-m{filter:brightness(1.2) saturate(.9)}
.tod-dawn .scene::before{content:"";position:absolute;inset:0;z-index:3;background:#d9a7c0;mix-blend-mode:soft-light;opacity:.4;pointer-events:none}
.scene picture img{transition:filter 1.2s linear}
@media (prefers-reduced-motion:reduce){.patron{animation:none!important}}