/* Kenji Origins entrance v6 — static artwork with subtle ambient animation.
   The split image remains fixed; only soft background ambience and tasteful
   button glows are added. Existing Dojo behaviour is unchanged.
   Fix: preserve the art frame's centring transform, which is layout (not motion).
   Ambient light lives over the poster, never underneath its opaque pixels.
   v6: Portal is now a native link with a live caption over its original border. */
.kenji-gateway {
  --gateway-width: max(100vw, 177.68332svh);
  --gateway-height: max(100svh, 56.27991vw);
  position: fixed; inset: 0; display: block; overflow: hidden; isolation: isolate;
  background: #090a0e; color: #eee9e0;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.kenji-gateway *, .kenji-gateway *::before, .kenji-gateway *::after { box-sizing: border-box; }
.gateway-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gateway-ambient, .gateway-shade { position: absolute; inset: 0; pointer-events: none; }
.gateway-ambient { background: #090a0e; z-index: 0; }
.gateway-art-frame::before,
.gateway-art-frame::after,
.gateway-shade::before,
.gateway-shade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
/* Soft ambient warmth on the dojo side and cool shimmer on the portal side. */
.gateway-art-frame::before {
  background:
    radial-gradient(54% 62% at 24% 38%, rgba(255, 205, 126, .16), transparent 60%),
    radial-gradient(46% 56% at 77% 24%, rgba(166, 122, 255, .18), transparent 58%),
    radial-gradient(40% 52% at 74% 68%, rgba(108, 157, 255, .12), transparent 65%);
  mix-blend-mode: screen;
  opacity: .72;
  animation: gatewayAmbientPulse 12s ease-in-out infinite;
}
/* Very subtle portal-side shimmer sweep. */
.gateway-art-frame::after {
  inset: -10% -20% -10% 46%;
  background: linear-gradient(115deg,
    transparent 15%,
    rgba(149, 117, 255, 0) 36%,
    rgba(196, 175, 255, .10) 50%,
    rgba(146, 203, 255, .06) 56%,
    rgba(149, 117, 255, 0) 70%,
    transparent 85%);
  mix-blend-mode: screen;
  opacity: .45;
  animation: gatewayPortalSweep 16s linear infinite;
}
.gateway-art-frame, .gateway-ui-frame {
  position: absolute; left: 50%; top: 50%;
  width: var(--gateway-width); height: var(--gateway-height);
  transform: translate(-50%, -50%); pointer-events: none;
}
/* Centre the poster independently of any decorative animation. */
.kenji-gateway .gateway-art-frame {
  z-index: 1; isolation: isolate;
  transform: translate(-50%, -50%) !important;
  scale: none !important; translate: none !important;
  animation: none !important; transition: none !important;
}
.gateway-art-frame::before, .gateway-art-frame::after { z-index: 1; }
.gateway-split-art { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.gateway-shade {
  z-index: 2;
  background: linear-gradient(180deg, #05070c35, transparent 17%);
}
/* Tiny drifting particles / petals for a premium animated still feel. */
.gateway-shade::before {
  background-image:
    radial-gradient(circle at 12% 80%, rgba(255, 216, 176, .55) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 18% 70%, rgba(255, 228, 197, .40) 0 1px, transparent 1.6px),
    radial-gradient(circle at 26% 86%, rgba(255, 202, 160, .45) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 64% 82%, rgba(208, 190, 255, .30) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 76%, rgba(204, 170, 255, .40) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 84% 84%, rgba(161, 204, 255, .28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 68%, rgba(199, 176, 255, .36) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 78% 58%, rgba(245, 216, 255, .22) 0 1px, transparent 1.6px);
  opacity: .75;
  animation: gatewayParticleDrift 18s ease-in-out infinite alternate;
}
/* Slight emphasis around the portal sky only. */
.gateway-shade::after {
  inset: 0 0 34% 50%;
  background: radial-gradient(circle at 68% 18%, rgba(188, 145, 255, .16), transparent 34%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: gatewayPortalPulse 8.5s ease-in-out infinite;
}
.gateway-header {
  position: absolute; z-index: 6;
  top: max(24px, env(safe-area-inset-top)); left: max(32px, env(safe-area-inset-left)); right: max(32px, env(safe-area-inset-right));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none;
}
.gateway-home { display: inline-flex; gap: 12px; align-items: center; color: #f1ece3; pointer-events: auto; }
.gateway-home > svg { width: 16px; height: 16px; opacity: .75; }
.gateway-home > img { display: block; width: 90px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 10px #0008); }
.gateway-home > svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gateway-heading { font: 500 10px/1.4 var(--sans, Arial, sans-serif); text-transform: uppercase; letter-spacing: .3em; text-shadow: 0 2px 14px #000; color: #eee7dd; }
.gateway-ui-frame { z-index: 4; }
.gateway-choice { position: absolute; pointer-events: auto; }
.gateway-choice--dojo { left: 8.85167464%; top: 75.77045696%; width: 29.30622010%; height: 12.00850159%; }
.gateway-choice--portal { left: 63.03827751%; top: 76.30180659%; width: 28.70813397%; height: 11.05207226%; }
.gateway-action {
  -webkit-appearance: none; appearance: none; position: relative; display: block;
  width: 100%; height: 100%; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #f4e4c5; opacity: 1; cursor: pointer; overflow: visible;
}
.gateway-action:disabled { opacity: 1; cursor: not-allowed; }
.gateway-button-art {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: fill;
  pointer-events: none; position: relative; z-index: 2;
}
/* At rest, the painted buttons in the background remain visible. The overlay only
   appears for the exact button highlight while a separate glow gently pulses. */
.gateway-button-art { visibility: hidden; }
.gateway-action::before {
  content: ""; position: absolute; inset: -6% -4%; z-index: 1; pointer-events: none;
  border-radius: 22px; opacity: .22; filter: blur(18px);
  transition: opacity .18s ease, filter .18s ease;
}
.gateway-action--dojo::before {
  background: radial-gradient(circle at 50% 50%, rgba(238, 183, 74, .38), rgba(238, 183, 74, .05) 48%, transparent 72%);
  animation: gatewayDojoButtonPulse 4.6s ease-in-out infinite;
}
.gateway-action--portal::before {
  background: radial-gradient(circle at 50% 50%, rgba(154, 120, 255, .28), rgba(154, 120, 255, .06) 48%, transparent 72%);
  animation: gatewayPortalButtonPulse 5.4s ease-in-out infinite;
}
.gateway-action:focus-visible .gateway-button-art,
.gateway-action:not(:disabled):active .gateway-button-art {
  visibility: visible; filter: brightness(1.14);
}
.gateway-action:focus-visible::before,
.gateway-action:not(:disabled):active::before {
  opacity: .42; filter: blur(20px);
}
@media (hover: hover) and (pointer: fine) {
  .gateway-choice:hover .gateway-button-art { visibility: visible; filter: brightness(1.14); }
  .gateway-choice:hover .gateway-action::before { opacity: .42; filter: blur(20px); }
}
/* Keep the artwork completely static: no movement, scaling or enlargement. */
.kenji-gateway .gateway-action,
.kenji-gateway .gateway-button-art,
.kenji-gateway .gateway-split-art {
  transform: none !important; scale: none !important; translate: none !important;
  animation: none !important; transition: none !important;
}
.gateway-action-fallback { display: none; }
.gateway-action[data-artwork-error="true"] {
  background: #241a0e; border: 1px solid #d7ab68; color: #f5e2ba;
  font: 400 clamp(18px, 2vw, 32px)/1.2 Georgia, serif;
}
.gateway-action--portal[data-artwork-error="true"] { background: #15151e; color: #ccc6d7; border-color: #666273; }
.gateway-action[data-artwork-error="true"] .gateway-action-fallback { display: block; }
.gateway-action[data-artwork-error="true"] .gateway-button-art { display: none; }
.kenji-gateway button:focus-visible, .gateway-home:focus-visible { outline: 2px solid #eed3a3; outline-offset: 4px; }
.dojo-app.is-opening .kenji-gateway, .dojo-app.is-entered .kenji-gateway { display: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .gateway-art-frame::before,
  .gateway-art-frame::after,
  .gateway-shade::before,
  .gateway-shade::after,
  .gateway-action::before { animation: none !important; }
  .gateway-action::before { opacity: .18; transition: none !important; }
}
/* Portrait/tablet: retain the approved split composition. Suppress the buttons
   embedded in the poster and display their exact artwork as accessible controls. */
@media (max-aspect-ratio: 3/2), (max-width: 720px) {
  .gateway-ambient { inset: -30px; background: linear-gradient(#080b1550, #080b1590), url('/assets/gateway/kenji-two-worlds.webp') center/cover; filter: blur(22px); }
  .gateway-art-frame { width: 172vw; height: auto; aspect-ratio: 1672/941; top: 45%; }
  .gateway-split-art { -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 64%, transparent 76%); mask-image: linear-gradient(transparent, #000 12%, #000 64%, transparent 76%); }
  .gateway-shade { background: linear-gradient(180deg, #04061030, transparent 22%, transparent 46%, #06081144 70%, #060811aa); }
  .gateway-ui-frame { inset: auto 24px max(90px, calc(72px + env(safe-area-inset-bottom))); top: auto; width: auto; height: auto; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: center; }
  .gateway-choice { position: relative; inset: auto; width: 100%; height: auto; min-width: 0; }
  .gateway-choice--dojo { aspect-ratio: 490/113; }
  .gateway-choice--portal { aspect-ratio: 480/104; }
  .gateway-action { position: absolute; inset: 0; }
  .kenji-gateway .gateway-button-art { visibility: visible; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .gateway-header { top: max(20px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); gap: 12px; }
  .gateway-home { gap: 6px; }
  .gateway-home > img { width: 76px; height: 40px; }
  .gateway-home > svg { width: 14px; }
  .gateway-heading { font-size: 8px; letter-spacing: .23em; }
  .gateway-art-frame { top: 36%; }
  .gateway-ui-frame { left: 50%; right: auto; width: min(88vw, 430px); transform: translateX(-50%); grid-template-columns: 1fr; gap: 12px; bottom: max(88px, calc(72px + env(safe-area-inset-bottom))); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .gateway-header { top: 12px; left: 20px; right: 20px; }
  .gateway-home > img { width: 64px; height: 34px; }
  .gateway-heading { font-size: 8px; }
  .gateway-action { min-height: 32px; }
}
@media (min-aspect-ratio: 2/1) {
  .kenji-gateway { --gateway-width: 177.68332svh; --gateway-height: 100svh; }
  .gateway-ambient { inset: -24px; background: linear-gradient(#080b1570, #080b15a8), url('/assets/gateway/kenji-two-worlds.webp') center/cover; filter: blur(22px); }
}
@keyframes gatewayAmbientPulse {
  0%, 100% { opacity: .64; }
  50% { opacity: .82; }
}
@keyframes gatewayPortalSweep {
  0% { transform: translateX(-10%) skewX(-8deg); opacity: .16; }
  50% { opacity: .30; }
  100% { transform: translateX(10%) skewX(-8deg); opacity: .16; }
}
@keyframes gatewayParticleDrift {
  0% { transform: translate3d(0, 8px, 0); opacity: .52; }
  50% { opacity: .78; }
  100% { transform: translate3d(6px, -18px, 0); opacity: .58; }
}
@keyframes gatewayPortalPulse {
  0%, 100% { opacity: .38; }
  50% { opacity: .62; }
}
@keyframes gatewayDojoButtonPulse {
  0%, 100% { opacity: .16; }
  50% { opacity: .30; }
}
@keyframes gatewayPortalButtonPulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .24; }
}

/* Live Portal entry. This only replaces the locked button's interior, not the
   frame, background composition, animations or existing Dojo entry handler. */
.kenji-gateway .gateway-choice--portal { container-type: inline-size; }
.kenji-gateway .gateway-action--portal {
  text-decoration: none;
  color: #e6dcf4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Cover the obsolete painted caption at rest as well as on hover. */
.kenji-gateway .gateway-action--portal .gateway-button-art { visibility: visible; }
.kenji-gateway .gateway-portal-face {
  position: absolute; inset: 0; z-index: 3;
  display: block; width: 100%; height: 100%; max-width: none;
  pointer-events: none; transform: none; overflow: visible;
}
.kenji-gateway .gateway-portal-label {
  position: absolute; z-index: 4; inset: 0 auto 0 33%; width: 48%;
  display: grid; place-items: center; height: 100%; margin: 0; padding: 0;
  pointer-events: none; white-space: nowrap; text-align: center;
  color: #e6dcf4; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2vw, 36px); font-size: 6.66667cqw;
  font-weight: 400; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  text-shadow: 0 1px 2px #0009;
}
.kenji-gateway .gateway-action--portal:focus-visible {
  outline: 2px solid #d7bef2; outline-offset: 4px;
}
.kenji-gateway .gateway-action--portal:focus-visible .gateway-portal-face,
.kenji-gateway .gateway-action--portal:focus-visible .gateway-portal-label,
.kenji-gateway .gateway-action--portal:active .gateway-portal-face,
.kenji-gateway .gateway-action--portal:active .gateway-portal-label { filter: brightness(1.14); }
@media (hover: hover) and (pointer: fine) {
  .kenji-gateway .gateway-choice--portal:hover .gateway-portal-face,
  .kenji-gateway .gateway-choice--portal:hover .gateway-portal-label { filter: brightness(1.14); }
}