html.entry-open{overflow:hidden}
#entrance{--entry-duration:5800ms;--entry-exit:550ms;position:fixed;inset:0;box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:radial-gradient(ellipse at 50% 46%,#f7e5df 0%,#fbf2eb 40%,#fcf8f3 75%);color:#644b42;overflow:hidden}
#entrance[open]{display:grid;place-items:center;animation:entrance-out var(--entry-exit) var(--entry-duration) ease-in forwards}
#entrance::backdrop{background:#fcf8f3}
#entrance .entrance-skip{position:absolute;right:clamp(20px,4vw,54px);top:clamp(20px,4vw,44px);z-index:2;width:44px;height:44px;padding:0;border:1px solid #dec8bc;border-radius:50%;background:#fffaf6a8;color:#876c60;display:grid;place-items:center}
#entrance .entrance-skip:hover{background:#fffaf6;border-color:#bc8a90}
.entrance-content{box-sizing:border-box;width:min(650px,100%);padding:0 14px;animation:entry-camera var(--entry-duration) linear both}
.entrance-stage{position:relative;width:min(520px,calc(100vw - 28px));height:auto;aspect-ratio:1.55;margin:0 auto;isolation:isolate}
.entrance-ring{position:absolute;inset:8% 8% 1%;border:1px dashed #d9b6a8;border-radius:50%;opacity:.65;animation:entry-orbit var(--entry-duration) ease-in-out both}
.entrance-halo{position:absolute;inset:16% 20%;border-radius:50%;background:#e7b3b848;animation:entry-halo var(--entry-duration) both;z-index:-1}
.entrance-actor{position:absolute;width:42%;top:23%;will-change:transform}
.entrance-dot{left:7%;animation:entry-dot-travel var(--entry-duration) linear both}
.entrance-bot{right:7%;animation:entry-bot-travel var(--entry-duration) linear both}
.entrance-body{transform-origin:50% 85%;will-change:transform}
.entrance-dot .entrance-body{animation:entry-dot-body var(--entry-duration) ease-in-out both}
.entrance-bot .entrance-body{animation:entry-bot-body var(--entry-duration) ease-in-out both}
.entrance-character{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 5px #916c4a15)}
.entrance-bot .entrance-character{transform:scaleX(-1)}
.entrance-shadow{position:absolute;bottom:18%;width:29%;height:4%;border-radius:50%;background:#9d78652e;filter:blur(4px)}
.entrance-shadow-dot{left:13.5%;animation:entry-shadow-dot var(--entry-duration) linear both}
.entrance-shadow-bot{right:13.5%;animation:entry-shadow-bot var(--entry-duration) linear both}
.entrance-landing{position:absolute;bottom:18%;width:24%;height:6%;border:2px solid #bca48f70;border-radius:50%;opacity:0;pointer-events:none}
.entrance-landing-dot{left:17%;animation:entry-land-dot var(--entry-duration) ease-out both}
.entrance-landing-bot{right:17%;animation:entry-land-bot var(--entry-duration) ease-out both}
.entrance-heart{position:absolute;left:50%;top:23%;color:#cf8391;font-size:42px;line-height:1;transform:translateX(-50%);animation:entry-heart var(--entry-duration) both;filter:drop-shadow(0 4px 8px #ce879438)}
.entrance-burst{position:absolute;left:50%;top:28%;width:0;height:0}
.entrance-burst i{position:absolute;font-style:normal;color:#d48d9c;font-size:23px;line-height:1;opacity:0;animation:entry-particle var(--entry-duration) var(--lag) both}
.entrance-burst i:nth-child(3n){color:#be9a7b;font-size:25px}

/* Travel, deformation and ground contact use independent synchronized tracks. */
@keyframes entry-dot-travel{
0%{opacity:0;transform:translate(-95%,20%)}3%{opacity:1;transform:translate(-80%,-9%)}9%{transform:translate(-48%,-44%)}17%{transform:translate(-18%,0)}
22%{transform:translate(-9%,-12%)}27%{transform:translate(-5%,0)}33%{transform:translate(-12%,5%)}43%{transform:translate(5%,-37%)}
51%{transform:translate(17%,0)}57%{transform:translate(-4%,-15%)}63%{transform:translate(0,0)}69%{transform:translate(12%,-7%)}75%{transform:translate(12%,0)}
82%{transform:translate(12%,-3%)}88%{transform:translate(12%,0)}94%{transform:translate(12%,-1.5%)}100%{opacity:1;transform:translate(12%,0)}}
@keyframes entry-bot-travel{
0%,5%{opacity:0;transform:translate(95%,18%)}10%{opacity:1;transform:translate(77%,-13%)}17%{transform:translate(40%,-37%)}25%{transform:translate(12%,0)}
30%{transform:translate(5%,-10%)}35%{transform:translate(0,0)}40%{transform:translate(9%,5%)}47%{transform:translate(-6%,-25%)}
51%{transform:translate(-14%,0)}57%{transform:translate(4%,-12%)}63%{transform:translate(0,0)}69%{transform:translate(-12%,-7%)}75%{transform:translate(-12%,0)}
82%{transform:translate(-12%,-3%)}88%{transform:translate(-12%,0)}94%{transform:translate(-12%,-1.5%)}100%{opacity:1;transform:translate(-12%,0)}}
@keyframes entry-dot-body{
0%{transform:rotate(-25deg) scale(.85,1.15)}9%{transform:rotate(-12deg) scale(.95,1.06)}17%{transform:rotate(7deg) scale(1.2,.8)}22%{transform:rotate(-6deg) scale(.94,1.08)}27%{transform:rotate(0) scale(1)}
33%{transform:rotate(-12deg) scale(1.11,.88)}43%{transform:rotate(13deg) scale(.92,1.12)}51%{transform:rotate(16deg) scale(1.16,.84)}57%{transform:rotate(-13deg) scale(.94,1.06)}63%{transform:rotate(0) scale(1.06,.94)}
69%{transform:rotate(11deg) scale(.96,1.05)}75%{transform:rotate(8deg) scale(1.04,.97)}82%{transform:rotate(11deg) scale(.99,1.02)}88%{transform:rotate(7deg) scale(1.02,.99)}100%{transform:rotate(8deg) scale(1)}}
@keyframes entry-bot-body{
0%,5%{transform:rotate(95deg) scale(.9,1.1)}17%{transform:rotate(38deg) scale(.92,1.1)}25%{transform:rotate(-14deg) scale(1.22,.78)}30%{transform:rotate(8deg) scale(.94,1.07)}35%{transform:rotate(0) scale(1)}
40%{transform:rotate(14deg) scale(1.1,.89)}47%{transform:rotate(-13deg) scale(.92,1.12)}51%{transform:rotate(-15deg) scale(1.15,.84)}57%{transform:rotate(13deg) scale(.95,1.05)}63%{transform:rotate(0) scale(1.05,.95)}
69%{transform:rotate(-11deg) scale(.96,1.05)}75%{transform:rotate(-8deg) scale(1.04,.97)}82%{transform:rotate(-11deg) scale(.99,1.02)}88%{transform:rotate(-7deg) scale(1.02,.99)}100%{transform:rotate(-8deg) scale(1)}}
@keyframes entry-shadow-dot{
0%{opacity:0;transform:translateX(-137%) scale(.6)}9%{opacity:.35;transform:translateX(-70%) scale(.6)}17%{opacity:1;transform:translateX(-26%) scale(1.13)}27%{opacity:.8;transform:translateX(-7%) scale(1)}
33%{opacity:.85;transform:translateX(-17%) scale(1.05)}43%{opacity:.3;transform:translateX(7%) scale(.6)}51%{opacity:1;transform:translateX(24%) scale(1.13)}57%{opacity:.45;transform:translateX(-6%) scale(.85)}63%{opacity:.8;transform:translateX(0) scale(1)}
69%{opacity:.6;transform:translateX(17%) scale(.9)}75%,100%{opacity:.8;transform:translateX(17%) scale(1)}}
@keyframes entry-shadow-bot{
0%,5%{opacity:0;transform:translateX(137%) scale(.6)}17%{opacity:.35;transform:translateX(58%) scale(.6)}25%{opacity:1;transform:translateX(17%) scale(1.13)}35%{opacity:.8;transform:translateX(0) scale(1)}
40%{opacity:.85;transform:translateX(13%) scale(1.05)}47%{opacity:.3;transform:translateX(-9%) scale(.65)}51%{opacity:1;transform:translateX(-20%) scale(1.13)}57%{opacity:.45;transform:translateX(6%) scale(.85)}63%{opacity:.8;transform:translateX(0) scale(1)}
69%{opacity:.6;transform:translateX(-17%) scale(.9)}75%,100%{opacity:.8;transform:translateX(-17%) scale(1)}}
@keyframes entry-land-dot{0%,16%{opacity:0;transform:scale(.6)}17%{opacity:.7;transform:scale(.8)}24%{opacity:0;transform:scale(1.6)}50%{opacity:0;transform:scale(.7)}51%{opacity:.65;transform:scale(.8)}59%,100%{opacity:0;transform:scale(1.7)}}
@keyframes entry-land-bot{0%,24%{opacity:0;transform:scale(.6)}25%{opacity:.7;transform:scale(.8)}32%{opacity:0;transform:scale(1.6)}50%{opacity:0;transform:scale(.7)}51%{opacity:.65;transform:scale(.8)}59%,100%{opacity:0;transform:scale(1.7)}}
@keyframes entry-heart{0%,66%{opacity:0;transform:translate(-50%,25px) scale(.2)}73%{opacity:1;transform:translate(-50%,-12px) scale(1.35)}78%{opacity:1;transform:translate(-50%,-5px) scale(.9)}84%{transform:translate(-50%,-12px) scale(1.18)}90%{transform:translate(-50%,-8px) scale(1)}96%,100%{opacity:1;transform:translate(-50%,-12px) scale(1.08)}}
@keyframes entry-particle{0%,68%{opacity:0;transform:translate(-50%,0) scale(.1)}73%{opacity:.9}91%{opacity:.8;transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) - 20px)) rotate(var(--angle)) scale(.5)}}
@keyframes entry-halo{0%,64%{opacity:0;transform:scale(.4)}76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes entry-orbit{0%{opacity:0;transform:rotate(-25deg) scale(.7)}32%{opacity:.65;transform:rotate(-6deg) scale(1)}65%{transform:rotate(6deg) scale(.97)}100%{opacity:.65;transform:rotate(-9deg) scale(1.03)}}
@keyframes entry-camera{0%,49%{transform:translate(0,0)}51%{transform:translate(0,3px)}53%{transform:translate(0,-2px)}55%,100%{transform:translate(0,0)}}
@keyframes entrance-out{to{opacity:0;transform:scale(1.05) translateY(-8px)}}
.entry-reveal>main,.entry-reveal>.site-header{animation:entry-page-in .6s ease-out both}
@keyframes entry-page-in{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){.entrance-heart{font-size:34px}.entrance-burst{transform:scale(.75)}}
@media(max-height:520px) and (min-width:561px){.entrance-content{zoom:.8}.entrance-stage{width:400px}}
@media(prefers-reduced-motion:reduce){#entrance[open]{animation:none}#entrance *,.entry-reveal>main,.entry-reveal>.site-header{animation:none!important}}
