/* ================================================== */
/* BASIC */
/* ================================================== */

.main:has(.popover.open) > section:not(.popover) { opacity: 0.2; }

/* ================================================== */
/* CUSTOM VALUES */
/* ================================================== */

@property --end {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 10%;
}

/* ================================================== */
/* KEYFRAMES */
/* ================================================== */

@keyframes bgGlow {
    0%, 100% { --end: 10% }
    50% { --end: 15% }
}

/* ================================================== */
/* HERO */
/* ================================================== */

.hero {
    background-image: url('/assets/images/desktop/atelier.webp');
    background-size: cover;
    background-position: center;

    height: 100dvh;
    transition: height 0.5s;
}

.hero .btn {
    position: relative;
    z-index: 0;
    background: transparent;
    border: 2px solid var(--color-accent-main);
    backdrop-filter: blur(4px);
}

.hero .btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 50px;
    clip-path: circle(20% at 0% 100%);
    transition: all 0.5s;
    background-color: var(--color-accent-main);
}

.hero .btn:hover { color: var(--color-text-main); }
.hero .btn:hover::before { clip-path: circle(150% at 0% 100%); }

/* ================================================== */
/* ARTIFACTS */
/* ================================================== */

.artifacts .grid .link { position: relative; }

.artifacts .grid .link .img { transition: transform 1s cubic-bezier(0.7,0.1,0.5,0.9); }
.artifacts .grid .link:hover .img { transform: scale(1.1); }

.artifacts .grid .link .text {
    position: absolute;
    bottom: 16px;
    left: 16px;
}

/* ================================================== */
/* ARTIFACT */
/* ================================================== */

.artifact {
    animation: bgGlow 6s cubic-bezier(0.7,0.1,0.5,0.9) infinite;

    background: radial-gradient(
        circle at 0% 0%,
        #2364AA 0%,
        var(--color-bg-main) var(--end)
    );
}

.artifact .grid {
    grid-template-areas:
        "image head"
        "image body"
        "points points";
}

.artifact .img { grid-area: image; }
.artifact .head { grid-area: head; }
.artifact .body { grid-area: body; }
.artifact .points { grid-area: points; }

.artifact .point {
    border-left: 2px solid var(--c);
    padding-left: 12px;
}

.artifact .point .fw-500 { color: var(--c); }

/* ================================================== */
/* SYSTEM */
/* ================================================== */

.system .body .stage {
    background: linear-gradient(
        315deg,
        var(--color-accent-main) 0%,
        transparent var(--s)
    );
}

/* ================================================== */
/* HANDSHAKE */
/* ================================================== */

.handshake {
    animation: bgGlow 6s cubic-bezier(0.7,0.1,0.5,0.9) infinite;
    background: radial-gradient(
        circle at 100% 100%,
        var(--color-accent-main) 0%,
        var(--color-bg-main) var(--end)
    );
}
.handshake .social .btn { background-color: var(--color-text-main); }

/* ================================================== */
/* POPOVERS */
/* ================================================== */

.popover {
    position: fixed;
    z-index: 30;
    border: 1px solid var(--color-bg-card);
    color: var(--color-text-main);
    backdrop-filter: blur(4px);
    width: min(512px, calc(100% - 24px));
    margin: auto;
    transition: transform 0.3s cubic-bezier(0.911, 0.161, 0.181, 0.797);
}

/* ----- WORK FORM SPECIFIC ----- */

.work-form {
    transform: scale(0); 
    background:
        radial-gradient(circle at 0% 0%, var(--color-accent-alt) 0%, var(--color-surface-alt) 20%),
        radial-gradient(circle at 100% 100%, var(--color-accent-alt) 0%, var(--color-surface-alt) 25%);
}

.work-form.open { transform: scale(1); }

.work-form .input-elem .err-msg {
    padding-left: 12px;
    color: var(--color-state-red);
    transition:
        display 0.4s,
        opacity 0.4s 100ms;
}

.work-form .btn { border: 1px solid var(--color-accent-main); }

/* ----- SUCCESS PAGE SPECIFIC ----- */

.success-page {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background:
        radial-gradient(circle at 0% 0%, var(--color-state-green) 0%, var(--color-surface-alt) 20%),
        radial-gradient(circle at 100% 100%, var(--color-state-green) 0%, var(--color-surface-alt) 25%);
}

.success-page .symbol {
    background-color: var(--color-state-green);
    border-radius: 50%;
    padding: 12px;
}

.success-page .btn { background-color: var(--color-state-green); }
.success-page.open { transform: translate(-50%, -50%) scale(1); }

/* ================================================== */
/* & RESPONSIVENESS */
/* ================================================== */

@media (max-width: 1024px) {
    .artifact .grid {
        grid-template-areas: 
            "head"
            "image"
            "body"
            "points";
    }
}

@media (max-width: 568px) {
    .hero { background-image: url('/assets/images/phone/atelier.webp'); }
}