.fortune-page.fortune-effects-enabled {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

.fortune-page.fortune-effects-enabled > :not(.fortune-effects-sidecar):not(.fortune-titlebar) {
  position: relative;
  z-index: 1;
}

.fortune-page.fortune-effects-enabled > .fortune-titlebar {
  z-index: 4;
}

.fortune-effects-sidecar {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.fortune-effects-ambient {
  position: absolute;
  inset: 0 0 auto;
  height: 318px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(231, 200, 117, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(23, 25, 24, 0.04), rgba(23, 25, 24, 0.38));
  opacity: 0.9;
}

.fortune-effects-ambient::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(115deg, transparent 18%, rgba(231, 200, 117, 0.11) 50%, transparent 82%);
  transform: translateX(-120%);
  animation: fortune-sidecar-sweep 9s ease-in-out infinite;
}

.fortune-effects-particle {
  position: absolute;
  left: var(--particle-left);
  top: var(--particle-top);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: #e7c875;
  box-shadow: 0 0 9px rgba(231, 200, 117, 0.75);
  opacity: var(--particle-opacity);
  animation: fortune-sidecar-twinkle var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.fortune-effects-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(231, 200, 117, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 200, 117, 0.11) 1px, transparent 1px);
  background-size: 31px 31px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 92%);
}

.fortune-effects-canvas {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.fortune-page.fortune-effects-enabled .fortune-seal {
  box-shadow: 0 0 24px rgba(231, 200, 117, 0.1), inset 0 0 18px rgba(231, 200, 117, 0.06);
  animation: fortune-sidecar-seal-pulse 3.2s ease-in-out infinite;
}

.fortune-page.fortune-effects-enabled .fortune-products > button,
.fortune-page.fortune-effects-enabled .zodiac-grid button {
  transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.fortune-page.fortune-effects-enabled .fortune-products > button:active,
.fortune-page.fortune-effects-enabled .zodiac-grid button:active {
  transform: scale(0.985);
}

.fortune-page.fortune-effects-enabled .fortune-submit {
  position: relative;
  overflow: hidden;
}

.fortune-page.fortune-effects-enabled .fortune-submit::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(105deg, transparent 25%, rgba(255, 242, 176, 0.3) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: fortune-sidecar-button-shine 3.6s ease-in-out infinite;
}

.fortune-result--sidecar-reveal {
  animation: fortune-sidecar-result-enter 550ms ease-out both;
}

@keyframes fortune-sidecar-twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.72); }
  45% { opacity: 0.9; transform: scale(1.16); }
}

@keyframes fortune-sidecar-sweep {
  0%, 58% { transform: translateX(-120%); opacity: 0; }
  72% { opacity: 0.9; }
  90%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes fortune-sidecar-seal-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(231, 200, 117, 0.08), inset 0 0 14px rgba(231, 200, 117, 0.05); }
  50% { box-shadow: 0 0 30px rgba(231, 200, 117, 0.2), inset 0 0 24px rgba(231, 200, 117, 0.1); }
}

@keyframes fortune-sidecar-button-shine {
  0%, 64% { transform: translateX(-120%); opacity: 0; }
  76% { opacity: 1; }
  92%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes fortune-sidecar-result-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fortune-effects-ambient::after,
  .fortune-effects-particle,
  .fortune-page.fortune-effects-enabled .fortune-seal,
  .fortune-page.fortune-effects-enabled .fortune-submit::after,
  .fortune-result--sidecar-reveal {
    animation: none;
  }

  .fortune-page.fortune-effects-enabled .fortune-products > button,
  .fortune-page.fortune-effects-enabled .zodiac-grid button {
    transition: none;
  }
}