.er-stage{position:relative;isolation:isolate;height:600px}@media(max-width:700px){.er-stage{height:540px}}.er-glow{position:absolute;left:50%;top:50%;width:420px;height:420px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgb(245 198 142 / .5),rgb(231 157 130 / .2),transparent 70%);filter:blur(20px);transition:transform 1s ease,opacity 1s ease;z-index:1}.er-stage[data-open] .er-glow{transform:translate(-50%,-50%) scale(1.45);opacity:.95}.er-envelope{position:absolute;left:50%;top:50%;width:390px;height:430px;margin:-215px 0 0 -195px;z-index:40;cursor:pointer;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .6s ease;animation:er-float 3.4s ease-in-out infinite}.er-envelope:hover{transform:translateY(-7px)}.er-stage[data-open] .er-envelope{animation:none}.er-stage[data-rows] .er-envelope{opacity:0;transform:scale(.85);pointer-events:none}@media(max-width:700px){.er-envelope{transform:scale(.72)}.er-envelope:hover{transform:scale(.74) translateY(-5px)}.er-stage[data-rows] .er-envelope{transform:scale(.6)}}.er-shadow{position:absolute;left:50%;bottom:68px;width:300px;height:50px;border-radius:50%;transform:translate(-50%);background:#321e462e;filter:blur(20px)}.er-body{position:absolute;left:35px;bottom:82px;width:320px;height:205px;overflow:hidden;z-index:10;border:2px solid rgb(255 255 255 / .88);border-radius:18px;background:linear-gradient(145deg,#fff2f0,#ffd8df 58%,#f5b9ca);box-shadow:inset 0 3px 10px #ffffffd9,0 24px 48px #be708838}.er-body:before,.er-body:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}.er-body:before{background:linear-gradient(145deg,transparent 49.4%,rgb(207 126 151 / .32) 50%,transparent 50.7%),linear-gradient(215deg,transparent 49.4%,rgb(207 126 151 / .28) 50%,transparent 50.7%)}.er-body:after{background:linear-gradient(0deg,#f5aec1f0,#ffdae2eb);clip-path:polygon(0 100%,50% 42%,100% 100%)}.er-flap{position:absolute;left:35px;top:143px;width:320px;height:116px;z-index:25;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#fff0f2,#f7cad7);filter:drop-shadow(0 3px 3px rgb(190 112 136 / .12));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1)}.er-stage[data-open] .er-flap{top:53px;transform:rotateX(180deg) translateY(-20px)}.er-seal{position:absolute;left:50%;top:244px;z-index:35;display:grid;place-items:center;width:58px;height:58px;transform:translate(-50%);border:3px solid rgb(255 255 255 / .88);border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff5f7,#ef8da9 72%);box-shadow:0 5px 14px #b0557547;color:#fff;font-size:29px;text-shadow:0 2px 5px rgb(176 85 117 / .24);transition:transform .55s ease,opacity .35s ease}.er-seal:after{content:"✦";position:absolute;right:-13px;top:-8px;color:#e3a94e;font-size:13px}.er-stage[data-open] .er-seal{transform:translate(-50%,14px) scale(.6) rotate(16deg);opacity:0}.er-tag{position:absolute;right:4px;bottom:105px;z-index:60;padding:13px 17px;border:1px solid rgb(226 170 129 / .3);border-radius:10px;background:#fffaf3;box-shadow:0 12px 28px #80515824;color:#8e4d62;font-size:12px;font-weight:800;transform:rotate(5deg);transition:opacity .5s ease,transform .5s ease}.er-tag span{display:block;margin-top:4px;color:#c8654e;font-size:10px}.er-stage[data-open] .er-tag{opacity:0;transform:rotate(5deg) translateY(20px)}.er-card{display:flex;gap:10px;width:270px;min-height:108px;padding:15px;flex-shrink:0;border:1px solid rgb(180 151 121 / .24);border-radius:17px;background:#fffdf8f7;box-shadow:0 18px 42px #5b44311f;text-align:left}@media(max-width:700px){.er-card{width:220px;min-height:98px;padding:12px}}.er-avatar{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#f5d5c6,#dce3ca);box-shadow:inset 0 1px 2px #fffc;color:#65533f;font-size:12px;font-weight:800}.er-burst{position:absolute;left:50%;top:50%;z-index:80;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.05);transition:transform .82s cubic-bezier(.16,1,.3,1),opacity .35s ease;will-change:transform,opacity}.er-stage[data-burst] .er-burst{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1)}.er-stage[data-rows] .er-burst{opacity:0;transform:translate(-50%,-50%) scale(.7)}.er-rows{position:absolute;left:50%;top:50%;z-index:100;width:min(1180px,100vw);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.65);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}.er-stage[data-rows] .er-rows{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.er-row{position:relative;overflow:hidden;margin:8px 0;padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}@media(max-width:700px){.er-row{-webkit-mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}}.er-track{display:flex;gap:14px;width:max-content;will-change:transform;animation:er-left var(--t, 30s) linear infinite}.er-row:nth-child(2) .er-track{animation-name:er-right}.er-rows:hover .er-track,.er-rows:focus-within .er-track{animation-play-state:paused}.er-track .er-card{animation:er-bob 5s ease-in-out infinite;transition:transform .3s ease,box-shadow .3s ease}.er-track .er-card:nth-child(3n){animation-delay:-1.7s}.er-track .er-card:nth-child(3n+1){animation-delay:-3.1s}.er-track .er-card:hover{box-shadow:0 25px 55px #371e5029}.er-sticker{position:absolute;z-index:25;display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 10px 13px rgb(74 54 41 / .14));animation:er-float 4s ease-in-out infinite}.er-sun{left:19%;top:30%;width:70px;height:70px;border:2px solid #f6e8ca;border-radius:50%;background:#f4ca78;color:#815b35;font-size:31px;rotate:-12deg}.er-heart{right:20%;top:36%;width:58px;height:58px;border:2px solid #f8e1d9;border-radius:18px 18px 22px;background:#e89a83;color:#fff8ef;font-size:27px;rotate:11deg;animation-delay:-1.6s}.er-note{left:23%;bottom:16%;padding:10px 13px;border:2px solid #e7ead7;border-radius:8px 13px 10px 12px;background:#f1f2df;color:#687451;font-family:Georgia,serif;font-size:12px;rotate:-8deg;animation-delay:-2.4s}.er-sparkle{position:absolute;z-index:20;color:#d69855;pointer-events:none;animation:er-sparkle 2s ease-in-out infinite alternate}.er-stage[data-rows] :is(.er-sticker,.er-sparkle){opacity:.35;transition:opacity .6s ease}@media(max-width:700px){.er-sun{left:2%;top:30%;width:48px;height:48px;font-size:22px}.er-heart{right:2%;top:40%;width:44px;height:44px;font-size:21px}.er-note{left:5%;bottom:10%;font-size:10px}}@keyframes er-float{0%,to{translate:0 0}50%{translate:0 -8px}}@keyframes er-bob{0%,to{translate:0 0}50%{translate:0 -3px}}@keyframes er-sparkle{0%{transform:translateY(0) rotate(0) scale(.7);opacity:.3}to{transform:translateY(-12px) rotate(18deg) scale(1.15);opacity:1}}@keyframes er-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes er-right{0%{transform:translate(-50%)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.er-envelope,.er-sticker,.er-sparkle,.er-track,.er-track .er-card{animation:none}.er-row{overflow-x:auto}}
