.gate{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));text-align:center;
  touch-action:none;
  transition:opacity .6s ease,visibility .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.no-js .gate{display:none}
.static .gate{background:radial-gradient(ellipse at 50% 45%,var(--bdx) 0%,#1a0308 60%,#000 100%)}
.gate.is-out{opacity:0;visibility:hidden;transform:scale(1.04)}
.gate>*{animation:gate-in 1s cubic-bezier(.2,.7,.2,1) both}
.gate-heart{width:34px;height:34px;color:var(--pink);filter:drop-shadow(0 0 18px rgba(255,120,170,.55));animation-delay:.6s}
.gate-title{
  margin-top:18px;line-height:2;
  font-family:var(--serif);font-size:12px;letter-spacing:.42em;padding-left:.42em;
  text-transform:uppercase;color:rgba(249,223,170,.85);
  animation-delay:.75s;
}
.gate-title i{font-style:normal;margin:0 .3em;color:var(--pink)}
.gate-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,4vh,32px);animation-delay:.9s}
.gate-btn{
  min-width:180px;min-height:54px;padding:14px 30px;
  border:1px solid rgba(249,223,170,.55);border-radius:999px;
  background:rgba(46,5,13,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--champ);font-family:var(--serif);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.gate-btn:hover{background:var(--champ);border-color:var(--champ);color:var(--bdx);transform:translateY(-2px);box-shadow:0 12px 30px rgba(249,223,170,.22)}
.gate-btn:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@keyframes gate-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gated,.gated body{overflow:hidden;overscroll-behavior:none}
@media (max-width:420px){
  .gate-title span{display:block}
  .gate-title i{display:none}
  .gate-btn{min-width:0;flex:1 1 140px}
}
@media (prefers-reduced-motion:reduce){
  .gate>*{animation:none}
  .gate{transition:none}
}