.store-opening {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 24px;
  overflow: hidden;
  background: #f8faf7;
  color: #24342f;
  text-align: center;
}
.store-opening::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(183, 217, 175, .18), transparent 38%),
              linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(240, 246, 238, .5));
}
.store-opening-inner { width: min(100%, 520px); }
.store-opening-inline { min-height: 400px; }
.store-opening-inline .store-opening-logo { width: 150px; }
.store-opening-kicker {
  margin: 0 0 28px;
  color: #456757;
  font: 600 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.store-opening-logo {
  position: relative;
  width: clamp(180px, 36vw, 248px);
  aspect-ratio: 1;
  margin: 0 auto 25px;
}
.store-opening-logo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.store-opening-logo-base {
  filter: grayscale(1) brightness(.42);
  opacity: .83;
}
.store-opening-logo-lit {
  clip-path: inset(100% 0 0 0);
  filter: saturate(1.08) brightness(1.07);
  animation: store-logo-light-up .9s cubic-bezier(.22, .72, .25, 1) forwards;
}
.store-opening h1 {
  margin: 0;
  font: 400 clamp(26px, 4vw, 34px)/1.18 Georgia, 'Times New Roman', serif;
  letter-spacing: -.025em;
}
.store-opening-copy {
  margin: 12px 0 25px;
  color: #5b6b64;
  font: 14px/1.55 Arial, Helvetica, sans-serif;
}
.store-opening-track {
  width: 132px;
  height: 2px;
  margin: 0 auto;
  overflow: hidden;
  background: #dce8dc;
  border-radius: 2px;
}
.store-opening-track::after {
  content: "";
  display: block;
  width: 48%;
  height: 100%;
  background: linear-gradient(90deg, #224768, #72ad3e);
  animation: store-loading-progress 1.15s ease-in-out infinite alternate;
}
.store-opening-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
@keyframes store-logo-light-up {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes store-loading-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(210%); }
}
@media (prefers-reduced-motion: reduce) {
  .store-opening-logo-lit { animation: none; clip-path: inset(0); }
  .store-opening-track::after { animation: none; width: 100%; }
}