/*
 * BOXCRAFT — Visual Polish Layer
 * Darstellung בלבד. Keine Funktionslogik.
 */

/* ---------------------------------------------------------
   GLOBAL RHYTHM
--------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.section {
    position: relative;
}

.section > h2,
.section header h2 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}


/* ---------------------------------------------------------
   HEADER / NAVIGATION
--------------------------------------------------------- */

.site-header,
header.site-header {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header nav,
.site-header .nav {
    align-items: center;
}

.site-header a {
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.site-header .nav-cta,
.site-header [class*="cta"] {
    white-space: nowrap;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero h1 {
    text-wrap: balance;
    letter-spacing: -0.045em;
}

.hero p {
    max-width: 42rem;
    line-height: 1.65;
}

.hero-art {
    isolation: isolate;
}

.hero-art img {
    filter:
        drop-shadow(0 28px 50px rgba(0,0,0,.22))
        drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

.hero-ring {
    opacity: .72;
}


/* ---------------------------------------------------------
   FEATURE CARDS
--------------------------------------------------------- */

.feature {
    position: relative;
    overflow: hidden;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

@media (hover:hover) {
    .feature:hover {
        transform: translateY(-4px);
    }
}

.feature-index {
    font-variant-numeric: tabular-nums;
}

.feature h3 {
    text-wrap: balance;
}

.feature p {
    line-height: 1.65;
}


/* ---------------------------------------------------------
   STATEMENT
--------------------------------------------------------- */

.statement-section h2 {
    text-wrap: balance;
}

.statement-section em {
    font-style: normal;
}

.statement-orb {
    pointer-events: none;
}


/* ---------------------------------------------------------
   CONFIGURATOR
--------------------------------------------------------- */

.config-head {
    align-items: end;
}

.config-head > p {
    max-width: 38rem;
    line-height: 1.7;
}

.controls {
    position: relative;
}

.control-block {
    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.control-title small,
.bc-face-kicker,
.bc-current-color small {
    letter-spacing: .1em;
}

.bc-face-control {
    position: relative;
}

.bc-face-head {
    gap: 1.25rem;
}

.bc-current-color {
    transition:
        border-color .2s ease,
        background-color .2s ease;
}

#bcCurrentSwatch {
    box-shadow:
        0 0 0 1px rgba(0,0,0,.08),
        0 4px 12px rgba(0,0,0,.12);
}

.bc-face-tabs button {
    position: relative;
    min-height: 64px;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

@media (hover:hover) {
    .bc-face-tabs button:hover {
        transform: translateY(-2px);
    }
}

.bc-face-tabs button.active {
    transform: translateY(-1px);
}

.bc-face-tabs button:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.bc-visual-bold {
    letter-spacing: .025em;
}

.bc-face-tabs small,
#bcCurrentColorHex {
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

#bcLegalFooter {
    position: relative;
}

.bc-legal-footer-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}

.bc-legal-footer-inner > strong {
    margin-right: auto;
    letter-spacing: .08em;
}

.bc-legal-footer-inner a,
#bcPrivacySettings {
    transition: opacity .18s ease;
}

@media (hover:hover) {
    .bc-legal-footer-inner a:hover,
    #bcPrivacySettings:hover {
        opacity: .65;
    }
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

    .hero h1 {
        letter-spacing: -0.035em;
    }

    .config-head {
        align-items: initial;
    }

    .bc-face-head {
        align-items: flex-start;
    }

    .bc-face-tabs button {
        min-height: 58px;
    }

    .bc-legal-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .bc-legal-footer-inner > strong {
        margin-right: 0;
        margin-bottom: .5rem;
    }
}


/* ---------------------------------------------------------
   ACCESSIBILITY / MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .feature,
    .bc-face-tabs button,
    .bc-current-color {
        transition: none !important;
    }
}