/* The approved portrait is kept intact; wide screens receive a matching composition. */
.entry-scene {
  --entry-image: url('assets/entry-landscape-natural-v2.webp');
  --poster-width: min(100vw, calc(100svh * 16 / 9));
  --poster-height: min(100svh, calc(100vw * 9 / 16));
  color: #f3f0e6;
}
.entry-scene .intro-surface { background: #243d50; }
.entry-scene .intro-surface::before {
  content: '';
  position: absolute;
  inset: -48px;
  background: #243d50 var(--entry-image) center / cover no-repeat;
  filter: blur(40px) brightness(.88);
  pointer-events: none;
}
.entry-scene .intro-surface::after { content: none; }
.entry-poster {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--poster-width);
  height: var(--poster-height);
  transform: translate(-50%, -50%);
}
.entry-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.entry-scene .entry-center {
  left: calc(50% + var(--poster-width) * .245);
  top: min(calc(50% + var(--poster-height) * .465), calc(100svh - 28px - env(safe-area-inset-bottom, 0px)));
  bottom: auto;
  transform: translate(-50%, -50%);
}
.entry-scene .intro-enter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 12px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  color: #f3f0e6;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--serif);
  font-size: clamp(12px, 1.1vw, 18px);
  letter-spacing: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.entry-scene .intro-enter:hover { background: rgba(244,242,229,.06); }
.entry-scene .entry-orbit { width: 28px; height: 28px; border-color: rgba(243,240,230,.65); }
.entry-scene .entry-orbit::before { inset: 4px; border-color: rgba(243,240,230,.45); }
.entry-scene .entry-orbit::after { inset: -5px; border-color: rgba(243,240,230,.3); }
.entry-scene .entry-orbit > i { width: 3px; height: 3px; background: #f3f0e6; }
.entry-scene.uses-keyboard .intro-enter:focus-visible { outline: 2px solid #f3f0e6; outline-offset: 6px; }
.entry-scene[data-state='flying'] .entry-center,
.entry-scene[data-state='rippling'] .entry-center { transform: translate(-50%, -40%); }

@media (max-aspect-ratio: 1/1) {
  .entry-scene {
    --entry-image: url('assets/entry-portrait-natural-v2.webp');
    --poster-width: min(100vw, calc(100svh * 9 / 16));
    --poster-height: min(100svh, calc(100vw * 16 / 9));
  }
  /* The portrait already contains its light-touch cue. This is its real hit target. */
  .entry-scene .entry-center { left: 50%; top: calc(50% + var(--poster-height) * .435); }
  .entry-scene .intro-enter { width: 96px; height: 92px; padding: 0; }
  .entry-scene .intro-enter:hover { background: transparent; }
  .entry-scene .entry-orbit { display: none; }
  .entry-scene .intro-enter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}