/* The intro gate (assets/intro.js): the site's own background, two calm cards — the classic site or the digital copy. */
html.gate-on body { overflow: hidden; }
html.gate-on:not(.gate-ready) body > *:not(script) { visibility: hidden; }   /* no flash of the page before the gate is drawn */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto; padding: 24px; box-sizing: border-box; color: var(--text);
  background-color: var(--bg); background-image: radial-gradient(var(--dot, rgba(91,207,165,.14)) 1.2px, transparent 1.6px); background-size: 22px 22px; }
.gate::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(600px 380px at 50% 40%, var(--accent-glow), transparent 70%); opacity: .6; }
.gate-in { position: relative; width: min(980px, 100%); animation: gateIn .9s cubic-bezier(.16,1,.3,1) both; }
.gate-top { text-align: center; }
.gate-top span { display: block; font-size: 18px; color: var(--text-2); }
.gate-top h1 { margin: 8px 0 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.25; font-weight: 700; }
html[lang="en"] .gate-top h1 { letter-spacing: -0.02em; }
.gate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: stretch; margin-top: 44px; }

.gate-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 30px 30px; border-radius: 28px; cursor: pointer;
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 85%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text); font: inherit; transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .45s, opacity .4s; }
.gate-card:hover, .gate-card:focus-visible { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 30px 60px -30px var(--accent-glow); outline: none; }
.gate-row:hover .gate-card:not(:hover) { opacity: .7; }
.gate-pic { position: relative; width: 112px; height: 112px; margin-bottom: 14px; border-radius: 50%; overflow: hidden; background: var(--raised); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line-strong); }
.gate-card.digi .gate-pic { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent), 0 0 30px var(--accent-glow); }
.gate-pic img, .gate-pic canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); box-shadow: 0 0 10px 2px var(--accent); animation: gateScan 3s ease-in-out infinite; }
@keyframes gateScan { 0%, 100% { top: 8%; } 50% { top: 92%; } }
.gate-card small { font-size: 14px; font-weight: 600; color: var(--text-3); }
.gate-card.digi small { color: var(--accent); }
.gate-card b { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
.gate-card em { max-width: 24em; margin-bottom: 18px; font-style: normal; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.gate-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--line-strong);
  font-size: 16px; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.gate-card.digi .gate-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gate-card.real:hover .gate-go { background: var(--text); border-color: var(--text); color: var(--bg); }
.gate-or { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; color: var(--text-3); }
.gate-or i { flex: 1; width: 1px; background: var(--line-strong); }
.gate-skip { position: fixed; z-index: 2; top: 18px; inset-inline-end: 18px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; }
.gate-skip:hover { color: var(--text); border-color: var(--accent); }
@keyframes gateIn { from { opacity: 0; transform: translateY(18px); } }
/* leaving: the chosen card comes forward, the gate fades */
.gate.out { pointer-events: none; animation: gateOut .8s cubic-bezier(.16,1,.3,1) forwards; }
.gate.out.to-real .gate-card.digi, .gate.out.to-digi .gate-card.real { opacity: 0; transform: scale(.96); }
.gate.out.to-real .gate-card.real, .gate.out.to-digi .gate-card.digi { transform: scale(1.04); border-color: var(--accent); }
@keyframes gateOut { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  .gate { place-items: start center; padding: 64px 16px 24px; }
  .gate-top h1 { font-size: 28px; }
  .gate-row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; }
  .gate-or { flex-direction: row; } .gate-or i { width: auto; height: 1px; }
  .gate-card { padding: 24px 20px 22px; }
  .gate-pic { width: 84px; height: 84px; margin-bottom: 8px; }
  .gate-card em { font-size: 15px; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gate-in, .gate.out, .gate-scan { animation: none; } .gate-card { transition: none; } }
/* a returning visitor: last time's choice is marked; the gate appears quickly */
.gate-in { animation-duration: .5s; }
.gate-card { position: relative; }
.gate-card.last { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.gate-last { position: absolute; top: 14px; inset-inline-start: 14px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.gate.out { animation-duration: .55s; }