/* Final 2026-10-21 shop hero. Kept separate so the other three channels retain their own visual systems. */
.shop-hero {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 758px;
  overflow: hidden;
  background: #121f33;
  border-bottom: 8px solid #63805c;
}

.shop-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  background: repeating-linear-gradient(90deg, #405a43 0 48px, #334a37 48px 51px);
  border-top: 5px solid #8fa36c;
}

.night-sky,
.night-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.night-sky {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, #e4dfb2 0 1px, transparent 2px),
    radial-gradient(circle at 61% 13%, #c4d6d8 0 1px, transparent 2px),
    radial-gradient(circle at 39% 39%, #9db5c6 0 1px, transparent 2px),
    radial-gradient(circle at 87% 31%, #b7ced1 0 1px, transparent 2px),
    linear-gradient(#111d31, #263a4d);
  background-size: 211px 173px, 307px 241px, 379px 291px, 433px 323px, auto;
}

.pixel-moon {
  position: absolute;
  top: 45px;
  left: 34%;
  width: 58px;
  height: 58px;
  background: #e9e1b8;
  box-shadow: 0 0 65px #efdaa828;
  clip-path: polygon(18% 0, 82% 0, 82% 18%, 100% 18%, 100% 82%, 82% 82%, 82% 100%, 18% 100%, 18% 82%, 0 82%, 0 18%, 18% 18%);
}

.pixel-moon::after {
  content: "";
  position: absolute;
  inset: 10px 8px 19px 25px;
  background: #d2c99f;
  box-shadow: -12px 22px 0 -3px #d2c99f;
}

.ridge {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 230px;
  clip-path: polygon(0 40%, 8% 40%, 8% 23%, 16% 23%, 16% 48%, 25% 48%, 25% 12%, 35% 12%, 35% 35%, 48% 35%, 48% 50%, 58% 50%, 58% 25%, 68% 25%, 68% 4%, 78% 4%, 78% 38%, 89% 38%, 89% 18%, 100% 18%, 100% 100%, 0 100%);
}

.ridge-back { bottom: 30px; background: #263e45; }
.ridge-front { height: 160px; background: #1a3337; transform: scaleX(-1); }

.fir {
  position: absolute;
  bottom: 18px;
  width: 54px;
  height: 140px;
  background: linear-gradient(90deg, transparent 43%, #554b39 43% 57%, transparent 57%);
  transform-origin: 50% 100%;
  animation: shop-tree-sway 2.4s ease-in-out infinite alternate;
}

.fir::before {
  content: "";
  position: absolute;
  inset: 0 0 25px;
  background: #58745a;
  clip-path: polygon(35% 0, 65% 0, 65% 15%, 82% 15%, 82% 35%, 100% 35%, 100% 76%, 65% 76%, 65% 100%, 35% 100%, 35% 76%, 0 76%, 0 35%, 18% 35%, 18% 15%, 35% 15%);
}

.fir-one { left: 3%; }
.fir-two { right: 3%; width: 70px; height: 190px; animation-duration: 3.1s; animation-delay: -1s; }

.shop-hero-layout {
  position: relative;
  z-index: 2;
  min-height: 750px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  padding-top: 45px;
  padding-bottom: 170px;
}

.shop-hero-copy {
  min-height: 0;
  align-self: center;
  margin: 0;
  padding: 0 0 25px;
  background: none;
  border: 0;
  box-shadow: none;
}

.shop-hero-copy::after { display: none; }
.shop-hero-copy > * { max-width: 590px; }
.shop-hero-copy .eyebrow { color: #efd99c; font-size: 15px; }
.shop-hero-copy .eyebrow::before { background: #a5bc83; }

.shop-hero-copy h1 {
  color: #f4ebd4;
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: 0;
}

.shop-hero-copy h1 span { display: block; white-space: nowrap; }

.shop-hero-copy > p:last-child {
  max-width: 450px;
  margin-top: 18px;
  color: #c7cdbc;
  font-size: 17px;
  line-height: 1.9;
}

/* Open carousel stage. */
.night-showcase {
  --showcase-glow: #9fe4c6;
  position: relative;
  width: 100%;
  min-width: 0;
  align-self: center;
  padding-top: 0;
  outline-offset: 8px;
}

.night-showcase[data-product="1"] { --showcase-glow: #f2ce84; }
.night-showcase[data-product="2"] { --showcase-glow: #8adbe9; }
.night-showcase[data-product="3"] { --showcase-glow: #c2a4ef; }

.showcase-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #acbdbb;
  font-size: 11px;
}

.showcase-count {
  min-width: 65px;
  color: #e9cd95;
  font-family: Consolas, monospace;
  letter-spacing: 2px;
  text-align: center;
}

.showcase-prev,
.showcase-next {
  width: 40px;
  min-height: 40px;
  padding: 0;
  color: #dec895;
  background: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: .72;
}

.showcase-heading button:hover { color: #ffe3a6; opacity: 1; }

.showcase-scene {
  position: relative;
  isolation: isolate;
  height: 340px;
  overflow: hidden;
  touch-action: pan-y;
}

.showcase-scene::before {
  content: "";
  position: absolute;
  inset: 20px 13% 0;
  background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--showcase-glow) 17%, transparent), transparent 66%);
  pointer-events: none;
}

.showcase-orbit {
  position: absolute;
  right: 5%;
  bottom: 24px;
  left: 5%;
  height: 125px;
  border: 1px solid #8ea99b33;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.featured-art {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 12%;
  width: 76%;
  height: 300px;
  pointer-events: none;
}

.featured-art img,
.neighbor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-art img { filter: drop-shadow(0 16px 12px #030c1266); }
.art-outgoing { z-index: 2; }

.showcase-plinth {
  position: absolute;
  z-index: 1;
  bottom: 28px;
  left: 23%;
  width: 54%;
  height: 46px;
  background: linear-gradient(135deg, #4e6356, #253f3d);
  border-top: 3px solid #b3bd8d;
  box-shadow: 0 9px 0 #162d30, 0 12px 0 #081921;
  transform: skewY(-5deg);
}

.showcase-plinth::after {
  content: "";
  position: absolute;
  right: 25%;
  bottom: 6px;
  left: 25%;
  height: 3px;
  background: var(--showcase-glow);
  box-shadow: 0 0 18px var(--showcase-glow);
  transition: background .6s, box-shadow .6s;
}

.neighbor {
  position: absolute;
  z-index: 4;
  top: 105px;
  width: 24%;
  height: 155px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .48;
  transition: opacity .2s, translate .2s;
}

.neighbor-prev { left: -4%; transform: rotate(-9deg); }
.neighbor-next { right: -4%; transform: rotate(9deg); }
.neighbor:hover,
.neighbor:focus-visible { opacity: 1; translate: 0 -4px; }

.showcase-caption {
  position: relative;
  min-height: 90px;
  padding: 0 12px;
  text-align: center;
}

.showcase-caption h2 {
  margin: 6px 0 10px;
  color: #f4ebd4;
  font-size: 28px;
  line-height: 1.3;
}

.showcase-caption p {
  margin: 0;
  color: #aebfbc;
  font-size: 13px;
  line-height: 1.7;
}

/* Sparse ambient layer. */
.moon-halo {
  position: absolute;
  top: -26px;
  left: calc(34% - 71px);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #e4d5a416, transparent 65%);
  animation: shop-moon-breathe 12s ease-in-out infinite alternate;
}

.night-cloud {
  position: absolute;
  width: 340px;
  height: 56px;
  background: linear-gradient(180deg, #8eafbd20, #7e9aaa09);
  clip-path: polygon(0 50%, 12% 50%, 12% 25%, 28% 25%, 28% 0, 57% 0, 57% 25%, 79% 25%, 79% 50%, 100% 50%, 100% 100%, 0 100%);
  animation: shop-cloud-drift 32s ease-in-out infinite alternate;
}

.cloud-one { top: 38px; left: 3%; --cloud-travel: 110px; }
.cloud-two { top: 145px; right: 0; width: 260px; height: 42px; --cloud-travel: -120px; animation-duration: 43s; animation-delay: -24s; opacity: .65; }

.night-meteor {
  position: absolute;
  top: 7%;
  left: 48%;
  width: 110px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #b1d8db66, #f1e6b8);
  opacity: 0;
  transform: rotate(24deg);
  animation: shop-meteor-pass 3s linear infinite;
}

.night-meteor::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -2px;
  width: 4px;
  height: 4px;
  background: #f3e6b6;
  box-shadow: -7px 0 #a6cace55, -14px 0 #a6cace22;
}

.night-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #f0dfaf;
  box-shadow: 0 0 7px #e0d5ac55;
  opacity: .3;
  animation: shop-star-breathe var(--star-duration) ease-in-out var(--star-delay) infinite alternate;
}

.night-star:nth-of-type(3n) { width: 2px; height: 2px; background: #c0d9e8; }

.night-firefly {
  position: absolute;
  bottom: var(--firefly-bottom);
  left: var(--firefly-left);
  width: 3px;
  height: 3px;
  background: #dfec98;
  box-shadow: 0 0 7px 2px #c2d88535;
  opacity: 0;
  animation: shop-firefly-rise var(--firefly-duration) ease-in-out var(--firefly-delay) infinite;
}

.firefly-pair {
  position: absolute;
  bottom: 66px;
  left: 18%;
  width: 42px;
  height: 30px;
  animation: shop-pair-drift 13s ease-in-out infinite alternate;
}

.pair-two { bottom: 100px; left: 86%; animation-duration: 17s; animation-delay: -6s; }
.firefly-pair i { position: absolute; top: 0; left: 0; width: 4px; height: 4px; background: #e4edab; box-shadow: 0 0 9px #d8e58b88; animation: shop-pair-dance 4s ease-in-out infinite; }
.firefly-pair i + i { width: 3px; height: 3px; background: #accfc1; animation-delay: -2s; }

/* Interactive forest shop. */
.night-cabin.little-shop {
  position: absolute;
  z-index: 3;
  bottom: 39px;
  left: 23%;
  width: 164px;
  height: 92px;
  background: repeating-linear-gradient(0deg, #65563f 0 16px, #4c4336 16px 19px);
  border: 3px solid #8a7956;
  border-top: 0;
  box-shadow: 6px 5px 0 #10272e;
  pointer-events: auto;
}

.night-cabin::before {
  content: "";
  position: absolute;
  top: -38px;
  right: -10px;
  left: -10px;
  height: 41px;
  background: #647e58;
  border-top: 5px solid #9cac78;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}

.night-cabin::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -10px;
  left: -24px;
  height: 13px;
  background: radial-gradient(ellipse, #e9bd6040, transparent 70%);
}

.night-cabin > i {
  position: absolute;
  top: 29px;
  left: 12px;
  width: 60px;
  height: 33px;
  background:
    linear-gradient(90deg, transparent 43%, #967441 43% 56%, transparent 56%),
    linear-gradient(transparent 43%, #967441 43% 56%, transparent 56%),
    #ffe0a0;
  box-shadow: 0 0 18px #f4c47880;
  animation: shop-cabin-light 3.5s ease-in-out infinite alternate;
}

.cabin-chimney {
  position: absolute;
  top: -49px;
  right: 10px;
  width: 14px;
  height: 26px;
  background: #8a7960;
  border-top: 4px solid #b5a17a;
}

.cabin-smoke {
  position: absolute;
  top: -63px;
  right: 9px;
  width: 12px;
  height: 12px;
  background: #b7c4b544;
  box-shadow: 5px -11px #b7c4b526;
  animation: shop-cabin-smoke 3s ease-out infinite;
}

.little-shop button { border-radius: 0; cursor: pointer; transition: filter .2s, transform .35s; }
.little-shop button:hover { filter: brightness(1.18); }

.little-shop .cabin-sign {
  position: absolute;
  top: -36px;
  right: 14px;
  left: 14px;
  min-height: 32px;
  padding: 5px 0;
  color: #ffe3a3;
  background: #443d2d;
  border: 1px solid #baa16a;
  font: 600 12px/1.5 "Microsoft YaHei", sans-serif;
  text-align: center;
}

.little-shop .cabin-awning {
  position: absolute;
  top: 0;
  right: -7px;
  left: -7px;
  height: 17px;
  background: repeating-linear-gradient(90deg, #c8b17b 0 15px, #56705b 15px 30px);
  border-top: 3px solid #e0cc95;
  border-bottom: 3px solid #334e43;
  box-shadow: 0 4px 0 #14292055;
  pointer-events: none;
}

.little-shop .cabin-goods {
  position: absolute;
  top: 46px;
  left: 17px;
  width: 8px;
  height: 10px;
  background: #8eaa7b;
  box-shadow: 11px -3px #c89472, 22px 0 #829d9f, 0 11px #b49d67, 11px 11px #85975e, 22px 11px #b88d6d;
}

.little-shop .cabin-open {
  position: absolute;
  bottom: 6px;
  left: 24px;
  color: #f6d995;
  font: 8px/1.3 "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
}

.little-shop .cabin-door {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 0;
  width: 36px;
  height: 58px;
  padding: 0;
  overflow: visible;
  background: #f2cf8c;
  border: 3px solid #b89b65;
  box-shadow: inset 0 0 8px #ffedb8;
}

.little-shop .cabin-door::after {
  content: "";
  position: absolute;
  top: -7px;
  left: -35px;
  width: 67px;
  height: 4px;
  background: #c7b18a;
  box-shadow: 0 2px #6e6048;
  pointer-events: none;
}

.door-interior,
.door-spill,
.door-leaf { position: absolute; display: block; pointer-events: none; }

.door-interior {
  inset: 0;
  background: linear-gradient(0deg, #c99859 0 14%, transparent 14%), linear-gradient(90deg, #e6b871, #ffeab1 45%, #f1d194);
  box-shadow: inset 0 3px 0 #ffefc2;
}

.door-interior::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 5px;
  left: 5px;
  height: 3px;
  background: #b18c56;
  box-shadow: 0 13px #b18c56;
}

.door-spill {
  right: -13px;
  bottom: -14px;
  left: -13px;
  height: 18px;
  background: linear-gradient(#f4d08466, #f4d08400);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.door-leaf {
  inset: 0;
  background: linear-gradient(#f4dca1 0 52%, #8e7950 52% 57%, #3f5845 57%);
  border: 1px solid #e0bd78;
  box-shadow: inset 2px 0 #ffecbc66, 2px 0 #745b35;
  transition: transform .35s;
}

.door-leaf::after {
  content: "";
  position: absolute;
  top: 57%;
  right: 3px;
  width: 3px;
  height: 13px;
  background: #f4dca2;
  border-top: 2px solid #b99353;
  border-bottom: 2px solid #b99353;
  box-shadow: 1px 0 #745b35, -1px 0 #ffedbd;
}

.has-cat .door-leaf { animation: shop-visitor-door 20s linear infinite; }
.has-cat.door-open .door-leaf { transform: translateX(-32px) !important; }
.little-shop.door-open .cabin-door { filter: brightness(1.2); }
.little-shop.lights-off > i { background: #263b40; box-shadow: none; animation: none; }
.little-shop.lights-off .cabin-sign { color: #9bafad; background: #263b40; border-color: #667568; }
.little-shop.lights-off .door-leaf { background: linear-gradient(#334b4c 0 53%, #2b4037 53%); }
.little-shop.lights-off .door-interior { background: #33443e; box-shadow: none; }
.little-shop.lights-off .door-spill,
.little-shop.lights-off::after { opacity: 0; }

.cabin-welcome {
  position: absolute;
  z-index: 5;
  bottom: 156px;
  left: -8px;
  width: 190px;
  padding: 12px;
  color: #263c36;
  background: #f0dfb7;
  border: 2px solid #aa9467;
  box-shadow: 4px 5px #091c2d77;
  font: 12px/1.7 "Microsoft YaHei", sans-serif;
}

.cabin-welcome::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 25px;
  width: 12px;
  height: 12px;
  background: #f0dfb7;
  border-right: 2px solid #aa9467;
  border-bottom: 2px solid #aa9467;
  transform: rotate(45deg);
}

.cabin-welcome button {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 6px 10px;
  color: #fff0c8;
  background: #35574b;
  border: 1px solid #254137;
}

/* Six visitors share one readable silhouette and one synchronized 20-second timeline. */
.shop-cat {
  position: absolute;
  z-index: 4;
  bottom: -3px;
  left: 106px;
  width: 31px;
  height: 28px;
  pointer-events: none;
  transform-origin: center bottom;
  animation: shop-visitor-cycle 20s linear infinite;
}

.shop-cat span { position: absolute; display: block; }
.cat-body { top: 12px; left: 5px; width: 21px; height: 12px; background: #d7a96c; box-shadow: inset 0 -4px #aa7b4e; }
.cat-head { top: 4px; left: 19px; width: 14px; height: 15px; background: #ebc48b; box-shadow: inset -3px -2px #c69760; }
.cat-head::before { content: ""; position: absolute; top: -4px; left: 0; width: 5px; height: 6px; background: #e6bb7f; box-shadow: 9px 0 #e6bb7f; }
.cat-head::after { content: ""; position: absolute; top: 6px; right: 2px; width: 3px; height: 3px; background: #243b38; box-shadow: 3px 4px #986c4e; }
.cat-tail { top: 7px; left: -2px; width: 5px; height: 15px; background: #c69559; transform: rotate(-18deg); transform-origin: bottom; animation: shop-visitor-tail 1.8s ease-in-out infinite alternate; }
.cat-feet { bottom: 0; left: 7px; width: 5px; height: 6px; background: #a77a50; box-shadow: 14px 0 #a77a50; animation: shop-visitor-step .36s steps(2, end) infinite alternate; }

.has-cat:is(:hover, :focus-within, .door-open) .shop-cat,
.has-cat:is(:hover, :focus-within, .door-open) .shop-cat *,
.has-cat:is(:hover, :focus-within, .door-open) .door-leaf { animation-play-state: paused; }

[data-animal="panda"] .cat-body { top: 9px; width: 23px; height: 15px; background: #e2e5d7; box-shadow: inset 0 -5px #293b3c, inset 6px 0 #293b3c; }
[data-animal="panda"] .cat-head { top: 1px; left: 17px; width: 17px; height: 17px; background: #f1efde; box-shadow: inset -2px -2px #bec7bb; }
[data-animal="panda"] .cat-head::before { width: 6px; height: 6px; background: #26393b; border-radius: 2px; box-shadow: 11px 0 #26393b; }
[data-animal="panda"] .cat-head::after { top: 5px; right: 1px; width: 5px; height: 6px; background: #26393b; box-shadow: -8px 0 #26393b, 0 7px #566563; }
[data-animal="panda"] .cat-tail { top: 15px; left: 1px; width: 5px; height: 5px; background: #354749; transform: none; animation: none; }
[data-animal="panda"] .cat-feet { background: #26393b; box-shadow: 14px 0 #26393b; }

[data-animal="dog"] .cat-body { background: #bf9160; box-shadow: inset 0 -4px #8e6545; }
[data-animal="dog"] .cat-body::after { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 10px; background: #89b8ae; }
[data-animal="dog"] .cat-head { top: 5px; background: #e0b57e; box-shadow: inset -3px -2px #b38559; }
[data-animal="dog"] .cat-head::before { top: -1px; left: -2px; width: 6px; height: 12px; background: #6f5140; box-shadow: none; }
[data-animal="dog"] .cat-head::after { top: 8px; right: -4px; width: 8px; height: 6px; background: #f0d4a8; box-shadow: 3px 0 #3a4037, 0 -5px #303e35; }
[data-animal="dog"] .cat-tail { top: 5px; left: -3px; height: 17px; background: #8f6948; animation-duration: .6s; }

[data-animal="rabbit"] .cat-body { background: #e1e1d5; box-shadow: inset 0 -4px #b5bfb5; }
[data-animal="rabbit"] .cat-head { background: #f2eee1; box-shadow: inset -3px -2px #c6cec2; }
[data-animal="rabbit"] .cat-head::before { top: -12px; left: 1px; width: 5px; height: 14px; background: #eed8ce; border-top: 3px solid #f4eee2; box-shadow: 7px -2px #e8c8bd; }
[data-animal="rabbit"] .cat-head::after { background: #4b4541; box-shadow: 3px 4px #c68e8a; }
[data-animal="rabbit"] .cat-tail { top: 15px; left: 0; width: 7px; height: 7px; background: #f2f0df; transform: none; animation: none; }
[data-animal="rabbit"] .cat-feet { background: #c4c7b9; box-shadow: 14px 0 #c4c7b9; }

[data-animal="fox"] .cat-body { background: #cf7c44; box-shadow: inset 0 -4px #984d32; }
[data-animal="fox"] .cat-head { background: #e49251; box-shadow: inset -3px -5px #f1dcb3; }
[data-animal="fox"] .cat-head::before { top: -7px; height: 9px; background: #c66d3f; border-top: 3px solid #523e33; box-shadow: 9px 0 #c66d3f; }
[data-animal="fox"] .cat-head::after { top: 9px; right: -3px; width: 8px; height: 6px; background: #f0dec1; box-shadow: 3px 0 #3a3f36, 0 -5px #3a3f36; }
[data-animal="fox"] .cat-tail { top: 9px; left: -8px; width: 11px; height: 18px; background: linear-gradient(#f3e2bc 0 35%, #c8723b 35%); transform: rotate(-32deg); }
[data-animal="fox"] .cat-feet { background: #503f33; box-shadow: 14px 0 #503f33; }

[data-animal="pig"] .cat-body { top: 9px; height: 15px; background: #dfa9a0; box-shadow: inset 0 -4px #bb827b; }
[data-animal="pig"] .cat-head { width: 16px; height: 16px; background: #efbdb0; box-shadow: inset -3px -2px #d59b91; }
[data-animal="pig"] .cat-head::before { top: -3px; left: 0; width: 6px; height: 6px; background: #d8938c; box-shadow: 9px 0 #d8938c; }
[data-animal="pig"] .cat-head::after { top: 8px; right: -4px; width: 8px; height: 6px; background: #ce8f88; box-shadow: 0 -5px #403e37; }
[data-animal="pig"] .cat-tail { top: 13px; left: -1px; width: 7px; height: 7px; background: transparent; border: 2px solid #d29891; transform: none; animation: none; }
[data-animal="pig"] .cat-feet { background: #956d68; box-shadow: 14px 0 #956d68; }

.shop-hero[data-ambient="paused"] .night-atmosphere *,
.shop-hero[data-ambient="paused"] .fir,
.shop-hero[data-ambient="paused"] .little-shop * { animation-play-state: paused; }

@keyframes shop-meteor-pass {
  0% { opacity: 0; transform: translate(0, 0) rotate(24deg); }
  5% { opacity: 1; }
  32% { opacity: 0; transform: translate(280px, 125px) rotate(24deg); }
  100% { opacity: 0; transform: translate(280px, 125px) rotate(24deg); }
}

@keyframes shop-tree-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes shop-cloud-drift { from { transform: translateX(0); } to { transform: translateX(var(--cloud-travel)); } }
@keyframes shop-star-breathe { 0%, 15% { opacity: .18; } 85%, 100% { opacity: .7; } }
@keyframes shop-moon-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes shop-firefly-rise { 0% { opacity: 0; transform: translate(0, 15px); } 20% { opacity: .65; } 55% { opacity: .35; transform: translate(var(--firefly-drift), -35px); } 75% { opacity: .6; } 100% { opacity: 0; transform: translate(0, -85px); } }
@keyframes shop-pair-drift { from { transform: translate(-15px, 8px); } to { transform: translate(28px, -32px); } }
@keyframes shop-pair-dance { 0%, 100% { opacity: .3; transform: translate(0, 0); } 25% { opacity: .85; transform: translate(25px, -12px); } 50% { opacity: .6; transform: translate(36px, 5px); } 75% { opacity: .9; transform: translate(12px, 15px); } }
@keyframes shop-cabin-light { from { opacity: .55; } to { opacity: .95; } }
@keyframes shop-cabin-smoke { from { opacity: 0; transform: translate(0, 8px) scale(.6); } 25% { opacity: .7; } to { opacity: 0; transform: translate(20px, -35px) scale(1.4); } }
@keyframes shop-visitor-step { from { translate: 0 0; } to { translate: 2px -2px; } }
@keyframes shop-visitor-tail { from { rotate: -12deg; } to { rotate: 12deg; } }
@keyframes shop-visitor-cycle {
  0% { opacity: 0; transform: translate(-145px, 0) scaleX(1); }
  5% { opacity: 1; transform: translate(-145px, 0) scaleX(1); }
  24%, 29% { opacity: 1; transform: translate(0, 0) scaleX(1); }
  34% { opacity: 0; transform: translate(0, -16px) scale(.55); }
  35%, 54% { opacity: 0; transform: translate(0, -16px) scale(-.55, .55); }
  60%, 65% { opacity: 1; transform: translate(0, 0) scaleX(-1); }
  86%, 91% { opacity: 1; transform: translate(-145px, 0) scaleX(-1); }
  96%, 100% { opacity: 0; transform: translate(-145px, 0) scaleX(-1); }
}

@keyframes shop-visitor-door {
  0%, 23%, 38%, 53%, 66%, 100% { transform: translateX(0); }
  27%, 34%, 57%, 62% { transform: translateX(-32px); }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .shop-hero-layout { gap: 26px; }
  .shop-hero-copy h1 { font-size: 48px; }
}

@media (max-width: 760px) {
  .shop-hero { min-height: 0; }
  .shop-hero-layout { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding: 48px 0 190px; }
  .shop-hero-copy { padding: 0; }
  .shop-hero-copy h1 { font-size: 48px; }
  .shop-hero-copy > p:last-child { font-size: 16px; }
  .pixel-moon { top: 25px; right: 24px; left: auto; width: 34px; height: 34px; }
  .moon-halo { top: -23px; right: -24px; left: auto; width: 130px; height: 130px; }
  .night-cloud { width: 200px; height: 34px; }
  .cloud-one { top: 70px; left: -40px; --cloud-travel: 65px; }
  .cloud-two { top: 39%; right: -70px; --cloud-travel: -60px; }
  .night-meteor { top: 4%; left: 15%; width: 72px; }
  .pair-two { display: none; }
  .fir-one { left: 5%; }
  .fir-two { right: 5%; }
  .night-cabin.little-shop { left: calc(50% - 82px); }
  .cabin-welcome { bottom: 146px; }
  .night-showcase { width: min(100%, 580px); margin-inline: auto; }
  .showcase-scene { height: 300px; }
  .featured-art { top: 0; height: 270px; }
  .neighbor { top: 80px; }
  .showcase-caption { min-height: 85px; }
  .showcase-caption h2 { font-size: 25px; }
}

@media (max-width: 390px) {
  .shop-hero-copy h1 { font-size: 44px; }
  .showcase-scene { height: 245px; }
  .featured-art { height: 220px; }
  .neighbor { top: 65px; height: 115px; }
  .showcase-plinth { bottom: 22px; height: 32px; }
  .showcase-orbit { bottom: 15px; height: 100px; }
  .showcase-caption h2 { font-size: 24px; }
  .showcase-caption p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .night-atmosphere *,
  .fir,
  .little-shop *,
  .shop-cat,
  .door-leaf { animation: none !important; transition: none !important; }
  .night-meteor,
  .firefly-pair,
  .night-firefly { display: none; }
  .night-star { opacity: .35; }
  .shop-cat { transform: translate(-100px, 0); }
  .neighbor { transition: none; }
}