/**
 * RC7 — unified motion language (CSS tokens + micro-interaction chrome).
 * Companion-quality depth ported to slot chrome without theme swap.
 */
:root {
  --motion-fast: 80ms;
  --motion-button: 120ms;
  --motion-hover: 150ms;
  --motion-card: 180ms;
  --motion-panel: 250ms;
  --motion-major: 350ms;
  --motion-epic-min: 600ms;
  --motion-epic-max: 900ms;
  --motion-ease-ui: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-ease-enter: cubic-bezier(0.34, 1.35, 0.64, 1);
  --motion-ease-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --motion-depth-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --motion-glow-soft: 0 0 18px rgba(168, 85, 247, 0.35);
}

/* Modal depth — backdrop blur + vignette (companion panel quality) */
.slot-modal-backdrop,
.bet-picker-backdrop {
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  transition: opacity var(--motion-panel) var(--motion-ease-ui);
}

.friends-modal-entering .slot-modal-backdrop,
.friends-modal-closing .slot-modal-backdrop {
  will-change: opacity;
}

.slot-modal-card,
.bet-picker-panel {
  box-shadow: var(--motion-depth-shadow), var(--motion-glow-soft);
  transform-origin: center center;
}

.friends-modal-closing {
  pointer-events: none;
}

/* RC Final P0-1 — slot modals above companion gacha when active */
body.friends-slot-modal-active .buy-bonus-modal:not([hidden]),
body.friends-slot-modal-active .buy-bonus-confirm-modal:not([hidden]),
body.friends-slot-modal-active .slot-info-modal:not([hidden]),
body.friends-slot-modal-active .slot-modal:not([hidden]),
body.friends-slot-modal-active .auth-portal-overlay:not([hidden]),
body.friends-slot-modal-active .bet-picker-popup:not([hidden]),
body.friends-slot-modal-active .player-history-panel:not([hidden]) {
  z-index: 14000;
}

/* History sheet */
.player-history-panel.friends-modal-entering,
.player-history-panel.friends-modal-closing {
  will-change: transform, opacity;
}

/* HUD micro-interactions */
.slot-micro-tap {
  transition:
    transform var(--motion-button) var(--motion-ease-ui),
    box-shadow var(--motion-hover) var(--motion-ease-ui),
    filter var(--motion-hover) var(--motion-ease-ui);
  transform-origin: center center;
}

.slot-micro-tap:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 14px rgba(168, 85, 247, 0.25);
  filter: brightness(1.08);
}

.slot-micro-tap:active:not(:disabled) {
  transform: translateY(1px) scale(0.96);
  transition-duration: var(--motion-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95);
}

.slot-hud-pill.slot-micro-tap {
  animation: slot-micro-breathe 4.5s ease-in-out infinite;
}

@keyframes slot-micro-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(168, 85, 247, 0);
  }
  50% {
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.18);
  }
}

.slot-reduced-motion .slot-micro-tap,
@media (prefers-reduced-motion: reduce) {
  .slot-micro-tap {
    animation: none !important;
    transition: none !important;
  }
  .slot-micro-tap:hover:not(:disabled),
  .slot-micro-tap:active:not(:disabled) {
    transform: none;
    filter: none;
  }
}

/* Loading stagger reveal */
.game-stage-v2--playable [data-game-stage-top],
.game-stage-v2--playable [data-game-stage-reels],
.game-stage-v2--playable [data-slot-hud],
.game-stage-v2--playable [data-buy-bonus-panel] {
  will-change: opacity, transform;
}

/* Bonus intro personality — presentation-only FX layers */
.bonus-intro-overlay--hansolo .bonus-intro-backdrop {
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(255, 0, 128, 0.35), transparent 65%),
    radial-gradient(circle at 50% 40%, rgba(8, 12, 24, 0.35), rgba(4, 6, 14, 0.92));
}

.bonus-intro-overlay--hansolo .bonus-intro-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(148, 163, 184, 0.22) 100%);
  animation: bonus-hansolo-smoke 6s ease-in-out infinite alternate;
  pointer-events: none;
}

.bonus-intro-overlay--hansolo .bonus-intro-panel {
  animation: bonus-hansolo-push 0.55s var(--motion-ease-enter) both;
  box-shadow: 0 0 48px rgba(255, 0, 128, 0.35), var(--motion-depth-shadow);
}

@keyframes bonus-hansolo-smoke {
  from { opacity: 0.35; transform: translateY(0); }
  to { opacity: 0.65; transform: translateY(-8px); }
}

@keyframes bonus-hansolo-push {
  from { transform: scale(0.88) translateY(24px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.bonus-intro-overlay--kissik .bonus-intro-particles {
  background-image:
    radial-gradient(circle, rgba(244, 114, 182, 0.65) 2px, transparent 2px),
    radial-gradient(circle, rgba(251, 207, 232, 0.45) 1px, transparent 1px);
  background-size: 90px 90px, 140px 140px;
  opacity: 0.55;
  animation: bonus-kissik-float 10s linear infinite;
}

.bonus-intro-overlay--kissik .bonus-intro-glow {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.55), transparent 70%);
  filter: blur(36px);
}

.bonus-intro-overlay--kissik .bonus-intro-backdrop {
  background: radial-gradient(circle at 50% 35%, rgba(244, 114, 182, 0.18), rgba(4, 6, 14, 0.88));
}

@keyframes bonus-kissik-float {
  from { background-position: 0 0, 40px 40px; }
  to { background-position: 90px 90px, 130px 130px; }
}

.bonus-intro-overlay--viking .bonus-intro-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%);
  animation: bonus-viking-lightning 4.2s ease-in-out infinite;
  pointer-events: none;
}

.bonus-intro-overlay--viking .bonus-intro-panel {
  animation: bonus-viking-shake 0.45s ease-out;
}

@keyframes bonus-viking-lightning {
  0%, 92%, 100% { opacity: 0; }
  93%, 95% { opacity: 1; }
  94% { opacity: 0.3; }
}

@keyframes bonus-viking-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.bonus-intro-overlay--ujn .bonus-intro-backdrop {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(46, 204, 113, 0.04) 0px,
      rgba(46, 204, 113, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(circle at 50% 40%, rgba(8, 12, 24, 0.35), rgba(4, 6, 14, 0.92));
}

.bonus-intro-overlay--ujn .bonus-intro-panel {
  animation: bonus-ujn-glitch 3s steps(2) infinite;
  border-color: rgba(46, 204, 113, 0.55);
}

.bonus-intro-overlay--ujn .bonus-intro-fx::after {
  content: '01010101';
  position: absolute;
  inset: 0;
  font-family: monospace;
  font-size: 10px;
  color: rgba(46, 204, 113, 0.12);
  writing-mode: vertical-rl;
  letter-spacing: 4px;
  overflow: hidden;
  pointer-events: none;
  animation: bonus-ujn-rain 8s linear infinite;
}

@keyframes bonus-ujn-glitch {
  0%, 90%, 100% { transform: translate(0); filter: none; }
  91% { transform: translate(-2px, 1px); filter: hue-rotate(20deg); }
  93% { transform: translate(2px, -1px); filter: contrast(1.2); }
}

@keyframes bonus-ujn-rain {
  from { transform: translateY(-20%); }
  to { transform: translateY(20%); }
}

/* Hidden event props */
.hidden-event-dog-run {
  position: absolute;
  bottom: 18%;
  left: 0;
  font-size: 2.5rem;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.hidden-event-bone {
  position: absolute;
  left: 50%;
  top: 42%;
  font-size: 2rem;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.hidden-event-crack-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.35) 49%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.25) 50%, transparent 52%);
  mix-blend-mode: screen;
}

.hidden-event-terminal {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 4;
  font-family: monospace;
  font-size: 11px;
  color: #2ecc71;
  text-align: left;
  white-space: pre;
  text-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
  pointer-events: none;
}