/* =========================================================================
   Chilcuague — Landing
   Botanisch-golden, mystisch. Selbst gehostete Schriften (DSGVO-konform).
   ========================================================================= */

/* --- Fonts (lokal, kein externes CDN zur Laufzeit) --------------------- */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-wght-italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plexmono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plexmono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- Tokens ------------------------------------------------------------ */
:root {
    --ink:        #0c0a07;
    --ink-2:      #14100a;
    --gold:       #d8b66a;
    --gold-bright:#f3d896;
    --gold-deep:  #a9863f;
    --cream:      #ece2cf;
    --muted:      #8f8369;
    --faint:      #5d553f;

    --serif: 'Fraunces', 'Hoefler Text', 'Iowan Old Style', Georgia, serif;
    --mono:  'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; }

body {
    margin: 0;
    background-color: var(--ink);
    color: var(--cream);
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* --- Sprachsteuerung (clientseitig, kein Flicker) ---------------------- */
[data-en] { display: none; }
html[lang="de"] [data-de] { display: revert; }
html[lang="de"] [data-en] { display: none; }
html[lang="en"] [data-en] { display: revert; }
html[lang="en"] [data-de] { display: none; }

/* =========================================================================
   Atmosphäre: warmer Grund, goldener Schein, feines Korn, Vignette
   ========================================================================= */
.stage {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 5rem) 1.5rem;
    isolation: isolate;
}

/* Goldener Schein, der von der Wurzel aufsteigt — atmet langsam */
.stage::before {
    content: "";
    position: absolute;
    inset: -20% -20% auto -20%;
    height: 130%;
    background:
        radial-gradient(58% 50% at 50% 38%, rgba(216,182,106,0.18), rgba(216,182,106,0.06) 38%, transparent 68%),
        radial-gradient(40% 30% at 50% 30%, rgba(243,216,150,0.10), transparent 70%);
    z-index: -2;
    animation: breathe 11s var(--ease) infinite;
    pointer-events: none;
}

/* Vignette für Tiefe */
.stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(0,0,0,0.55) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Feines Korn über allem */
.grain {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes breathe {
    0%, 100% { opacity: 0.7;  transform: translateY(0) scale(1); }
    50%      { opacity: 1;    transform: translateY(-1.5%) scale(1.04); }
}

/* =========================================================================
   Inhalt
   ========================================================================= */
.content {
    position: relative;
    max-width: 40rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gestaffeltes Einblenden beim Laden */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 1.1s var(--ease) forwards;
}
.reveal.d1 { animation-delay: 0.15s; }
.reveal.d2 { animation-delay: 0.45s; }
.reveal.d3 { animation-delay: 0.70s; }
.reveal.d4 { animation-delay: 0.95s; }
.reveal.d5 { animation-delay: 1.20s; }
.reveal.d6 { animation-delay: 1.45s; }

@keyframes rise {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Emblem (Goldwurzel) ---------------------------------------------- */
.emblem {
    width: clamp(96px, 16vw, 132px);
    height: auto;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    filter: drop-shadow(0 0 22px rgba(216,182,106,0.35));
}
.emblem path,
.emblem line,
.emblem circle {
    stroke: url(#goldGrad);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.emblem .seed { fill: url(#goldGrad); stroke: none; }

/* Linien zeichnen sich beim Laden ein */
.emblem .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 2.4s var(--ease) 0.2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- Kicker (botanischer Name) ---------------------------------------- */
.kicker {
    font-family: var(--mono);
    font-size: clamp(0.62rem, 1.6vw, 0.72rem);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.4rem;
    padding-left: 0.42em; /* optischer Ausgleich Tracking */
}

/* --- Wortmarke -------------------------------------------------------- */
.wordmark {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 340;
    font-size: clamp(3.4rem, 13vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: 0.005em;
    margin: 0;
    color: var(--cream);
    background: linear-gradient(180deg, #fbf3df 0%, var(--cream) 45%, var(--gold) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Tagline ---------------------------------------------------------- */
.tagline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 360;
    font-size: clamp(1.25rem, 3.4vw, 1.85rem);
    line-height: 1.4;
    color: var(--cream);
    margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
    max-width: 28ch;
    text-wrap: balance;
}

/* --- Ornament --------------------------------------------------------- */
.divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: clamp(1.8rem, 4.5vw, 2.6rem) 0;
    color: var(--gold-deep);
}
.divider span {
    width: clamp(2.5rem, 8vw, 4.5rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.divider span:last-child {
    background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.divider svg { width: 9px; height: 9px; }
.divider svg path { fill: var(--gold); }

/* --- Status ----------------------------------------------------------- */
.status {
    font-family: var(--mono);
    font-size: clamp(0.66rem, 1.7vw, 0.76rem);
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: 0;
    padding-left: 0.28em;
}

/* --- Kontakt ---------------------------------------------------------- */
.contact {
    margin-top: clamp(2.4rem, 6vw, 3.4rem);
}
.contact a {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    border: 1px solid rgba(216,182,106,0.32);
    border-radius: 999px;
    padding: 0.85rem 1.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: border-color 0.45s var(--ease), color 0.45s var(--ease),
                background-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.contact a::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
}
.contact a:hover {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 32px rgba(216,182,106,0.4);
}
.contact a:hover::before {
    background: var(--ink);
    box-shadow: none;
}

/* --- Sprachschalter --------------------------------------------------- */
.lang {
    position: fixed;
    top: clamp(1.2rem, 3vw, 2rem);
    right: clamp(1.2rem, 3vw, 2rem);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}
.lang button {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--faint);
    font: inherit;
    padding: 0.3rem 0.5rem;
    transition: color 0.3s var(--ease);
}
.lang button:hover { color: var(--muted); }
.lang button[aria-pressed="true"] { color: var(--gold); }
.lang .sep { color: var(--faint); opacity: 0.5; }

/* --- Footer ----------------------------------------------------------- */
.foot {
    position: absolute;
    bottom: clamp(1.2rem, 3vw, 1.8rem);
    left: 0; right: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--muted); }

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; animation: none; }
    .stage::before { animation: none; }
    .emblem .draw { animation: none; stroke-dashoffset: 0; }
}