/* Heimdall Studio - Site-wide polish v0.7 */

::selection {
    background: rgba(73, 169, 231, 0.22);
    color: var(--color-navy);
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-navy);
    color: var(--color-white);
    font-size: 0.78rem;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

main:focus {
    outline: none;
}

[id] {
    scroll-margin-top: 110px;
}

.button,
.text-link,
.nav-link,
.brand {
    -webkit-tap-highlight-color: transparent;
}

.button {
    position: relative;
    overflow: hidden;
}

.button::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 55%
    );
    transform: translateX(-130%);
    transition: transform 480ms ease;
    pointer-events: none;
}

.button:hover::before,
.button:focus-visible::before {
    transform: translateX(130%);
}

.brand {
    transition: opacity var(--transition-fast);
}

.brand:hover {
    opacity: 0.8;
}

.site-header {
    transition:
        background var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.site-header.is-scrolled {
    background: rgba(248, 251, 253, 0.97);
    border-bottom-color: rgba(18, 45, 67, 0.1);
    box-shadow: 0 12px 30px rgba(18, 45, 67, 0.05);
}

.nav-link[aria-current="page"] {
    color: var(--color-navy);
}

.software-card,
.detail-card,
.about-principle-card,
.name-card,
.contact-form-card,
.contact-cta,
.coming-card,
.product-showcase {
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

@media (hover: hover) and (pointer: fine) {
    .software-card:hover,
    .detail-card:hover,
    .about-principle-card:hover,
    .contact-form-card:hover,
    .contact-cta:hover,
    .coming-card:hover {
        transform: translateY(-3px);
        border-color: rgba(73, 169, 231, 0.18);
        box-shadow: 0 26px 72px rgba(29, 69, 101, 0.11);
    }
}

.section-heading,
.details-heading,
.principles-heading,
.form-heading {
    text-wrap: balance;
}

.hero h1,
.software-hero-copy h1,
.about-hero-copy h1,
.contact-hero-copy h1,
.values-section h2,
.details-heading h2,
.development-grid h2,
.studio-heading h2,
.principles-heading h2,
.name-card h2,
.direction-grid h2,
.contact-info h2,
.form-heading h2,
.contact-principles-grid h2,
.contact-cta h2 {
    text-wrap: balance;
}

.footer-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.form-field input,
.form-field select,
.form-field textarea,
.contact-submit {
    scroll-margin-top: 120px;
}

body.nav-open {
    overflow: hidden;
}

@media (max-width: 860px) {
    body.nav-open::after {
        position: fixed;
        z-index: 40;
        inset: 76px 0 0;
        content: "";
        background: rgba(11, 20, 34, 0.08);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .main-navigation {
        z-index: 50;
    }
}

@media (max-width: 560px) {
    [id] {
        scroll-margin-top: 92px;
    }

    .button {
        min-height: 52px;
    }

    .text-link {
        min-height: 42px;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button::before {
        display: none;
    }

    .software-card,
    .detail-card,
    .about-principle-card,
    .name-card,
    .contact-form-card,
    .contact-cta,
    .coming-card,
    .product-showcase,
    .site-header,
    .brand {
        transition: none !important;
    }
}