/* ============================================================
   Pikarta /for/* hero street — a CSS-only "street of shops" with
   an Apple Wallet-style card popping out of the industry's door.
   Extracted from home.css and scoped under .fs (no collisions).
   Decorative only (aria-hidden). Animates transform/opacity only.
   Markup is generated by scripts/build-for-hero.mjs.
   ============================================================ */

.fs {
  --fs-cream: var(--cream, #FFF8EC);
  --fs-ink: var(--ink, #16211B);
  --fs-night: #04110B;
  --fs-out: var(--e-out, cubic-bezier(.23, 1, .32, 1));
  /* B = base storefront height, W = base shop width */
  --B: clamp(170px, 25vh, 250px);
  --W: clamp(104px, 12.6vw, 186px);
  position: relative; z-index: 2;
  margin-top: clamp(22px, 3.4vw, 40px);
  font-family: var(--serif, "Bricolage Grotesque", "Archivo", system-ui, sans-serif);
  pointer-events: none;
}
.fs a { pointer-events: auto; text-decoration: none; color: inherit; }

/* ---- sky ---- */
.fs-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fs-sun {
  position: absolute; right: 7%; top: -70%; width: clamp(90px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFE9AE 0 38%, #FFD27A 58%, rgba(255, 210, 122, 0) 71%);
}
.fs-cloud { position: absolute; height: 22px; border-radius: 30px; background: #fff; opacity: .92; }
.fs-cloud::before, .fs-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.fs-cloud::before { width: 38px; height: 38px; left: 18%; top: -19px; }
.fs-cloud::after { width: 26px; height: 26px; left: 54%; top: -12px; }
.fs-c1 { width: 110px; left: 6%; top: -12%; }
.fs-c2 { width: 84px; left: 78%; top: 6%; opacity: .75; }

/* ---- street ---- */
.fs-clip { position: relative; z-index: 3; clip-path: inset(-100vh -100vw 0 -100vw); }
.fs-street {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 1vw, 16px); padding: 0 2vw;
  /* reserve the height so the intro never shifts the layout */
  min-height: calc(var(--B) * 1.06);
}
.fs-shop { position: relative; flex-shrink: 0; width: calc(var(--w) * var(--W)); display: block; }
.fs-facade {
  position: relative; height: calc(var(--h) * var(--B));
  display: flex; flex-direction: column; padding: 0 calc(var(--W) * .07);
  border-radius: 10px 10px 0 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 13px),
    linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 30%, transparent 70%, rgba(0, 0, 0, .08)),
    var(--c);
  box-shadow: inset 0 -40px 50px -40px rgba(0, 0, 0, .35);
}
.fs-cornice {
  display: block; height: 11px; margin: 0 calc(var(--W) * -.1); border-radius: 4px;
  background: color-mix(in srgb, var(--c) 62%, #000); box-shadow: 0 5px 0 rgba(0, 0, 0, .08);
}
.fs-upper { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-evenly; padding: 8px 0 4px; }
.fs-upper i {
  display: block; width: 20%; max-width: 32px; height: 64%; max-height: 50px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .14));
  box-shadow: inset 0 0 0 3px rgba(255, 248, 236, .85), 0 5px 0 -1px rgba(255, 248, 236, .55);
}
.fs-sign {
  margin: 0 auto; width: 92%; padding: .55em 0; border-radius: 6px; overflow: hidden; white-space: nowrap;
  background: var(--fs-cream); color: var(--c); text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  font-size: max(7px, calc(var(--w) * var(--W) * .072));
  min-height: 1.2em;
}
/* neighbours carry a blank plate instead of a name */
.fs-sign:empty::after { content: ""; display: block; width: 46%; height: .5em; margin: .35em auto; border-radius: 3px; background: currentColor; opacity: .35; }
.fs-awning {
  position: relative; margin: 9px calc(var(--W) * -.1) 0; height: calc(var(--B) * .08); border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, var(--fs-cream) 0 18px, var(--a) 18px 36px);
  box-shadow: 0 10px 14px -8px rgba(0, 0, 0, .28);
}
.fs-awning::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;
  background:
    radial-gradient(circle at 9px 0, var(--fs-cream) 9px, transparent 9.5px) 0 0 / 36px 9px,
    radial-gradient(circle at 27px 0, var(--a) 9px, transparent 9.5px) 0 0 / 36px 9px;
}
.fs-front { height: calc(var(--B) * .42); margin-top: auto; display: flex; align-items: flex-end; gap: 9%; padding: 12px 3% 0; }
.fs-win {
  position: relative; flex: 1.35; height: 68%; margin-bottom: 14%; overflow: hidden; display: grid; place-items: center;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .28));
  box-shadow: inset 0 0 0 4px rgba(255, 248, 236, .92);
}
.fs-win svg { width: 38%; max-width: 32px; stroke: var(--c); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.fs-glint {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-167%) skewX(-18deg); pointer-events: none;
}
.fs-door { position: relative; flex: 1; height: 100%; border-radius: 999px 999px 0 0; background: rgba(255, 248, 236, .92); }
.fs-door::before, .fs-door::after { content: ""; position: absolute; inset: 4px 4px 0; border-radius: 999px 999px 0 0; }
.fs-door::before {
  background: radial-gradient(70% 45% at 50% 100%, rgba(255, 210, 122, .4), transparent 70%), var(--fs-night);
}
.fs-door::after {
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .12) 58% 60%, transparent 60%), color-mix(in srgb, var(--c) 58%, #000);
  transform-origin: 0 50%; transform: perspective(500px) rotateY(-24deg);
}
.fs-pole {
  position: absolute; left: -7px; bottom: calc(var(--B) * .2); width: 9px; height: calc(var(--B) * .2); border-radius: 6px;
  background: repeating-linear-gradient(135deg, #fff 0 6px, #C81E1E 6px 12px, #fff 12px 18px, #1E40AF 18px 24px);
  box-shadow: 0 0 0 2px rgba(255, 248, 236, .9);
}
.fs-lamp { position: relative; flex-shrink: 0; width: 6px; height: calc(var(--B) * .72); border-radius: 3px 3px 0 0; background: #2A3A33; }
.fs-lamp::before { content: ""; position: absolute; left: -8px; top: -13px; width: 22px; height: 15px; border-radius: 10px 10px 4px 4px; background: #2A3A33; }
.fs-lamp::after { content: ""; position: absolute; left: -4px; top: 0; width: 14px; height: 8px; border-radius: 0 0 8px 8px; background: #FFE7A8; }
.fs-tree { position: relative; flex-shrink: 0; width: calc(var(--W) * .46); height: calc(var(--B) * .76); }
.fs-tree::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 9px; height: 40%; margin-left: -4.5px; border-radius: 4px; background: #6B4A2E; }
.fs-tree::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 34%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5DAA73, #2F7A4A 70%);
}

/* the hero shop dims slightly while its card is out */
.fs-facade::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: rgba(10, 18, 14, .16); opacity: 0;
}
.fs-shop.on .fs-facade::before { opacity: 1; }

/* ---- Wallet card: all sizes in em so it scales with the shop ---- */
.fs-card {
  position: absolute; left: 50%; bottom: -6%; z-index: 6;
  font-size: calc(var(--W) * .08);
  width: 13.4em; margin-left: -6.7em; height: 7.8em;
  display: flex; flex-direction: column; gap: .4em; padding: .75em .85em; border-radius: 1em; overflow: hidden;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 62%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  color: #fff; text-align: left;
  box-shadow:
    0 0 0 .2em var(--fs-cream),
    0 0 0 .27em rgba(22, 33, 27, .08),
    0 2.4em 3.8em -1.2em rgba(8, 18, 13, .6),
    0 .9em 1.5em -.7em rgba(8, 18, 13, .4);
  transform: translateY(-1.2em) rotate(-3deg);
  will-change: transform;
}
.fs-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 38%); }
.fs-card > * { position: relative; }
.fs-ct { display: flex; align-items: flex-start; gap: .5em; }
.fs-mono {
  flex: none; width: 1.95em; height: 1.95em; border-radius: .55em; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-style: normal; font-weight: 800; font-size: .72em; letter-spacing: .04em;
}
.fs-ct b { font-size: .9em; margin-top: .3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fs-val { margin-left: auto; flex: none; text-align: right; font-weight: 800; font-size: 1.3em; line-height: 1; }
.fs-val small { display: block; font-size: .5em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: .2em; }
.fs-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: .28em; margin-top: auto; }
.fs-dots i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .6); }
.fs-dots i.f { background: #fff; box-shadow: none; }
.fs-bar { margin-top: auto; height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .28); }
.fs-bar i { display: block; height: 100%; width: var(--p, 60%); border-radius: inherit; background: #fff; }
.fs-bc {
  flex: none; height: 2.2em; border-radius: .5em;
  background: #fff repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px) 50% 50% / 76% 58% no-repeat;
}

.fs-ground {
  position: relative; z-index: 4; height: clamp(34px, 5.4vh, 58px);
  background: linear-gradient(180deg, #D3CCBE, #BFB6A6);
}
.fs-ground::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #E9E3D8; box-shadow: 0 2px 0 rgba(0, 0, 0, .06); }
.fs-ground::after { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 3px; background: repeating-linear-gradient(90deg, #F2EEE6 0 44px, transparent 44px 88px); }

/* ---- /for/ index: several industries, each shop is a link ---- */
.fs-many { --W: clamp(84px, 10vw, 150px); }
.fs-many .fs-card { opacity: 0; transition: opacity .25s ease; }
.fs-many .fs-shop.on .fs-card { opacity: 1; }
.fs-many .fs-shop { cursor: pointer; }

/* ---- narrow screens: fewer shops, bigger sign/card ---- */
@media (max-width: 760px) {
  .fs { --B: 176px; --W: 108px; }
  .fs .far, .fs-sun, .fs-c1 { display: none; }
  .fs-street { gap: 8px; padding: 0 12px; }
  .fs-card { font-size: calc(var(--W) * .092); }
  .fs-mono { display: none; }
}
@media (max-width: 400px) {
  .fs { --W: 100px; }
}

/* ---- motion ---- */
.fs-shop { animation: fs-rise .9s var(--fs-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.fs-tree, .fs-lamp { animation: fs-fade .8s ease backwards; animation-delay: .1s; }
.fs-facade::before { transition: opacity .5s ease .9s; }
.fs-shop.on .fs-card { animation: fs-pop .85s var(--fs-out) 1s both, fs-bob 4.2s ease-in-out 1.85s infinite alternate; }
.fs-glint { animation: fs-glint 7s cubic-bezier(.77, 0, .175, 1) infinite; }
.fs-shop:nth-child(3n) .fs-glint { animation-delay: 1.6s; }
.fs-shop:nth-child(3n+1) .fs-glint { animation-delay: 3.4s; }
.fs-cloud { animation: fs-drift 26s ease-in-out infinite alternate; }
.fs-c2 { animation-duration: 32s; animation-delay: -8s; }
.fs-pole { animation: fs-pole 2.4s linear infinite; background-size: 100% 48px; }
.fs-many .fs-shop:not(.on) .fs-card { transition: opacity .25s ease; }
@keyframes fs-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes fs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-pop {
  from { opacity: 0; transform: translateY(3.2em) scale(.7) rotate(-6deg); }
  to { opacity: 1; transform: translateY(-1.2em) rotate(-3deg); }
}
@keyframes fs-bob { from { transform: translateY(-1.2em) rotate(-3deg); } to { transform: translateY(-1.7em) rotate(-2deg); } }
@keyframes fs-glint { 0%, 70% { transform: translateX(-167%) skewX(-18deg); } 100% { transform: translateX(361%) skewX(-18deg); } }
@keyframes fs-drift { to { transform: translateX(50px); } }
@keyframes fs-pole { to { background-position: 0 48px; } }

/* ---- hover only for real pointers ---- */
@media (hover: hover) and (pointer: fine) {
  .fs-many .fs-shop { transition: transform .35s var(--fs-out); }
  .fs-many .fs-shop:hover { transform: translateY(-8px); }
  .fs-many .fs-shop:hover .fs-card { opacity: 1; }
  .fs-many .fs-street:has(.fs-shop:hover) .fs-shop.on:not(:hover) .fs-card { opacity: 0; animation: none; }
  .fs-many .fs-shop:hover .fs-card { animation: fs-pop .5s var(--fs-out) both; }
}