/* CINENAV2 — Gate 2.5 real-page transition simulation (staging demo only). */
.cn2-root { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.cn2-backdrop { position: absolute; inset: 0; background: #030405; opacity: 0; }
.cn2-clone { position: fixed; margin: 0; z-index: 3; pointer-events: none; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 4px 18px rgba(0,0,0,.5);
  will-change: left, top, width, height, opacity; }
.cn2-frame, .cn2-still { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.cn2-frame { z-index: 2; }
.cn2-ending { z-index: 3; }
.cn2-endwrap { position: absolute; inset: 0; opacity: 0; z-index: 4; pointer-events: none; }
.cn2-endwrap .cn2-ending { position: absolute; inset: 0; }
.cn2-screen { position: absolute; object-fit: cover; object-position: top center; opacity: 0;
  border-radius: 16px; will-change: left, top, width, height, opacity; }
.cn2-skip { z-index: 9; position: absolute; right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; pointer-events: auto;
  background: rgba(10,13,18,.72); color: #d6e4ff; border: 1px solid rgba(168,200,255,.45);
  border-radius: 999px; padding: 9px 16px; font: 500 13px/1 -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(6px); }
.cn2-cap { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom)); z-index: 5; pointer-events: none;
  background: rgba(10,13,18,.66); color: #a8c8ff; border: 1px solid rgba(168,200,255,.28);
  border-radius: 999px; padding: 7px 14px; font: 500 12px/1 -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: .03em; white-space: nowrap; opacity: 0; }
/* Destination cover (enter) — the true destination screenshot, dismissed over the identical live page. */
#cn2-cover { position: fixed; inset: 0; z-index: 2147483000; background: #050607;
  pointer-events: none; animation: cn2Safety 0s linear 3s forwards; }
#cn2-cover img { width: 100vw; height: 100vh; height: 100dvh; object-fit: cover; object-position: top center; display: block; }
#cn2-cover.cn2-leave { opacity: 0; transition: opacity .38s ease; }
@keyframes cn2Safety { to { opacity: 0; visibility: hidden; } }

/* Portal ending (Gate 2.7): approach + entry flash. The destination carries the same light. */
.cn2-portal { position: absolute; inset: 0; overflow: hidden; opacity: 0; z-index: 4; pointer-events: none; }
.cn2-pgroup { position: absolute; left: 50%; top: 50%; width: 62vmin; height: 62vmin;
  margin: -31vmin 0 0 -31vmin; will-change: transform, opacity; }
.cn2-ring { position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 56%, rgba(120,190,255,.28) 63%, rgba(190,225,255,.85) 68%, rgba(139,124,246,.55) 76%, transparent 84%),
    conic-gradient(from 0deg, transparent 0deg, rgba(168,200,255,.35) 24deg, transparent 60deg, rgba(139,124,246,.3) 130deg, transparent 175deg, rgba(168,200,255,.35) 250deg, transparent 300deg, rgba(244,227,187,.25) 335deg, transparent 360deg);
  box-shadow: 0 0 60px 10px rgba(110,180,255,.45), inset 0 0 60px rgba(140,190,255,.5);
  will-change: transform; }
.cn2-core { position: absolute; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #f2f7ff 38%, rgba(214,232,255,.9) 62%, rgba(168,200,255,.35) 82%, transparent 100%);
  box-shadow: 0 0 80px 30px rgba(190,220,255,.55); }
.cn2-streaks { position: absolute; inset: 0; }
.cn2-streak { position: absolute; left: 50%; top: 50%; width: 2px; height: 24vmin; opacity: 0;
  background: linear-gradient(to top, transparent, rgba(195,225,255,.9)); border-radius: 2px; }
.cn2-flash { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none;
  background-color: #d7e6ff;
  background-image: radial-gradient(ellipse 92% 74% at 50% 46%, #ffffff 0%, #eef4ff 42%, #d7e6ff 68%, rgba(168,200,255,.88) 86%, rgba(139,124,246,.6) 100%); }

.cn2-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 3; transition: opacity .18s linear; }

.cn2-retcover { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #d7e6ff radial-gradient(ellipse 92% 74% at 50% 46%, #ffffff 0%, #eef4ff 42%, #d7e6ff 68%, rgba(168,200,255,.88) 86%, rgba(139,124,246,.6) 100%); }

.cn2-retposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cn2-arrive { position: fixed; inset: 0; z-index: 2147483200; background: #d7e6ff radial-gradient(ellipse 92% 74% at 50% 46%, #ffffff 0%, #eef4ff 42%, #d7e6ff 68%, rgba(168,200,255,.88) 86%, rgba(139,124,246,.6) 100%); transition: opacity .55s ease; }
.cn2-arrive-out { opacity: 0; pointer-events: none; }
.cn2-arrposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn2-arrfilm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .16s linear; }