/* Burger (Uiverse.io by Cevorob) */
.burger{position:relative;width:40px;height:30px;background:transparent;cursor:pointer;display:block}
.burger input{display:none}
.burger span{display:block;position:absolute;height:4px;width:100%;background:black;border-radius:9px;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out}
.burger span:nth-of-type(1){top:0px;transform-origin:left center}
.burger span:nth-of-type(2){top:50%;transform:translateY(-50%);transform-origin:left center}
.burger span:nth-of-type(3){top:100%;transform-origin:left center;transform:translateY(-100%)}
.burger input:checked ~ span:nth-of-type(1){transform:rotate(45deg);top:0px;left:5px}
.burger input:checked ~ span:nth-of-type(2){width:0%;opacity:0}
.burger input:checked ~ span:nth-of-type(3){transform:rotate(-45deg);top:28px;left:5px}

.sm-wrap{position:fixed;top:0;right:0;z-index:1000}
.sm-header-btn{position:absolute;top:.75rem;right:.9rem;z-index:1200}

.sm-panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,90vw);background:#fff;box-shadow:-12px 0 40px rgba(0,0,0,.1);transform:translateX(110%);transition:transform .55s cubic-bezier(.2,.8,.2,1);z-index:999;display:flex;flex-direction:column;padding:5rem 1.4rem 2rem 1.4rem;overflow:auto}
.sm-open .sm-panel{transform:translateX(0)}

.sm-layers{position:fixed;top:0;right:0;height:100vh;width:min(420px,90vw);pointer-events:none;z-index:998}
.sm-layer{position:absolute;inset:0;transform:translateX(110%);transition:transform .48s cubic-bezier(.2,.8,.2,1)}
.sm-open .sm-layer:nth-child(1){transform:translateX(0);transition-delay:0s;background:#B19EEF}
.sm-open .sm-layer:nth-child(2){transform:translateX(0);transition-delay:.06s;background:#8C6CFF}

.sm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.sm-item{overflow:hidden}
.sm-link{position:relative;display:inline-block;font-weight:700;font-size:clamp(22px,4.2vw,40px);letter-spacing:-.5px;text-transform:uppercase;text-decoration:none;color:#111;transform:translateY(120%) rotate(6deg);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease;padding-right:2rem}
.sm-open .sm-item:nth-child(1) .sm-link{transition-delay:.12s}
.sm-open .sm-item:nth-child(2) .sm-link{transition-delay:.18s}
.sm-open .sm-item:nth-child(3) .sm-link{transition-delay:.24s}
.sm-open .sm-item:nth-child(4) .sm-link{transition-delay:.30s}
.sm-open .sm-link{transform:translateY(0) rotate(0);opacity:1}
.sm-link:hover{color:#5227FF}

.sm-list[data-numbering] .sm-link::after{content:attr(data-idx);position:absolute;right:.5rem;top:.2em;font-size:12px;font-weight:500;color:#5227FF;opacity:0;transition:opacity .6s ease}
.sm-open .sm-list[data-numbering] .sm-link::after{opacity:1;transition-delay:.22s}

.sm-socials{margin-top:auto;padding-top:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap}
.sm-socials a{font-weight:600;text-decoration:none;color:#111;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.sm-socials a:hover{color:#ff6b6b;border-color:#ff6b6b}

.sm-head{position:absolute;left:0;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem}
.sm-logo{display:flex;align-items:center;gap:.5rem;color:#5227FF;font-weight:800;text-decoration:none;padding:.4rem .8rem}

@media (max-width:720px){.sm-panel{width:100vw}.sm-layers{width:100vw}}

.sm-settings{margin-top:.5rem;border-top:1px dashed #ddd;padding-top:.8rem;display:none}
.sm-settings[data-open="true"]{display:block}
.sm-settings h3{margin:.2rem 0 .6rem 0;font-size:14px;color:#333;text-transform:uppercase;letter-spacing:.5px}
.sm-setting-row{display:flex;align-items:center;gap:.6rem;margin:.3rem 0}
.sm-switch{appearance:none;width:46px;height:24px;border-radius:999px;background:#ddd;position:relative;outline:none;cursor:pointer;transition:background .25s ease}
.sm-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .25s ease}
.sm-switch:checked{background:#5227FF}
.sm-switch:checked::after{left:24px}
.sm-setting-label{font-size:14px;color:#222}

/* responsive images */
img{max-width:100%;height:auto;}