/* Phase 1: lightweight, code-rendered Shopify commerce scene. */
.commerce-stage {
  --commerce-rx: -1deg;
  --commerce-ry: -4deg;
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 22%, rgba(38, 120, 255, .22), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(255, 112, 67, .13), transparent 30%),
    linear-gradient(145deg, #0d1b31 0%, #071121 58%, #08101d 100%);
  min-height: 520px;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}

.commerce-stage.visual-frame::after {
  z-index: 8;
  background: linear-gradient(180deg, rgba(4, 12, 26, 0) 66%, rgba(4, 12, 26, .42));
}

.commerce-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at center, #000 22%, transparent 82%);
  mask-image: radial-gradient(circle at center, #000 22%, transparent 82%);
}

.commerce-ambient {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(54px);
  pointer-events: none;
  animation: commerce-breathe 8s ease-in-out infinite;
}

.commerce-ambient-one {
  width: 260px;
  height: 260px;
  top: 9%;
  right: 4%;
  background: rgba(38, 120, 255, .24);
}

.commerce-ambient-two {
  width: 190px;
  height: 190px;
  bottom: -12%;
  left: 5%;
  background: rgba(255, 112, 67, .18);
  animation-delay: -3s;
}

.commerce-scene {
  position: absolute;
  z-index: 2;
  inset: 30px 20px 24px 26px;
  transform-style: preserve-3d;
  perspective: 1300px;
  transform: rotateX(var(--commerce-rx)) rotateY(var(--commerce-ry));
  transform-origin: 52% 48%;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

.store-window {
  position: absolute;
  top: 11%;
  left: 7%;
  width: 86%;
  height: 76%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 19px;
  background: rgba(246, 248, 251, .97);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, .46),
    inset 0 1px rgba(255, 255, 255, .82);
  transform: translateZ(8px);
}

.store-toolbar {
  display: grid;
  grid-template-columns: 1fr 2.4fr 1fr;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid #dfe5ed;
  background: rgba(255, 255, 255, .96);
  color: #5e6b7e;
  font-size: 8px;
}

.window-dots {
  display: flex;
  gap: 4px;
}

.window-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c7cfda;
}

.window-dots i:first-child { background: #ff7043; }
.window-dots i:nth-child(2) { background: #f1b44c; }
.window-dots i:last-child { background: #3fc58c; }

.store-address {
  justify-self: center;
  width: min(168px, 92%);
  padding: 5px 10px;
  border: 1px solid #e5e9ef;
  border-radius: 999px;
  background: #f7f8fa;
  text-align: center;
}

.address-lock {
  margin-right: 4px;
  color: #3fc58c;
  font-size: 6px;
}

.toolbar-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.toolbar-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3fc58c;
  box-shadow: 0 0 0 3px rgba(63, 197, 140, .13);
}

.store-shell {
  display: grid;
  grid-template-columns: 43px 1fr;
  height: calc(100% - 36px);
}

.store-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  padding-top: 12px;
  border-right: 1px solid #e4e9f0;
  background: #fff;
}

.mini-brand {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
  border-radius: 7px;
  background: #081224;
  color: #fff;
  font-size: 0;
}

.mini-brand span { font-size: 10px; font-weight: 900; }
.mini-brand b { display: none; }

.side-line {
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 10px;
  background: #cbd2dc;
}

.side-line-short { width: 11px; }
.side-line-active { background: #2678ff; box-shadow: 0 0 0 5px rgba(38, 120, 255, .1); }
.side-settings { margin-top: auto; margin-bottom: 13px; color: #8a95a5; font-size: 8px; letter-spacing: 1px; }

.store-content {
  min-width: 0;
  padding: 0 14px 12px;
  color: #081224;
  background: #f8fafc;
}

.store-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 37px;
}

.store-logo {
  letter-spacing: -.03em;
  font-size: 9px;
  font-weight: 900;
}

.store-nav > div {
  position: relative;
  display: flex;
  gap: 9px;
}

.store-nav > div i {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid #6e7a8c;
  border-radius: 50%;
}

.store-nav > div i:last-of-type { border-radius: 3px; }

.store-nav > div b {
  position: absolute;
  top: -5px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff7043;
  color: #fff;
  font-size: 6px;
}

.store-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  min-height: 142px;
  overflow: hidden;
  padding: 19px 20px;
  border-radius: 13px;
  color: #fff;
  background:
    radial-gradient(circle at 77% 44%, rgba(89, 166, 255, .36), transparent 34%),
    linear-gradient(135deg, #0b1a30, #112c58);
}

.store-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 20px 20px;
}

.store-banner > div { position: relative; z-index: 1; }
.store-banner span { color: #78b7ff; letter-spacing: .14em; font-size: 6px; font-weight: 800; }
.store-banner strong { display: block; margin-top: 8px; letter-spacing: -.04em; font-size: 20px; line-height: 1.02; }

.store-banner button {
  margin-top: 13px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #2678ff;
  font: inherit;
  font-size: 7px;
  font-weight: 800;
}

.store-banner button b { margin-left: 5px; }

.product-sculpture {
  position: relative;
  height: 108px;
  transform-style: preserve-3d;
  animation: sculpture-drift 7s ease-in-out infinite;
}

.product-cube {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(117, 182, 255, .92), rgba(38, 120, 255, .16));
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 18px 30px rgba(0, 0, 0, .28);
  transform: rotate(34deg) skew(-7deg);
}

.cube-one { width: 73px; height: 73px; top: 19px; left: 34px; }
.cube-two { width: 43px; height: 43px; top: 5px; right: 6px; border-radius: 12px; background: linear-gradient(145deg, #ff9c78, rgba(255, 112, 67, .2)); transform: rotate(-14deg); }

.product-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  right: 0;
  bottom: -3px;
  border: 10px solid rgba(255, 255, 255, .12);
  border-right-color: rgba(89, 166, 255, .65);
  border-radius: 50%;
  transform: rotate(30deg) scaleY(.46);
}

.product-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 13px 1px 8px;
  font-size: 8px;
}

.product-heading strong { font-size: 9px; }
.product-heading span { color: #2678ff; font-weight: 700; }

.product-grid-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.product-card-mini {
  min-width: 0;
  padding: 6px;
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 12px rgba(18, 34, 58, .04);
}

.product-card-mini b,
.product-card-mini small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card-mini b { margin-top: 5px; font-size: 6px; }
.product-card-mini small { margin-top: 2px; color: #69778b; font-size: 6px; }

.product-shape {
  position: relative;
  display: block;
  height: 37px;
  overflow: hidden;
  border-radius: 5px;
  background: #eef3f9;
}

.product-shape::before {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  top: 7px;
  left: calc(50% - 11px);
  border-radius: 7px 10px 5px 12px;
  background: linear-gradient(145deg, #122d55, #2678ff);
  transform: rotate(23deg);
  box-shadow: 0 8px 12px rgba(18, 45, 85, .24);
}

.shape-two { background: #fff2ed; }
.shape-two::before { background: linear-gradient(145deg, #ff9b79, #ff7043); transform: rotate(-16deg); }
.shape-three::before { border-radius: 50%; background: linear-gradient(145deg, #97bff2, #163d78); transform: scaleY(.65); }

.floating-card {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, .19);
  color: #fff;
  background: rgba(6, 16, 33, .88);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform-style: preserve-3d;
}

.growth-card {
  top: 2%;
  right: -1%;
  width: 180px;
  padding: 13px 14px 8px;
  border-radius: 14px;
  transform: translateZ(82px) rotateY(-4deg);
  animation: commerce-float 6.5s ease-in-out infinite;
}

.floating-card-head,
.growth-value { display: flex; justify-content: space-between; align-items: center; }
.floating-card-head span { color: rgba(255, 255, 255, .62); font-size: 8px; }
.floating-card-head i { padding: 3px 5px; border-radius: 999px; color: #7ee2b8; background: rgba(63, 197, 140, .12); font-size: 6px; font-style: normal; font-weight: 900; }
.growth-value { margin-top: 7px; }
.growth-value strong { letter-spacing: -.03em; font-size: 16px; }
.growth-value span { color: #7ee2b8; font-size: 8px; font-weight: 800; }
.growth-card svg { display: block; width: 100%; height: 50px; margin-top: -3px; overflow: visible; }
.chart-line { stroke-dasharray: 230; stroke-dashoffset: 230; animation: chart-draw 2.2s .4s ease forwards; }

.order-card {
  left: 0;
  bottom: 1%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 195px;
  padding: 12px;
  border-radius: 13px;
  transform: translateZ(72px) rotateY(3deg);
  animation: commerce-float 7.2s -2.2s ease-in-out infinite;
}

.order-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #32c786, #1b9160);
  box-shadow: 0 8px 18px rgba(50, 199, 134, .22);
  font-size: 13px;
  font-weight: 900;
}

.order-card small,
.order-card strong,
.order-card div > span { display: block; }
.order-card small { color: #7ee2b8; letter-spacing: .12em; font-size: 6px; font-weight: 900; }
.order-card strong { margin-top: 3px; font-size: 9px; }
.order-card div > span { margin-top: 3px; color: rgba(255, 255, 255, .54); font-size: 7px; }

.experience-card {
  right: 3%;
  bottom: 2%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 156px;
  padding: 11px 12px;
  border-radius: 13px;
  transform: translateZ(58px);
  animation: commerce-float 8s -4s ease-in-out infinite;
}

.experience-card small,
.experience-card strong { display: block; }
.experience-card small { color: rgba(255, 255, 255, .5); letter-spacing: .1em; font-size: 6px; }
.experience-card strong { margin-top: 3px; font-size: 9px; }

.experience-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #59a6ff;
  box-shadow: 0 0 0 5px rgba(89, 166, 255, .12), 0 0 22px rgba(89, 166, 255, .7);
}

.scene-particle {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #59a6ff;
  box-shadow: 0 0 14px #59a6ff;
  animation: particle-drift 6s ease-in-out infinite;
}

.particle-one { top: 12%; left: 1%; }
.particle-two { top: 45%; right: 1%; width: 3px; height: 3px; animation-delay: -2s; }
.particle-three { bottom: 15%; left: 19%; width: 4px; height: 4px; background: #ff7043; box-shadow: 0 0 14px #ff7043; animation-delay: -4s; }

.commerce-paused *,
.commerce-paused *::before,
.commerce-paused *::after { animation-play-state: paused !important; }

@keyframes commerce-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes commerce-breathe {
  0%, 100% { opacity: .72; scale: .94; }
  50% { opacity: 1; scale: 1.08; }
}

@keyframes sculpture-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes particle-drift {
  0%, 100% { opacity: .35; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(7px, -14px, 28px); }
}

@keyframes chart-draw { to { stroke-dashoffset: 0; } }

@media (width <= 1000px) {
  .commerce-stage {
    min-height: 500px;
    transform: none;
  }

  .commerce-scene { inset: 26px 24px 24px; }
}

@media (width <= 700px) {
  .commerce-stage,
  .commerce-stage.visual-frame {
    height: 410px;
    min-height: 410px;
    border-radius: 22px;
  }

  .commerce-scene { inset: 18px 8px 16px; transform: none; }
  .store-window { top: 11%; left: 5%; width: 90%; height: 75%; border-radius: 15px; }
  .store-toolbar { grid-template-columns: .7fr 2.2fr .7fr; padding: 0 8px; }
  .store-address { font-size: 7px; }
  .store-shell { grid-template-columns: 33px 1fr; }
  .store-sidebar { gap: 14px; }
  .store-content { padding: 0 9px 9px; }
  .store-banner { grid-template-columns: 1.25fr .75fr; min-height: 116px; padding: 14px; }
  .store-banner strong { font-size: 17px; }
  .product-sculpture { height: 82px; transform: scale(.82); transform-origin: center; }
  .cube-one { left: 10px; }
  .product-grid-mini { grid-template-columns: repeat(2, 1fr); }
  .product-card-mini:last-child { display: none; }
  .growth-card { top: 1%; right: -1%; width: 148px; padding: 10px 11px 6px; }
  .growth-card svg { height: 40px; }
  .growth-value strong { font-size: 14px; }
  .order-card { left: -1%; bottom: 0; width: 164px; padding: 10px; }
  .experience-card { right: 1%; bottom: 1%; min-width: 137px; padding: 10px; }
}

@media (width <= 420px) {
  .commerce-stage,
  .commerce-stage.visual-frame { height: 390px; min-height: 390px; }
  .store-window { top: 12%; height: 73%; }
  .store-banner { min-height: 106px; }
  .product-heading { margin-top: 9px; }
  .growth-card { width: 134px; }
  .experience-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-stage { --commerce-rx: 0deg; --commerce-ry: 0deg; }
  .commerce-scene { transform: none; transition: none; }
  .commerce-stage *,
  .commerce-stage *::before,
  .commerce-stage *::after { animation: none !important; }
  .chart-line { stroke-dashoffset: 0; }
}