.arch-home {
    background:
        radial-gradient(ellipse at 100% 12%, #7a4f2d16, transparent 44%),
        linear-gradient(160deg, #1b1917 0%, #141312 50%, #181614 100%);
}

body:has(.arch-home) .header.over-hero {
    background: #1b1917;
    border-bottom-color: #d4aa7d26;
}

.arch-home .arch-mast {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 13% 53%, #a77c4b24, transparent 58%),
        radial-gradient(ellipse at 78% 52%, #bd80442b, transparent 57%);
}

.arch-home .arch-mast::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, #e3c6a215 1px, transparent 1px),
        linear-gradient(to bottom, #e3c6a215 1px, transparent 1px),
        repeating-linear-gradient(124deg, #eed0ab09 0 1px, transparent 1px 6px);
    background-size: 66px 66px, 66px 66px, auto;
    background-position: var(--space) 0;
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

.arch-home #portfolio {
    background: linear-gradient(180deg, #211b1614, #2d23191f);
    border-top-color: #d4aa7d26;
}

.arch-home #xidmetler {
    background:
        radial-gradient(ellipse at 90% 20%, #9d724529, transparent 62%),
        #211c17;
}

@media (max-width: 820px) {
    .arch-home .arch-mast::before {
        background-size: 46px 46px, 46px 46px, auto;
    }
}

/* Arch.az hero motion */
.arch-home .arch-mast {
    overflow: hidden;
}

.arch-home .arch-mast::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(113deg,
        transparent 34%, #ddb07908 44%, #ddb07929 50%,
        #ddb07908 56%, transparent 66%);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .arch-home .arch-mast::before {
        animation: arch-grid-drift 28s ease-in-out infinite alternate;
    }
    .arch-home .arch-mast::after {
        animation: arch-bronze-sweep 15s ease-in-out infinite;
    }
}

@keyframes arch-grid-drift {
    from { background-position: var(--space) 0; }
    to   { background-position: calc(var(--space) + 30px) 20px; }
}

@keyframes arch-bronze-sweep {
    0%   { transform: translateX(-75%); opacity: 0; }
    18%  { opacity: .7; }
    58%  { opacity: .7; }
    80%  { transform: translateX(75%); opacity: 0; }
    100% { transform: translateX(75%); opacity: 0; }
}