@media (min-width: 768px) {
  .card-database-card {
    --card-glow-x: 50%;
    --card-glow-y: 50%;
    --card-tilt-rx: 0deg;
    --card-tilt-ry: 0deg;
    isolation: isolate;
    transform-style: preserve-3d;
  }

  .card-database-card__halo {
    background: radial-gradient(circle at var(--card-glow-x) var(--card-glow-y), var(--card-aura) 0%, transparent 65%);
    filter: blur(40px);
    opacity: 0.4;
    transform: scale(0.98);
    transition:
      opacity 300ms ease,
      transform 180ms ease;
    z-index: -1;
  }

  .card-database-card__frame {
    z-index: 1;
    transform: perspective(1100px) rotateX(0deg) rotateY(0deg) scale(1);
    transform-style: preserve-3d;
    transition:
      box-shadow 180ms ease,
      transform 180ms ease;
    will-change: transform;
  }

  .card-database-card__edge {
    box-shadow:
      inset 0 0 0 1px rgba(244, 236, 216, 0.18),
      inset 0 0 0 2px rgba(3, 4, 5, 0.42);
  }

  .card-database-card__sheen {
    background: radial-gradient(
      circle at var(--card-glow-x) var(--card-glow-y),
      rgba(255, 255, 255, 0.12),
      transparent 45%
    );
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .card-database-card:focus-visible .card-database-card__halo {
    opacity: 1;
    transform: scale(1.04);
  }

  .card-database-card:focus-visible .card-database-card__frame {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-aura) 40%, transparent),
      0 12px 32px -8px color-mix(in srgb, var(--card-aura) 62%, transparent),
      0 24px 48px -12px rgba(0, 0, 0, 0.7);
    transform: perspective(1100px) rotateX(var(--card-tilt-rx)) rotateY(var(--card-tilt-ry)) scale(1.045);
  }

  .card-database-card:focus-visible .card-database-card__sheen {
    opacity: 1;
  }

  .card-database-atmosphere {
    isolation: isolate;
    background:
      radial-gradient(
        ellipse at 50% 0%,
        color-mix(in srgb, var(--color-midnight-mist) 18%, transparent),
        transparent 42rem
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-midnight-deep) 92%, black 8%) 0%,
        var(--color-midnight-deep) 42%,
        color-mix(in srgb, var(--color-midnight) 36%, var(--color-midnight-deep)) 100%
      );
  }

  .card-database-atmosphere::before,
  .card-database-atmosphere__stars,
  .card-database-atmosphere__constellations,
  .card-database-atmosphere__fog,
  .card-database-atmosphere__meteors,
  .card-database-atmosphere__particles {
    content: "";
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .card-database-atmosphere::before {
    background-image:
      radial-gradient(
        ellipse 24rem 42rem at -8% 18%,
        color-mix(in srgb, var(--color-aura-water) 24%, transparent),
        transparent 72%
      ),
      radial-gradient(
        ellipse 18rem 32rem at 0% 78%,
        color-mix(in srgb, var(--color-aura-air) 12%, transparent),
        transparent 74%
      ),
      radial-gradient(
        ellipse 26rem 44rem at 108% 24%,
        color-mix(in srgb, var(--color-cosmic-ooze) 18%, transparent),
        transparent 72%
      ),
      radial-gradient(
        ellipse 18rem 34rem at 101% 82%,
        color-mix(in srgb, var(--color-mothman-bright) 10%, transparent),
        transparent 76%
      );
    background-repeat: no-repeat;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(
      90deg,
      black 0%,
      black 16%,
      rgba(0, 0, 0, 0.24) 37%,
      rgba(0, 0, 0, 0.14) 63%,
      black 84%,
      black 100%
    );
    mask-image: linear-gradient(
      90deg,
      black 0%,
      black 16%,
      rgba(0, 0, 0, 0.24) 37%,
      rgba(0, 0, 0, 0.14) 63%,
      black 84%,
      black 100%
    );
  }

  .card-database-atmosphere__stars {
    background-image:
      radial-gradient(circle at 5% 14%, rgba(244, 236, 216, 0.92) 0 1px, transparent 1.8px),
      radial-gradient(circle at 12% 39%, rgba(200, 210, 224, 0.62) 0 1px, transparent 2px),
      radial-gradient(circle at 16% 8%, rgba(244, 236, 216, 0.66) 0 1px, transparent 2px),
      radial-gradient(circle at 20% 23%, rgba(212, 255, 122, 0.48) 0 1px, transparent 2px),
      radial-gradient(circle at 31% 11%, rgba(244, 236, 216, 0.58) 0 1px, transparent 2px),
      radial-gradient(circle at 43% 19%, rgba(200, 210, 224, 0.5) 0 1px, transparent 2px),
      radial-gradient(circle at 58% 9%, rgba(244, 236, 216, 0.7) 0 1px, transparent 2px),
      radial-gradient(circle at 62% 16%, rgba(244, 236, 216, 0.86) 0 1.15px, transparent 2.25px),
      radial-gradient(circle at 74% 25%, rgba(200, 210, 224, 0.68) 0 1.1px, transparent 2.2px),
      radial-gradient(circle at 79% 34%, rgba(244, 236, 216, 0.86) 0 1px, transparent 1.8px),
      radial-gradient(circle at 84% 21%, rgba(244, 236, 216, 0.82) 0 1.15px, transparent 2.25px),
      radial-gradient(circle at 88% 12%, rgba(212, 255, 122, 0.54) 0 1px, transparent 2px),
      radial-gradient(circle at 93% 6%, rgba(200, 210, 224, 0.58) 0 1px, transparent 2px),
      radial-gradient(circle at 8% 78%, rgba(55, 127, 192, 0.62) 0 1px, transparent 2px),
      radial-gradient(circle at 91% 77%, rgba(244, 236, 216, 0.56) 0 1px, transparent 2px);
    background-repeat: no-repeat;
    filter: blur(0.2px) drop-shadow(0 0 5px rgba(244, 236, 216, 0.34));
    mix-blend-mode: screen;
    opacity: 0.72;
    animation: card-database-star-twinkle 5.2s ease-in-out infinite;
  }

  .card-database-atmosphere__stars::before,
  .card-database-atmosphere__stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
  }

  .card-database-atmosphere__stars::before {
    background-image:
      radial-gradient(circle at 10% 19%, rgba(244, 236, 216, 0.86) 0 1px, transparent 2px),
      radial-gradient(circle at 16% 58%, rgba(55, 127, 192, 0.62) 0 1px, transparent 2px),
      radial-gradient(circle at 38% 19%, rgba(244, 236, 216, 0.72) 0 1px, transparent 2px),
      radial-gradient(circle at 60% 29%, rgba(200, 210, 224, 0.66) 0 1.1px, transparent 2.2px),
      radial-gradient(circle at 66% 14%, rgba(244, 236, 216, 0.88) 0 1.15px, transparent 2.25px),
      radial-gradient(circle at 71% 25%, rgba(212, 255, 122, 0.62) 0 1px, transparent 2px),
      radial-gradient(circle at 78% 18%, rgba(244, 236, 216, 0.76) 0 1.1px, transparent 2.2px),
      radial-gradient(circle at 83% 61%, rgba(244, 236, 216, 0.86) 0 1.2px, transparent 2.4px),
      radial-gradient(circle at 92% 10%, rgba(55, 127, 192, 0.58) 0 1px, transparent 2px);
    opacity: 0.64;
    animation: card-database-star-twinkle 3.6s ease-in-out infinite;
  }

  .card-database-atmosphere__stars::after {
    background-image:
      radial-gradient(circle at 4% 47%, rgba(212, 255, 122, 0.5) 0 1px, transparent 2px),
      radial-gradient(circle at 24% 16%, rgba(244, 236, 216, 0.8) 0 1px, transparent 2.2px),
      radial-gradient(circle at 46% 35%, rgba(200, 210, 224, 0.46) 0 1px, transparent 2px),
      radial-gradient(circle at 56% 22%, rgba(244, 236, 216, 0.66) 0 1.05px, transparent 2.1px),
      radial-gradient(circle at 69% 31%, rgba(200, 210, 224, 0.72) 0 1.1px, transparent 2.2px),
      radial-gradient(circle at 76% 11%, rgba(244, 236, 216, 0.64) 0 1px, transparent 2px),
      radial-gradient(circle at 86% 25%, rgba(212, 255, 122, 0.58) 0 1.05px, transparent 2.1px),
      radial-gradient(circle at 98% 69%, rgba(244, 236, 216, 0.78) 0 1.2px, transparent 2.4px);
    opacity: 0.58;
    animation: card-database-star-twinkle 6.4s ease-in-out infinite reverse;
  }

  .card-database-atmosphere__constellations {
    opacity: 0.62;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(
      90deg,
      black 0%,
      black 21%,
      rgba(0, 0, 0, 0.12) 40%,
      rgba(0, 0, 0, 0.12) 60%,
      black 79%,
      black 100%
    );
    mask-image: linear-gradient(
      90deg,
      black 0%,
      black 21%,
      rgba(0, 0, 0, 0.12) 40%,
      rgba(0, 0, 0, 0.12) 60%,
      black 79%,
      black 100%
    );
  }

  .card-database-atmosphere__constellation {
    position: absolute;
    color: rgba(244, 236, 216, 0.62);
    filter: drop-shadow(0 0 10px rgba(55, 127, 192, 0.2));
  }

  .card-database-atmosphere__constellation--big-dipper {
    top: 9vh;
    left: 4vw;
    width: clamp(8rem, 16vw, 18rem);
    height: clamp(6rem, 11vw, 12rem);
    transform: rotate(-9deg);
  }

  .card-database-atmosphere__constellation--orion {
    right: 5vw;
    bottom: 16vh;
    width: clamp(7rem, 13vw, 15rem);
    height: clamp(8rem, 15vw, 17rem);
    transform: rotate(7deg);
  }

  .card-database-atmosphere__constellation svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .card-database-atmosphere__constellation path {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2 8;
    opacity: 0.5;
  }

  .card-database-atmosphere__constellation-star {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow:
      0 0 8px rgba(244, 236, 216, 0.74),
      0 0 16px rgba(55, 127, 192, 0.3);
    transform: translate(-50%, -50%);
    animation: card-database-constellation-star-twinkle 4.8s ease-in-out infinite;
  }

  .card-database-atmosphere__constellation-star--dipper-1 { left: 13%; top: 66%; }
  .card-database-atmosphere__constellation-star--dipper-2 { left: 18%; top: 42%; }
  .card-database-atmosphere__constellation-star--dipper-3 { left: 37%; top: 38%; }
  .card-database-atmosphere__constellation-star--dipper-4 { left: 44%; top: 58%; }
  .card-database-atmosphere__constellation-star--dipper-5 { left: 60%; top: 43%; }
  .card-database-atmosphere__constellation-star--dipper-6 { left: 77%; top: 30%; }
  .card-database-atmosphere__constellation-star--dipper-7 { left: 93%; top: 25%; }

  .card-database-atmosphere__constellation-star--orion-1 { left: 30%; top: 15%; }
  .card-database-atmosphere__constellation-star--orion-2 { left: 70%; top: 18%; }
  .card-database-atmosphere__constellation-star--orion-3 { left: 39%; top: 46%; }
  .card-database-atmosphere__constellation-star--orion-4 { left: 50%; top: 49%; }
  .card-database-atmosphere__constellation-star--orion-5 { left: 61%; top: 46%; }
  .card-database-atmosphere__constellation-star--orion-6 { left: 35%; top: 83%; }
  .card-database-atmosphere__constellation-star--orion-7 { left: 72%; top: 82%; }

  .card-database-atmosphere__fog {
    inset: -18vh -12vw;
    background-image:
      radial-gradient(ellipse 42rem 16rem at 10% 26%, rgba(200, 210, 224, 0.16), transparent 68%),
      radial-gradient(ellipse 38rem 14rem at 88% 72%, rgba(182, 255, 74, 0.12), transparent 70%),
      radial-gradient(ellipse 46rem 18rem at 50% 96%, rgba(55, 127, 192, 0.1), transparent 72%);
    filter: blur(18px) saturate(1.08);
    mix-blend-mode: screen;
    opacity: 0.28;
    transform: translate3d(0, 0, 0);
    animation: card-database-fog-drift 28s ease-in-out infinite alternate;
  }

  .card-database-atmosphere__fog::before,
  .card-database-atmosphere__fog::after {
    content: "";
    position: absolute;
    width: 72vw;
    height: 26vh;
    min-height: 14rem;
    border-radius: 45% 55% 48% 52% / 58% 42% 55% 45%;
    filter: blur(20px) saturate(1.08);
    mix-blend-mode: screen;
    opacity: 0.62;
  }

  .card-database-atmosphere__fog::before {
    top: 18%;
    left: -18%;
    background:
      radial-gradient(ellipse at 18% 46%, rgba(200, 210, 224, 0.22), transparent 62%),
      radial-gradient(ellipse at 58% 40%, rgba(55, 127, 192, 0.16), transparent 66%),
      radial-gradient(ellipse at 82% 58%, rgba(244, 236, 216, 0.14), transparent 68%);
    transform: rotate(-6deg) translate3d(0, 0, 0);
    animation: card-database-fog-bank 22s ease-in-out infinite alternate;
  }

  .card-database-atmosphere__fog::after {
    right: -16%;
    bottom: 16%;
    background:
      radial-gradient(ellipse at 20% 55%, rgba(182, 255, 74, 0.13), transparent 64%),
      radial-gradient(ellipse at 48% 42%, rgba(200, 210, 224, 0.18), transparent 66%),
      radial-gradient(ellipse at 84% 58%, rgba(244, 236, 216, 0.12), transparent 70%);
    transform: rotate(7deg) translate3d(0, 0, 0);
    animation: card-database-fog-bank 18s ease-in-out infinite alternate-reverse;
  }

  .card-database-atmosphere__meteors {
    top: 2vh;
    left: -38vw;
    right: auto;
    bottom: auto;
    width: clamp(18rem, 38vw, 42rem);
    height: 3px;
    background-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(55, 127, 192, 0.06) 7%,
        rgba(55, 127, 192, 0.22) 32%,
        rgba(244, 236, 216, 0.7) 62%,
        rgba(255, 255, 255, 1) 84%,
        transparent 100%
      );
    background-repeat: no-repeat;
    border-radius: 999px;
    box-shadow:
      0 0 9px rgba(244, 236, 216, 0.44),
      -5rem 0 24px rgba(55, 127, 192, 0.18),
      -11rem 0 42px rgba(182, 255, 74, 0.08);
    filter: blur(0.2px) drop-shadow(0 0 12px rgba(244, 236, 216, 0.5));
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate3d(-50vw, -18vh, 0) rotate(14deg);
    transform-origin: right center;
    animation: card-database-meteor-pass 18s linear infinite;
    animation-delay: -9.9s;
  }

  .card-database-atmosphere__particles {
    background-image:
      radial-gradient(circle at 6% 18%, rgba(244, 236, 216, 0.78) 0 1px, transparent 1.8px),
      radial-gradient(circle at 11% 64%, rgba(200, 210, 224, 0.58) 0 1px, transparent 2px),
      radial-gradient(circle at 18% 39%, rgba(212, 255, 122, 0.5) 0 1px, transparent 2px),
      radial-gradient(circle at 83% 28%, rgba(244, 236, 216, 0.72) 0 1px, transparent 1.8px),
      radial-gradient(circle at 91% 17%, rgba(55, 127, 192, 0.62) 0 1px, transparent 2px),
      radial-gradient(circle at 96% 67%, rgba(212, 255, 122, 0.58) 0 1px, transparent 2px),
      radial-gradient(circle at 88% 84%, rgba(232, 115, 8, 0.48) 0 1px, transparent 2px),
      radial-gradient(circle at 4% 83%, rgba(244, 236, 216, 0.42) 0 1px, transparent 2px);
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0.48;
    animation: card-database-particle-twinkle 3.8s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(
      90deg,
      black 0%,
      black 20%,
      rgba(0, 0, 0, 0.22) 40%,
      rgba(0, 0, 0, 0.16) 60%,
      black 80%,
      black 100%
    );
    mask-image: linear-gradient(
      90deg,
      black 0%,
      black 20%,
      rgba(0, 0, 0, 0.22) 40%,
      rgba(0, 0, 0, 0.16) 60%,
      black 80%,
      black 100%
    );
  }

  @keyframes card-database-star-twinkle {
    0%,
    100% {
      opacity: 0.42;
      filter: brightness(0.82) drop-shadow(0 0 1px rgba(244, 236, 216, 0.1));
    }
    37% {
      opacity: 1;
      filter:
        brightness(2.25)
        drop-shadow(0 0 10px rgba(244, 236, 216, 0.68))
        drop-shadow(0 0 16px rgba(55, 127, 192, 0.22));
    }
    63% {
      opacity: 0.68;
      filter: brightness(1.26) drop-shadow(0 0 6px rgba(212, 255, 122, 0.36));
    }
  }

  @keyframes card-database-constellation-star-twinkle {
    0%,
    100% {
      opacity: 0.48;
      filter: brightness(0.88);
      transform: translate(-50%, -50%) scale(0.82);
    }
    38% {
      opacity: 1;
      filter: brightness(1.85);
      transform: translate(-50%, -50%) scale(1.28);
    }
    66% {
      opacity: 0.68;
      filter: brightness(1.08);
      transform: translate(-50%, -50%) scale(0.96);
    }
  }

  @keyframes card-database-meteor-pass {
    0%,
    52% {
      opacity: 0;
      transform: translate3d(-50vw, -18vh, 0) rotate(14deg);
    }
    55% {
      opacity: 0.96;
    }
    68% {
      opacity: 0.86;
    }
    80%,
    100% {
      opacity: 0;
      transform: translate3d(145vw, 88vh, 0) rotate(14deg);
    }
  }

  @keyframes card-database-fog-drift {
    0% {
      transform: translate3d(-5%, 0, 0);
      background-position: 0 0, 8rem 2rem, -4rem 4rem;
    }
    50% {
      transform: translate3d(1.5%, -2.5%, 0) scale(1.02);
      background-position: 5rem 1rem, 3rem 4rem, 1rem 1rem;
    }
    100% {
      transform: translate3d(5%, -1%, 0) scale(0.98);
      background-position: 9rem 0, -1rem 3rem, 5rem 5rem;
    }
  }

  @keyframes card-database-fog-bank {
    0% {
      opacity: 0.42;
      filter: blur(24px) saturate(1.05);
      border-radius: 44% 56% 48% 52% / 62% 38% 58% 42%;
    }
    50% {
      opacity: 0.72;
      filter: blur(18px) saturate(1.14);
      border-radius: 55% 45% 58% 42% / 45% 55% 43% 57%;
    }
    100% {
      opacity: 0.5;
      filter: blur(28px) saturate(1.08);
      border-radius: 48% 52% 42% 58% / 54% 46% 60% 40%;
    }
  }

  @keyframes card-database-particle-twinkle {
    0%,
    100% {
      opacity: 0.34;
      filter: brightness(0.8) drop-shadow(0 0 0 rgba(244, 236, 216, 0));
    }
    38% {
      opacity: 0.95;
      filter: brightness(1.55) drop-shadow(0 0 5px rgba(244, 236, 216, 0.42));
    }
    62% {
      opacity: 0.52;
      filter: brightness(1.05) drop-shadow(0 0 3px rgba(212, 255, 122, 0.24));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card-database-card__halo,
    .card-database-card__frame,
    .card-database-card__sheen,
    .card-database-atmosphere__stars,
    .card-database-atmosphere__stars::before,
    .card-database-atmosphere__stars::after,
    .card-database-atmosphere__constellations,
    .card-database-atmosphere__fog,
    .card-database-atmosphere__fog::before,
    .card-database-atmosphere__fog::after,
    .card-database-atmosphere__meteors,
    .card-database-atmosphere__particles,
    .card-database-atmosphere__constellation-star {
      animation: none;
      transition: none;
      transform: none;
    }
  }
}