.io-pop-landing { display: none; }
.io-pop .hero { min-height: min(820px, calc(100svh - 68px)); background: #121212; background-image: radial-gradient(ellipse 115% 150% at 0 0, #303030 0%, #242424 23%, #191919 51%, #121212 79%); margin-bottom: clamp(2rem,5vw,5rem); }
.io-pop .hero-logo, .io-pop .io-opening { display: none; }
.io-pop .io-pop-landing { position: relative; display: grid; place-items: center; width: 100%; min-height: inherit; padding: 5rem 0 7rem; isolation: isolate; }
/* One original image stays intact at rest; only active letters redraw. */
.io-pop-logo { position: relative; display: block; width: min(92%,1440px); aspect-ratio: 3.5; }
.io-pop-scene { position: absolute; display: block; top: 50%; left: 50%; width: 124%; max-width: none; height: auto; transform: translate(-50%,-50%); user-select: none; mask-image: linear-gradient(to right,transparent,#000 7%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 28%,#000 75%,transparent); mask-composite: intersect; }
.io-pop-surface { position:absolute; top:50%; left:50%; width:124%; aspect-ratio:2400/1347; transform:translate(-50%,-50%); pointer-events:none; visibility:hidden; mask-image:linear-gradient(to right,transparent,#000 7%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 28%,#000 75%,transparent); mask-composite:intersect; }
.is-physical .io-pop-surface { visibility:visible; }
.is-physical .io-pop-base, .is-physical .io-pop-letter-art { visibility:hidden !important; }
.is-physical .io-pop-scene { z-index:1; }
.io-pop-base, .io-pop-letter-art { pointer-events: none; }
.io-pop-letter { outline: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.io-pop-letter-art { visibility: hidden; opacity: var(--pop-recessed,0); }
.io-pop-letter.is-active .io-pop-letter-art { visibility: visible; }
.io-pop-counter { visibility: hidden; }
.is-counter-ready.is-recessed-ready .io-pop-letter.is-active .io-pop-counter { visibility: visible; }
.is-physical .io-pop-counter { visibility: hidden !important; }
.io-pop-hit { pointer-events: all; }
.io-pop-focus { fill: none; stroke: #bfb09b; stroke-width: 6; opacity: 0; pointer-events: none; }
.io-pop-letter:focus-visible .io-pop-focus { opacity: .9; }
.io-pop-logo:not(.is-ready) .io-pop-letter-art { visibility: visible; }
.io-pop-footer { position: absolute; left: 2rem; right: 2rem; bottom: 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.io-pop-footer a, .io-pop-sound { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #b9b3aa; font: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.io-pop-footer a:hover, .io-pop-sound:hover { color: #eee9e2; }
.io-pop-footer a:focus-visible, .io-pop-sound:focus-visible { outline: 1px solid #a69b8b; outline-offset: 6px; }
@media(max-width:700px) {
  .io-pop .hero { min-height: min(680px,calc(100svh - 68px)); }
  .io-pop .io-pop-landing { padding: 6rem 0; }
  .io-pop-logo { width: 96%; }
  .io-pop-footer { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
}

/* Optional logo swap keeps the original hero's dimensions and work-grid position. */
.io-landing-brand { display: none; }
.io-push-home .hero-logo { position: relative; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; isolation: isolate; }
.io-push-home .hero-logo { padding-bottom: clamp(2.5rem,6vw,5rem); }
.io-push-home .hero-logo > img { grid-area: 1 / 1; pointer-events: none; visibility: hidden; }
.io-push-home .hero-logo .io-landing-brand { display: block; grid-area: 1 / 1; width: min(52rem,76%); aspect-ratio: 718 / 160; }
.io-push-home .io-landing-brand:not(.is-ready) { visibility: hidden; }
.io-push-home .hero-logo:has(.io-landing-brand.is-ready) > img { visibility: hidden; }
.io-push-home .hero-logo .io-landing-brand { display: none; }
.io-push-home .hero-logo > img,
.io-push-home .hero-logo:has(.io-landing-brand.is-ready) > img {
  visibility: visible;
  width: min(44.2rem,64.6%);
  transform: translateY(-3rem);
}
.io-push-home .hero { background: var(--ground); }
.io-push-home .hero-logo::before { display: none; }
.io-push-home .hero-foot { background: var(--ground); }
.io-push-home .hero-logo::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 30% at 50% 66%, rgb(5 5 5 / .25), transparent 80%), radial-gradient(ellipse 70% 80% at 12% 25%, rgb(52 52 52 / .42), transparent 80%);
  mask-image: linear-gradient(transparent, #000 25% 78%, transparent);
}