/* Storefront effects: whole-front looks a grading service can buy or earn for its public storefront.
   Markup: <div class="sfx" data-fx="neon" style="--sf-col:#c8323c"><div class="sf-art"></div> ...</div>
   sf-fx.js adds the extra layers (lines, sky, particles) an effect needs. Same file on the storefront and in the app. */
.sfx { --sf-col:#c8323c; --mx:50%; --my:40%; position:relative; overflow:hidden; isolation:isolate; }
.sf-scene { position:absolute; inset:0; z-index:0; transition:filter .6s ease; }
.sf-art { position:absolute; inset:0; background:url("/assets/ui/storefront.jpg") center top/100% auto no-repeat; }
.sfx-l { position:absolute; inset:0; pointer-events:none; z-index:1; }
.sfx-cv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.sfx-lines { -webkit-mask:url("/assets/ui/storefront-lines.png?v=2") center top/100% auto no-repeat; mask:url("/assets/ui/storefront-lines.png?v=2") center top/100% auto no-repeat; }
.sfx-sky { -webkit-mask:url("/assets/ui/storefront-sky.png?v=2") center top/100% auto no-repeat; mask:url("/assets/ui/storefront-sky.png?v=2") center top/100% auto no-repeat; }
/* in-app previews: a small storefront box */
.sfx-prev { aspect-ratio:1.75; width:100%; border-radius:10px; background:#7cc4ea; container-type:inline-size; }
.sfx-still .sfx-dim, .sfx-still .sfx-title, .sfx-still .sfx-hud { display:none; }
.sfx-prev > .sf-sign { position:absolute; left:37.6%; width:25.3%; top:13.2%; height:11.9%; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 1.2%; }
.sfx-prev > .sf-sign span { font-family:PixelPkmn, "Press Start 2P", "Courier New", monospace; font-size:clamp(5px,1.9cqw,15px); line-height:1.35; color:color-mix(in srgb, var(--sf-col) 72%, #1a0d05); text-shadow:0 1px 0 rgba(255,240,205,.75); }
.sfx-prev.sfx-still *, .sfx-prev.sfx-still { animation-play-state:paused !important; }

/* holo foil: a rainbow sheen over everything that follows the pointer, plus a slow glint */
.sfx[data-fx="holo"] .sf-scene { filter:saturate(1.15) brightness(1.04); }
.sfx[data-fx="holo"] .sfx-a { background:repeating-linear-gradient(115deg,#ff7ad9 0,#ffe66b 6%,#7bffb0 12%,#6bd6ff 18%,#b28cff 24%,#ff7ad9 30%); background-size:200% 100%; background-position:var(--mx) 0; mix-blend-mode:color-dodge; opacity:.55; transition:background-position .25s ease; animation:sfxHolo 9s linear infinite; }
.sfx[data-fx="holo"].live .sfx-a { animation:none; }
.sfx[data-fx="holo"] .sfx-b { background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 30%); mix-blend-mode:overlay; }
@keyframes sfxHolo { to { background-position:300% 0; } }

/* neon night: the street goes dark and the building is drawn in glowing tubes */
.sfx[data-fx="neon"] { background:#07040f; }
.sfx[data-fx="neon"] .sf-scene { filter:brightness(.16) saturate(.5) hue-rotate(220deg); }
.sfx[data-fx="neon"] .sfx-a { background:linear-gradient(100deg,var(--sf-col),#ff4fd8 35%,#2fe0ff 70%,var(--sf-col)); filter:brightness(1.7) blur(2.5px); opacity:.9; }
.sfx[data-fx="neon"] .sfx-b { background:linear-gradient(100deg,#fff,#ffd6f6 35%,#d6fbff 70%,#fff); animation:sfxFlicker 6s linear infinite; }
@keyframes sfxFlicker { 0%, 88%, 92%, 100% { opacity:1; } 90% { opacity:.35; } 91% { opacity:.9; } }

/* blueprint: an architect's drawing of your shop, with a title block */
.sfx[data-fx="blueprint"] { background:#173f86; }
.sfx[data-fx="blueprint"] .sf-scene { opacity:.08; filter:grayscale(1); }
.sfx[data-fx="blueprint"] .sfx-g { background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),radial-gradient(ellipse at 50% 40%,#2a62b8,#173c7a 90%); }
.sfx[data-fx="blueprint"] .sfx-a { background:#eaf3ff; opacity:.95; }
.sfx-dim { position:absolute; z-index:2; font:600 clamp(7px,1.1cqw,12px)/1 "Courier New", monospace; color:#dbe9ff; letter-spacing:.06em; pointer-events:none; white-space:nowrap; }
.sfx-dim.h { border-top:1px solid #dbe9ff; padding-top:3px; text-align:center; } .sfx-dim.h::before, .sfx-dim.h::after { content:""; position:absolute; top:-4px; width:1px; height:7px; background:#dbe9ff; } .sfx-dim.h::before { left:0; } .sfx-dim.h::after { right:0; }
.sfx-title { position:absolute; z-index:2; right:2.5%; bottom:4%; border:1px solid #dbe9ff; padding:.5em .8em; font:700 clamp(7px,1.15cqw,13px)/1.4 "Courier New", monospace; color:#dbe9ff; background:rgba(23,63,134,.75); text-transform:uppercase; letter-spacing:.08em; pointer-events:none; }

/* gilded: the whole shop cast in gold, catching little glints */
.sfx[data-fx="gilded"] .sf-scene { filter:sepia(1) saturate(2.6) hue-rotate(-10deg) brightness(1.02) contrast(1.15); }
.sfx[data-fx="gilded"] .sfx-a { background:linear-gradient(120deg,transparent 35%,rgba(255,250,210,.55) 48%,transparent 60%); background-size:250% 100%; mix-blend-mode:overlay; animation:sfxGlint 6s ease-in-out infinite; }
@keyframes sfxGlint { 0% { background-position:150% 0; } 60%, 100% { background-position:-100% 0; } }

/* cherry blossom: pink light, petals drifting across the street */
.sfx[data-fx="sakura"] .sf-scene { filter:saturate(1.1) hue-rotate(-12deg) brightness(1.05); }
.sfx[data-fx="sakura"] .sfx-a { background:linear-gradient(180deg,rgba(255,170,205,.35),rgba(255,200,225,.1) 50%,transparent); mix-blend-mode:soft-light; }

/* snow globe: the shop under glass, with snow that keeps falling */
.sfx[data-fx="snowglobe"] .sf-scene { filter:saturate(.8) brightness(1.06) hue-rotate(-8deg); }
.sfx[data-fx="snowglobe"] .sfx-a { background:radial-gradient(ellipse 62% 78% at 50% 46%,transparent 66%,rgba(200,230,255,.35) 72%,rgba(20,30,60,.75) 82%); }
.sfx[data-fx="snowglobe"] .sfx-b { background:radial-gradient(ellipse 18% 10% at 28% 16%,rgba(255,255,255,.55),transparent 70%),radial-gradient(ellipse 60% 74% at 50% 46%,transparent 70%,rgba(255,255,255,.25) 72%,transparent 74%); }

/* aurora: dusk falls and northern lights roll over the rooftops */
.sfx[data-fx="aurora"] .sf-scene { filter:brightness(.5) saturate(.8) hue-rotate(195deg); }
.sfx[data-fx="aurora"] .sfx-g { background:linear-gradient(180deg,#071030,#0d2050 60%,#16306a); }
.sfx[data-fx="aurora"] .sfx-a { background:linear-gradient(100deg,transparent 5%,rgba(60,255,170,.85) 25%,rgba(90,200,255,.6) 45%,rgba(170,90,255,.8) 65%,transparent 90%); background-size:220% 100%; animation:sfxAurora 12s ease-in-out infinite alternate; filter:blur(6px); }
.sfx[data-fx="aurora"] .sfx-b { background:linear-gradient(180deg,rgba(80,255,180,.32),rgba(120,140,255,.12) 30%,transparent 50%),radial-gradient(circle at 74.5% 51%,rgba(255,210,120,.65),transparent 4%),radial-gradient(ellipse 9% 11% at 36% 56%,rgba(255,200,110,.35),transparent),radial-gradient(ellipse 9% 11% at 65% 56%,rgba(255,200,110,.35),transparent); mix-blend-mode:screen; }
@keyframes sfxAurora { from { background-position:0% 0; } to { background-position:100% 0; } }

/* constellation: night, and the shop's outline drawn in twinkling stars */
.sfx[data-fx="const"] { background:#050818; }
.sfx[data-fx="const"] .sf-scene { filter:brightness(.2) saturate(.35) hue-rotate(200deg); }
.sfx[data-fx="const"] .sfx-g { background:radial-gradient(1px 1px at 12% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 31% 4%,#cfe0ff,transparent),radial-gradient(1px 1px at 62% 3%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 9%,#fff,transparent),radial-gradient(1px 1px at 5% 22%,#cfe0ff,transparent),radial-gradient(1px 1px at 95% 26%,#fff,transparent),radial-gradient(ellipse at 70% 10%,rgba(80,110,255,.25),transparent 55%); }
.sfx[data-fx="const"] .sfx-a { background:radial-gradient(circle,#ffffff 0 1.4px,transparent 2px) 0 0/5px 5px; filter:drop-shadow(0 0 2px #9fb8ff) drop-shadow(0 0 5px #6f8fff); animation:sfxTwinkle 4s ease-in-out infinite; }
@keyframes sfxTwinkle { 50% { opacity:.55; } }

/* thermal: the shop seen through a heat camera; warmer wherever you point */
.sfx[data-fx="thermal"] .sf-scene { filter:url(#sfxThermal) contrast(1.1); }
.sfx[data-fx="thermal"] .sfx-a { background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,200,.75),rgba(255,140,40,.45) 12%,transparent 26%); mix-blend-mode:screen; opacity:.5; transition:opacity .8s ease; }
.sfx[data-fx="thermal"].live .sfx-a { opacity:1; transition:opacity .1s ease; }
.sfx-hud { position:absolute; z-index:2; left:2.5%; top:4%; font:700 clamp(7px,1.1cqw,12px)/1.5 "Courier New", monospace; color:#fff; text-shadow:0 0 3px #000; pointer-events:none; letter-spacing:.06em; }

/* glitch tape: an old VHS recording that won't sit still */
.sfx[data-fx="glitch"] .sf-scene { filter:saturate(1.3) contrast(1.1); animation:sfxJitter 5s steps(1) infinite; }
.sfx[data-fx="glitch"] .sfx-a, .sfx[data-fx="glitch"] .sfx-b { background:url("/assets/ui/storefront.jpg") center top/100% auto no-repeat; mix-blend-mode:screen; opacity:.55; }
.sfx[data-fx="glitch"] .sfx-a { filter:url(#sfxRed); animation:sfxSplitA 5s steps(1) infinite; } .sfx[data-fx="glitch"] .sfx-b { filter:url(#sfxCyan); animation:sfxSplitB 5s steps(1) infinite; }
.sfx[data-fx="glitch"] .sfx-g { z-index:2; background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),linear-gradient(180deg,transparent 60%,rgba(255,255,255,.06) 62%,transparent 66%); background-size:auto,100% 300%; animation:sfxRoll 7s linear infinite; }
@keyframes sfxRoll { to { background-position:0 0,0 300%; } }
@keyframes sfxSplitA { 0% { transform:translate(-5px,0); } 40% { transform:translate(-12px,2px); } 42% { transform:translate(-4px,0); } 80% { transform:translate(-7px,-1px); } }
@keyframes sfxSplitB { 0% { transform:translate(5px,0); } 40% { transform:translate(12px,-2px); } 42% { transform:translate(4px,0); } 80% { transform:translate(7px,1px); } }
@keyframes sfxJitter { 0%, 39%, 43%, 100% { transform:none; clip-path:none; } 40% { transform:translateX(4px); clip-path:inset(30% 0 52% 0); } 41% { transform:translateX(-5px); clip-path:inset(62% 0 20% 0); } 42% { transform:translateX(2px); } }

/* underwater: the shop at the bottom of a tide pool, light rippling, bubbles rising */
.sfx[data-fx="underwater"] .sf-scene { filter:hue-rotate(165deg) saturate(.95) brightness(.85); }
.sfx[data-fx="underwater"] .sfx-a { background:linear-gradient(180deg,rgba(60,190,235,.45),rgba(10,50,120,.6)); mix-blend-mode:multiply; }
.sfx[data-fx="underwater"] .sfx-b { background:radial-gradient(ellipse 18% 4% at 20% 30%,rgba(210,255,250,.4),transparent),radial-gradient(ellipse 14% 3% at 60% 18%,rgba(210,255,250,.35),transparent),radial-gradient(ellipse 20% 4% at 80% 55%,rgba(210,255,250,.3),transparent),radial-gradient(ellipse 16% 3% at 35% 70%,rgba(210,255,250,.3),transparent);
  background-size:60% 60%; mix-blend-mode:screen; animation:sfxCaustic 9s ease-in-out infinite alternate; }
@keyframes sfxCaustic { to { background-position:20% 15%, -15% 10%, 10% -12%, -10% 20%; } }

@media (prefers-reduced-motion: reduce) { .sfx *, .sfx { animation:none !important; transition:none !important; } }

/* the shop's name sign and founding lettering stay on top, restyled to match some effects */
.sfx > .sf-sign, .sfx > .sf-gilt { z-index:3; }
.sfx[data-fx="neon"] > .sf-sign span { color:#fff !important; text-shadow:0 0 3px #fff, 0 0 8px var(--sf-col), 0 0 16px #ff4fd8 !important; animation:sfxFlicker 6s linear infinite; }
.sfx[data-fx="blueprint"] > .sf-sign span { color:#eaf3ff !important; text-shadow:none !important; font-family:"Courier New", monospace !important; }
.sfx[data-fx="const"] > .sf-sign span { color:#e6eeff !important; text-shadow:0 0 6px #9fb8ff !important; }
.sfx[data-fx="gilded"] > .sf-sign span { color:#5a3a05 !important; text-shadow:0 1px 0 rgba(255,240,180,.8) !important; }
.sfx[data-fx="thermal"] > .sf-sign span { color:#fff !important; text-shadow:0 0 4px #000 !important; }
.sfx[data-fx="aurora"] > .sf-sign span { color:#f4e2bc !important; text-shadow:0 0 8px rgba(80,255,190,.5) !important; }


/* ---- parts: recolor one piece of the painting (awning, door, window box flowers), finish the sign, add decor ---- */
.sf-part { position:absolute; inset:0; pointer-events:none; }
.sf-clone { background:url("/assets/ui/storefront.jpg") center top/100% auto no-repeat; }
.sf-m-awn { -webkit-mask:url("/assets/ui/sf-mask-awning.png?v=2") center top/100% auto no-repeat; mask:url("/assets/ui/sf-mask-awning.png?v=2") center top/100% auto no-repeat; }
.sf-m-door { -webkit-mask:url("/assets/ui/sf-mask-door.png?v=4") center top/100% auto no-repeat; mask:url("/assets/ui/sf-mask-door.png?v=4") center top/100% auto no-repeat; }
.sf-m-fl { -webkit-mask:url("/assets/ui/sf-mask-flowers.png?v=3") center top/100% auto no-repeat; mask:url("/assets/ui/sf-mask-flowers.png?v=3") center top/100% auto no-repeat; }
.sf-recolor { isolation:isolate; } .sf-recolor > .sf-clone { filter:grayscale(1) brightness(var(--L,1)) contrast(1.08); } .sf-recolor > .sf-tint { background:var(--c); mix-blend-mode:color; }
.sf-deco { position:absolute; line-height:0; pointer-events:none; } .sf-deco svg { width:100%; height:auto; display:block; image-rendering:pixelated; }
.sf-deco-board b { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font:400 clamp(3px,.5cqw,7px)/1.3 PixelPkmn, "Press Start 2P", "Courier New", monospace; color:#f4f1e6; text-shadow:0 0 1px rgba(255,255,255,.6); overflow:hidden; word-break:break-word; }
/* string lights along the awning's edge; brighter after dark */
.sf-lights { position:absolute; left:20.4%; right:20.4%; top:39.6%; height:2.6%; pointer-events:none;
  background:radial-gradient(circle at 50% 70%,#fff3c4 0 18%,rgba(255,220,120,.85) 26%,transparent 50%) 0 0/3.6% 100% repeat-x;
  -webkit-mask:radial-gradient(120% 220% at 50% -120%,transparent 60%,#000 61%); filter:drop-shadow(0 0 3px rgba(255,210,110,.9)); animation:sfLights 3s ease-in-out infinite; }
.sf-lights::before { content:""; position:absolute; left:0; right:0; top:28%; height:1px; background:rgba(40,30,20,.6); }
@keyframes sfLights { 50% { filter:drop-shadow(0 0 5px rgba(255,210,110,1)) brightness(1.15); } }
.sf-lights:where(.gs-night *) { filter:drop-shadow(0 0 7px rgba(255,210,110,1)) brightness(1.3); }
/* sign finishes (the name on the sign board) */
.sf-board { position:absolute; left:37.6%; width:25.3%; top:13.2%; height:11.9%; border-radius:2px; pointer-events:none; }
[data-sign="chalk"] .sf-board { background:radial-gradient(ellipse at 40% 40%,rgba(255,255,255,.07),transparent 60%),#24352c; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35); }
[data-sign="neon"] .sf-board { background:#120d18; box-shadow:inset 0 0 0 2px rgba(0,0,0,.5); }
[data-sign="holo"] > .sf-sign span { background:linear-gradient(110deg,#ff4fc0,#ffcf2e 20%,#36e08a 40%,#2fb4ff 60%,#9a62ff 80%,#ff4fc0); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; text-shadow:none !important;
  filter:drop-shadow(1px 0 0 #2a1840) drop-shadow(-1px 0 0 #2a1840) drop-shadow(0 1px 0 #2a1840) drop-shadow(0 -1px 0 #2a1840); animation:sfSignHolo 5s linear infinite; }
@keyframes sfSignHolo { to { background-position:250% 0; } }
[data-sign="gold"] > .sf-sign span { background:linear-gradient(180deg,#ffe78a,#e2a91e 45%,#9c6a08 55%,#f2c23c); -webkit-background-clip:text; background-clip:text; color:transparent !important; text-shadow:none !important;
  filter:drop-shadow(1px 0 0 #4a2c04) drop-shadow(-1px 0 0 #4a2c04) drop-shadow(0 1px 0 #4a2c04) drop-shadow(0 -1px 0 #4a2c04) drop-shadow(1px 2px 0 rgba(60,30,0,.35)); }
[data-sign="neon"] > .sf-sign span { color:#fff !important; text-shadow:0 0 3px #fff, 0 0 8px var(--sf-col), 0 0 16px #ff4fd8 !important; animation:sfxFlicker 7s linear infinite; }
[data-sign="chalk"] > .sf-sign span { color:#f1f1e6 !important; text-shadow:0 0 1px rgba(255,255,255,.7), 1px 1px 0 rgba(255,255,255,.15) !important; }
[data-sign="carved"] > .sf-sign span { color:#4a2a10 !important; text-shadow:0 1px 0 rgba(255,230,180,.7), 0 -1px 0 rgba(0,0,0,.45) !important; }
/* a zoomed-in view of one part (shop tiles) */
.sf-focus { position:relative; overflow:hidden; border-radius:6px; aspect-ratio:1.6; width:100%; }
.sf-focus > .sfx-prev { position:absolute; border-radius:0; }
@media (prefers-reduced-motion: reduce) { .sf-lights, [data-sign] > .sf-sign span { animation:none !important; } }

/* night street: a permanent night look. Windows and lamps glow warm; lights and lamps you've added glow brighter */
.sfx[data-fx="night"] .sf-scene { filter:brightness(.5) saturate(.8) contrast(1.05); }
.sfx[data-fx="night"] .sfx-a { background:linear-gradient(180deg,#0d1640 0%,#1a2a66 45%,#141c40 100%); mix-blend-mode:multiply; opacity:.75; }
.sfx[data-fx="night"] .sfx-b { mix-blend-mode:screen; background:
  radial-gradient(ellipse 9.5% 16% at 35.7% 57%,rgba(255,196,110,.34) 0,rgba(255,190,100,.26) 55%,transparent 100%),
  radial-gradient(ellipse 9.5% 16% at 65.6% 57%,rgba(255,196,110,.34) 0,rgba(255,190,100,.26) 55%,transparent 100%),
  radial-gradient(ellipse 4% 9% at 51% 51%,rgba(255,200,120,.3) 0,rgba(255,190,100,.2) 55%,transparent 100%),
  radial-gradient(circle at 74.6% 50.5%,rgba(255,236,170,.95) 0 .5%,rgba(255,190,90,.55) 1.6%,rgba(255,170,70,.18) 5%,transparent 9%),
  radial-gradient(ellipse 22% 10% at 50% 90%,rgba(255,180,90,.12),transparent 70%); }
.sfx[data-fx="night"] > .sf-sign span { filter:brightness(.85); }
.sfx[data-fx="night"] .sf-lights { filter:drop-shadow(0 0 7px rgba(255,210,110,1)) brightness(1.35); }
/* lamps you add: a warm glow around the flame; faint by day, strong at night (the Night street look, or after dark) */
.sf-glow { position:absolute; width:16%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,240,190,.9) 0 4%,rgba(255,200,110,.45) 14%,rgba(255,170,70,.14) 34%,transparent 62%); opacity:.25; }
.sfx[data-fx="night"] .sf-glow, .sf-glow:where(.gs-night *) { opacity:1; }
.sfx[data-fx="night"] .sf-scene .sf-glow { filter:brightness(2); }
.sfx-emit { position:absolute; inset:0; z-index:2; pointer-events:none; }
.sfx-emit .sf-lights { filter:drop-shadow(0 0 6px rgba(255,210,110,1)) brightness(1.25); }