.registration-celebration[hidden],.registration-notice[hidden]{display:none!important}
.sect-register.is-celebrating .register-content{padding:0}
.sect-register.is-celebrating{width:min(640px,calc(100vw - 28px))}
.registration-celebration{
    --root-radius:clamp(76px,21vw,105px);
    position:relative;isolation:isolate;overflow:hidden;min-height:350px;height:min(73svh,470px);
    background:#15201f;color:#eee3c8;text-align:center;outline:none;
}
.celebration-art{position:absolute;inset:0;pointer-events:none}
.celebration-landscape{
    position:absolute;inset:-8%;opacity:.4;background:
    linear-gradient(180deg,#10201ae6,#14201b33 40%,#0d1918),
    url('/assets/suong-nui-thuy-mac.webp') center 30%/cover;
}
.celebration-mist{
    position:absolute;inset:30% -30% -30%;opacity:0;
    background:radial-gradient(ellipse at 35% 70%,#c8d4b955,transparent 60%);
}
.celebration-mist-front{inset:55% -40% -50%;background:radial-gradient(ellipse,#d4dbc866,transparent 65%)}
.celebration-orbit{
    position:absolute;top:42%;left:50%;width:calc(var(--root-radius)*2);aspect-ratio:1;
    border:1px solid #d2b36e55;border-radius:50%;transform:translate(-50%,-50%);opacity:0;
    box-shadow:0 0 40px #bd9b4512,inset 0 0 30px #bd9b4512;
}
.celebration-orbit::after{content:"";position:absolute;inset:12px;border:1px dashed #d2b36e40;border-radius:50%}
.celebration-root{
    position:absolute;top:42%;left:50%;display:grid;place-items:center;width:43px;height:43px;
    color:var(--root-color);background:#15211ee8;border:1px solid currentColor;border-radius:50%;
    font:1.4rem/1 var(--font-reading);opacity:0;box-shadow:0 0 18px #d2b36e12;
}
.celebration-root small{position:absolute;top:calc(100% + 6px);font:600 .65rem/1.2 var(--font-reading);letter-spacing:.06em}
.root-metal{--angle:-90deg;--counter:90deg;--root-color:#e8d8a9}
.root-wood{--angle:-18deg;--counter:18deg;--root-color:#a7c99c}
.root-water{--angle:54deg;--counter:-54deg;--root-color:#a7c5cf}
.root-fire{--angle:126deg;--counter:-126deg;--root-color:#e69d83}
.root-earth{--angle:198deg;--counter:-198deg;--root-color:#d2b06c}
.celebration-sword{
    position:absolute;left:50%;top:42%;width:55px;height:167px;color:#f0e5c7;opacity:0;
    transform:translate(-50%,-50%);filter:drop-shadow(0 0 9px #dfc47866);
}
.celebration-cut{
    position:absolute;top:42%;left:5%;width:90%;height:2px;opacity:0;transform:rotate(-24deg) scaleX(0);
    background:linear-gradient(90deg,transparent,#fff3c6,transparent);box-shadow:0 0 12px #fff3c6;
}
.celebration-seal{
    position:absolute;left:50%;top:42%;display:grid;place-content:center;width:82px;height:98px;
    border:3px double #f7d3aa;color:#fff0d5;background:#a92c23;border-radius:4px;font:2.25rem/1.1 var(--font-reading);
    box-shadow:0 8px 30px #0004,inset 0 0 0 3px #a92c23,inset 0 0 0 4px #f7d3aa80;opacity:0;
}
.celebration-copy{position:absolute;bottom:58px;left:18px;right:18px}
.celebration-eyebrow{font-size:.53rem;letter-spacing:.16em;color:#cfbd95;margin:0 0 .6rem}
.celebration-copy h3{font:600 clamp(1.3rem,5vw,1.8rem)/1.3 var(--font-reading);color:#fff0d5;margin:0 0 .65rem}
.celebration-phase{font-size:.78rem;line-height:1.6;color:#e3d6b9;margin:0;min-height:2.6em}
.celebration-account{font-size:.68rem;color:#c4ba9f;margin:.4rem 0 0;overflow-wrap:anywhere}
.celebration-account strong{color:#f0d499}
.celebration-skip{
    position:absolute;bottom:15px;right:18px;width:auto;padding:.4rem .2rem;
    font:inherit;font-size:.7rem;border:0;background:none;color:#dbcfb6;cursor:pointer;
}
.celebration-skip:focus-visible{outline:2px solid #f0d499;outline-offset:4px}
.celebration-orbit,.celebration-root,.celebration-sword,.celebration-seal,.celebration-cut{top:34%}
.page-registration-success .registration-celebration{max-width:640px;margin:auto;border-radius:5px}
.page-registration-success .registration-notice:focus{outline:none}
.is-playing .celebration-landscape{animation:landscape-arrive 4.2s ease-out both}
.is-playing .celebration-mist-back{animation:mist-arrive 4.2s ease-out both}
.is-playing .celebration-mist-front{animation:mist-arrive 4.2s .2s ease-out both}
.is-playing .celebration-orbit{animation:orbit-arrive 3.3s .2s ease-out both}
.is-playing .celebration-root{animation:roots-arrive 2.9s .25s cubic-bezier(.2,.7,.3,1) both}
.is-playing .celebration-sword{animation:sword-arrive 2.7s ease-out both}
.is-playing .celebration-cut{animation:sword-cut .8s 2.3s ease-out both}
.is-playing .celebration-seal{animation:seal-arrive 1.35s 2.7s cubic-bezier(.2,.8,.2,1) both}
.is-playing .celebration-copy{animation:copy-arrive .8s ease-out both}
@keyframes landscape-arrive{from{transform:scale(1.12);opacity:.15}to{transform:scale(1);opacity:.45}}
@keyframes mist-arrive{0%{opacity:0;transform:translateX(-12%)}35%{opacity:.8}100%{opacity:.35;transform:translateX(12%)}}
@keyframes orbit-arrive{0%{opacity:0;transform:translate(-50%,-50%) rotate(-50deg) scale(.65)}30%,75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(50deg) scale(1.1)}}
@keyframes roots-arrive{
    0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--root-radius)*-1.4)) rotate(var(--counter)) scale(.3)}
    28%,70%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--root-radius)*-1)) rotate(var(--counter)) scale(1)}
    100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) rotate(var(--counter)) scale(.25)}
}
@keyframes sword-arrive{0%{opacity:0;transform:translate(-50%,-80%)}35%,80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-45%)}}
@keyframes sword-cut{0%{opacity:0;transform:rotate(-24deg) scaleX(0)}35%{opacity:.85;transform:rotate(-24deg) scaleX(1)}100%{opacity:0;transform:rotate(-24deg) scaleX(1.1)}}
@keyframes seal-arrive{0%{opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scale(1.9)}45%,100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.registration-celebration{min-height:380px;height:min(70svh,440px)}.celebration-copy{bottom:54px}.celebration-eyebrow{font-size:.48rem;letter-spacing:.1em}.celebration-copy h3{font-size:1.3rem}}
@media(prefers-reduced-motion:reduce){.registration-celebration *{animation:none!important;transition:none!important}}