/* ==========================================================================
   motion.css — arc slider + interaction layer
   Additive only. Delete this file and its <link> to revert everything.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARC CARD SLIDER
   Cards start on a full circle, then unroll into a shallow fan.
   -------------------------------------------------------------------------- */

.arc {
    position: relative;
    margin-bottom: clamp(46px, 6vw, 82px);
    padding: clamp(26px, 4vw, 44px) clamp(20px, 3vw, 38px) clamp(22px, 3vw, 34px);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.045), transparent 62%),
        var(--surface);
    overflow: hidden;
}

.arc::after {
    /* Soft floor under the fan so the cards feel seated rather than floating. */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 27%;
    width: min(620px, 78%);
    height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(60% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%);
    filter: blur(22px);
    pointer-events: none;
}

.arc-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 4;
}

.arc-bar a {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.arc-bar a:hover {
    color: var(--text);
    border-bottom-color: var(--hairline-strong);
}

/* --- stage ------------------------------------------------------------- */

.arc-stage {
    position: relative;
    height: clamp(300px, 38vw, 430px);
    margin: clamp(10px, 2vw, 22px) 0 0;
    perspective: 1300px;
    transform-style: preserve-3d;
}

.arc-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(150px, 17vw, 220px);
    aspect-ratio: 16 / 10;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface-2);
    overflow: hidden;
    cursor: pointer;
    transform-origin: 50% 118%;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
    /* Transform is written by JS. Transition it here so both the circle→arc
       morph and every later re-centre animate with the same easing. */
    transition:
        transform 0.42s var(--ease),
        opacity 0.34s var(--ease),
        border-color 0.28s var(--ease),
        box-shadow 0.4s var(--ease);
    will-change: transform, opacity;
}

.arc-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Desaturated by default so the centred card reads as "selected". */
    filter: grayscale(1) contrast(1.08) brightness(0.72);
    opacity: 0.9;
    transition: filter 0.35s var(--ease), opacity 0.35s var(--ease), transform 0.5s var(--ease);
}

.arc-card::after {
    /* Duotone wash. Hue is set per-card via --tone. */
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tone, transparent);
    mix-blend-mode: color;
    opacity: 0.55;
    transition: opacity 0.6s var(--ease);
    pointer-events: none;
}

.arc-card.is-active {
    border-color: var(--hairline-strong);
    box-shadow: 0 30px 64px -20px rgba(0, 0, 0, 0.95);
}

.arc-card.is-active img {
    filter: grayscale(0) contrast(1.02) brightness(1);
    opacity: 1;
}

.arc-card.is-active::after {
    opacity: 0;
}

.arc-card:hover img {
    filter: grayscale(0.25) contrast(1.04) brightness(0.94);
}

.arc-card:focus-visible {
    outline: 1px solid var(--text);
    outline-offset: 3px;
}

/* --- caption ----------------------------------------------------------- */

.arc-caption {
    position: relative;
    z-index: 4;
    min-height: 76px;
    text-align: center;
}

.arc-caption h3 {
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.1;
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.arc-caption p {
    margin-top: 7px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.arc-caption > * {
    transition: opacity 0.2s var(--ease), transform 0.26s var(--ease);
}

.arc-caption.is-swapping > * {
    opacity: 0;
    transform: translateY(9px);
}

/* --- dots -------------------------------------------------------------- */

.arc-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
    position: relative;
    z-index: 4;
}

.arc-dot {
    width: 22px;
    height: 2px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--hairline-strong);
    cursor: pointer;
    transition: background 0.35s var(--ease), width 0.35s var(--ease);
}

.arc-dot.is-active {
    width: 40px;
    background: var(--text-dim);
}

/* --------------------------------------------------------------------------
   2. MAGNETIC BUTTONS
   Element drifts toward the cursor, label lags slightly behind.
   -------------------------------------------------------------------------- */

[data-magnetic] {
    position: relative;
    transition: transform 0.42s var(--ease);
    will-change: transform;
}

[data-magnetic] > .mag-inner {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    transition: transform 0.55s var(--ease);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   3. 3D TILT
   -------------------------------------------------------------------------- */

[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}

[data-tilt].is-tilting {
    transition: none;
}

/* --------------------------------------------------------------------------
   4. CURSOR SPOTLIGHT
   A soft light that follows the pointer across a panel.
   -------------------------------------------------------------------------- */

[data-spotlight] {
    position: relative;
    isolation: isolate;
}

[data-spotlight]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.07),
        transparent 62%
    );
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

[data-spotlight]:hover::before {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   5. REDUCED MOTION
   Everything above degrades to a plain, readable layout.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .arc-card,
    .arc-card img,
    .arc-caption > *,
    [data-magnetic],
    [data-magnetic] > .mag-inner {
        transition-duration: 0.01ms !important;
    }

    .arc-card img {
        filter: none;
        opacity: 1;
    }

    .arc-card::after {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   6. SMALL SCREENS
   The fan is too cramped below ~640px, so it becomes a scroll strip.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    /* Ingen vandret scroll her. Viften beholdes, bare mindre, og man
       navigerer udelukkende med pilene. */
    .arc-stage {
        height: clamp(210px, 52vw, 280px);
    }

    .arc-caption {
        min-height: 0;
        margin-top: 4px;
    }

    .arc-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
   7. LANGUAGE SWITCH
   Two real URLs, not a JS text swap, so both languages stay indexable.
   -------------------------------------------------------------------------- */

.lang-switch {
    display: inline-flex;
    align-items: stretch;
    margin-right: 4px;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    line-height: 1;
    transition: border-color 0.3s var(--ease);
}

.lang-switch:hover {
    border-color: var(--hairline-strong);
}

.lang-switch span {
    padding: 7px 8px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.lang-switch-on {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.lang-switch-off {
    color: var(--text-mute);
}

.lang-switch:hover .lang-switch-off {
    color: var(--text-dim);
}

@media (max-width: 900px) {
    .lang-switch { display: none; }
}

/* --------------------------------------------------------------------------
   9. BIDIRECTIONAL SCROLL REVEAL
   Overrides the one-way fade in styles.css. Elements slide in from whichever
   edge they entered from, and reset when they leave, so scrolling back up
   replays the motion instead of showing static content.
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 0.62s var(--ease),
        transform 0.72s var(--ease);
}

/* Left via the top of the screen, so it returns from above. */
.reveal.from-above {
    transform: translateY(-34px);
}

.reveal.from-below {
    transform: translateY(34px);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* Headlines and statements get a longer travel and a slight scale, so the
   big type reads as the thing that moved. */
.section-head.reveal,
.statement.reveal,
.hero-title.reveal {
    transform: translateY(46px) scale(0.985);
}

.section-head.reveal.from-above,
.statement.reveal.from-above,
.hero-title.reveal.from-above {
    transform: translateY(-46px) scale(0.985);
}

.section-head.reveal.in,
.statement.reveal.in,
.hero-title.reveal.in {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.from-above,
    .reveal.from-below,
    .section-head.reveal,
    .statement.reveal,
    .hero-title.reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   10. UNDERSIDER (brancheside + pris)
   -------------------------------------------------------------------------- */

.crumbs {
    display: block;
    padding-top: 96px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.crumbs a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
}

.crumbs a:hover { border-bottom-color: var(--hairline-strong); }
.crumbs span[aria-hidden] { margin: 0 6px; color: var(--hairline-strong); }

.hero-sub {
    min-height: 0;
    padding-top: clamp(28px, 4vw, 52px);
}

.hero-sub .hero-title {
    font-size: clamp(2.1rem, 5.4vw, 4rem);
}

.niche-more {
    margin-top: 14px;
    font-size: 0.9rem;
}

.niche-more a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline-strong);
    padding-bottom: 2px;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.niche-more a:hover { color: var(--text); border-bottom-color: var(--text-dim); }

/* --------------------------------------------------------------------------
   11. KLIKMÅL PÅ TOUCH
   Prikkerne er 2px høje af designhensyn. Det er umuligt at ramme med en
   finger, så de får et usynligt klikfelt omkring sig i stedet for at blive
   gjort tykkere.
   -------------------------------------------------------------------------- */

.arc-dot {
    position: relative;
}

.arc-dot::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

.arc-dots {
    /* Modvirker at de nu overlappende klikfelter æder plads omkring sig. */
    padding: 20px 0;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   12. BLOG
   -------------------------------------------------------------------------- */

.shell-narrow { max-width: 760px; }

.posts { list-style: none; padding: 0; margin: 0; }

.post + .post { border-top: 1px solid var(--hairline); }

.post a {
    display: block;
    padding: clamp(22px, 3vw, 34px) 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s var(--ease);
}

.post a:hover { opacity: 0.72; }

.post-meta { color: var(--text-mute); margin-bottom: 10px; }
.post-meta span { margin: 0 6px; }

.post-title {
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.2;
    margin-bottom: 8px;
}

.post-desc {
    font-size: 0.98rem;
    color: var(--text-dim);
    line-height: 1.65;
    max-width: 60ch;
}

.article-head { margin-bottom: clamp(26px, 4vw, 44px); }
.article-meta { color: var(--text-mute); margin-bottom: 14px; }
.article-meta span { margin: 0 5px; }

.article-title {
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.article-body h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 400;
    letter-spacing: -0.018em;
    margin: clamp(30px, 4vw, 46px) 0 12px;
}

.article-body h3 {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 500;
    margin: clamp(24px, 3vw, 34px) 0 10px;
}

.article-body ul { padding-left: 20px; margin: 14px 0; }
.article-body li { margin-bottom: 8px; line-height: 1.75; }
.article-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.article-body code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: 2px 6px;
}

.article-cta {
    margin-top: clamp(40px, 5vw, 64px);
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--surface);
}

.article-author {
    font-size: 0.96rem;
    color: var(--text-dim);
    line-height: 1.7;
    margin: 8px 0 20px;
    max-width: 54ch;
}

/* --------------------------------------------------------------------------
   13. ARTIKLER: TÆTTERE TOP
   Titel og de første linjer skal kunne læses uden at scrolle. Standardafstanden
   fra sektioner og brødkrummer skubbede brødteksten omkring 690px ned, hvilket
   er under kanten på de fleste bærbare.
   -------------------------------------------------------------------------- */

.article {
    padding-top: 0;
}

.article .crumbs,
body:has(.article) .crumbs {
    padding-top: 84px;
    padding-bottom: 0;
}

.article-head {
    margin-bottom: clamp(16px, 2vw, 24px);
}

.article-meta {
    margin-bottom: 8px;
}

.article-title {
    /* Lidt mindre end forsidens hero. En artikeltitel skal læses, ikke råbe. */
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    line-height: 1.14;
}

/* Artiklens indhold må ikke vente på scroll-animationen for at være der. */
.article-head.reveal,
.article-body.reveal {
    opacity: 1;
    transform: none;
}


/* --------------------------------------------------------------------------
   14. PILE I PORTEFØLJEN
   Injiceres af motion.js, så begge sprog får dem uden at redigere to filer.
   -------------------------------------------------------------------------- */

.arc-arrow {
    position: absolute;
    top: 50%;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(8px);
    color: var(--text-dim);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.3s var(--ease),
        border-color 0.3s var(--ease),
        color 0.3s var(--ease),
        transform 0.3s var(--ease);
}

.arc-arrow-prev { left: clamp(6px, 2vw, 20px); }
.arc-arrow-next { right: clamp(6px, 2vw, 20px); }

.arc-arrow:hover {
    background: rgba(20, 20, 20, 0.92);
    border-color: var(--hairline-strong);
    color: var(--text);
}

.arc-arrow-prev:hover { transform: translateY(-50%) translateX(-2px); }
.arc-arrow-next:hover { transform: translateY(-50%) translateX(2px); }

.arc-arrow:focus-visible {
    outline: 1px solid var(--text);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .arc-arrow { transition: none; }
    .arc-arrow-prev:hover,
    .arc-arrow-next:hover { transform: translateY(-50%); }
}

/* --------------------------------------------------------------------------
   15. BRANCHELISTE I NICHEPANELET
   -------------------------------------------------------------------------- */

.niche-branches {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.niche-branches a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}

.niche-branches a:hover {
    border-color: var(--hairline-strong);
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

/* --------------------------------------------------------------------------
   16. GALLERI PÅ UNDERSIDER
   Forsiden har ni felter, så auto-fit fylder bredden pænt. En brancheside
   har ét til tre, og der strækker samme regel ét felt ud til 1126px fra en
   900px fil, hvilket opskalerer og slører billedet. Her sættes et loft.
   -------------------------------------------------------------------------- */

.portfolio-compact {
    grid-template-columns: repeat(auto-fit, minmax(260px, 400px));
    justify-content: start;
}

@media (max-width: 620px) {
    .portfolio-compact {
        grid-template-columns: 1fr;
    }
}