/* Shared details-page atmosphere: gold/teal field, rails, corners, portal surfaces. */
.atm-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-height: calc(100dvh - var(--nc-navbar-height, 4.75rem));
  background:
    radial-gradient(ellipse at 18% 8%, color-mix(in srgb, var(--ds-gold) 22%, transparent), transparent 34rem),
    radial-gradient(ellipse at 88% 92%, color-mix(in srgb, var(--ds-teal) 18%, transparent), transparent 32rem),
    linear-gradient(180deg, var(--ds-canvas), var(--ds-canvas-deep));
  color: var(--ds-ink);
}

.atm-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ds-gold) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ds-teal) 12%, transparent) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  mask-image: radial-gradient(ellipse at 50% 28%, #000 16%, transparent 78%);
}

.atm-glow {
  position: absolute;
  width: min(42rem, 90vw);
  height: min(42rem, 90vw);
  border-radius: 50%;
  filter: blur(8px);
}

.atm-glow--gold {
  top: -14rem;
  inset-inline-start: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ds-gold) 48%, transparent), transparent 70%);
}

.atm-glow--teal {
  bottom: -16rem;
  inset-inline-end: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ds-teal) 40%, transparent), transparent 72%);
}

.atm-watermark {
  position: absolute;
  inset-inline-start: 50%;
  top: 18%;
  color: color-mix(in srgb, var(--ds-gold) 12%, transparent);
  font-size: clamp(7rem, 18vw, 16rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .8;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.atm-rail {
  position: absolute;
  display: flex;
  gap: 2.4rem;
  width: 200%;
  color: color-mix(in srgb, var(--ds-gold) 55%, var(--ds-muted));
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .42em;
}

.atm-rail--top { top: 1.1rem; }
.atm-rail--bottom { bottom: 1.1rem; }

.atm-stage { position: relative; z-index: 1; flex: 1 0 auto; width: 100%; max-width: 100%; min-width: 0; }

.atm-panel,
.atm-frame {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ds-gold) 38%, var(--ds-border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-surface) 88%, transparent), color-mix(in srgb, var(--ds-surface) 72%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 28px 70px color-mix(in srgb, var(--ds-gold) 14%, transparent);
}

html[data-market-theme="dark"] .atm-panel,
html[data-market-theme="dark"] .atm-frame {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 28px 70px rgb(0 0 0 / .28);
}

.atm-corner {
  position: absolute;
  z-index: 2;
  width: 1.15rem;
  height: 1.15rem;
  pointer-events: none;
}

.atm-corner--ne, .atm-corner--nw { top: .4rem; border-top: 2px solid var(--ds-gold); }
.atm-corner--se, .atm-corner--sw { bottom: .4rem; border-bottom: 2px solid var(--ds-teal); }
.atm-corner--ne, .atm-corner--se { inset-inline-end: .4rem; border-inline-end: 2px solid var(--ds-gold); }
.atm-corner--nw, .atm-corner--sw { inset-inline-start: .4rem; border-inline-start: 2px solid var(--ds-teal); }

.atm-kicker {
  color: var(--ds-gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.atm-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  padding: .75rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ds-gold) 86%, #fff), var(--ds-gold));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--ds-gold) 14%, transparent),
    0 18px 36px color-mix(in srgb, var(--ds-gold) 32%, transparent);
  color: #14110c;
  font-size: .9rem;
  font-weight: 900;
  text-decoration: none;
}

.atm-enter:hover { transform: translateY(-2px); }

.atm-num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .atm-glow--gold { animation: atm-drift 16s ease-in-out infinite alternate; }
  .atm-glow--teal { animation: atm-drift 21s ease-in-out infinite alternate-reverse; }
  .atm-rail--top { animation: atm-ticker 28s linear infinite; }
  .atm-rail--bottom { animation: atm-ticker 34s linear infinite reverse; }
}

@keyframes atm-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 22px, 0); }
}

@keyframes atm-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .atm-glow, .atm-rail, .atm-enter { animation: none; }
}