/* ============================================
   WORK-HERO.CSS — gemeinsamer Fullscreen-Hero der Work-Pages

   Ersetzt vier voneinander unabhängige Hero-Implementierungen mit vier
   verschiedenen Höhen, drei Schriftfamilien und vier Rahmen-Konzepten.
   Gemeinsam sind ab jetzt: Fullscreen-Hülle, Schichtaufbau, Typo-Skala,
   Eyebrow mit Zähler und Scroll-Hinweis.
   Projektspezifisch bleiben: Bildwelt, Akzentfarbe, Grundfarbe, Wortmarke —
   gesetzt über die Variablen am .wd-hero--<projekt>-Modifier.

   Typo-Skala und Full-Bleed-Technik sind bewusst identisch zur Startseite
   (styles/home.css, .hero--editorial), damit die Seiten als eine Familie
   wirken.
   ============================================ */

.wd-hero {
    /* Projektspezifische Vorgaben — pro Seite überschrieben */
    --hero-bg: #08080c;
    --hero-accent: var(--purple-accent);
    --hero-accent-rgb: 181, 124, 255;
    --hero-scrim: 0.92;
    /* body trägt padding-top als Platzhalter für den fixierten Header
       (base.css:124). Ohne Abzug ragt ein 100svh hoher Hero genau um
       diesen Betrag unter die Bildkante — und weil der Inhalt am unteren
       Rand sitzt, landeten die CTAs dort im unsichtbaren Streifen. */
    --wd-hero-offset: 80px;

    position: relative;
    /* Bricht aus main.work-detail--v2 (max-width 1200px) aus — dieselbe
       Technik wie .hero--editorial auf der Startseite. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* vh zuerst als Rückfall: Browser ohne svh verwerfen sonst die ganze
       Deklaration und der Hero fällt auf Inhaltshöhe zusammen. */
    min-height: calc(100vh  - var(--wd-hero-offset));
    min-height: calc(100svh - var(--wd-hero-offset));
    padding: 0;
    margin-top: 0;
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    background: var(--hero-bg);
}

/* ---- Schicht 0: Bildwelt ---- */
.wd-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Nur DIREKTE Kinder: Bilder innerhalb von .wd-hero__layer bringen ihre
   eigene Einpassung mit. Als `.wd-hero__media img` hätte diese Regel
   (Spezifität 0,1,1) jede projektspezifische Klasse (0,1,0) geschlagen und
   freigestellte Figuren fälschlich beschnitten. */
.wd-hero__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--media-pos, center);
}

/* Einzelne Ebene frei positionierbar (Parallax-Schichten) */
.wd-hero__layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* ---- Schicht 1: Verlauf für Lesbarkeit + Akzent-Schimmer ---- */
.wd-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* Akzentlicht, dezent */
        radial-gradient(ellipse 65% 55% at 12% 88%,
            rgba(var(--hero-accent-rgb), 0.16) 0%, transparent 62%),
        /* Abdunklung von unten, damit die Typo immer trägt */
        linear-gradient(to top,
            rgba(5, 5, 9, var(--hero-scrim)) 0%,
            rgba(5, 5, 9, 0.72) 30%,
            rgba(5, 5, 9, 0.34) 55%,
            rgba(5, 5, 9, 0.12) 76%,
            transparent 100%);
}

/* ---- Schicht 2: Inhalt ---- */
.wd-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 6vw, 6rem) clamp(4.5rem, 10vh, 7.5rem);
    display: grid;
    justify-items: start;
    gap: clamp(0.9rem, 2vh, 1.6rem);
}

/* Eyebrow: Zähler + Label, wie .section-meta auf der Startseite */
.wd-hero__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.7);
    /* Die Eyebrow sitzt oben im Inhaltsblock, wo der Verlauf noch schwach ist —
       über hellen Bildstellen (Himmel) trägt sie sonst nicht. */
    text-shadow: 0 1px 14px rgba(5, 5, 9, 0.85);
}

.wd-hero__counter {
    color: var(--hero-accent);
    opacity: 0.9;
    flex-shrink: 0;
}

/* Wortmarke bzw. Projektlogo — optionaler Slot über dem Titel */
.wd-hero__mark {
    display: block;
    width: auto;
    height: clamp(2.5rem, 6vw, 4.5rem);
    max-width: min(80vw, 460px);
    object-fit: contain;
    object-position: left center;
}

.wd-hero__name {
    font-family: 'Geist', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 7.5vw, 7.5rem);
    line-height: 0.95;
    /* Bewusst em statt px: der frühere Wert -3px skalierte nicht mit der
       clamp()-Skala und schob die Buchstaben auf kleinen Schirmen ineinander. */
    letter-spacing: -0.04em;
    color: #f5f1e8;
    max-width: 16ch;
    margin: 0;
}

/* Kleine Zeile über dem Titel, bleibt Teil des <h1> — so behält die Seite
   genau eine Überschrift erster Ordnung und der Satz geht nicht verloren. */
.wd-hero__name-kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.6);
    margin-bottom: clamp(0.6rem, 1.4vh, 1rem);
}

.wd-hero__thesis {
    font-family: 'Geist', 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: rgba(245, 241, 232, 0.72);
    max-width: 52ch;
    margin: 0;
}

/* ---- CTAs — Pillenform wie .hero__cta der Startseite ---- */
.wd-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: clamp(0.5rem, 1.5vh, 1rem);
}

.wd-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 241, 232, 0.85);
    background: transparent;
    color: #f5f1e8;
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    font-weight: 500;
    text-decoration: none;
    min-height: 44px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.wd-hero__cta:hover {
    background: var(--hero-accent);
    border-color: var(--hero-accent);
    color: #0a0a0f;
}

.wd-hero__cta--ghost {
    border-color: rgba(245, 241, 232, 0.28);
    color: rgba(245, 241, 232, 0.78);
}

.wd-hero__cta--ghost:hover {
    background: transparent;
    border-color: rgba(245, 241, 232, 0.85);
    color: #f5f1e8;
}

.wd-hero__cta:focus-visible {
    outline: 2px solid var(--hero-accent);
    outline-offset: 4px;
}

/* ---- Scroll-Hinweis ---- */
.wd-hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 2.5vh, 1.75rem);
    transform: translateX(-50%);
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.45);
    transition: color 0.3s ease;
}

.wd-hero__scroll-cue:hover { color: #f5f1e8; }

.wd-hero__scroll-cue:focus-visible {
    outline: 1px solid var(--hero-accent);
    outline-offset: 6px;
    border-radius: 6px;
}

/* Als CSS gelöst statt per Lottie: js/animations.js wird auf den
   Work-Pages nicht geladen. */
.wd-hero__scroll-cue::after {
    content: '';
    width: 1px;
    height: clamp(28px, 5vh, 44px);
    background: linear-gradient(to bottom,
        rgba(245, 241, 232, 0.5), transparent);
    animation: wdScrollCue 2.2s ease-in-out infinite;
}

@keyframes wdScrollCue {
    0%, 100% { opacity: 0.25; transform: scaleY(0.6); transform-origin: top; }
    50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}

/* ============================================
   PRO PROJEKT — nur Bildwelt, Akzent und Grundfarbe.
   Alles Strukturelle kommt aus der gemeinsamen Basis oben.
   ============================================ */

/* ---- Entrel: goldenes Bergpanorama, Engel als Ebene rechts ---- */
.wd-hero--entrel {
    --hero-bg: #0E0E0E;
    --hero-accent: #d8b982;
    --hero-accent-rgb: 216, 185, 130;
}

.wd-hero--entrel__angel-layer {
    /* Liegt bewusst ÜBER dem Inhalt (z-index 3 gegen 2): der Engel soll die
       Headline überschneiden statt neben ihr zu stehen. pointer-events bleibt
       aus, damit die CTAs darunter klickbar bleiben. */
    z-index: 3;
    pointer-events: none;
    left: auto;
    right: clamp(-4rem, -2vw, 0rem);
    width: min(58vw, 780px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.wd-hero--entrel__angel {
    width: 100%;
    height: 88%;
    object-fit: contain;
    object-position: center bottom;
    filter: contrast(1.08) drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
    animation: wdHeroFigureEnter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

/* Eigene Keyframes statt des alten entrelAngelEnter: das enthielt ein
   translate(-50%, -50%), weil der Engel früher absolut zentriert lag. In der
   neuen Ebene ist er per Flex positioniert — die Zentrierung würde ihn
   verschieben. */
@keyframes wdHeroFigureEnter {
    from { opacity: 0; transform: translateY(28px) scale(1.04); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Markenblock: animiertes Icon über der Wortmarke */
.wd-hero--entrel__brand {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
}

.wd-hero--entrel__brand-icon {
    width: clamp(56px, 6vw, 84px);
    aspect-ratio: 1151 / 522;
    position: relative;
    overflow: hidden;
}

.wd-hero--entrel__brand-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Statische Rückfallebene der Marke — siehe Skript in work/entrel.html */
.wd-hero--entrel__brand-icon-static {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.wd-hero--entrel__brand-icon.is-static-fallback .wd-hero--entrel__brand-icon-static { opacity: 1; }
.wd-hero--entrel__brand-icon.is-static-fallback svg { opacity: 0; }

@media (max-width: 768px) {
    .wd-hero--entrel__angel-layer {
        right: 50%;
        transform: translateX(50%);
        width: min(96vw, 460px);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wd-hero--entrel__angel { opacity: 1; animation: none; }
}


/* ---- Day&Nite: nächtliches Purple, Artist-Ebene über dem Hintergrund ---- */
.wd-hero--daynite {
    --hero-bg: #0b0616;
    --hero-accent: #b57cff;
    --hero-accent-rgb: 181, 124, 255;
}

.wd-hero--daynite__artist {
    /* Rechte Hälfte, aber vom Rand eingerückt — ganz rechts stand die Person
       zu weit außen und wurde vom Bildrand angeschnitten. */
    left: auto;
    right: clamp(0rem, 7vw, 9rem);
    width: min(58vw, 820px);
}

/* Das Logo IST die Headline — der <h1> trägt es mit alt-Text. */
.wd-hero__mark--daynite {
    height: auto;
    width: clamp(220px, 34vw, 460px);
    max-width: 90vw;
}

.wd-hero--daynite__artist img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Höherer X-Wert zeigt bei object-fit:cover den rechten Bildteil — die
       freigestellte Person wandert dadurch im Rahmen nach links. */
    object-position: 68% center;
    /* Weiche Kante nach links, damit die Ebene in den Hintergrund übergeht */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}

@media (max-width: 768px) {
    .wd-hero--daynite__artist { width: 100%; opacity: 0.55; }
    .wd-hero--daynite__artist img {
        -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
        mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
    }
}

/* ---- Mockup-Reihe (eigener Abschnitt unter dem Hero) ---- */
.dn-mockups {
    padding: clamp(3rem, 8vh, 6rem) 0 clamp(1rem, 3vh, 2rem);
}

.dn-mockups__row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.75rem, 2.5vw, 2rem);
}

.dn-mockups__row img {
    width: clamp(120px, 20vw, 240px);
    height: auto;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.dn-mockups__row img:nth-child(2) {
    transform: translateY(clamp(-2rem, -4vw, -1rem));
}


/* ---- Eden01: dunkles Grün, Dschungel-Ebenen, Serifen-Akzent ---- */
.wd-hero--eden01 {
    --hero-bg: #0a0f0a;
    --hero-accent: #d8c07a;
    --hero-accent-rgb: 216, 192, 122;
}

.wd-hero--eden01__layer--baum img,
.wd-hero--eden01__layer--bar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wd-hero--eden01__layer--baum img { object-position: center top; opacity: 0.85; }
.wd-hero--eden01__layer--bar img  { object-position: center bottom; opacity: 0.9; }

/* Eden01 behält seine Serifen — aber als Akzent auf der gemeinsamen Skala,
   nicht als eigene Typo-Welt (vorher bis 14rem gegen 7,5rem überall sonst). */
.wd-hero__name--serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(2.75rem, 8vw, 8rem);
}

/* Die Schreibschrift-Wortmarke trägt die Marke — auf der Basisgröße ging sie
   im Bildrauschen unter (88×52 px gemessen). */
.wd-hero--eden01 .wd-hero__mark {
    height: clamp(3.25rem, 8vw, 6rem);
}

/* ---- Baila Verde: warmer Verlauf + Sonnen-Glow, kein Hintergrundfoto ----
   Werte 1:1 aus der echten Projektseite (BailaVerdeNeu, styles/main.css:
   .scene--arrival, .scene__bg-overlay, .scene__sun). */
.wd-hero--bailaverde {
    --hero-bg: linear-gradient(180deg, #1a0e08 0%, #0c0a08 100%);
    --hero-accent: #d97a30;
    --hero-accent-rgb: 217, 122, 48;
}

/* Zweiter Verlauf über dem Grundton — entspricht .scene__bg-overlay */
.wd-hero--bailaverde .wd-hero__ambient {
    background:
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(217, 122, 48, 0.45), transparent 70%),
        radial-gradient(ellipse 50% 30% at 80% 20%, rgba(168, 66, 26, 0.35), transparent 65%),
        linear-gradient(180deg,
            rgba(12, 10, 8, 0.40) 0%,
            rgba(12, 10, 8, 0.10) 40%,
            rgba(12, 10, 8, 0.85) 100%);
}

/* Warme Sonnenscheibe. Liegt bewusst ÜBER dem Verlauf (z-index 1) — darunter
   würde dessen Abdunklung den Glow schlucken; genauso löst es die Originalseite. */
.wd-hero--bailaverde__sun {
    position: absolute;
    left: 50%;
    bottom: 4vh;
    transform: translateX(-50%);
    z-index: 1;
    width: clamp(420px, 54vw, 940px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(217, 122, 48, 0.50) 0%,
        rgba(185, 74, 93, 0.22) 45%,
        transparent 70%);
    filter: blur(38px);
    pointer-events: none;
}

/* Die Wortmarke IST der Titel — der <h1> trägt sie mit alt-Text. */
.wd-hero__mark--bailaverde {
    height: auto;
    width: clamp(200px, 32vw, 420px);
    max-width: 90vw;
}

.wd-hero__thesis--italic {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    color: rgba(245, 241, 232, 0.82);
}

.wd-hero__thesis--italic em { font-style: italic; }


/* ---- Coming Soon: kein Bild, die Fläche selbst trägt ----
   Statt eines Fotos steht hier ein ruhiger Verlauf mit Rasterlinien.
   Sonst identisch aufgebaut wie die vier Projekt-Heros, damit der
   Sprung aus dem Portfolio nicht wie ein Bruch wirkt. */
.wd-hero--soon {
    --hero-bg: #07070b;
    --hero-accent: var(--purple-accent);
    --hero-accent-rgb: 181, 124, 255;
}

.wd-hero--soon .wd-hero__ambient {
    background:
        radial-gradient(ellipse 70% 60% at 18% 92%,
            rgba(var(--hero-accent-rgb), 0.20) 0%, transparent 62%),
        radial-gradient(ellipse 50% 45% at 88% 8%,
            rgba(var(--hero-accent-rgb), 0.10) 0%, transparent 60%),
        linear-gradient(to top,
            rgba(5, 5, 9, 0.92) 0%,
            rgba(5, 5, 9, 0.55) 45%,
            rgba(5, 5, 9, 0.25) 100%);
}

/* Feines Raster als Textur — greift die Haarlinien des editorialen
   Systems auf, ohne ein weiteres Bild zu laden. */
.wd-hero--soon .wd-hero__media {
    background-image:
        linear-gradient(rgba(245, 241, 232, 0.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 232, 0.030) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 78%);
}

/* Status-Abzeichen in der Eyebrow — ersetzt .work-detail__meta-badge */
.wd-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.75em;
    border: 1px solid rgba(var(--hero-accent-rgb), 0.45);
    border-radius: 999px;
    color: var(--hero-accent);
    letter-spacing: 0.18em;
    line-height: 1;
    white-space: nowrap;
}

/* Ohne Bild darf der Titel ruhig größer stehen */
.wd-hero--soon .wd-hero__name {
    font-size: clamp(3rem, 11vw, 9rem);
    max-width: 12ch;
}


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

@media (max-width: 768px) {
    .wd-hero {
        /* Auf Mobil etwas mehr Abdunklung: die Bildwelt ist beschnitten
           und der Kontrast unter der Typo dadurch unruhiger. */
        --hero-scrim: 0.95;
        /* body wechselt hier auf 70px (base.css:129) */
        --wd-hero-offset: 70px;
    }

    .wd-hero__inner {
        padding: clamp(4rem, 10vh, 6rem) 1.25rem clamp(4rem, 9vh, 5.5rem);
    }

    .wd-hero__meta {
        font-size: 10px;
        letter-spacing: 0.18em;
        gap: 0.75rem;
    }

    .wd-hero__ctas {
        width: 100%;
    }

    .wd-hero__cta {
        flex: 1 1 auto;
        justify-content: center;
    }

    .wd-hero__scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wd-hero__scroll-cue::after { animation: none; opacity: 0.5; }
    .wd-hero__layer { will-change: auto; }
}