/* Shared notification-style modal frame. The website build copies this file to dist/. */
@property --gp-modal-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --gp-modal-edge: #d4b8f4;
  --gp-modal-comet: #9b3cf0;
  --gp-modal-comet-b: #5a6cff;
  --gp-modal-ring-from: #a56dff26;
  --gp-modal-ring-to: #a56dff50;
  --gp-modal-inner-from: transparent;
  --gp-modal-inner-to: transparent;
  --gp-modal-glow-from: #a56dff14;
  --gp-modal-glow-to: #a56dff33;
  --gp-modal-shadow: #26133e55;
}

:root[data-theme='dark'],
html.dark,
.gp-modal-panel-dark,
dialog:is(.published-game-player, .level-up-dialog) {
  --gp-modal-edge: #7650b4;
  --gp-modal-comet: #f3e2ff;
  --gp-modal-comet-b: #fff;
  --gp-modal-ring-from: #a56dff40;
  --gp-modal-ring-to: #b67dff70;
  --gp-modal-inner-from: #9f59ff14;
  --gp-modal-inner-to: #9f59ff26;
  --gp-modal-glow-from: #963eff26;
  --gp-modal-glow-to: #a84cff4a;
  --gp-modal-shadow: #03010dcc;
}

/* Target the card, leaving full-screen backdrops and mobile navigation alone.
   Notifications retain their original frame and entrance choreography. */
:is(.gp-modal-panel, .hub-dialog-panel, dialog:not(.hub-dialog, .notifications-menu)) {
  border: 1.5px solid transparent;
  background:
    radial-gradient(ellipse at 76% 0%, #7438c128, transparent 46%) padding-box,
    linear-gradient(
        var(--gp-modal-surface, var(--surface, rgb(var(--gp-surface, 25 25 31)))),
        var(--gp-modal-surface, var(--surface, rgb(var(--gp-surface, 25 25 31))))
      )
      padding-box,
    conic-gradient(
        from var(--gp-modal-angle, 0deg),
        var(--gp-modal-edge) 0 20deg,
        #b57cff 50deg,
        var(--gp-modal-comet) 76deg,
        #ff9fe0 88deg,
        var(--gp-modal-edge) 112deg 200deg,
        #8fa6ff 232deg,
        var(--gp-modal-comet-b) 258deg,
        var(--gp-modal-edge) 284deg
      )
      border-box;
  box-shadow:
    0 0 0 1px var(--gp-modal-ring-from),
    inset 0 0 24px var(--gp-modal-inner-from),
    0 0 22px var(--gp-modal-glow-from),
    0 30px 100px var(--gp-modal-shadow);
}

.gp-modal-panel.bg-surface-raised {
  --gp-modal-surface: rgb(var(--gp-surface-3));
}

.gp-modal-panel-dark {
  --gp-modal-surface: #19191f;
}

dialog:not(.hub-dialog, .notifications-menu) {
  --gp-modal-entrance: gp-modal-pop 0.6s var(--ease-back, cubic-bezier(0.2, 1.25, 0.35, 1)) both;
}

dialog.published-game-player {
  --gp-modal-surface: #000;
  --gp-modal-entrance: none;
}

dialog.level-up-dialog {
  --gp-modal-surface: #191125;
  --gp-modal-entrance: level-up-reveal var(--level-up-duration) linear both;
}

.hub-dialog-panel {
  --gp-modal-entrance: hub-dialog-in 400ms var(--hub-ease) backwards;
}

.gp-modal-panel.studio-drawer {
  --gp-modal-entrance: studio-drawer-in 220ms ease-out;
}

:is(.gp-modal-panel, .hub-dialog-panel, dialog[open]:not(.hub-dialog, .notifications-menu)) {
  animation:
    var(--gp-modal-entrance, gp-modal-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both),
    gp-modal-border 7s linear infinite,
    gp-modal-glow 3.6s ease-in-out infinite alternate;
}

@keyframes gp-modal-border {
  to {
    --gp-modal-angle: 360deg;
  }
}

@keyframes gp-modal-glow {
  from {
    box-shadow:
      0 0 0 1px var(--gp-modal-ring-from),
      inset 0 0 24px var(--gp-modal-inner-from),
      0 0 22px var(--gp-modal-glow-from),
      0 30px 100px var(--gp-modal-shadow);
  }
  to {
    box-shadow:
      0 0 0 1px var(--gp-modal-ring-to),
      inset 0 0 34px var(--gp-modal-inner-to),
      0 0 46px var(--gp-modal-glow-to),
      0 30px 100px var(--gp-modal-shadow);
  }
}

@keyframes gp-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@keyframes gp-modal-pop {
  from {
    opacity: 0;
    transform: scale(0.55) translateY(24px);
    filter: blur(14px);
  }
  55% {
    filter: blur(0);
  }
}