#site-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #faf6ef 60%, #f3ecdf 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    transition: opacity .8s ease, visibility .8s ease;
}

#site-preloader.pl-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pl-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(92,184,42,.35) 60%, rgba(47,143,31,.15) 100%);
    box-shadow: inset 0 0 8px rgba(255,255,255,.6);
    opacity: 0;
    animation-name: pl-bubbleRise;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}
@keyframes pl-bubbleRise {
    0%   { transform: translateY(40px) translateX(0) scale(.7); opacity: 0; }
    10%  { opacity: .85; }
    50%  { transform: translateY(-120px) translateX(10px) scale(1); }
    85%  { opacity: .5; }
    100% { transform: translateY(-320px) translateX(-14px) scale(1.15); opacity: 0; }
}
.pl-b1{width:22px;height:22px;left:22%;bottom:30%;animation-duration:5.5s;animation-delay:.1s;}
.pl-b2{width:14px;height:14px;left:68%;bottom:38%;animation-duration:4.6s;animation-delay:1.1s;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(34,41,47,.25) 60%, rgba(34,41,47,.1) 100%);}
.pl-b3{width:10px;height:10px;left:34%;bottom:60%;animation-duration:4s;animation-delay:.6s;}
.pl-b4{width:28px;height:28px;left:74%;bottom:22%;animation-duration:6.2s;animation-delay:1.6s;}
.pl-b5{width:12px;height:12px;left:15%;bottom:55%;animation-duration:4.8s;animation-delay:2.1s;}
.pl-b6{width:18px;height:18px;left:50%;bottom:15%;animation-duration:5.2s;animation-delay:.9s;}
.pl-b7{width:9px;height:9px;left:60%;bottom:65%;animation-duration:3.6s;animation-delay:1.8s;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(34,41,47,.25) 60%, rgba(34,41,47,.1) 100%);}
.pl-b8{width:16px;height:16px;left:82%;bottom:50%;animation-duration:5.8s;animation-delay:2.5s;}
.pl-b9{width:8px;height:8px;left:40%;bottom:20%;animation-duration:3.8s;animation-delay:.3s;}
.pl-b10{width:20px;height:20px;left:10%;bottom:40%;animation-duration:5s;animation-delay:2.9s;}
.pl-b11{width:13px;height:13px;left:88%;bottom:32%;animation-duration:4.4s;animation-delay:3.4s;}
.pl-b12{width:24px;height:24px;left:5%;bottom:20%;animation-duration:5.6s;animation-delay:1.3s;}

.pl-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.icon-assemble {
    position: relative;
    width: 132px;
    height: 144px;
    animation: pl-settlePulse .3s ease forwards .95s;
}
.icon-assemble .piece {
    position: absolute; inset: 0;
    background-image: url('../images/logo-icon.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
    animation-fill-mode: forwards;
}

.icon-assemble .pc1 {
    clip-path: polygon(0.0% 0.0%, 20.0% 0.0%, 20.0% 50.0%, 0.0% 50.0%);
    transform: translate(-77.3px, -70.5px) rotate(-200deg) scale(.35);
    animation-name: assemble1;
    animation-delay: 0.05s;
}
.icon-assemble .pc2 {
    clip-path: polygon(20.0% 0.0%, 40.0% 0.0%, 40.0% 50.0%, 20.0% 50.0%);
    transform: translate(-48.8px, -58.9px) rotate(200deg) scale(.35);
    animation-name: assemble2;
    animation-delay: 0.09s;
}
.icon-assemble .pc3 {
    clip-path: polygon(40.0% 0.0%, 60.0% 0.0%, 60.0% 50.0%, 40.0% 50.0%);
    transform: translate(2.5px, -47.7px) rotate(150deg) scale(.35);
    animation-name: assemble3;
    animation-delay: 0.14s;
}
.icon-assemble .pc4 {
    clip-path: polygon(60.0% 0.0%, 80.0% 0.0%, 80.0% 50.0%, 60.0% 50.0%);
    transform: translate(22.1px, -62.0px) rotate(-170deg) scale(.35);
    animation-name: assemble4;
    animation-delay: 0.18s;
}
.icon-assemble .pc5 {
    clip-path: polygon(80.0% 0.0%, 100.0% 0.0%, 100.0% 50.0%, 80.0% 50.0%);
    transform: translate(64.2px, -58.5px) rotate(-200deg) scale(.35);
    animation-name: assemble5;
    animation-delay: 0.23s;
}
.icon-assemble .pc6 {
    clip-path: polygon(0.0% 50.0%, 20.0% 50.0%, 20.0% 100.0%, 0.0% 100.0%);
    transform: translate(-62.2px, 48.7px) rotate(150deg) scale(.35);
    animation-name: assemble6;
    animation-delay: 0.27s;
}
.icon-assemble .pc7 {
    clip-path: polygon(20.0% 50.0%, 40.0% 50.0%, 40.0% 100.0%, 20.0% 100.0%);
    transform: translate(-32.1px, 62.5px) rotate(-200deg) scale(.35);
    animation-name: assemble7;
    animation-delay: 0.32s;
}
.icon-assemble .pc8 {
    clip-path: polygon(40.0% 50.0%, 60.0% 50.0%, 60.0% 100.0%, 40.0% 100.0%);
    transform: translate(2.3px, 56.9px) rotate(150deg) scale(.35);
    animation-name: assemble8;
    animation-delay: 0.36s;
}
.icon-assemble .pc9 {
    clip-path: polygon(60.0% 50.0%, 80.0% 50.0%, 80.0% 100.0%, 60.0% 100.0%);
    transform: translate(22.4px, 70.8px) rotate(170deg) scale(.35);
    animation-name: assemble9;
    animation-delay: 0.41s;
}
.icon-assemble .pc10 {
    clip-path: polygon(80.0% 50.0%, 100.0% 50.0%, 100.0% 100.0%, 80.0% 100.0%);
    transform: translate(69.6px, 61.2px) rotate(160deg) scale(.35);
    animation-name: assemble10;
    animation-delay: 0.45s;
}

@keyframes assemble1 {
    0%   { opacity:0; transform: translate(-77.3px, -70.5px) rotate(-200deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble2 {
    0%   { opacity:0; transform: translate(-48.8px, -58.9px) rotate(200deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble3 {
    0%   { opacity:0; transform: translate(2.5px, -47.7px) rotate(150deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble4 {
    0%   { opacity:0; transform: translate(22.1px, -62.0px) rotate(-170deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble5 {
    0%   { opacity:0; transform: translate(64.2px, -58.5px) rotate(-200deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble6 {
    0%   { opacity:0; transform: translate(-62.2px, 48.7px) rotate(150deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble7 {
    0%   { opacity:0; transform: translate(-32.1px, 62.5px) rotate(-200deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble8 {
    0%   { opacity:0; transform: translate(2.3px, 56.9px) rotate(150deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble9 {
    0%   { opacity:0; transform: translate(22.4px, 70.8px) rotate(170deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes assemble10 {
    0%   { opacity:0; transform: translate(69.6px, 61.2px) rotate(160deg) scale(.35); }
    55%  { opacity:1; }
    100% { opacity:1; transform: translate(0,0) rotate(0) scale(1); }
}

@keyframes pl-settlePulse {
    0%   { transform: scale(1);     filter: drop-shadow(0 0 0 rgba(60,140,30,0)); }
    40%  { transform: scale(1.06);  filter: drop-shadow(0 10px 18px rgba(60,140,30,.3)); }
    100% { transform: scale(1);     filter: drop-shadow(0 10px 18px rgba(60,140,30,.25)); }
}

.pl-word {
    width: 220px;
    height: auto;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(16px);
    animation: pl-wordIn .4s cubic-bezier(.22,1,.36,1) forwards 1.05s;
}
@keyframes pl-wordIn { to { opacity: 1; transform: translateY(0); } }

.pl-tag {
    width: 180px;
    height: auto;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(10px);
    animation: pl-tagIn .35s ease forwards 1.55s;
}
@keyframes pl-tagIn { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
    .icon-assemble { width: 104px; height: 114px; }
    .pl-word { width: 180px; }
    .pl-tag  { width: 150px; }
}