.gate.out{opacity:0;pointer-events:none;transition:opacity .46s ease .10s}

.gate.warp.out,
.gate.lite.out{opacity:1;pointer-events:auto;transition:none}

.gate .gate-aura{
  position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  width:min(580px,96vw);height:min(590px,76vh);
  transform:translate(-50%,-46%);
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(150,244,116,0) 0%, rgba(150,244,116,0) 52%,
      rgba(162,248,126,.42) 76%, rgba(126,232,104,.16) 90%,
      rgba(90,196,74,0) 100%),
    radial-gradient(closest-side at 50% 62%,
      rgba(255,206,124,0) 58%, rgba(255,206,124,.18) 82%,
      rgba(255,206,124,0) 100%);
  filter:blur(24px);
  mix-blend-mode:screen;
  opacity:.62;
  animation:gaura 11s ease-in-out infinite;
}
@keyframes gaura{0%,100%{opacity:.46}50%{opacity:.88}}

.gate .gate-flash{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 46% 40% at 50% 56%,
    rgba(255,206,132,.30) 0%, rgba(230,160,80,.12) 34%, rgba(230,160,80,0) 66%);
}
.gate.go .gate-flash{animation:gflash .66s ease-out both}

.gate .gate-box{

  max-width:clamp(436px, 20.5vw, 620px);

  padding:clamp(34px, 1.75vw, 54px) clamp(34px, 1.75vw, 54px) clamp(22px, 1.15vw, 36px);
  background:
    radial-gradient(ellipse 126% 74% at 50% -12%,
      rgba(255,214,140,.11) 0%, rgba(255,214,140,0) 62%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 32%,rgba(0,0,0,.20)),
    linear-gradient(168deg,rgba(22,26,33,.72),rgba(7,8,11,.90));
  border:1px solid rgba(255,255,255,.13);

  -webkit-backdrop-filter:blur(36px) saturate(.66);
  backdrop-filter:blur(36px) saturate(.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(0,0,0,.30),
    inset 0 -46px 84px -46px rgba(0,0,0,.62),
    0 1px 2px rgba(0,0,0,.55),
    0 30px 70px -22px rgba(0,0,0,.92),
    0 80px 150px -70px rgba(0,0,0,.95),
    0 0 130px rgba(140,220,150,.07);

  outline:1px solid rgba(201,169,97,.15);
  outline-offset:-5px;
  animation:gin .70s cubic-bezier(.22,1,.36,1) backwards;
}

.gate .gate-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  border:0;width:auto;opacity:.8;
  background:linear-gradient(90deg,transparent,
    rgba(255,255,255,.50) 20%,rgba(255,244,214,.80) 50%,
    rgba(255,255,255,.50) 80%,transparent);
}

.gate .gate-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:0;width:auto;height:auto;opacity:.45;
  background:radial-gradient(ellipse 76% 66% at 50% 54%,rgba(150,230,160,.11),transparent 72%);
  animation:gbreath 15s ease-in-out 1.2s infinite;
}
@keyframes gbreath{0%,100%{opacity:.34}50%{opacity:.92}}

.gate .gate-logo{
  display:block;width:clamp(112px, 6.2vw, 180px);height:auto;margin:0 auto 12px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.88)) drop-shadow(0 0 28px rgba(201,169,97,.30));
  animation:gup .58s cubic-bezier(.22,1,.36,1) .05s backwards;
}
.gate h1,
.gate .gate-title{
  margin:0;font-family:var(--f-title);font-size:clamp(24px, 1.3vw, 38px);letter-spacing:clamp(4px, .21vw, 6.4px);

  background:linear-gradient(100deg,#fdf7e6 0%,#ecd9a6 28%,#fff8e4 43%,
                             #e6cd90 60%,#c8a659 78%,#b99a4e 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
  animation:gup .58s cubic-bezier(.22,1,.36,1) .12s backwards,
            gtitle 9s ease-in-out 1.6s infinite;
}
.gate .gate-en{
  margin-top:7px;font-size:clamp(10.5px, .565vw, 16px);letter-spacing:clamp(3.4px, .18vw, 5.4px);color:rgba(255,255,255,.42);
  animation:gup .58s cubic-bezier(.22,1,.36,1) .18s backwards;
}

.gate .gate-rule{
  position:relative;width:clamp(74px, 4.2vw, 118px);height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.80),transparent);
  animation:grule .85s cubic-bezier(.22,1,.36,1) .24s backwards;
}
.gate .gate-tip{
  margin-top:13px;font-size:clamp(14px, .78vw, 22px);color:rgba(255,255,255,.62);line-height:1.72;
  animation:gup .58s cubic-bezier(.22,1,.36,1) .32s backwards;
}

.gate .gate-go{
  --ls:clamp(8px, .45vw, 12px);
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;margin:20px 0 0;padding:clamp(15px, .85vw, 25px) 0;
  font-family:var(--f-title);font-size:clamp(17px, .95vw, 26px);
  color:#2a1c08;cursor:pointer;
  background:linear-gradient(180deg,#f5e0a2,#d0aa52 52%,#a37c26);
  border:1px solid rgba(255,246,220,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,253,240,.82),
    inset 0 -13px 24px -15px rgba(90,60,10,.62),
    0 1px 2px rgba(0,0,0,.50),
    0 12px 30px -14px rgba(0,0,0,.85),
    0 0 22px rgba(255,196,110,.18);
  animation:gup .60s cubic-bezier(.22,1,.36,1) .42s backwards,
            ggo 6s ease-in-out 1.5s infinite;
  transition:filter .18s ease,transform .12s ease;
}

@keyframes ggo{
  0%,100%{box-shadow:
    inset 0 1px 0 rgba(255,253,240,.82),
    inset 0 -13px 24px -15px rgba(90,60,10,.62),
    0 1px 2px rgba(0,0,0,.50),
    0 12px 30px -14px rgba(0,0,0,.85),
    0 0 18px rgba(255,196,110,.14)}
  50%{box-shadow:
    inset 0 1px 0 rgba(255,253,240,.88),
    inset 0 -13px 24px -15px rgba(90,60,10,.62),
    0 1px 2px rgba(0,0,0,.50),
    0 12px 30px -14px rgba(0,0,0,.85),
    0 0 44px rgba(255,196,110,.46)}
}
.gate .gate-go:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,253,240,.92),
    0 1px 2px rgba(0,0,0,.50),
    0 16px 34px -14px rgba(0,0,0,.85),
    0 0 50px rgba(255,196,110,.50);
}
.gate .gate-go:active{transform:translateY(1px);filter:brightness(.97)}
.gate .gate-go:focus-visible{outline:2px solid rgba(255,214,140,.92);outline-offset:3px}
.gate .gate-go .gg-txt{
  letter-spacing:var(--ls);
  margin-right:calc(var(--ls) * -1);
}

.gate .gate-foot{
  margin-top:16px;padding-top:13px;border-top:1px solid rgba(201,169,97,.20);
  font-size:clamp(13px, .63vw, 18px);letter-spacing:clamp(1.4px, .075vw, 2.2px);color:rgba(255,255,255,.55);
  animation:gup .58s cubic-bezier(.22,1,.36,1) .52s backwards;
}
.gate .gate-note{
  margin-top:7px;font-size:clamp(11.5px, .56vw, 16px);letter-spacing:clamp(.8px, .04vw, 1.3px);color:rgba(255,255,255,.34);
  animation:gup .58s cubic-bezier(.22,1,.36,1) .58s backwards;
}

.gate.go .gate-box{animation:gout .45s cubic-bezier(.5,0,.75,.2) both}
.gate.go .gate-aura{animation:gaura-out .70s ease-out both}
.gate.go .gate-img{animation:gzoom 2.05s cubic-bezier(.36,0,.72,.2) both}
.gate.go .gate-go{pointer-events:none}

.gate .gate-box{z-index:5}
.gate .gate-flash{z-index:6}

@keyframes gout{
  from{opacity:1;transform:none}
  55%{opacity:.88;transform:scale(.90)}
  to{opacity:0;transform:scale(.62)}
}
@keyframes gaura-out{
  0%{opacity:.36;transform:translate(-50%,-46%) scale(1)}
  30%{opacity:.62;transform:translate(-50%,-46%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-46%) scale(1.28)}
}

@keyframes gflash{0%{opacity:0}12%{opacity:.30}100%{opacity:0}}

@keyframes gzoom{
  from{transform:translate(calc(-50% + var(--gx)),-50%) scale(1)}
  to{transform:translate(calc(-50% + var(--gx)),-50%) scale(1.26)}
}

@keyframes gin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gbreath{0%,100%{opacity:.34}50%{opacity:.92}}
@keyframes gup{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes grule{from{width:0;opacity:0}to{width:74px;opacity:1}}
@keyframes gtitle{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

.gate .gate-warp{display:none}
.gate.warp .gate-warp,
.gate.lite .gate-warp{display:block}

html.wf-warp{overflow:hidden}

.gate .gw-neb{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 58% 48% at 50% 50%, rgba(106,92,255,.40), rgba(106,92,255,0) 70%),
    radial-gradient(ellipse 44% 38% at 27% 31%, rgba(201,169,97,.34), rgba(201,169,97,0) 72%),
    radial-gradient(ellipse 68% 58% at 62% 21%, rgba(38,120,190,.30), rgba(38,120,190,0) 76%),
    radial-gradient(ellipse 38% 32% at 50% 50%, rgba(255,238,205,.16), rgba(255,238,205,0) 74%);
  filter:blur(20px);
  mix-blend-mode:screen;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.gate.warp .gw-neb{animation:gwNeb 2.05s cubic-bezier(.42,0,.78,.30) both}

.gate .gw-streaks{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  transform-origin:50% 50%;
  mix-blend-mode:screen;

  filter:blur(2.6px);
  -webkit-mask-image:radial-gradient(closest-side,transparent 0%,#000 10%,#000 74%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 0%,#000 10%,#000 74%,transparent 100%);
  will-change:transform,opacity;
}
.gate.warp .gw-streaks{animation:gwPush 2.05s cubic-bezier(.42,0,.78,.30) both}

@keyframes gwPush{
  0%{opacity:0;transform:scale(1) rotate(0deg)}
  18%{opacity:0}
  32%{opacity:1}
  86%{opacity:.9}
  100%{opacity:0;transform:scale(2.75) rotate(11deg)}
}

.gate .gw-streaks i{
  position:absolute;left:50%;top:50%;
  width:4px;height:var(--len);
  margin-left:-2px;margin-top:calc(var(--len) * -1);
  transform-origin:50% 100%;
  border-radius:2px;

  background:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,
    var(--c) 64%,#fff6e2 100%);
  opacity:var(--o);
  will-change:transform,opacity;
  animation:gwFly var(--dur) linear infinite;
  animation-delay:var(--d);
}

.gate .gw-streaks i.dot{
  width:3px;height:3px;margin-left:-1.5px;margin-top:-1.5px;border-radius:50%;
  background:var(--c);
}

@keyframes gwFly{
  0%{transform:rotate(var(--a)) translateY(calc(var(--r0) * -1)) scaleY(.3);opacity:0}
  12%{opacity:var(--o)}
  62%{opacity:calc(var(--o) * .95)}
  100%{transform:rotate(var(--a)) translateY(-1180px) scaleY(3);opacity:0}
}

.gate .gate-warp::before{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 76% at 50% 50%,
    rgba(3,5,9,0) 0%, rgba(3,5,9,0) 32%, rgba(3,5,9,.40) 60%,
    rgba(3,5,9,.80) 84%, rgba(3,5,9,.93) 100%);
}
.gate.warp .gate-warp::before{animation:gvig 2.05s cubic-bezier(.4,0,.7,.3) both}
@keyframes gvig{0%{opacity:0} 34%{opacity:.26} 68%{opacity:.62} 100%{opacity:.92}}

.gate .gw-core{
  position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;
  display:flex;align-items:center;justify-content:center;
}

.gate .gw-core::before{
  content:"";position:absolute;inset:0;

  background:radial-gradient(ellipse 78% 78% at 50% 50%,
    #ffdfae 0%, #e3ab66 46%, rgba(165,110,52,.52) 76%, rgba(120,78,36,0) 100%);
  opacity:0;
}
.gate .gw-core::after{
  content:"";display:block;
  width:min(74vmax,1300px);aspect-ratio:1;border-radius:50%;

  background:radial-gradient(closest-side,
    #ffefcf 0%, rgba(255,227,180,.92) 12%, rgba(255,216,158,.58) 22%,
    rgba(232,180,110,.30) 36%, rgba(200,140,70,.11) 55%,
    rgba(170,118,58,0) 76%, rgba(170,118,58,0) 100%);
  transform:scale(.03);
  will-change:transform;
}
.gate.warp .gw-core{animation:gwCoreOp 2.05s cubic-bezier(.4,0,.7,.3) both}
.gate.warp .gw-core::before{animation:gwVeil 2.05s cubic-bezier(.6,0,.9,.45) both}
.gate.warp .gw-core::after{animation:gwCoreSz 2.05s cubic-bezier(.5,0,.9,.35) both}

@keyframes gwVeil{0%,84%{opacity:0} 96%{opacity:.34} 100%{opacity:.46}}
@keyframes gwNeb{
  0%{opacity:0;transform:scale(.85) rotate(0deg)}
  10%{opacity:.80}
  64%{opacity:.76}
  100%{opacity:0;transform:scale(2.5) rotate(-9deg)}
}

@keyframes gwCoreOp{
  0%{opacity:0} 18%{opacity:.26} 34%{opacity:.48} 52%{opacity:.66} 72%{opacity:.74} 100%{opacity:.78}
}
@keyframes gwCoreSz{
  0%{transform:scale(.04)} 34%{transform:scale(.14)}
  58%{transform:scale(.52)} 80%{transform:scale(1.30)} 100%{transform:scale(3.6)}
}

@media(max-width:820px){
  .gate .gate-box{padding:26px 22px 18px}
  .gate .gate-title{font-size:21px;letter-spacing:3px}
  .gate .gate-logo{width:96px}
  .gate .gate-go{padding:14px 0;font-size:16px;--ls:6px}
  .gate .gate-tip{font-size:13px;line-height:1.68}
}
@media(max-width:560px){
  .gate{padding:20px 16px}
  .gate .gate-box{padding:22px 18px 15px}
  .gate .gate-title{font-size:19px;letter-spacing:2px}
  .gate .gate-logo{width:86px;margin-bottom:10px}
  .gate .gate-en{font-size:9.5px;letter-spacing:2.6px}
  .gate .gate-go{padding:13px 0;font-size:15.5px;--ls:5px}
  .gate .gate-tip{font-size:13px;margin-top:11px}

  .gate .gate-box .gate-foot{font-size:11.5px;letter-spacing:.4px;margin-top:14px}
  .gate .gate-note{font-size:10.5px;line-height:1.7}
  .gate .gate-fan .gf-wx{font-size:12.5px;letter-spacing:1px}
  .gate .gate-fan .gf-sub{font-size:11px;letter-spacing:1.2px}
  .gate .gate-aura{width:112vw;height:60vh}

  .gate .gw-core::after{width:118vmax}
  .gate .gw-neb{filter:blur(20px)}
}

@media(prefers-reduced-motion:reduce){
  html:where(:not(.wf-full)) .gate,
  html:where(:not(.wf-full)) .gate *{animation:none!important;transition:none!important}
  html:where(:not(.wf-full)) .gate.go .gate-box{opacity:0}
  html:where(:not(.wf-full)) .gate .gate-warp{display:none!important}
}

.gate.lite .gate-warp{display:block!important}
.gate.lite .gw-neb,
.gate.lite .gw-streaks,
.gate.lite .gate-warp::before{display:none!important}
.gate.lite .gate-img{animation:none!important}
.gate.lite .gw-core{animation:glCoreOp 1.30s cubic-bezier(.4,0,.65,.3) both!important}
.gate.lite .gw-core::before{animation:glVeil 1.30s cubic-bezier(.5,0,.75,.4) both!important}
.gate.lite .gw-core::after{animation:glCoreSz 1.30s cubic-bezier(.4,0,.65,.3) both!important}

.gate.lite.go .gate-box{
  opacity:0;transform:scale(.96);
  transition:opacity .34s ease,transform .34s ease!important;
}

@keyframes glCoreOp{0%{opacity:0} 24%{opacity:.40} 62%{opacity:.66} 100%{opacity:.76}}
@keyframes glCoreSz{0%{transform:scale(.55)} 62%{transform:scale(.86)} 100%{transform:scale(1.15)}}

@keyframes glVeil{0%,42%{opacity:0} 80%{opacity:.32} 100%{opacity:.46}}

.gate .gate-title{letter-spacing:5px}
.gate .gate-en{letter-spacing:4.4px;color:rgba(233,216,176,.52)}
.gate .gate-rule::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#f3e2b0,#c8a659);
  box-shadow:0 0 7px rgba(231,207,155,.75), 0 0 2px rgba(255,246,220,.9);
}
.gate .gate-go{overflow:hidden}
.gate .gate-go::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.58) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.4,0,.2,1);
}
.gate .gate-go:hover::after{transform:translateX(130%)}
.gate .gate-go:hover{transform:translateY(-2px)}

.gate .gate-fan{
  margin-top:11px;padding-top:10px;border-top:1px dashed rgba(201,169,97,.22);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  animation:gup .58s cubic-bezier(.22,1,.36,1) .64s backwards;
}
.gate .gate-fan .gf-wx{
  font-size:clamp(13px, .7vw, 20px);letter-spacing:clamp(1.2px, .07vw, 2px);color:rgba(233,216,176,.82);
  white-space:nowrap;
}

.gate .gate-fan b{
  font-size:clamp(13.5px, .72vw, 21px);
  color:#eccf8a;font-weight:600;letter-spacing:.8px;
  text-shadow:0 0 14px rgba(236,207,138,.30);
}
.gate .gate-fan .gf-sub{
  font-size:clamp(11.5px, .62vw, 18px);letter-spacing:clamp(1.4px, .08vw, 2.4px);color:rgba(255,255,255,.44);
  white-space:nowrap;
}