.opening-ceremony {
  --ceremony-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --pack-width: clamp(190px, 30vh, 264px);
  --deck-box-width: clamp(250px, 42vh, 360px);
  --stack-risen: translate(-50%, calc(-50% - 17vh));
  --stack-rest: translate(-50%, calc(-50% + 21vh)) scale(0.55) rotate(2deg);
  position: fixed;
  z-index: 500;
  inset: 0;
  overflow: auto;
  color: var(--ink);
  background: radial-gradient(circle at 50% 40%, #26301d, #090b08 70%);
  animation: fade-in 0.45s ease-out both;
}

.opening-ceremony-head {
  position: fixed;
  z-index: 540;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(18px, 4vw, 64px);
  background: linear-gradient(#090b08, transparent);

  @media (max-width: 720px) {
    padding: 14px;
    font-size: 11px;
  }
}

.opening-ceremony-stage {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1400px;
}

.opening-floor {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 76%;
  width: calc(var(--pack-width) * 1.6);
  height: calc(var(--pack-width) * 0.24);
  background: radial-gradient(closest-side, #000c, transparent);
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  animation: floor-breathe 3.7s ease-in-out 0.9s infinite;
}

.pack-opening--reveal .opening-floor {
  opacity: 0;
}

.opening-pack {
  --pack-pose: rotateX(2deg) rotateY(-7deg);
  position: relative;
  z-index: 20;
  width: var(--pack-width);
  aspect-ratio: 460 / 862;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transform: var(--pack-pose);
  transform-style: preserve-3d;
  animation:
    ceremony-enter 0.9s var(--ceremony-ease) both,
    pack-idle-tilt 5.6s ease-in-out 0.9s infinite;
}

.opening-pack-body {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  animation: pack-idle-bob 3.7s ease-in-out 0.9s infinite;
}

.opening-pack:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 10px;
}

.opening-pack-body .packaging-art {
  position: absolute;
  inset: 0;
}

.opening-pack-art {
  filter: drop-shadow(0 26px 24px #000b);
}

.opening-pack-strip {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
  transform-origin: 96% 6%;
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0%));
}

.opening-pack-fray,
.opening-pack-strip-fray {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
  background: repeating-linear-gradient(90deg, #efe9d6 0 3px, #c6bda3 3px 5px, #e2dbc4 5px 8px);
  mask-image: linear-gradient(180deg, transparent 6%, #000 7.5%, #000 12.5%, transparent 14%);
}

.opening-pack-hint {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 24px;
  padding: 8px 16px;
  border: 1px solid #605b42;
  border-radius: 100px;
  background: rgb(17 20 15 / 85%);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  animation:
    fade-in 0.4s ease-out 1.1s both,
    hint-pulse 2.6s ease-in-out 1.5s infinite;
}

.pack-opening--tearing .opening-pack {
  pointer-events: none;
  cursor: default;
  animation: pack-tear-away 2.2s linear both;
}

.pack-opening--tearing .opening-pack-body {
  animation: pack-rip-recoil 1.6s ease-in-out both;
}

.pack-opening--tearing .opening-pack-hint {
  display: none;
}

.pack-opening--tearing .opening-pack-art {
  animation: pack-tear-clip 0.6s cubic-bezier(0.3, 0, 0.7, 1) 0.15s both;
}

.pack-opening--tearing .opening-pack-fray {
  visibility: visible;
  animation: pack-fray-clip 0.6s cubic-bezier(0.3, 0, 0.7, 1) 0.15s both;
}

.pack-opening--tearing .opening-pack-strip {
  visibility: visible;
  animation: crimp-peel 1.05s cubic-bezier(0.35, 0, 0.6, 1) 0.15s both;
}

.pack-opening--tearing .opening-pack-crimp {
  animation: crimp-tear-clip 0.6s cubic-bezier(0.3, 0, 0.7, 1) 0.15s both;
}

.pack-opening--tearing .opening-pack-strip-fray {
  visibility: visible;
  animation: crimp-fray-clip 0.6s cubic-bezier(0.3, 0, 0.7, 1) 0.15s both;
}

.opening-stack {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  width: calc(var(--pack-width) * 0.86);
  aspect-ratio: 5 / 7;
  transform: translate(-50%, calc(-50% + 3vh));
}

.pack-opening--tearing .opening-stack {
  animation: stack-rise 0.75s var(--ceremony-ease) 0.8s both;
}

.pack-opening--reveal .opening-stack {
  animation: stack-settle 0.6s var(--ceremony-ease) both;
}

.opening-stack-card {
  position: absolute;
  inset: 0;
  display: block;
  transform: translate(var(--stack-x), var(--stack-y)) rotate(var(--stack-angle));
  transition: transform 0.5s var(--ceremony-ease);
}

.opening-stack--aligned .opening-stack-card {
  transform: translate(calc(var(--stack-x) / 3), var(--stack-y));
}

.opening-stack-card .oche-card-back {
  width: 100%;
  box-shadow: 0 5px 9px #000b;
}

.pack-reveal-card {
  --reveal-card-scale: 0.4666667;
  position: relative;
  z-index: 30;
  width: calc(750px * var(--reveal-card-scale));
  height: calc(1050px * var(--reveal-card-scale));
  margin-bottom: 11vh;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  perspective: 1500px;
  animation: card-draw 0.75s var(--ceremony-ease) both;

  @media (max-width: 720px) {
    --reveal-card-scale: 0.3733333;
  }
}

.pack-reveal-card--first {
  animation-name: card-draw-first;
}

.pack-reveal-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 8px;
}

.pack-reveal-card.is-leaving {
  animation: card-leave 0.42s cubic-bezier(0.5, 0, 0.9, 0.5) both;
}

.reveal-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.is-face-up > .reveal-flip {
  transform: rotateY(180deg);
  animation: card-flip 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.reveal-flip-back,
.reveal-flip-front {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
}

.reveal-flip-back .oche-card-back {
  width: 100%;
  height: 100%;
  box-shadow: 0 28px 60px #000d;
}

.reveal-flip-front {
  transform: rotateY(180deg);
}

.reveal-flip-front .card-face--showcase {
  --blokemon-card-scale: var(--reveal-card-scale);
}

.reveal-flip-front::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  border-radius: 12px;
  opacity: 0;
  background: linear-gradient(120deg, transparent 30%, rgb(255 243 194 / 18%) 46%, rgb(255 255 255 / 30%) 50%, rgb(255 243 194 / 18%) 54%, transparent 70%) no-repeat 120% 0 / 250% 100%;
}

.is-face-up .reveal-flip-front::after {
  animation: face-sheen 1.1s ease-out 0.4s both;
}

.opening-ceremony-copy {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 18px 26px;
  background: linear-gradient(transparent, rgb(9 11 8 / 92%) 55%);
  text-align: center;
  animation: fade-up 0.45s ease-out 0.35s both;
}

.opening-ceremony-copy h1 {
  margin: 8px 0 18px;
  font: 900 clamp(34px, 5vh, 58px) / 0.95 "Gillius ADF", serif;
}