/* ============================================================
   HOAM BRÄU — Konzeptstudie Brauerei & Wirtshaus
   Eigenständige Seite unter /showcase/hoam-braeu/.

   Schriften liegen lokal im Projekt (/fonts/) — kein Google-Fonts-Aufruf.
   Fraunces trägt die Überschriften, Geist die Fließtexte; dasselbe Paar
   nutzt auch die Hauptseite, das hält die Handschrift zusammen.

   Farbwelt: dunkles Flaschengrün statt des Fresko-Blaus. Der Grundton
   kommt vom Etikett der Flasche, die Tiefen daraus abgeleitet.
   ============================================================ */

@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces/Fraunces-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces/Fraunces-VariableItalic.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/fonts/Geist/Geist-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink:       #060C09;   /* fast schwarz, grünstichig */
    --green-900: #0B1611;
    --green-800: #10201A;
    --green:     #162C22;   /* Grundton der Seite */
    --green-700: #1E3B2D;
    --forest:    #2C4034;   /* Etikett der Flasche */
    --forest-lt: #3E5A48;
    --moss:      #7E9A81;   /* gedämpftes Laubgrün für Beiwerk */
    --cream:     #F2EDE1;
    --cream-dim: rgba(242, 237, 225, 0.62);
    --gold:      #C9A227;   /* Kronkorken */

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --pad-x: clamp(20px, 5vw, 72px);
    --wrap:  min(1280px, 92vw);
}

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

body {
    margin: 0;
    background: var(--green);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Solange der Splash läuft, darf nicht gescrollt werden. */
body.is-loading { overflow: hidden; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99999;
    padding: 0.8rem 1.2rem;
    background: var(--cream);
    color: var(--ink);
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================================
   RÜCKWEG ZU PURPLE AI LABS
   Eigener pb--Namensraum, damit nichts mit dem Seiten-CSS kollidiert.
   z-index über dem Splash (900) — die Einordnung steht ab Sekunde eins.
   ============================================ */

.pb-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10000;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(12px, 3vw, 28px);
    background: rgba(6, 12, 9, 0.86);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(242, 237, 225, 0.10);
}
.pb-bar__brand { display: flex; align-items: center; opacity: 0.85; transition: opacity 0.2s ease; }
.pb-bar__brand:hover { opacity: 1; }
.pb-bar__brand img { height: 13px; width: auto; }
.pb-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.pb-bar__back:hover { color: var(--cream); }
.pb-bar__tag {
    padding: 0.25em 0.6em;
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 999px;
    color: var(--gold);
    letter-spacing: 0.14em;
}

/* ============================================
   SPLASH
   Zwei Vorhanghälften fahren nach dem Aufbau der Wortmarke auseinander.
   ============================================ */

.splash {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

.splash__pane {
    position: absolute;
    inset: 0;
    background: var(--ink);
    /* Die Hälften werden per clip-path getrennt und in main.js auseinandergefahren. */
    will-change: transform;
}
.splash__pane--top    { clip-path: inset(0 0 50% 0); }
.splash__pane--bottom { clip-path: inset(50% 0 0 0); }

.splash__center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vh, 2rem);
    text-align: center;
    padding: 0 var(--pad-x);
}

.splash__logo-wrap {
    position: relative;
    width: min(380px, 62vw);
    aspect-ratio: 1106 / 571;
}

/* Standbild als Rückfall — verschwindet, sobald Lottie übernimmt. */
.splash__logo-still,
.splash__logo-anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.splash__logo-still { object-fit: contain; transition: opacity 0.3s ease; }
.splash.has-lottie .splash__logo-still { opacity: 0; }

/* Lottie setzt Inline-Maße aufs SVG — die müssen überschrieben werden. */
.splash__logo-anim svg {
    width: 100% !important;
    height: 100% !important;
}

.splash__claim {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 4.5vw, 2.9rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    color: var(--cream);
    opacity: 0;                      /* main.js blendet zeilenweise ein */
}
.splash__claim span { display: block; }

.splash__meta {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(242, 237, 225, 0.42);
}
.splash__count { color: var(--gold); font-variant-numeric: tabular-nums; }

/* ============================================
   KOPFZEILE
   ============================================ */

.topbar {
    position: fixed;
    top: 36px;                        /* unter dem Purple-Balken */
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(0.8rem, 2vh, 1.4rem) var(--pad-x);
    transition: background 0.35s ease, backdrop-filter 0.35s ease,
                padding 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
}

.topbar.is-scrolled {
    background: rgba(16, 32, 26, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(242, 237, 225, 0.10);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.topbar__brand img {
    height: clamp(22px, 3.4vw, 34px);
    width: auto;
    object-fit: contain;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.2rem);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.topbar__nav a { color: var(--cream-dim); text-decoration: none; transition: color 0.2s ease; }
.topbar__nav a:hover { color: var(--cream); }

.topbar__cta {
    padding: 0.6em 1.2em;
    border: 1px solid rgba(242, 237, 225, 0.3);
    border-radius: 999px;
    color: var(--cream) !important;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.topbar__cta:hover { background: var(--forest); border-color: var(--forest); }

@media (max-width: 640px) {
    .topbar__nav a:not(.topbar__cta) { display: none; }
}

/* ============================================
   HERO
   Vier Ebenen. Der Abschnitt wird beim Scrollen festgehalten (main.js),
   währenddessen fahren die Arme zusammen und stoßen an.
   ============================================ */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, rgba(6, 12, 9, 0.45) 100%),
        linear-gradient(to bottom, rgba(6, 12, 9, 0.45) 0%, transparent 28%,
                        transparent 62%, rgba(6, 12, 9, 0.88) 100%);
}

/* Bühne für Wortmarke und Arme — füllt den Hero, damit die
   vollformatigen Arm-Ebenen deckungsgleich liegen. */
.hero__stage { position: absolute; inset: 0; z-index: 1; }

.hero__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(560px, 46vw);
    z-index: 1;
}
.hero__logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 40px rgba(6, 12, 9, 0.6));
}

/* Die Arme sind vollformatige Ebenen (1920×1080) und liegen deckungsgleich
   über dem Hintergrund.

   Gemessen am Alphakanal: Die linke Flasche endet bei 49,0 % der Breite, die
   rechte beginnt bei 51,2 % — in RUHELAGE berühren sie sich also beinahe.
   Deshalb läuft die Bewegung andersherum als zunächst gebaut: Sie starten
   auseinandergezogen und fahren beim Scrollen auf ihre natürliche Position
   zurück. Dort treffen sie sich, ohne sich zu überlagern.

   Nebeneffekt, der ein Artefakt erspart: Am Bildrand ist der Arm beschnitten.
   Nach außen verschoben liegt diese Schnittkante ausserhalb des Sichtfelds;
   bei 0 sitzt sie exakt auf der Bildkante. Sie wird nie sichtbar. */
.hero__arm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    will-change: transform;
}
/* KEINE Grundstellung per CSS. GSAP las den Prozentwert als Pixel ein und
   addierte xPercent obendrauf — die Flaschen fuhren dadurch doppelt so weit.
   Die Ausgangslage setzt ausschliesslich das fromTo in js/main.js.
   Ohne JavaScript stehen die Arme in Ruhelage, also bereits berührend. */

.hero__prost {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, 120%);
    opacity: 0;
    will-change: transform, opacity;
}

/* Sprechblase mit Zipfel nach oben — sie hängt unter dem Anstoßpunkt. */
.hero__prost-bubble {
    position: relative;
    display: inline-block;
    padding: 0.55em 1.3em 0.62em;
    background: var(--cream);
    color: var(--forest);
    border-radius: 999px;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    box-shadow: 0 14px 44px rgba(6, 12, 9, 0.55);
}
.hero__prost-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 12px solid transparent;
    border-bottom-color: var(--cream);
    border-top: 0;
}

.hero__kicker {
    position: relative;
    z-index: 4;
    margin: 0 0 clamp(3.5rem, 9vh, 6rem);
    padding: 0 var(--pad-x);
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(242, 237, 225, 0.62);
}

.hero__hint {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.hero__hint-line {
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, transparent, rgba(242, 237, 225, 0.55));
}
.hero__hint-text {
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(242, 237, 225, 0.4);
}

@media (max-width: 700px) {
    .hero__logo { width: 68vw; }
}

/* ============================================
   ABSCHNITTE UND DIE REISE DER FLASCHE

   Die Flasche liegt als fixierte Ebene über den Abschnitten. Beim Scrollen
   wandert sie von rechts oben nach links und schliesslich in die Mitte
   (js/main.js). Damit sie nie über dem Text steht, weichen die Spalten
   abwechselnd aus: 01 links, 02 rechts, 03 mittig.
   ============================================ */

.journey {
    position: relative;
    background:
        radial-gradient(ellipse 70% 40% at 80% 8%,  rgba(30, 59, 45, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 35% at 15% 55%, rgba(30, 59, 45, 0.40) 0%, transparent 60%),
        linear-gradient(180deg, var(--green) 0%, var(--green-900) 55%, var(--ink) 100%);
}

/* Die Flasche steht bewusst gross im Bild — sie ist das Motiv, nicht Zierrat.
   Tiefe entsteht aus drei Lagen, die zusammenspielen:
     1. ein weicher Lichtkegel dahinter (::before), der sie vom Grund abhebt
     2. ein Kontaktschatten dicht am Objekt plus ein weiter Umgebungsschatten
     3. eine Spiegelung darunter (::after), die den Standort andeutet
   Alles rein aus CSS — es gibt kein zweites Bild dafür. */
/* Schiene: klebt am oberen Rand, belegt aber keine Höhe im Fluss. Sie
   begrenzt die Flasche auf den Bereich der Reise — mit position:fixed lag
   die Flasche im ganzen Dokument und war schon über dem Hero zu ahnen. */
.journey__rail {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 2;
}

.journey__bottle {
    position: absolute;
    top: 50vh;
    left: 50%;
    /* Seitenverhältnis der Flasche ist 1414:2000, sie wird also rund 1,41×
       so hoch wie breit. Bei 36vw ragte sie unten aus dem Bild — und mit ihr
       Kontaktschatten und Spiegelung, also genau die Tiefenwirkung.
       32vw ergibt bei 1440px rund 460×651 und passt mit Rand. */
    width: clamp(260px, 32vw, 540px);
    margin: -28vh 0 0 -16vw;          /* Startbezug, den Rest macht GSAP */
    pointer-events: none;
    opacity: 0;                        /* GSAP blendet ein, sobald die Reise beginnt */
    will-change: transform, opacity;
}

/* Lichtkegel: sitzt hinter der Flasche und ist deutlich breiter als sie —
   dadurch wirkt der Grund hinter ihr aufgehellt statt flach. */
.journey__bottle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 190%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(126, 154, 129, 0.22) 0%,
        rgba(45, 78, 58, 0.16) 32%,
        transparent 62%);
    filter: blur(18px);
    z-index: -2;
}

/* Spiegelung: gestauchte, weich ausgeblendete Kopie unter dem Objekt.
   maskiert statt dupliziert — das Bild wird nur einmal geladen. */
.journey__bottle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 46%;
    height: 9%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse,
        rgba(6, 12, 9, 0.75) 0%,
        rgba(6, 12, 9, 0.35) 45%,
        transparent 72%);
    filter: blur(10px);
    z-index: -1;
}

.journey__bottle img {
    width: 100%;
    height: auto;
    /* Zwei Schattenlagen: der erste sitzt dicht am Glas und gibt Kante,
       der zweite trägt die Masse und legt das Objekt in den Raum. */
    filter:
        drop-shadow(0 6px 14px rgba(6, 12, 9, 0.55))
        drop-shadow(0 40px 80px rgba(6, 12, 9, 0.7));
}

.sec {
    position: relative;
    z-index: 3;                        /* Text immer über der Flasche */
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: clamp(4rem, 12vh, 8rem) var(--pad-x);
}

.sec__col {
    width: min(46ch, 100%);
    max-width: 100%;
}

.sec--left  .sec__col { margin-right: auto; }
.sec--right .sec__col { margin-left: auto; }
.sec--center {
    justify-content: center;
    text-align: center;
}
.sec--center .sec__col { margin: 0 auto; width: min(52ch, 100%); }

/* Grosse Ziffer als stiller Anker — greift die Nummerierung der
   Purple-Startseite auf, ohne sie zu kopieren. */
.sec__num {
    display: block;
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
    font-family: var(--serif);
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 400;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(126, 154, 129, 0.45);
    user-select: none;
}

.sec__eyebrow {
    display: block;
    margin-bottom: clamp(0.8rem, 2vh, 1.2rem);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
}

.sec__title {
    margin: 0 0 clamp(1.2rem, 3vh, 2rem);
    font-family: var(--serif);
    font-size: clamp(2rem, 5.2vw, 4rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--cream);
}
.sec__title--big { font-size: clamp(2.2rem, 6.5vw, 5rem); }

.sec p {
    margin: 0 0 1.15rem;
    color: var(--cream-dim);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.75;
}

.sec__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: clamp(2rem, 5vh, 3rem) 0 0;
    padding: clamp(1.5rem, 4vh, 2rem) 0 0;
    border-top: 1px solid rgba(242, 237, 225, 0.14);
}
.sec__facts li { display: flex; flex-direction: column; gap: 0.35rem; }
.sec__facts strong {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 600;
    line-height: 1;
    color: var(--cream);
}
.sec__facts span {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(242, 237, 225, 0.42);
}

.sec__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    padding: 1.05rem 2.6rem;
    border-radius: 999px;
    background: var(--forest);
    border: 1px solid var(--forest-lt);
    color: var(--cream);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.sec__btn:hover {
    background: var(--forest-lt);
    border-color: var(--moss);
    transform: translateY(-2px);
}

/* Auf schmalen Schirmen hat die Flasche keinen Platz neben dem Text —
   dort wandert sie hinter den Inhalt und wird stark zurückgenommen. */
@media (max-width: 860px) {
    .journey__bottle {
        width: 62vw;
        margin-left: -31vw;
    }
    /* Lichtkegel und Spiegelung kosten auf Mobil mehr, als sie bei 16 %
       Deckkraft noch beitragen. */
    .journey__bottle::before,
    .journey__bottle::after { display: none; }
    .sec__col { width: 100%; }
    .sec { min-height: auto; padding-top: clamp(3.5rem, 9vh, 5rem); padding-bottom: clamp(3.5rem, 9vh, 5rem); }
}

/* ============================================
   FUSSZEILE
   ============================================ */

.footer {
    background: var(--ink);
    border-top: 1px solid rgba(242, 237, 225, 0.10);
    padding: clamp(3rem, 8vh, 5rem) var(--pad-x);
}
.footer__inner {
    width: var(--wrap);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    text-align: center;
}
.footer__mark { width: 128px; height: auto; opacity: 0.5; }
.footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.2rem);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.footer__nav a { color: var(--cream-dim); text-decoration: none; transition: color 0.2s ease; }
.footer__nav a:hover { color: var(--cream); }
.footer__meta {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: rgba(242, 237, 225, 0.38);
}
.footer__meta a { color: rgba(242, 237, 225, 0.6); text-decoration: underline; text-underline-offset: 0.2em; }
.footer__meta a:hover { color: var(--cream); }

/* ============================================
   REDUZIERTE BEWEGUNG
   Ohne Animation ist der Anstoß nicht darstellbar — dann stehen die
   Flaschen von vornherein beieinander und „Prost" ist sichtbar.
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .hero__prost { transform: translate(-50%, 60%); opacity: 1; }
    .splash { display: none; }
    .splash__claim { opacity: 1; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}