.coming-soon-backdrop {
  padding: 20px;
  background:
    radial-gradient(circle at 50% 36%, rgba(190, 124, 27, 0.15), transparent 38%),
    rgba(2, 2, 2, 0.76);
  backdrop-filter: blur(10px) saturate(0.78);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.coming-soon-box {
  position: relative;
  isolation: isolate;
  width: min(90vw, 360px);
  overflow: hidden;
  padding: 34px 26px 27px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(155deg, rgba(31, 18, 12, 0.98), rgba(8, 7, 6, 0.99) 62%, rgba(18, 10, 7, 0.98)) padding-box,
    linear-gradient(135deg, #8e5618, #ffe18a 38%, #7e4913 72%, #dbac4c) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 180, 0.15),
    inset 0 -28px 60px rgba(0, 0, 0, 0.34),
    0 28px 80px rgba(0, 0, 0, 0.72),
    0 0 38px rgba(218, 158, 48, 0.12);
  transform: translateY(18px) scale(0.94);
  transition: transform 0.34s cubic-bezier(0.2, 0.85, 0.22, 1);
}

.coming-soon-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% -20% auto;
  height: 72%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(244, 190, 76, 0.15), transparent 68%);
}

.coming-soon-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -54px;
  bottom: -72px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(238, 187, 76, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(238, 187, 76, 0.025), 0 0 0 42px rgba(238, 187, 76, 0.018);
}

.coming-soon-backdrop.open .coming-soon-box {
  transform: translateY(0) scale(1);
}

.coming-soon-icon {
  position: relative;
  width: 82px;
  height: 82px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 235, 158, 0.16), transparent 28%),
    radial-gradient(circle, #25180d 0%, #100c08 68%, #080706 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 108, 0.34),
    inset 0 0 24px rgba(222, 155, 41, 0.12),
    0 11px 28px rgba(0, 0, 0, 0.50),
    0 0 24px rgba(231, 174, 61, 0.11);
}

.hourglass-orbit {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from 40deg, transparent 0 24%, #e1ad47 34%, #fff0a0 39%, transparent 48% 77%, #a96718 86%, transparent 94%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  animation: premiumOrbit 7s linear infinite;
}

.lux-hourglass {
  position: relative;
  z-index: 1;
  width: 43px;
  height: 47px;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 6px rgba(239, 188, 72, 0.16));
  transform-origin: 50% 50%;
  animation: premiumHourglassFlip 4s cubic-bezier(0.55, 0.08, 0.35, 0.96) infinite;
}

.hg-glass {
  fill: rgba(255, 245, 203, 0.055);
  stroke: rgba(255, 231, 145, 0.72);
  stroke-width: 1.15;
}

.hg-frame {
  fill: none;
  stroke: url(#hgGold);
  stroke-width: 3;
  stroke-linecap: round;
}

.hg-sand-top,
.hg-sand-bottom {
  fill: url(#hgSand);
}

.hg-sand-top {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: premiumSandTop 4s ease-in-out infinite;
}

.hg-sand-bottom {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: premiumSandBottom 4s ease-in-out infinite;
}

.hg-sand-stream {
  fill: none;
  stroke: #f5c85f;
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: premiumSandStream 4s ease-in-out infinite;
}

.coming-soon-kicker {
  width: 96px;
  height: 12px;
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.coming-soon-kicker span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 187, 73, 0.62));
}

.coming-soon-kicker span:last-child {
  transform: scaleX(-1);
}

.coming-soon-kicker i {
  width: 7px;
  height: 7px;
  background: #efbd55;
  box-shadow: 0 0 9px rgba(242, 190, 80, 0.42);
  transform: rotate(45deg);
}

.coming-soon-box h2 {
  margin: 0;
  color: #f6c85f;
  font: 900 27px/1.2 Manrope, "Noto Sans SC", sans-serif;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 10px rgba(244, 187, 63, 0.16);
}

.coming-soon-box p {
  max-width: 270px;
  margin: 12px auto 23px;
  color: #bcb19f;
  font: 14px/1.65 Manrope, "Noto Sans SC", sans-serif;
}

.coming-soon-close {
  position: relative;
  min-width: 142px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 137, 0.52);
  border-radius: 13px;
  background: linear-gradient(115deg, #8d5514, #e5ad38 34%, #ffe283 51%, #d6972c 70%, #75410d);
  color: #160e06;
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 247, 194, 0.70), 0 10px 24px rgba(190, 124, 24, 0.26);
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.coming-soon-close:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 247, 194, 0.78), 0 14px 28px rgba(190, 124, 24, 0.32);
}

.coming-soon-close:active {
  transform: translateY(0) scale(0.98);
}

@keyframes premiumOrbit {
  to { transform: rotate(360deg); }
}

@keyframes premiumHourglassFlip {
  0%, 42% { transform: rotate(0deg); }
  54%, 92% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes premiumSandTop {
  0%, 7%, 54%, 60% { transform: scaleY(1); opacity: 1; }
  40%, 47%, 92%, 100% { transform: scaleY(0.08); opacity: 0.4; }
}

@keyframes premiumSandBottom {
  0%, 7%, 54%, 60% { transform: scaleY(0.08); opacity: 0.42; }
  40%, 47%, 92%, 100% { transform: scaleY(1); opacity: 1; }
}

@keyframes premiumSandStream {
  0%, 7%, 46%, 54%, 60%, 99% { opacity: 0; }
  12%, 39%, 65%, 92% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hourglass-orbit,
  .lux-hourglass,
  .hg-sand-top,
  .hg-sand-bottom,
  .hg-sand-stream {
    animation: none !important;
  }
}