/* =========================================================
   larsgoldbach.com
   Fonts: Inter wird lokal aus /fonts geladen (keine Google-Server)
   ========================================================= */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --gold: #D2B450;
    --gold-a40: rgba(210, 180, 80, 0.4);
    --gold-a20: rgba(210, 180, 80, 0.2);
    --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible { outline: 1px dashed var(--gold); outline-offset: 4px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   CUSTOM CURSOR
   Nur aktiv auf Geräten mit echter Maus (html.has-cursor,
   per JS gesetzt). Ohne JS oder auf Touch: normaler Cursor.
   ========================================================= */

html.has-cursor, html.has-cursor * { cursor: none !important; }

.cursor {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 20000;
    will-change: transform;
    transform: translate3d(-200px, -200px, 0);
    transition: opacity 0.4s ease;
    display: none;
}
html.has-cursor .cursor { display: block; }
html.lb-open .cursor { opacity: 0; }

/* kleiner Punkt: eigenes Element direkt im Body, damit
   mix-blend-mode mit der Seite darunter verrechnet (invertiert) */
.cursor-mini {
    position: fixed; top: 0; left: 0;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 20001;
    will-change: transform;
    transform: translate3d(-200px, -200px, 0);
    display: none;
}
html.has-cursor .cursor-mini { display: block; }
.cursor-mini { transition: opacity 0.25s ease; }
/* sichtbarer Punkt als Innenleben: so verschiebt das Schrumpfen nicht die Position (JS setzt transform am Element) */
.cursor-mini::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.cursor-mini.is-hidden { opacity: 0; }

/* großer Kreis (WATCH / ABOUT) */
.cursor-dot {
    position: absolute;
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; text-transform: uppercase;
    color: #000;
    background: rgba(210, 180, 80, 0.5);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.45s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.3s ease;
}
.cursor-dot span {
    opacity: 0;
    letter-spacing: 0.6em;
    filter: blur(4px);
    transition: opacity 0.25s, letter-spacing 0.3s, filter 0.25s;
}

/* Ring: dreht sich ein und läuft dann weiter */
.cursor-ring {
    position: absolute;
    width: 136px; height: 136px;
    margin: -68px 0 0 -68px;
    opacity: 0;
    transform: scale(0.7) rotate(-120deg);
    transition: opacity 0.3s, transform 0.45s cubic-bezier(0.55, 0, 0.1, 1);
}
.cursor-ring::before {
    content: '';
    position: absolute; inset: 0;
    border: 1px dashed var(--gold);
    border-radius: 50%;
    animation: cursorSpin 10s linear infinite;
}
@keyframes cursorSpin { to { transform: rotate(360deg); } }

/* WATCH: erst ab 15 % im Bild */
.cursor[data-state="watch"] .cursor-dot,
.cursor[data-state="about"] .cursor-dot {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.75s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.25s ease;
}
.cursor[data-state="watch"] .cursor-dot span,
.cursor[data-state="about"] .cursor-dot span {
    opacity: 1;
    letter-spacing: 0.15em;
    filter: blur(0);
    transition: opacity 0.5s 0.12s, letter-spacing 0.8s 0.08s var(--ease-out), filter 0.5s 0.12s;
}
.cursor[data-state="watch"] .cursor-ring {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s 0.05s, transform 1s 0.05s var(--ease-out);
}

/* ABOUT über dem Portrait: kleiner, weißes Glas */
.cursor[data-state="about"] .cursor-dot {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.7);
}

/* über Buttons / Links */
.cursor[data-state="ui"] { opacity: 0.5; }
/* über Links/Buttons: Punkt schrumpft auf 40 % */
.cursor-mini[data-state="ui"]::before { transform: scale(0.4); }
/* über eingebettetem Player (YouTube/Vimeo): dort zeigt der Player seinen eigenen Zeiger */
.cursor-mini[data-state="frame"] { opacity: 0; }
/* nach Schließen der Lightbox per Maus: kein Fokus-Rahmen um die Zeile */
.no-ring:focus-visible { outline: none; }

/* =========================================================
   HEADER
   ========================================================= */

.portfolio {
    width: 90%;
    max-width: 1600px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 40px 0;
    transition: transform 0.8s var(--ease-soft);
}
.portfolio.shift-left { transform: translateX(-30px); }
/* LET'S COLLAB gehovert: Kacheln weich und dunkel, damit der Button heraussticht */
.portfolio.shift-left .tile img { filter: blur(4px) grayscale(30%) brightness(0.45); transform: scale(1.02); }

.header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin: 0 0 20px;
}

.header h1 { margin: 0; }

.header-stage {
    position: relative;
    width: 75%;
    max-width: 1200px;
    line-height: 0;
}

.header-layer { width: 100%; height: auto; will-change: transform; }
.layer-text { position: relative; z-index: 1; transform: scale(1.02); }

.layer-portrait {
    position: absolute; inset: 0;
    z-index: 2;
    transform: scale(1.04);
    will-change: transform;
    pointer-events: none;
}
.layer-portrait img { width: 100%; height: auto; }

/* Klickfläche ABOUT: entspricht dem Kopf/Oberkörper im 1920x1097 Bild
   (x 1040-1560, y 120-700) */
.about-hotspot {
    position: absolute;
    left: 54.17%; top: 10.94%;
    width: 27.08%; height: 52.87%;
    pointer-events: auto;
    border-radius: 40%;
}

/* =========================================================
   PROJEKT-KACHELN
   ========================================================= */

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    background: #000;
    transform: translateZ(0);
}

.tile img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: grayscale(10%) brightness(0.85);
    transition: transform 1.2s var(--ease-out), filter 0.8s ease;
    will-change: transform, filter;
}

@media (hover: hover) {
    .portfolio:has(.tile:hover) .tile img { filter: grayscale(60%) brightness(0.4); transform: scale(0.98); }
    .portfolio:has(.tile:hover) .tile:hover img { filter: grayscale(0%) brightness(1.1); transform: scale(1.06); }
}

/* Einblend-Animation beim Scrollen (nur mit JS) */
html.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

.project-info { display: none; }

/* =========================================================
   LET'S COLLAB + PAGE UP
   ========================================================= */

.collab {
    position: fixed; right: 40px; top: 50%;
    width: 130px; height: 130px;
    margin-top: -65px;
    display: flex; align-items: center; justify-content: center;
    z-index: 999;
    text-decoration: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
}
.collab.visible { opacity: 1; visibility: visible; }

.collab-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.8);
    animation: spin 12s linear infinite;
    transition: background 0.3s, border 0.3s;
}
.collab-text {
    position: relative;
    color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-align: center;
    opacity: 0; transform: scale(0.8);
    transition: 0.3s;
}
.collab:hover .collab-ring, .collab:focus-visible .collab-ring { background: #fff; border: 2px solid #fff; }
.collab:hover .collab-text, .collab:focus-visible .collab-text { opacity: 1; color: #000; transform: scale(1); }

@keyframes spin { to { transform: rotate(360deg); } }

.page-up {
    position: fixed; right: 40px; bottom: 40px;
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--gold-a40);
    color: #fff;
    z-index: 999;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden;
    transition: all 0.4s ease;
}
.page-up svg { width: 18px; height: 18px; }
.page-up.visible { opacity: 1; visibility: visible; }
.page-up:hover { background: var(--gold); color: #000; border-color: var(--gold); transform: translateY(-5px); }

/* =========================================================
   FOOTER
   ========================================================= */

footer { padding: 40px 0 80px; text-align: center; width: 100%; }

.socials { display: flex; justify-content: center; align-items: center; gap: 40px; margin-bottom: 30px; }

.social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: #fff;
    opacity: 0.5;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}
.social svg { width: 22px; height: 22px; }
.social img { width: 37px; height: auto; filter: brightness(0) invert(1); }
.social:hover, .social:focus-visible { opacity: 1; transform: translateY(-5px) scale(1.1); }

.footer-text { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 2.2; }
.footer-text .copy { opacity: 0.4; }
.footer-legal { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
.footer-legal a {
    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    opacity: 0.5;
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.footer-legal a:hover { opacity: 1; transform: translateY(-2px); }

/* =========================================================
   LIGHTBOX (ersetzt Fancybox)
   ========================================================= */

.lb {
    position: fixed; inset: 0;
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 100px;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}
.lb.open { visibility: visible; transition: none; }

/* Unschärfe selbst wird animiert (nicht die Deckkraft des Containers),
   so startet der Blur sofort beim Klick, auch in Safari */
.lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
/* Blur 25 % von vorher (15px -> 4px), Helligkeit 25 % (Abdunklung 75 %) */
.lb.open .lb-backdrop {
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lb-inner {
    position: relative;
    display: flex; align-items: center;
    width: 100%; max-width: 1700px;
    max-height: 100%;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
}
.lb.open .lb-inner { opacity: 1; transform: none; transition: opacity 0.35s ease 0.05s, transform 0.5s var(--ease-out) 0.05s; }

.lb-media {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex; justify-content: center;
}
.lb-frame {
    position: relative;
    width: 100%;
    max-width: calc((100vh - 120px) * 16 / 9);
    aspect-ratio: 16 / 9;
    background: #000;
}
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-media > img { max-height: calc(100vh - 120px); width: auto; }

.lb-caption {
    width: 350px; flex: 0 0 350px;
    margin-left: 60px; padding: 30px 0 30px 40px;
    border-left: 1px solid var(--gold-a20);
}

.lb-close {
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px;
    background: none; border: none;
    color: #fff; opacity: 0;
    font-size: 30px; line-height: 1;
    transition: opacity 0.3s;
    -webkit-appearance: none; appearance: none;
}
.lb.open .lb-close { opacity: 0.6; }
.lb.open .lb-close:hover { opacity: 1; }

/* Projektinfos in der Lightbox */
.lb-caption .project-info { display: flex; flex-direction: column; gap: 20px; }
.project-title { font-size: 18px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; margin: 0 0 10px; }
.info-block { display: flex; flex-direction: column; margin: 0 0 5px; }
.info-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 4px; }
.info-value { font-size: 13px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.9); line-height: 1.6; margin: 0; }

/* Zwei-Klick-Lösung vor dem Laden von YouTube / Vimeo */
.lb-consent {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
}
.lb-consent::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.lb-consent-box {
    position: relative;
    width: 90%; max-width: 420px;
    background: rgba(15, 15, 15, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--gold-a40);
    border-radius: 20px;
    padding: 25px;
}
.lb-consent-box p { font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0 0 16px; }
.lb-consent-box a { color: var(--gold); }
.lb-consent-box label { display: flex; gap: 10px; align-items: center; font-size: 11px; color: rgba(255, 255, 255, 0.75); margin-bottom: 18px; }
.lb-consent-box input { accent-color: var(--gold); width: 14px; height: 14px; margin: 0; }
.btn {
    display: block; width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--gold);
    background: var(--gold); color: #000;
    font: 700 10px/1 var(--font);
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: all 0.3s ease;
    -webkit-appearance: none; appearance: none;
}
.btn:hover { background: #000; color: var(--gold); }

/* =========================================================
   RECHTSTEXTE (impressum.html / datenschutz.html)
   ========================================================= */

.legal {
    width: 90%; max-width: 680px;
    padding: 80px 0 40px;
}
.legal .back {
    display: inline-block;
    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: #fff; opacity: 0.5; text-decoration: none;
    margin-bottom: 40px;
    transition: opacity 0.3s;
}
.legal .back:hover { opacity: 1; }
.legal h1 { font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 30px; }
.legal h2 { font-size: 13px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.legal ul { padding-left: 18px; }
.legal a { color: var(--gold); }
.legal .btn { width: auto; display: inline-block; padding: 12px 18px; margin-top: 6px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .portfolio {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 20px 15px;
        transform: none !important;
    }
    .header { margin-bottom: 60px; }
    .header-stage { width: 90%; }
    .about-hotspot { inset: 0; width: auto; height: auto; border-radius: 0; }

    .collab {
        position: relative; right: auto; top: auto;
        margin: 10px auto 60px;
        opacity: 1; visibility: visible;
    }
    .collab-text { opacity: 1; transform: none; }

    .page-up { right: 20px; bottom: 20px; width: 40px; height: 40px; }

    .lb { padding: 70px 15px 20px; align-items: flex-start; overflow-y: auto; }
    .lb-inner { flex-direction: column; align-items: stretch; }
    .lb-frame { max-width: none; }
    .lb-frame:has(.lb-consent) { aspect-ratio: auto; }
    .lb-consent { position: relative; inset: auto; min-height: 56.25vw; padding: 24px 0; }
    .lb-media > img { max-height: 60vh; margin: 0 auto; }
    .lb-caption { width: auto; flex: none; margin: 24px 0 0; padding: 0 5px 30px; border-left: 0; }
    .lb-close { top: 12px; right: 12px; }

    .social img { width: 30px; opacity: 0.8; }
}

@media (max-width: 480px) {
    .socials { gap: 28px; }
    .footer-text { letter-spacing: 0.2em; }
    .footer-legal { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
    html.js .reveal { opacity: 1; transform: none; }
}