.case-entry-intro {
  --intro-bg: #111111;
  --intro-accent: #ffffff;
  --intro-secondary: rgb(255 255 255 / 0.22);
  --intro-line: rgb(255 255 255 / 0.16);
  --intro-surface: rgb(255 255 255 / 0.08);
  animation: caseIntroExit 0.52s cubic-bezier(0.76, 0, 0.24, 1) 1.82s forwards;
  background:
    radial-gradient(circle at 72% 18%, var(--intro-secondary), transparent 31%),
    linear-gradient(135deg, var(--intro-bg), #050505);
  display: grid;
  inset: 0;
  overflow: hidden;
  place-items: center;
  pointer-events: none;
  position: fixed;
  z-index: 2147483000;
}

.case-entry-intro::before {
  animation: caseIntroGrid 1.55s ease-out both;
  background-image:
    linear-gradient(90deg, var(--intro-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--intro-line) 1px, transparent 1px);
  background-size: 46px 46px;
  content: "";
  inset: -10%;
  opacity: 0.76;
  position: absolute;
  transform-origin: center;
}

.case-entry-intro::after {
  animation: caseIntroSweep 1.28s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
  background: linear-gradient(90deg, transparent, var(--intro-accent), transparent);
  bottom: -24%;
  content: "";
  left: -42%;
  opacity: 0.28;
  position: absolute;
  top: -24%;
  transform: skewX(-18deg);
  width: 34%;
}

.case-entry-motif {
  aspect-ratio: 1;
  position: relative;
  width: min(34vw, 250px);
  z-index: 1;
}

.case-entry-motif span {
  display: block;
  position: absolute;
}

.case-entry-intro-sweet {
  --intro-bg: #fff2f6;
  --intro-accent: #ef8ea9;
  --intro-secondary: rgb(239 142 169 / 0.32);
  --intro-line: rgb(130 64 82 / 0.14);
  --intro-surface: rgb(255 255 255 / 0.72);
}

.case-entry-intro-sweet .case-entry-motif {
  animation: sweetMotifRise 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-sweet .case-entry-motif span {
  background: var(--intro-surface);
  border: 2px solid var(--intro-accent);
  border-radius: 999px 999px 48% 48%;
  box-shadow: 0 28px 70px -42px rgb(130 64 82 / 0.48);
  height: 48%;
  left: 18%;
  top: 26%;
  transform-origin: 50% 80%;
  width: 64%;
}

.case-entry-intro-sweet .case-entry-motif span:nth-child(2) {
  animation: sweetIcingLeft 1.15s ease-out 0.08s both;
  left: 7%;
  top: 38%;
  width: 44%;
}

.case-entry-intro-sweet .case-entry-motif span:nth-child(3) {
  animation: sweetIcingRight 1.15s ease-out 0.13s both;
  left: 49%;
  top: 38%;
  width: 44%;
}

.case-entry-intro-bake {
  --intro-bg: #fff1df;
  --intro-accent: #ff8b57;
  --intro-secondary: rgb(255 139 87 / 0.32);
  --intro-line: rgb(125 69 42 / 0.14);
  --intro-surface: rgb(255 255 255 / 0.76);
}

.case-entry-intro-bake .case-entry-motif {
  animation: bakeTraySettle 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.case-entry-intro-bake .case-entry-motif span {
  background: var(--intro-surface);
  border: 2px solid var(--intro-accent);
  border-radius: 12px;
  height: 19%;
  left: 12%;
  top: 30%;
  transform-origin: left center;
  width: 76%;
}

.case-entry-intro-bake .case-entry-motif span:nth-child(2) {
  animation: bakeScore 1.05s ease-out 0.12s both;
  top: 50%;
  width: 56%;
}

.case-entry-intro-bake .case-entry-motif span:nth-child(3) {
  animation: bakeScore 1.05s ease-out 0.22s both;
  top: 70%;
  width: 66%;
}

.case-entry-intro-play {
  --intro-bg: #0f0a1d;
  --intro-accent: #b987ff;
  --intro-secondary: rgb(185 135 255 / 0.3);
  --intro-line: rgb(185 135 255 / 0.18);
  --intro-surface: rgb(255 255 255 / 0.06);
}

.case-entry-intro-play .case-entry-motif {
  animation: playBoardUnlock 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-play .case-entry-motif span {
  background: transparent;
  border: 2px solid var(--intro-accent);
  height: 72%;
  left: 14%;
  top: 14%;
  width: 72%;
}

.case-entry-intro-play .case-entry-motif span:nth-child(2) {
  animation: playPath 1.1s ease-out 0.1s both;
  border-width: 0 2px 2px 0;
  height: 42%;
  left: 31%;
  top: 31%;
  width: 38%;
}

.case-entry-intro-play .case-entry-motif span:nth-child(3) {
  animation: playKeyPulse 0.9s ease-in-out 0.32s both;
  background: var(--intro-accent);
  border: 0;
  border-radius: 999px;
  height: 14%;
  left: 43%;
  top: 43%;
  width: 14%;
}

.case-entry-intro-frame {
  --intro-bg: #070b13;
  --intro-accent: #7eb8ff;
  --intro-secondary: rgb(126 184 255 / 0.26);
  --intro-line: rgb(126 184 255 / 0.16);
  --intro-surface: rgb(255 255 255 / 0.08);
}

.case-entry-intro-frame .case-entry-motif {
  animation: frameFocus 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  border: 2px solid var(--intro-line);
  border-radius: 999px;
}

.case-entry-intro-frame .case-entry-motif span {
  background: transparent;
  border: 2px solid var(--intro-accent);
  border-radius: 999px;
  inset: 18%;
}

.case-entry-intro-frame .case-entry-motif span:nth-child(2) {
  animation: frameAperture 1.08s ease-out 0.08s both;
  border-radius: 12px;
  inset: 31%;
  transform: rotate(45deg);
}

.case-entry-intro-frame .case-entry-motif span:nth-child(3) {
  animation: frameFlash 0.42s ease-out 0.62s both;
  background: var(--intro-accent);
  border: 0;
  border-radius: 999px;
  inset: 44%;
}

.case-entry-intro-roxo {
  --intro-bg: #160706;
  --intro-accent: #ff5a44;
  --intro-secondary: rgb(255 90 68 / 0.28);
  --intro-line: rgb(255 90 68 / 0.16);
  --intro-surface: rgb(255 255 255 / 0.08);
}

.case-entry-intro-roxo .case-entry-motif {
  animation: roxoStack 1.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-roxo .case-entry-motif span {
  background: var(--intro-accent);
  height: 42%;
  left: 8%;
  top: 12%;
  width: 30%;
}

.case-entry-intro-roxo .case-entry-motif span:nth-child(2) {
  animation: roxoPanelTwo 1s ease-out 0.12s both;
  background: var(--intro-surface);
  left: 39%;
  top: 24%;
}

.case-entry-intro-roxo .case-entry-motif span:nth-child(3) {
  animation: roxoPanelThree 1s ease-out 0.2s both;
  left: 70%;
  top: 36%;
  width: 22%;
}

.case-entry-intro-hargo {
  --intro-bg: #f5f0df;
  --intro-accent: #98b85a;
  --intro-secondary: rgb(152 184 90 / 0.28);
  --intro-line: rgb(68 88 44 / 0.15);
  --intro-surface: rgb(255 255 255 / 0.72);
}

.case-entry-intro-hargo .case-entry-motif {
  animation: hargoProductLift 1.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-hargo .case-entry-motif span {
  background: var(--intro-surface);
  border: 2px solid var(--intro-accent);
  border-radius: 18px;
  height: 62%;
  left: 29%;
  top: 18%;
  width: 42%;
}

.case-entry-intro-hargo .case-entry-motif span:nth-child(2) {
  animation: hargoLeafLeft 1.08s ease-out 0.18s both;
  border-radius: 90% 12%;
  height: 30%;
  left: 8%;
  top: 42%;
  transform-origin: 100% 100%;
  width: 32%;
}

.case-entry-intro-hargo .case-entry-motif span:nth-child(3) {
  animation: hargoLeafRight 1.08s ease-out 0.24s both;
  border-radius: 12% 90%;
  height: 30%;
  left: 60%;
  top: 38%;
  transform-origin: 0 100%;
  width: 32%;
}

.case-entry-intro-vex {
  --intro-bg: #f4f6ff;
  --intro-accent: #6e8dff;
  --intro-secondary: rgb(110 141 255 / 0.28);
  --intro-line: rgb(61 75 130 / 0.16);
  --intro-surface: rgb(255 255 255 / 0.78);
}

.case-entry-intro-vex .case-entry-motif {
  animation: vexDialWake 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-vex .case-entry-motif span {
  background: var(--intro-surface);
  border: 2px solid var(--intro-accent);
  border-radius: 999px;
  inset: 16%;
}

.case-entry-intro-vex .case-entry-motif span:nth-child(2) {
  animation: vexHandOne 1.05s ease-out 0.12s both;
  background: var(--intro-accent);
  border: 0;
  border-radius: 999px;
  height: 33%;
  left: 49%;
  top: 26%;
  transform-origin: 50% 74%;
  width: 3%;
}

.case-entry-intro-vex .case-entry-motif span:nth-child(3) {
  animation: vexHandTwo 1.05s ease-out 0.2s both;
  background: var(--intro-accent);
  border: 0;
  border-radius: 999px;
  height: 3%;
  left: 49%;
  top: 50%;
  transform-origin: 0 50%;
  width: 27%;
}

.case-entry-intro-adrian {
  --intro-bg: #15100a;
  --intro-accent: #d7a33c;
  --intro-secondary: rgb(215 163 60 / 0.28);
  --intro-line: rgb(215 163 60 / 0.16);
  --intro-surface: rgb(255 255 255 / 0.09);
}

.case-entry-intro-adrian .case-entry-motif {
  animation: adrianGridArrive 1.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-adrian .case-entry-motif span {
  background: var(--intro-surface);
  border: 2px solid var(--intro-accent);
  border-radius: 8px;
  height: 34%;
  left: 12%;
  top: 16%;
  width: 34%;
}

.case-entry-intro-adrian .case-entry-motif span:nth-child(2) {
  animation: adrianTileTwo 1.04s ease-out 0.08s both;
  left: 54%;
}

.case-entry-intro-adrian .case-entry-motif span:nth-child(3) {
  animation: adrianTileThree 1.04s ease-out 0.16s both;
  left: 33%;
  top: 57%;
}

.case-entry-intro-planty {
  --intro-bg: #edf8ee;
  --intro-accent: #7ac78e;
  --intro-secondary: rgb(122 199 142 / 0.3);
  --intro-line: rgb(55 104 66 / 0.15);
  --intro-surface: rgb(255 255 255 / 0.7);
}

.case-entry-intro-planty .case-entry-motif {
  animation: plantyStemGrow 1.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.case-entry-intro-planty .case-entry-motif span {
  background: var(--intro-accent);
  border-radius: 999px;
  height: 66%;
  left: 48%;
  top: 20%;
  transform-origin: 50% 100%;
  width: 4%;
}

.case-entry-intro-planty .case-entry-motif span:nth-child(2) {
  animation: plantyLeafLeft 1.08s ease-out 0.18s both;
  border-radius: 90% 10% 90% 10%;
  height: 28%;
  left: 19%;
  top: 35%;
  transform-origin: 100% 100%;
  width: 34%;
}

.case-entry-intro-planty .case-entry-motif span:nth-child(3) {
  animation: plantyLeafRight 1.08s ease-out 0.26s both;
  border-radius: 10% 90% 10% 90%;
  height: 28%;
  left: 48%;
  top: 24%;
  transform-origin: 0 100%;
  width: 34%;
}

@keyframes caseIntroExit {
  to {
    opacity: 0;
    transform: translateY(-3%);
    visibility: hidden;
  }
}

@keyframes caseIntroGrid {
  from {
    opacity: 0;
    transform: scale(1.08) rotate(1deg);
  }
  to {
    opacity: 0.76;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes caseIntroSweep {
  from {
    transform: translateX(0) skewX(-18deg);
  }
  to {
    transform: translateX(390%) skewX(-18deg);
  }
}

@keyframes sweetMotifRise {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.82);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sweetIcingLeft {
  from {
    transform: translateX(-28px) rotate(-16deg) scale(0.82);
  }
  to {
    transform: translateX(0) rotate(-7deg) scale(1);
  }
}

@keyframes sweetIcingRight {
  from {
    transform: translateX(28px) rotate(16deg) scale(0.82);
  }
  to {
    transform: translateX(0) rotate(7deg) scale(1);
  }
}

@keyframes bakeTraySettle {
  from {
    opacity: 0;
    transform: perspective(520px) rotateX(32deg) translateY(28px);
  }
  to {
    opacity: 1;
    transform: perspective(520px) rotateX(0deg) translateY(0);
  }
}

@keyframes bakeScore {
  from {
    transform: scaleX(0.18);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes playBoardUnlock {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.84);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes playPath {
  from {
    clip-path: inset(0 100% 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes playKeyPulse {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    opacity: 1;
    transform: scale(1.34);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes frameFocus {
  from {
    opacity: 0;
    transform: scale(1.22);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes frameAperture {
  from {
    opacity: 0;
    transform: rotate(0deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes frameFlash {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  45% {
    opacity: 0.92;
    transform: scale(1.8);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes roxoStack {
  from {
    opacity: 0;
    transform: translateX(-34px) skewX(-8deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(-8deg);
  }
}

@keyframes roxoPanelTwo {
  from {
    transform: translateY(36px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes roxoPanelThree {
  from {
    transform: translateY(-36px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes hargoProductLift {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hargoLeafLeft {
  from {
    transform: rotate(-38deg) scale(0.3);
  }
  to {
    transform: rotate(-14deg) scale(1);
  }
}

@keyframes hargoLeafRight {
  from {
    transform: rotate(38deg) scale(0.3);
  }
  to {
    transform: rotate(14deg) scale(1);
  }
}

@keyframes vexDialWake {
  from {
    opacity: 0;
    transform: rotate(-28deg) scale(0.86);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes vexHandOne {
  from {
    transform: rotate(-130deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes vexHandTwo {
  from {
    transform: rotate(110deg) scaleX(0.3);
  }
  to {
    transform: rotate(0deg) scaleX(1);
  }
}

@keyframes adrianGridArrive {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes adrianTileTwo {
  from {
    transform: translateY(-28px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes adrianTileThree {
  from {
    transform: translateY(28px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes plantyStemGrow {
  from {
    opacity: 0;
    transform: translateY(26px) scaleY(0.35);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes plantyLeafLeft {
  from {
    transform: rotate(-48deg) scale(0.25);
  }
  to {
    transform: rotate(-18deg) scale(1);
  }
}

@keyframes plantyLeafRight {
  from {
    transform: rotate(48deg) scale(0.25);
  }
  to {
    transform: rotate(18deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-entry-intro {
    animation-duration: 1ms;
    animation-delay: 1ms;
  }

  .case-entry-intro *,
  .case-entry-intro::before,
  .case-entry-intro::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}