.identity { position: relative; isolation: isolate; }
.gate-stage { position: relative; width: 150px; height: 74px; margin: 0 auto 28px; }
.gate-trigger, .build-trigger { appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gate-trigger { display: block; position: relative; width: 100%; height: 100%; border-radius: 12px; }
.gate-trigger .gate { position: relative; z-index: 2; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.build-trigger { display: inline; line-height: inherit; border-radius: 8px; user-select: none; }
.gate-trigger:focus-visible, .build-trigger:focus-visible { outline: 2px solid #5d7b63; outline-offset: 7px; }
.gate-trigger:hover { filter: brightness(1.08); }
.gate-glow { position: absolute; z-index: 1; inset: 25% 17% 2%; border-radius: 50%; background: radial-gradient(ellipse at 50% 65%, #ffcd59a6, #ffd97138 45%, transparent 72%); opacity: 0; pointer-events: none; }
.gate-door { position: absolute; z-index: 1; left: 42%; top: 51%; width: 16%; height: 30%; display: flex; overflow: hidden; border-radius: 50% 50% 0 0; perspective: 70px; opacity: 0; background: #ffdd80; pointer-events: none; }
.gate-door i { display: block; width: 50%; height: 100%; background: #456548; border: 1px solid #d9ba68; transform-origin: left center; }
.gate-door i + i { transform-origin: right center; }
.egg-lantern { position: absolute; z-index: 3; top: 57%; width: 24px; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 22px; line-height: 1.1; opacity: 0; transform-origin: 50% -5px; pointer-events: none; }
.egg-lantern.left { left: 11%; }
.egg-lantern.right { right: 11%; }
.build-stage { position: absolute; z-index: 4; width: 100%; aspect-ratio: 1942 / 809; top: 50%; transform: translateY(-50%); pointer-events: none; }
.build-block { position: absolute; width: 25%; height: 33.3334%; background-image: url("assets/gate.png"); background-size: 400% 300%; background-repeat: no-repeat; opacity: 0; animation: assemble-block 2100ms var(--delay) ease-in-out both; }
.egg-confetti { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.gold-fleck { position: absolute; top: 20%; width: 5px; height: 8px; border-radius: 1px; background: #c6993e; opacity: 0; animation: gold-fall 1800ms var(--delay) ease-out both; }
.gold-fleck:nth-child(3n) { width: 4px; height: 4px; background: #e8c56e; }
.egg-message { position: absolute; left: 0; right: 0; top: calc(100% + 7px); margin: 0; font-size: .9375rem; line-height: 1.4; color: #856024; pointer-events: none; }
.egg-message:empty { display: none; }
.egg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.identity[data-egg="lantern"] .gate-glow { animation: warm-light 2000ms ease-in-out both; }
.identity[data-egg="lantern"] .egg-lantern { animation: lantern-sway 2000ms ease-in-out both; }
.identity[data-egg="lantern"] .egg-lantern.right { animation-direction: reverse; }
.identity[data-egg="build"] .gate { animation: gate-return 2600ms ease-in-out both; }
.identity[data-egg="lucky"] .gate-glow { animation: warm-light 2800ms ease-in-out both; }
.identity[data-egg="lucky"] .gate-door { animation: door-light 2800ms ease both; }
.identity[data-egg="lucky"] .gate-door i { animation: door-open-left 2800ms ease-in-out both; }
.identity[data-egg="lucky"] .gate-door i + i { animation-name: door-open-right; }
.identity[data-egg="lucky"] .egg-message { animation: wish-appear 2800ms ease both; }
@keyframes warm-light { 0%,100% { opacity: 0; transform: scale(.8); } 20%,75% { opacity: 1; transform: scale(1.15); } }
@keyframes lantern-sway { 0%,100% { opacity: 0; transform: rotate(0); } 15% { opacity: 1; transform: rotate(9deg); } 38% { opacity: 1; transform: rotate(-8deg); } 62% { opacity: 1; transform: rotate(5deg); } 83% { opacity: 1; transform: rotate(-2deg); } }
@keyframes assemble-block { 0% { opacity: 0; transform: translate(var(--start-x),var(--start-y)) rotate(var(--turn)); background-color: #e8dabb; box-shadow: 3px 4px 0 #b89c633b; } 18% { opacity: 1; } 42%,69% { opacity: 1; transform: translate(0,0) rotate(0); background-color: transparent; box-shadow: 0 0 0 transparent; } 100% { opacity: 0; transform: translate(var(--scatter-x),var(--scatter-y)) rotate(var(--turn)); } }
@keyframes gate-return { 0%,68% { opacity: 0; } 95%,100% { opacity: 1; } }
@keyframes gold-fall { 0% { opacity: 0; transform: translate(0,-12px) rotate(0); } 15% { opacity: .9; } 75% { opacity: .65; } 100% { opacity: 0; transform: translate(var(--drift),var(--fall)) rotate(var(--spin)); } }
@keyframes door-light { 0%,100% { opacity: 0; } 10%,90% { opacity: 1; } }
@keyframes door-open-left { 0%,12% { transform: rotateY(0); } 40%,85% { transform: rotateY(-78deg); } 100% { transform: rotateY(-78deg); } }
@keyframes door-open-right { 0%,12% { transform: rotateY(0); } 40%,85% { transform: rotateY(78deg); } 100% { transform: rotateY(78deg); } }
@keyframes wish-appear { 0%,100% { opacity: 0; } 18%,86% { opacity: 1; } }
.identity.is-reduced *, .identity.is-reduced *::before, .identity.is-reduced *::after { animation: none !important; transition: none !important; }
.identity.is-reduced[data-egg] .gate { opacity: 1; }
.identity.is-reduced[data-egg="lantern"] .gate-glow, .identity.is-reduced[data-egg="lucky"] .gate-glow, .identity.is-reduced[data-egg="lantern"] .egg-lantern { opacity: 1; }
.identity.is-reduced[data-egg="lucky"] .gate-door { opacity: 1; }
.identity.is-reduced[data-egg="lucky"] .gate-door i { transform: rotateY(-78deg); }
.identity.is-reduced[data-egg="lucky"] .gate-door i + i { transform: rotateY(78deg); }
@media (max-width: 600px) { .gate-stage { width: 116px; height: 58px; margin-bottom: 24px; } .egg-lantern { width: 20px; font-size: 18px; } .egg-message { top: calc(100% + 4px); font-size: .8125rem; } }
@media (max-height: 540px) and (min-width: 601px) { .gate-stage { width: 100px; height: 48px; margin-bottom: 14px; } .egg-lantern { width: 18px; font-size: 16px; } .egg-message { top: calc(100% + 1px); font-size: .8125rem; line-height: 1.1; } }
@media (prefers-reduced-motion: reduce) { .identity *, .identity *::before, .identity *::after { animation: none !important; transition: none !important; } }