.lg-gate {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 3rem 1rem;
overflow: hidden;
background: linear-gradient(160deg, var(--surface-pink-9) 0%, var(--surface-pink-9) 45%, var(--surface-green-9) 100%);
}
.lg-gate::before {
content: '';
position: absolute;
inset: -30% -20% auto -20%;
height: 62vh;
border-radius: 0 0 50% 50%;
background: linear-gradient(120deg, var(--surface-pink-8) 0%, var(--surface-pink-8) 38%, var(--surface-green-8) 72%, var(--surface-green-6) 100%);
opacity: 0.55;
animation: lgSky 14s ease-in-out infinite alternate;
}
.lg-sky {
position: absolute;
inset: 0;
pointer-events: none;
}
.lg-star {
position: absolute;
color: var(--ink-yellow-4);
font-size: 1.1rem;
opacity: 0;
animation: lgTwinkle 3.4s ease-in-out infinite;
}
.lg-bubble {
position: absolute;
bottom: -40px;
border-radius: 50%;
opacity: 0.55;
animation: lgRise 11s linear infinite;
}
.lg-bubble.pink {
background: radial-gradient(circle at 35% 30%, var(--surface-neutral-9), var(--surface-pink-8) 70%);
}
.lg-bubble.green {
background: radial-gradient(circle at 35% 30%, var(--surface-neutral-9), var(--surface-green-7) 70%);
}
.lg-card {
position: relative;
width: min(430px, 100%);
padding: 2.2rem 2rem 1.6rem;
border-radius: 30px;
text-align: center;
background: var(--surface-neutral-9-veil);
border: 2px solid var(--line-pink-8);
box-shadow:
0 6px 0 var(--line-pink-8),
0 24px 60px var(--line-pink-4-veil);
backdrop-filter: blur(6px);
animation: lgCardIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lg-mascot {
width: 128px;
height: 128px;
object-fit: contain;
margin: -5.2rem auto 0.4rem;
display: block;
filter: drop-shadow(0 10px 14px var(--surface-pink-4-veil));
animation: lgFloat 4.5s ease-in-out infinite;
}
.lg-eyebrow {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.14em;
color: var(--ink-pink-4);
font-weight: 700;
}
.lg-card h1 {
margin: 0.4rem 0 0.2rem;
font-size: clamp(1.7rem, 5vw, 2.1rem);
line-height: 1.15;
color: var(--ink-pink-2);
}
.lg-sub {
margin: 0 0 1.4rem;
color: var(--ink-pink-3);
}
.lg-nowrap {
white-space: nowrap;
}
.lg-foot {
margin: 1.2rem 0 0;
font-size: 0.86rem;
color: var(--ink-neutral-4);
}
.lg-form {
display: grid;
gap: 0.95rem;
text-align: left;
}
.lg-field {
display: grid;
gap: 0.35rem;
font-weight: 700;
color: var(--ink-pink-2);
}
.lg-field input {
width: 100%;
min-height: 50px;
padding: 0.7rem 1rem;
border-radius: 16px;
border: 2px solid var(--line-pink-8);
background: var(--surface-pink-9);
font: inherit;
font-weight: 400;
color: var(--ink-pink-2);
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.lg-field input:focus-visible {
outline: none;
border-color: var(--line-pink-5);
box-shadow: 0 0 0 4px var(--line-pink-5-veil);
}
.lg-pass {
position: relative;
display: block;
}
.lg-pass input {
padding-right: 3.2rem;
}
.lg-eye {
position: absolute;
right: 0.45rem;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: 0;
border-radius: 12px;
background: transparent;
font-size: 1.15rem;
cursor: pointer;
}
.lg-eye:hover,
.lg-eye:focus-visible {
background: var(--surface-pink-9);
}
.lg-keep {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.95rem;
color: var(--ink-pink-3);
cursor: pointer;
}
.lg-keep input {
width: 20px;
height: 20px;
accent-color: var(--surface-green-3);
}
.lg-hint {
margin: 0;
padding: 0.8rem 1rem;
border-radius: 14px;
background: var(--surface-yellow-9);
color: var(--ink-amber-2);
font-size: 0.95rem;
}
.lg-error {
margin: 0;
padding: 0.7rem 1rem;
border-radius: 14px;
background: var(--surface-pink-9);
border: 1px solid var(--line-pink-8);
color: var(--ink-pink-3);
font-size: 0.95rem;
}
.lg-btn {
min-height: 54px;
border: 0;
border-radius: 999px;
font: inherit;
font-weight: 800;
font-size: 1.1rem;
color: var(--ink-neutral-9);
cursor: pointer;
background: linear-gradient(120deg, var(--surface-pink-6), var(--surface-pink-5) 55%, var(--surface-pink-4));
box-shadow: 0 5px 0 var(--line-pink-3);
transition:
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.2s;
}
.lg-btn:hover {
transform: translateY(-2px);
box-shadow: 0 7px 0 var(--line-pink-3);
}
.lg-btn:active {
transform: translateY(3px);
box-shadow: 0 2px 0 var(--line-pink-3);
}
.lg-btn:disabled {
cursor: progress;
opacity: 0.8;
}
.lg-btn.busy span::after {
content: '…';
}
.lg-shake {
animation: lgShake 0.42s ease;
}
.lg-welcome {
animation: lgWelcome 0.6s ease forwards;
}
@keyframes lgSky {
to {
transform: translateX(6%) rotate(3deg);
}
}
@keyframes lgTwinkle {
0%,
100% {
opacity: 0;
transform: scale(0.6);
}
50% {
opacity: 0.9;
transform: scale(1.15);
}
}
@keyframes lgRise {
to {
transform: translateY(-115vh);
opacity: 0;
}
}
@keyframes lgCardIn {
from {
opacity: 0;
transform: translateY(24px) scale(0.97);
}
}
@keyframes lgFloat {
0%,
100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-9px) rotate(2deg);
}
}
@keyframes lgShake {
20%,
60% {
transform: translateX(-8px);
}
40%,
80% {
transform: translateX(8px);
}
}
@keyframes lgWelcome {
to {
transform: scale(1.03);
box-shadow:
0 6px 0 var(--line-green-8),
0 24px 60px var(--line-green-3-veil);
border-color: var(--line-green-7);
}
}
@media (prefers-reduced-motion: reduce) {
.lg-gate::before,
.lg-star,
.lg-bubble,
.lg-card,
.lg-mascot,
.lg-shake,
.lg-welcome {
animation: none;
}
.lg-star,
.lg-bubble {
display: none;
}
}
@media (max-width: 420px) {
.lg-card {
padding: 2rem 1.2rem 1.4rem;
border-radius: 24px;
}
}