.gate{color:#fff;transition:background .6s var(--ease-premium);background:radial-gradient(110% 90% at 80% 45%,#1d3d63 0%,#142338 48%,#101317 100%);border-radius:28px;position:relative;overflow:hidden}.gate[data-step="2"]{background:radial-gradient(110% 90% at 80% 45%,#234a78 0%,#16283f 48%,#101317 100%)}.gate[data-tone=blue]{background:radial-gradient(100% 90% at 78% 55%,#4a86ec 0%,#2e6be6 40%,#1f58b5 100%)}@media (min-width:640px){.gate{border-radius:40px}}.gate-accent{color:#9db8f0}.gate[data-tone=blue] .gate-accent{color:#cfe0fb}.portal{aspect-ratio:380/540;width:min(100%,380px);margin-inline:auto;position:relative}.portal-arch{background:radial-gradient(circle at 50% 85%, rgb(46 107 230/calc(var(--glow,.45) * .7)) 0%, #2e6be600 65%);transition:background .7s var(--ease-premium);border-radius:50% 50% 28px 28px/35% 35% 28px 28px;grid-template-rows:repeat(15,minmax(0,1fr));grid-template-columns:repeat(11,minmax(0,1fr));place-items:center;padding:3% 1.5%;display:grid;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff24}.portal-dot{width:var(--size);height:var(--size);opacity:var(--opacity);transition:width .7s var(--ease-premium), height .7s var(--ease-premium), opacity .7s var(--ease-premium);background:radial-gradient(circle at 35% 30%,#fff 0%,#a9c4f2 45%,#4f7fc2 100%);border-radius:999px}.gate[data-tone=blue] .portal-dot{background:radial-gradient(circle at 35% 30%,#fff 0%,#e3edfd 50%,#a9c4f2 100%)}.portal-ring{aspect-ratio:1;width:39%;transition:top .9s cubic-bezier(.34, 1.4, .64, 1), width .9s var(--ease-premium), box-shadow .9s var(--ease-premium);background:radial-gradient(circle at 50% 40%,#fff 0%,#e9e6df 75%);border-radius:999px;place-items:center;display:grid;position:absolute;top:86%;left:50%;translate:-50%;box-shadow:0 0 0 10px #ffffff0f,0 24px 60px -10px #9db8f08c}.portal-ring img{width:74%;height:auto}.portal[data-ring=inside] .portal-ring{width:32%;animation:.9s cubic-bezier(.34,1.2,.64,1) ring-hop;top:52%;box-shadow:0 0 0 12px #ffffff14,0 0 80px 10px #9db8f08c}@keyframes ring-hop{0%{transform:translateY(0)scale(1)}45%{transform:translateY(-28%)scale(1.06)}to{transform:translateY(0)scale(1)}}.portal[data-ring=landed] .portal-ring{animation:1.1s cubic-bezier(.34,1.2,.64,1) both ring-land}@keyframes ring-land{0%{opacity:1;top:86%;transform:scale(1)}45%{opacity:1;top:34%;transform:scale(1.05)}to{opacity:0;top:40%;transform:scale(.55)}}.year-card{animation:year-rise .7s var(--ease-premium) .65s both}@keyframes year-rise{0%{opacity:0;transform:translateY(40px)scale(.96)}}.year-grid{grid-template-rows:repeat(7,minmax(0,1fr));grid-template-columns:repeat(53,minmax(0,1fr));grid-auto-flow:column;gap:2px;display:grid}@media (min-width:640px){.year-grid{gap:3px}}.year-dot{aspect-ratio:1;background:#ffffff1a;border-radius:999px;transition:background-color .5s ease-out}.year-dot[data-level]{animation:dot-in .42s var(--ease-premium) both;animation-delay:calc(.9s + var(--i) * 4ms)}.year-dot[data-level="0"]{background:#2c4d78}.year-dot[data-level="1"]{background:#3f6ba8}.year-dot[data-level="2"]{background:#5a8edc}.year-dot[data-level="3"]{background:#86aeea}.year-dot[data-level="4"]{background:#c3d7f6}@keyframes dot-in{0%{opacity:0;transform:scale(.2)}}.gate-rise>*{animation:gate-rise .62s var(--ease-premium) both;animation-delay:calc(var(--r,0) * 90ms + .12s)}@keyframes gate-rise{0%{opacity:0;transform:translateY(18px)}}.handoff-bar{animation:1.4s cubic-bezier(.4,0,.2,1) forwards handoff-bar}@keyframes handoff-bar{0%{width:8%}to{width:92%}}@media (prefers-reduced-motion:reduce){.gate,.portal-arch,.portal-dot,.portal-ring{transition:none}.portal[data-ring] .portal-ring,.year-card,.year-dot[data-level],.gate-rise>*,.handoff-bar{animation:none}.portal[data-ring=landed] .portal-ring{opacity:0}.handoff-bar{width:92%}}