.selected-card.lighting {
  animation: cardLift 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  filter: drop-shadow(0 0 18px rgba(255, 225, 132, 0.75));
}
.selected-card.lighting #selectedFront {
  animation: paperTranslucence 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(17, 28, 43, 0.5);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.selected-card.lighting .card-front::after,
.selected-card.reveal .card-front::after {
  opacity: 1;
}
.hidden-layer,
.tyndall-rays,
.light-pool {
  z-index: 3;
}
.hidden-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: saturate(1.6) contrast(1.06);
}
.hidden-shadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: invert(1) blur(0.45px);
  mix-blend-mode: multiply;
  transform: translate(0.7px, 1px);
}
.hidden-color {
  position: absolute;
  inset: 0;
  background: #ff7a00;
}
.hidden-color img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.hidden-aura {
  opacity: 0.82;
  background: #ffd24a;
  animation: treasureAura 1.8s ease-in-out infinite alternate;
}
.hidden-glow {
  opacity: 1;
  filter: blur(10px) brightness(2.05);
}
.hidden-core {
  background: #ffc94a;
  opacity: 0.94;
  filter: blur(1.2px) brightness(1.2);
}
.tyndall-rays {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: repeating-conic-gradient(
    from -18deg at var(--mx) var(--my),
    transparent 0deg 13deg,
    rgba(255, 205, 86, 0.16) 14deg 18deg,
    transparent 19deg 31deg
  );
  -webkit-mask-image: radial-gradient(
    circle 210px at var(--mx) var(--my),
    transparent 0 18%,
    rgba(0, 0, 0, 0.72) 35%,
    rgba(0, 0, 0, 0.28) 66%,
    transparent 88%
  );
  mask-image: radial-gradient(
    circle 210px at var(--mx) var(--my),
    transparent 0 18%,
    rgba(0, 0, 0, 0.72) 35%,
    rgba(0, 0, 0, 0.28) 66%,
    transparent 88%
  );
  filter: blur(2.2px);
  transition: opacity 0.7s ease;
}
.light-pool {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle 95px at var(--mx) var(--my),
    rgba(255, 240, 174, 0.62),
    rgba(255, 225, 110, 0.13) 55%,
    transparent 72%
  );
}
.selected-card.reveal .hidden-layer {
  opacity: 1;
  -webkit-mask-image: radial-gradient(
    circle 95px at var(--mx) var(--my),
    #000 0 56%,
    rgba(0, 0, 0, 0.75) 66%,
    transparent 80%
  );
  mask-image: radial-gradient(
    circle 95px at var(--mx) var(--my),
    #000 0 56%,
    rgba(0, 0, 0, 0.75) 66%,
    transparent 80%
  );
}
.selected-card.landscape.reveal .hidden-layer {
  -webkit-mask-image: radial-gradient(
    ellipse 230px 120px at var(--mx) var(--my),
    #000 0 52%,
    rgba(0, 0, 0, 0.78) 65%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 230px 120px at var(--mx) var(--my),
    #000 0 52%,
    rgba(0, 0, 0, 0.78) 65%,
    transparent 84%
  );
}
.selected-card.card-corgi.reveal .hidden-shadow {
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(
    ellipse 230px 120px at var(--mx) var(--my),
    #000 0 52%,
    rgba(0, 0, 0, 0.78) 65%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 230px 120px at var(--mx) var(--my),
    #000 0 52%,
    rgba(0, 0, 0, 0.78) 65%,
    transparent 84%
  );
}
.selected-card.reveal .tyndall-rays {
  opacity: 0.58;
  animation: rayBreathe 2.4s ease-in-out infinite alternate;
}
.selected-card.reveal .light-pool {
  opacity: 0;
}
.light-source {
  position: absolute;
  z-index: -1;
  right: 2%;
  top: 47%;
  opacity: 0;
  transform: translate(220px, 70px) rotate(-25deg);
  transition: none;
}
.light-source .bulb {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid #d9a954;
  background: #ffe9a8;
  box-shadow: 0 0 45px 25px rgba(255, 220, 120, 0.55);
}
.light-source .handle {
  display: block;
  width: 32px;
  height: 105px;
  margin: -4px auto 0;
  border-radius: 0 0 18px 18px;
  background: #8e765b;
}
.light-source.enter {
  animation: lampBehind 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes lampBehind {
  0% {
    opacity: 0;
    transform: translate(220px, 70px) rotate(-25deg);
  }
  32% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 1;
    transform: translate(-260px, 30px) rotate(14deg);
  }
}
@keyframes cardLift {
  0% {
    transform: translateY(0) rotateX(0);
  }
  45% {
    transform: translateY(-28px) rotateX(-8deg) rotateZ(-1deg);
  }
  100% {
    transform: translateY(-12px) rotateX(-2deg);
  }
}
@keyframes paperTranslucence {
  0% {
    opacity: 1;
    filter: drop-shadow(0 24px 26px rgba(30, 42, 56, 0.22)) brightness(1);
  }
  48% {
    opacity: 0.94;
    filter: drop-shadow(0 18px 22px rgba(30, 42, 56, 0.14)) brightness(1.045) saturate(0.96);
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 24px 26px rgba(30, 42, 56, 0.22)) brightness(1);
  }
}
@keyframes treasureAura {
  from {
    filter: blur(14px) brightness(1.5);
    opacity: 0.68;
  }
  to {
    filter: blur(22px) brightness(2.25);
    opacity: 0.94;
  }
}
@keyframes rayBreathe {
  from {
    opacity: 0.36;
    filter: blur(2.8px);
  }
  to {
    opacity: 0.62;
    filter: blur(1.8px);
  }
}
@media (max-width: 700px) {
  .light-source {
    right: -20px;
    top: 42%;
    transform: translate(100px, 40px) rotate(-25deg);
    transform-origin: center;
  }
}
@media (max-width: 420px) {
  .light-source .bulb {
    width: 64px;
    height: 64px;
  }
  .light-source .handle {
    height: 78px;
    width: 26px;
  }
}