.drippy-1 {
    width: 100%;
    left: auto;
    right: 0;
}

@media screen and (max-width: 700px) {
    .drippy-1 {
        width: 700px;
    }
}

.button-hold {
    position: relative;
    width: fit-content;
    display: flex;
}

.button {
    width: fit-content;
    padding: 13px 23px;
    background-color: var(--fg-3);
    border: 2px solid var(--fg-2);
    font-size: var(--h6);
    font-family: var(--brand-font);
    border-radius: 10px;
    cursor: pointer;
    transition: .3s cubic-bezier(.5, .5, 0, 1);
    transform: translateY(0);
    box-shadow: 0 0 10px transparent;
    overflow: hidden;
    transform: scale(1);
}

.button.hidden {
    opacity: 0;
    transform: scale(.1);
    transition-duration: 0s;
}

.button-hold .button:hover, .button.hovered {
    background-color: var(--bg);
    transform: translateY(-5px);
    box-shadow: 0 5px 10px #0003;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -43px;
    width: 30px;
    height: 100%;
    background-color: #fff9;
    transform: skewX(-30deg);
}

.button-hold .button:hover::after {
    animation: shine .6s cubic-bezier(.5, .5, 0, 1);
}

@keyframes shine {
    0% {left: -43px}
    100% {left: calc(100% + 13px)}
}

.banner-img {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.banner-img img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    opacity: .8;
    transform: translateY(-50%);
}

.banner-img .banner-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--bg) 0%,
        transparent 300px,
        transparent calc(100% - 300px),
        var(--bg) 100%);
}

.smooth-text-1 {
    height: 200px
}

.smooth-text-1-paths path {
    stroke: hsl(var(--hue), 70%, 80%);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dashoffset: 1;
    stroke-dasharray: 1;
    animation: write 3s cubic-bezier(.5, .5, 0, 1) forwards;
    transition: 2s;
    opacity: 1;
}

.hidden .smooth-text-1-paths path {
    animation: none;
    animation-duration: 0s;
    transition-duration: 0s;
    stroke-width: 0;
    opacity: 0;
}

#txt-sparkle {
    transition: 2s cubic-bezier(.5, .5, 0, 1);
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 1;
}

.hidden #txt-sparkle {
    transition-duration: 0s;
    opacity: 0;
    transform: scale(0) rotate(-139deg);
}

.smooth-text-1-stroke-col {
    stroke: hsl(var(--hue), 20%, 40%);
}

.smooth-text-1-stroke {
    stroke: hsl(var(--hue), 20%, 40%);
    stroke-width: .2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: 2s;
    opacity: 1;
    stroke-dashoffset: 1;
    stroke-dasharray: 1;
    animation: write 20s cubic-bezier(.5, .5, 0, 1) forwards;
}

.hidden .smooth-text-1-stroke {
    animation: none;
    animation-duration: 0s;
    transition-duration: 0s;
    stroke-width: 0;
    opacity: 0;
}

@keyframes write {
    0% {
        stroke-dashoffset: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* -- Window SVG -- */
.window-svg {
    width: 250px;
    flex: 1 0 auto;
    animation: squish 6s cubic-bezier(.3, 0, 0, 1) infinite;
}

@keyframes squish {
    15% {transform: scale(1)}
    17.5% {transform: scale(1.05, .95)}
    22.5% {transform: scale(.925, 1.075)}
    25% {transform: scale(1, .975)}
    27.5% {transform: scale(1)}
}

.window-svg .reflection {
    transform: translate(0);
    animation: reflect 4s cubic-bezier(.7, .3, 0, 1) infinite;
}

@keyframes reflect {
    0% {transform: translate(10%, 10%)}
    50% {transform: translate(80%, 80%)}
    100% {transform: translate(80%, 80%)}
}

.window-svg .reflection-2 {
    transform: translate(0);
    animation: reflect-2 4s cubic-bezier(.7, .3, 0, 1) infinite;
}

@keyframes reflect-2 {
    0% {transform: translate(10%, 10%)}
    47% {transform: translate(80%, 80%)}
    100% {transform: translate(80%, 80%)}
}

.window-svg .star {
    transform-box: content-box;
    transform-origin: center;
    transform: scale(0) rotate(0);
    animation: twinkle 4s linear infinite;
}

@keyframes twinkle {
    15% {transform: scale(0) rotate(0)}
    18% {transform: scale(.8) rotate(50deg)}
    21% {transform: scale(1) rotate(80deg)}
    24% {transform: scale(.8) rotate(110deg)}
    27% {transform: scale(0) rotate(160deg)}
}

.cards-hold {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-hold {
    display: flex;
    gap: 40px;
}

.card {
    position: relative;
    border-radius: 10px;
}

.card::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 100%;
    height: 100%;
    background-color: hsl(var(--hue-2), 50%, 75%);
    border-radius: 10px;
    border: 1px solid hsl(var(--hue-2), 50%, 65%);
}

.card-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: hsl(var(--hue-2), 50%, 90%);
    border-radius: 10px;
    border: 1px solid hsl(var(--hue-2), 30%, 70%);
}

.card-title {
    font-size: var(--h6);
    font-family: var(--brand-font);
    font-weight: bold;
    text-align: center;
}

.card-img-hold {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img, .card-img path {
    width: auto;
    height: 200px;
    position: relative;
}

path.card-default {fill: var(--fg-2)}
path.card-default-stroke {stroke: var(--fg-2)}

path.card-faint {fill: hsl(var(--hue-2), 30%, 65%)}
path.card-faint-stroke {stroke: hsl(var(--hue-2), 30%, 65%)}

path.card-light {fill: hsl(var(--hue-2), 30%, 90%)}

.gallery {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}

.gallery-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    transition: 1s cubic-bezier(.5, 0, 0, 1);
}

.gallery-img:hover img {
    transform: scale(1.2);
}

.girly-swirly {
    position: absolute !important;
    top: 50px;
    right: 100px;
    width: 100px;
}

.girly-swirly.var-2 {
    top: 100px;
    left: 100px;
}

.girly-swirly path {
    stroke: hsl(var(--hue), 60%, 80%);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swirl-1 {
    stroke-dasharray: .1 1.1;
    stroke-dashoffset: .1;
    animation: swirl-1 1s cubic-bezier(.5,.5,0,.3);
}

.girly-swirly.hidden .swirl-1,
.girly-swirly.hidden .swirl-2 {
    animation: none;
    animation-duration: 0s;
}

@keyframes swirl-1 {
    0% {
        stroke-dasharray: .1 1.1;
        stroke-dashoffset: .1;
    }
    25% {
        stroke-dasharray: .3 1.1;
    }
    75% {
        stroke-dasharray: .3 1.1;
    }
    100% {
        stroke-dasharray: .1 1.1;
        stroke-dashoffset: -1;
    }
}

.swirl-2 {
    stroke-dasharray: .1 1.1;
    stroke-dashoffset: .1;
    stroke-width: 1;
    animation: swirl-2 1s cubic-bezier(.5,.3,.75,1) .05s;
}

@keyframes swirl-2 {
    0% {
        stroke-dasharray: .05 1.1;
        stroke-dashoffset: .1;
    }
    25% {
        stroke-dasharray: .1 1.1;
    }
    75% {
        stroke-dasharray: .1 1.1;
    }
    100% {
        stroke-dasharray: .05 1.1;
        stroke-dashoffset: -1;
    }
}

.before-after {
    border: 10px solid var(--bg);
    position: relative;
    width: 100%;
    height: auto;
    max-width: 500px;
    margin: auto;
    aspect-ratio: 1.5;
    overflow: hidden;
    border-radius: 20px;
    touch-action: none;
}

.before-after .ba {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .1s cubic-bezier(.5, .5, 0, 1);
}

.before-after img {
    width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.before-after .pole {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: var(--root);
    transform: translateX(-50%);
    z-index: 1;
    outline: 2px solid var(--fg);
    transition: .1s cubic-bezier(.5, .5, 0, 1);
}

.before-after .blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 43px;
    height: 43px;
    border-radius: 200px;
    background-color: var(--root);
    outline: 2px solid var(--fg);
    padding: 5px;
    transition: .2s cubic-bezier(.1, 2, .7, 1);
}

.before-after:hover .blob {
    width: 46px;
    height: 46px;
}

.before-after:active .blob {
    width: 40px;
    height: 40px;
}

.before-after .blob svg {
    position: relative;
    width: 100%;
    height: 100%;
}
.before-after .blob svg path {
    fill: none;
    stroke: var(--acc);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}



form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

form input, form textarea {
    height: 50px;
    padding: 0 10px;
    background-color: var(--root);
    border: 1px solid var(--fg-2);
    border-radius: 10px;
    font-size: var(--h6);
    color: var(--txt);
    font-family: var(--main-font);
    outline: 0px solid var(--acc);
    transition: 0s;
}

form textarea {
    height: 120px;
    resize: vertical;
    padding: 10px;
}

form input:focus, form textarea:focus {
    outline: 10px solid transparent;
    transition: outline 1s cubic-bezier(.5, .5, 0, 1);
}

form div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

form div span {
    font-size: var(--h6);
    font-family: var(--body-font);
}


.link {
    position: relative;
    color: var(--acc);
    text-decoration: none;
    cursor: pointer;
}

.link::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: auto;
    right: 0;
    width: 0%;
    height: 2px;
    background-color: var(--acc);
    border-radius: 10px;
    transition: .3s cubic-bezier(.5, .5, 0, 1);
}

.link:hover::before {
    left: 0;
    right: auto;
    width: 100%;
}

.boxy {
    width: 100%;
    padding: 30px;
    border: 1px solid var(--fg);
    border-radius: 20px;
    font-size: var(--h6);
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-wrap: break-word;
    word-break: break-all;
    min-width: 0;
}

.boxy a {
    font-size: var(--h7);
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.review {
    background-color: hsl(var(--hue-2), 20%, 90%);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid hsl(var(--hue-2), 30%, 50%);
    box-shadow: 3px 3px 0 hsl(var(--hue-2), 30%, 50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rev-by {
    color: hsl(var(--hue), 10%, 40%);
}