/* V54 changes only the entrance flight: the cosmic image itself is the scene. */
.entry-sequence .entry-cosmos-rim {
  z-index: 0;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
  animation: entry-v54-flight 8.15s cubic-bezier(.23,.19,.47,.97) both;
  transition: opacity .52s ease-out;
}
.entry-sequence.is-flight .entry-cosmos-rim { opacity: 1; }
.entry-sequence.is-hud .entry-cosmos-rim { opacity: 0; }
.entry-sequence .entry-canvas { z-index: 1; }
.entry-sequence .entry-webgl { display: none; }
@keyframes entry-v54-flight {
  0% { transform: scale(1.025) translate3d(0,0,0); }
  25% { transform: scale(1.065) translate3d(-.6%,.35%,0); }
  52% { transform: scale(1.105) translate3d(.8%,-.55%,0); }
  76% { transform: scale(1.16) translate3d(-.65%,.45%,0); }
  100% { transform: scale(1.215) translate3d(.55%,-.4%,0); }
}
@media (max-width: 700px) {
  .entry-sequence .entry-cosmos-rim { animation-name: entry-v54-flight-mobile; }
  /* Show only the lower region of the source in the lower panel, so the
     source image's moon cannot appear a second time near the bottom. */
  .entry-sequence .entry-cosmos-rim::after { background-size: auto 145%; }
  @keyframes entry-v54-flight-mobile {
    0% { transform: scale(1.01) translate3d(0,0,0); }
    50% { transform: scale(1.055) translate3d(-.4%,.2%,0); }
    100% { transform: scale(1.095) translate3d(.35%,-.3%,0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .entry-sequence:not(.force-play) .entry-cosmos-rim { animation: none; }
}

/* V55: a compact plasma aperture. The center is transparent so the stars and
   original cosmos remain visible through it; the outer edge is feathered. */
.entry-sequence .entry-vortex {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 51%;
  width: min(54vw, 62vh, 560px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.78);
  transition: opacity .7s ease-out;
  filter: drop-shadow(0 0 26px #68daff90);
}
.entry-sequence.is-flight .entry-vortex { opacity: .9; }
.entry-sequence.is-hud .entry-vortex,
.entry-sequence.is-skipping .entry-vortex { opacity: 0; }
.entry-vortex i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url('assets/intro-v50-plasma.webp') center / cover no-repeat;
  -webkit-mask-image: radial-gradient(circle, transparent 0 28%, #0002 42%, #0009 60%, #000 70%, #000e 79%, transparent 99%);
  mask-image: radial-gradient(circle, transparent 0 28%, #0002 42%, #0009 60%, #000 70%, #000e 79%, transparent 99%);
  animation: entry-v55-vortex 8.1s cubic-bezier(.19,.36,.42,1) both;
}
.entry-vortex i:nth-child(2) {
  inset: 9%;
  opacity: .48;
  filter: hue-rotate(12deg) blur(5px);
  animation: entry-v55-vortex-inner 6.8s ease-in-out both;
}
@keyframes entry-v55-vortex {
  0% { transform: rotate(-14deg) scale(.84); }
  55% { transform: rotate(11deg) scale(1.04); }
  100% { transform: rotate(31deg) scale(1.17); }
}
@keyframes entry-v55-vortex-inner {
  0% { transform: rotate(22deg) scale(.92); }
  100% { transform: rotate(-25deg) scale(1.08); }
}

/* The opening console is separate from the final card-scanning HUD. */
.entry-sequence .entry-console {
  position: absolute;
  z-index: 3;
  top: 49%;
  left: 50%;
  width: min(460px, 76vw);
  padding: 16px 20px 19px;
  border: 1px solid #b8f5ffb5;
  border-radius: 12px;
  background: linear-gradient(130deg, #06172eeb, #082c46d9 65%, #051526e8);
  box-shadow: 0 0 0 4px #65ddff1d, 0 0 38px #5fcfff8a, inset 0 0 28px #5edfff24;
  color: #e5faff;
  transform: translate3d(-50%, -50%, 0);
  text-shadow: 0 0 12px #73dcff;
  animation: entry-v55-console 1.65s ease-in-out both;
}
.entry-console-top,.entry-console-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 600 10px/1.3 system-ui,sans-serif;
  letter-spacing: .13em;
  color: #9be4f5;
}
.entry-console strong {
  display: block;
  margin: 16px 0;
  font: 400 clamp(23px, 3vw, 36px)/1.1 Georgia,serif;
  letter-spacing: .04em;
  text-align: center;
}
.entry-console-scan { height: 3px; margin-bottom: 14px; background: #8de7ff30; overflow: hidden; }
.entry-console-scan span { display: block; height: 100%; background: #a9efff; box-shadow: 0 0 14px #7be3ff; animation: entry-v55-scan 1.2s linear both; }
@keyframes entry-v55-console {
  0% { opacity: 0; filter: blur(10px); transform: translate3d(-50%,-43%,0) scale(.93); }
  18%, 60% { opacity: 1; filter: blur(0); transform: translate3d(-50%,-50%,0) scale(1); }
  100% { opacity: 0; filter: blur(5px); transform: translate3d(-50%,-57%,0) scale(1.04); }
}
@keyframes entry-v55-scan { from { width: 0; } to { width: 100%; } }
.entry-sequence.is-skipping .entry-console { display: none; }

/* The replay control is visible without scrolling down to the hero footer. */
.experience-hero > .entry-replay {
  position: absolute;
  top: 70px;
  right: clamp(16px,4vw,60px);
  z-index: 30;
  cursor: pointer;
  box-shadow: 0 0 14px #50dfff50;
}
@media (max-width: 700px) {
  .entry-sequence .entry-vortex { width: min(73vw, 45vh, 390px); }
  .entry-sequence .entry-console { width: min(370px, 82vw); padding: 13px 14px; }
  .entry-console-top,.entry-console-bottom { font-size: 8px; }
  .experience-hero > .entry-replay { top: 68px; right: 12px; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-sequence:not(.force-play) .entry-vortex i,
  .entry-sequence:not(.force-play) .entry-console,
  .entry-sequence:not(.force-play) .entry-console-scan span { animation: none; }
}

/* V56: the original portal was a masked disc cut from a rectangular image.
   This transparent, irregular plasma asset keeps the cosmic scene visible
   through the opening and gives each layer distinct rotation and depth. */
html.dpz-quiet-entry .entry-sequence.entry-pending { display: none; }
.entry-sequence.entry-pending .entry-console,
.entry-sequence.entry-pending .entry-console-scan span { animation-play-state: paused; }
.entry-sequence .entry-vortex {
  width: min(62vw, 68vh, 670px);
  filter: drop-shadow(0 0 30px #36bbff8a);
  perspective: 900px;
}
.entry-sequence.is-flight .entry-vortex { opacity: .96; }
.entry-vortex i {
  background: url('assets/intro-v56-vortex.webp') center / contain no-repeat;
  -webkit-mask-image: radial-gradient(circle, transparent 0 10%, #0006 23%, #000 39%, #000 74%, transparent 99%);
  mask-image: radial-gradient(circle, transparent 0 10%, #0006 23%, #000 39%, #000 74%, transparent 99%);
  animation: entry-v56-vortex 7.8s cubic-bezier(.2,.48,.31,1) both;
}
.entry-vortex i:nth-child(2) {
  inset: 7%;
  opacity: .42;
  filter: hue-rotate(14deg) blur(3px);
  animation: entry-v56-vortex-inner 6.9s ease-in-out both;
}
.entry-vortex::before {
  content: '';
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 27%, #83ddff14 47%, #4bbfff20 62%, transparent 78%);
  mix-blend-mode: screen;
  animation: entry-v56-vortex-glow 4.5s ease-in-out infinite alternate;
}
@keyframes entry-v56-vortex {
  0% { transform: rotate(-14deg) scale(.74) rotateY(-9deg); }
  48% { transform: rotate(16deg) scale(1.02) rotateY(7deg); }
  100% { transform: rotate(43deg) scale(1.35) rotateY(-5deg); }
}
@keyframes entry-v56-vortex-inner {
  0% { transform: rotate(28deg) scale(.88); }
  100% { transform: rotate(-34deg) scale(1.3); }
}
@keyframes entry-v56-vortex-glow {
  from { opacity: .52; transform: scale(.92); }
  to { opacity: .92; transform: scale(1.08); }
}
.entry-sequence.is-hud .entry-vortex { transform: translate3d(-50%,-50%,0) scale(1.18); }
.entry-sequence.is-revealing .entry-vortex { transform: translate3d(-50%,-50%,0) scale(2); opacity: 0; }

/* Panels materialize under the outgoing HUD instead of simply appearing once
   the overlay disappears. Their final positions and existing hover rules stay. */
body.entry-reveal-active .experience-hero .studio-panel {
  animation: entry-v56-card .76s cubic-bezier(.16,.82,.25,1) both;
}
body.entry-reveal-active .experience-hero .studio-panel:nth-child(2),
body.entry-reveal-active .experience-hero .studio-panel:nth-child(5) { animation-delay: .07s; }
body.entry-reveal-active .experience-hero .studio-panel:nth-child(3),
body.entry-reveal-active .experience-hero .studio-panel:nth-child(6) { animation-delay: .14s; }
@keyframes entry-v56-card {
  0% { opacity: .25; filter: brightness(1.8) blur(5px); transform: perspective(900px) translateZ(-30px) scale(.9); }
  60% { opacity: 1; filter: brightness(1.4) blur(0); }
  100% { opacity: 1; filter: brightness(1) blur(0); transform: perspective(900px) translateZ(0) scale(1); }
}
@media (max-width: 700px) {
  .entry-sequence .entry-vortex { width: min(79vw, 51vh, 460px); }
}
@media (prefers-reduced-motion: reduce) {
  .entry-sequence:not(.force-play) .entry-vortex::before,
  .entry-sequence:not(.force-play) .entry-vortex i,
  body.entry-reveal-active .experience-hero .studio-panel { animation: none; }
}