/* ============================================================
   Cooked Apps — 3D shopfront module styles.
   Pairs with shopfront.js, which builds the figure markup into
   any `[data-shopfront]` element. Requires cooked.css to be
   loaded first for --cream/--orange/--shade-top/--shade-side/--shade-deep/--grain tokens.
   ============================================================ */

.shopfront {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 640;
  perspective: 2600px;
  perspective-origin: 50% 30%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.shopfront.grabbing { cursor: grabbing; }
.shopfront .defs { position: absolute; }

.sway { position: absolute; inset: 0; transform-style: preserve-3d; }

.rig {
  --rx: 0deg; --ry: 0deg;
  position: absolute;
  left: 50%; top: 50%;
  width: 660px; height: 580px;
  margin: -300px 0 0 -330px;
  transform-style: preserve-3d;
  transform-origin: 330px 300px -220px;
  transform: scale(var(--k, .75)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1.5s cubic-bezier(.5, 0, .2, 1);
  will-change: transform;
}
.rig.settled { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }

.face {
  position: absolute;
  transform-origin: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face svg { display: block; width: 100%; height: 100%; overflow: hidden; }

.c-front, .c-top, .c-side, .c-deep, .c-board { background-image: var(--grain); }
.c-front { background-color: var(--cream); }
.c-board { background-color: var(--cream); }
.c-top   { background-color: var(--shade-top); }
.c-side  { background-color: var(--shade-side); }
.c-deep  { background-color: var(--shade-deep); }

.wall-fill { fill: var(--cream); stroke: none; }

.ink { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ink .edge { fill: none; }
.ink .faint { stroke-width: 1.5; opacity: .35; }
.ink .faint2 { stroke-width: 2; opacity: .45; }
.ink .thick, .ink .d.thick { stroke-width: 5; }
.ink .tri { fill: var(--shade-top); }
.ink .solidfill { fill: var(--orange); }
.ink .d-static { fill: none; }
.ink .f, .ink .f-stripe { fill: var(--orange); }
.ink .f.kick { fill: url(#shopfront-kick); stroke: none; }
.quoin rect { stroke-width: 2; }

.wall-script {
  fill: var(--orange); stroke: none;
  font-family: var(--serif); font-weight: 700; font-size: 40px;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.wall-script.big { font-size: 50px; }
.sign-name {
  fill: var(--orange); stroke: none;
  font-family: var(--serif); font-weight: 750; font-size: 60px; letter-spacing: -.5px;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.sign-small {
  fill: var(--orange); stroke: none;
  font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 2px;
}
.board-text {
  fill: var(--orange); stroke: none;
  font-family: var(--serif); font-weight: 650; font-size: 18px;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.open-bg { fill: var(--orange); }
.open-text { stroke: none; fill: var(--cream); font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 2px; }

.steam path { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.swing path { fill: none; stroke: var(--orange); stroke-width: 2; }
.swing .solid { fill: var(--orange); }

.fan { transform-box: fill-box; transform-origin: 50% 50%; animation: shopfront-spin 2.4s linear infinite; }
.wifi path { opacity: .15; animation: shopfront-pulse 2.4s ease-in-out infinite; }
.wifi path:nth-child(2) { animation-delay: .3s; }
.wifi path:nth-child(3) { animation-delay: .6s; }

/* ---------- load sequence: lines draw in, fills settle, sign flickers on ---------- */
.side { opacity: 0; animation: shopfront-settle .7s ease 1.9s forwards; }
.recess { opacity: 0; animation: shopfront-settle .6s ease .7s forwards; }

.ink .d {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.03;
  animation: shopfront-draw .9s cubic-bezier(.6, 0, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}
.ink .f, .ink .f-stripe, .fade { opacity: 0; animation: shopfront-settle .5s ease 1.4s forwards; }
.neon { opacity: 0; animation: shopfront-flicker .8s linear 1.25s forwards; }
.swing {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: shopfront-settle .4s ease 1.5s forwards, shopfront-swing 3.4s ease-in-out 1.9s infinite;
}
.steam path { animation: shopfront-steam 3s ease-in-out infinite; }
.steam path:nth-child(1) { animation-delay: 1.8s; }
.steam path:nth-child(2) { animation-delay: 2.8s; }
.steam path:nth-child(3) { animation-delay: 2.3s; }

@keyframes shopfront-draw { to { stroke-dashoffset: 0; } }
@keyframes shopfront-settle { to { opacity: 1; } }
@keyframes shopfront-flicker {
  0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .15; } 34% { opacity: 1; }
  46% { opacity: .4; } 58%, 100% { opacity: 1; }
}
@keyframes shopfront-swing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes shopfront-steam {
  0% { opacity: 0; transform: translateY(8px); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-16px); }
}
@keyframes shopfront-spin { to { transform: rotate(360deg); } }
@keyframes shopfront-pulse { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ink .d, .ink .f, .ink .f-stripe, .fade, .neon, .swing, .steam path { animation: none; }
  .ink .d { stroke-dashoffset: 0; }
  .ink .f, .ink .f-stripe, .fade, .neon, .swing, .side { opacity: 1; }
  .side, .recess, .fan, .wifi path { animation: none; }
  .recess, .wifi path { opacity: 1; }
  .rig { transition: none; }
}