@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff3d6e;
}

@property --accent-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffd23f;
}

@property --deep {
  syntax: '<color>';
  inherits: true;
  initial-value: #24060f;
}

@property --glow {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff4f7c;
}

@layer base {
  :root {
    transition: --accent 0.9s ease, --accent-2 0.9s ease, --deep 0.9s ease, --glow 0.9s ease;
  }
}

@layer components {
  .scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
      radial-gradient(50% 50% at 15% 85%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, var(--deep) 80%, #000), #030108);
  }

  .scene__gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .scene[data-gl='on'] {
    background: #030108;
  }

  .scene[data-gl='on'] > :not(.scene__gl),
  .scene:not([data-gl='on']) > .scene__gl {
    display: none;
  }

  .scene__photo {
    position: absolute;
    inset: -4%;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.1s var(--ease-soft), transform 1.6s var(--ease-out);
    will-change: opacity, transform;
  }

  .scene__photo.is-visible {
    opacity: 1;
    transform: scale(1);
    animation: scene-drift 48s ease-in-out infinite alternate;
  }

  .scene__grade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(5, 3, 12, 0.62) 0%, rgba(5, 3, 12, 0.18) 26%, rgba(5, 3, 12, 0.22) 62%, rgba(5, 3, 12, 0.86) 100%),
      linear-gradient(90deg, rgba(5, 3, 12, 0.55) 0%, rgba(5, 3, 12, 0) 22%, rgba(5, 3, 12, 0) 78%, rgba(5, 3, 12, 0.55) 100%),
      radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 75%);
  }

  .scene__rays {
    position: absolute;
    left: 50%;
    top: 46%;
    width: var(--ray);
    height: var(--ray);
    margin: calc(var(--ray) / -2) 0 0 calc(var(--ray) / -2);
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent-2) 55%, transparent) 0deg 5deg, transparent 5deg 18deg);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 22%, transparent 48%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 22%, transparent 48%);
    opacity: 0.08;
    animation: scene-rays 90s linear infinite;
  }

  .scene__motes {
    position: absolute;
    inset: -10% 0 0;
    background-image:
      radial-gradient(circle, rgba(255, 240, 200, 0.9) 0 1.5px, transparent 2.5px),
      radial-gradient(circle, color-mix(in srgb, var(--accent-2) 90%, #fff) 0 1.2px, transparent 2.2px),
      radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px);
    background-size: 340px 420px, 520px 610px, 230px 290px;
    background-position: 0 0, 120px 60px, 60px 150px;
    opacity: 0.35;
    animation: scene-motes 38s linear infinite;
  }

  .scene__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
  }

  .scene[data-flash='win'] .scene__rays {
    opacity: 0.2;
    transition: opacity 0.4s ease;
  }
}

@layer fx {
  @keyframes scene-drift {
    from {
      transform: scale(1) translate3d(0, 0, 0);
    }

    to {
      transform: scale(1.07) translate3d(-1.2%, -0.8%, 0);
    }
  }

  @keyframes scene-rays {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes scene-motes {
    from {
      background-position: 0 0, 120px 60px, 60px 150px;
    }

    to {
      background-position: 40px -420px, 60px -1160px, 90px -430px;
    }
  }

  :root.sx-open .scene__rays,
  :root.sx-open .scene__motes,
  :root.wg-open .scene__rays,
  :root.wg-open .scene__motes,
  :root.duel-open .scene__rays,
  :root.duel-open .scene__motes,
  :root:has(.overlay-root > .copen, .overlay-root > .popen, .overlay-root > .jp, .overlay-root > .bigwin, .overlay-root > .levelup, .panel[data-full='true']) .scene__rays,
  :root:has(.overlay-root > .copen, .overlay-root > .popen, .overlay-root > .jp, .overlay-root > .bigwin, .overlay-root > .levelup, .panel[data-full='true']) .scene__motes {
    display: none;
  }
}

@layer components {
  .flyer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 5;
    pointer-events: none;
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .flyer[data-layer='front'] {
    z-index: 85;
  }

  .flyer.is-on {
    visibility: visible;
  }

  .flyer.is-fading {
    opacity: 0;
  }
}

@layer state {
  :root.is-covered .flyer {
    visibility: hidden;
  }

  :root.is-covered.crx-open .flyer.is-on[data-layer='front'] {
    visibility: visible;
  }

  :root[data-flyer='front'] .announcer__bubble {
    visibility: hidden;
  }
}