/* Unigate — "enter the gate" intro overlay for app pages.
   A dark gate screen with the pagoda mark + Enter button; on click it
   dissolves (fade + scale + blur) to reveal the page underneath. */

#unigate-gate{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; text-align:center; padding:24px;
  font-family:"Barlow",ui-sans-serif,system-ui;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(232,112,42,.22), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(108,180,234,.10), transparent 60%),
    linear-gradient(180deg,#0b0f14 0%,#10161b 60%,#0b0f14 100%);
  transition:opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1), filter .7s ease;
  will-change:opacity,transform,filter;
}
#unigate-gate.gate-dissolve{
  opacity:0; transform:scale(1.06); filter:blur(8px); pointer-events:none;
}

/* subtle rings behind the mark, like an opening portal */
#unigate-gate .gate-halo{
  position:absolute; width:min(70vmin,520px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(232,112,42,.14), transparent 62%);
  filter:blur(6px); animation:gate-pulse 4.5s ease-in-out infinite;
}
@keyframes gate-pulse{ 0%,100%{transform:scale(1);opacity:.75} 50%{transform:scale(1.08);opacity:1} }

#unigate-gate .gate-mark{
  width:104px; height:104px; object-fit:contain;
  /* black pagoda PNG → luminous near-white on the dark screen */
  filter:invert(1) brightness(1.9) drop-shadow(0 8px 30px rgba(232,112,42,.45));
  position:relative;
}
#unigate-gate .gate-title{
  font-family:"Instrument Serif","Playfair Display",serif;
  font-size:clamp(38px,7vw,68px); line-height:1; color:#f6f8fb; font-weight:400; letter-spacing:.5px;
  position:relative;
}
#unigate-gate .gate-sub{
  max-width:30ch; font-size:14px; line-height:1.6; color:#a9b6c4; font-weight:300;
  position:relative;
}
#unigate-gate .gate-enter{
  margin-top:6px; position:relative;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; border:none; cursor:pointer;
  font-family:"Barlow"; font-weight:600; font-size:16px; color:#fff;
  background:#e8702a; border-radius:9999px;
  box-shadow:0 14px 40px -12px rgba(232,112,42,.7);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
#unigate-gate .gate-enter:hover{ transform:translateY(-1px) scale(1.03); background:#d4611f; box-shadow:0 18px 48px -12px rgba(232,112,42,.85); }
#unigate-gate .gate-enter svg{ width:17px; height:17px; transition:transform .2s ease; }
#unigate-gate .gate-enter:hover svg{ transform:translateX(3px); }

/* staircase entrance of the gate contents */
#unigate-gate .gate-halo{ animation-delay:0s; }
#unigate-gate .gate-in{ opacity:0; transform:translateY(16px); animation:gate-rise .7s cubic-bezier(.22,1,.36,1) forwards; }
#unigate-gate .gate-mark.gate-in{ animation-delay:.05s; }
#unigate-gate .gate-title.gate-in{ animation-delay:.18s; }
#unigate-gate .gate-sub.gate-in{ animation-delay:.30s; }
#unigate-gate .gate-enter.gate-in{ animation-delay:.42s; }
@keyframes gate-rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  #unigate-gate, #unigate-gate .gate-in, #unigate-gate .gate-halo{ transition:opacity .3s ease; animation:none; opacity:1; transform:none; }
}