/* ============================================================
   landing.css — Liquid design. One fluid layout for all viewports.
   Uses clamp() & fluid units exclusively — zero hard breakpoints.
   CSS-native animations so content is always visible (no JS dependency).
   ============================================================ */

/* ---- Hero shell ---- */
.hero {
    position: relative;
    z-index: var(--z-base);
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding:
        clamp(68px, 10vh, 120px)
        clamp(12px, 4vw, 24px)
        clamp(80px, 13vh, 110px); /* extra bottom space for fixed footer */
    overflow: hidden;
}

/* ---- Floating glass card — generous breathing room ---- */
.hero-card {
    /* fluid width capped at 540px — aspect-ratio keeps it a true square */
    width: min(clamp(300px, 90vw, 540px), 100%);
    aspect-ratio: 1 / 1;
    padding: clamp(20px, 5vw, 38px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    animation:
        hero-card-enter   0.9s cubic-bezier(.2,.8,.2,1) both,
        card-float        14s  ease-in-out 1s infinite,
        card-shadow-pulse 3.6s ease-in-out infinite;
    will-change: transform;
}
@keyframes hero-card-enter {
    0%   { opacity: 0; transform: translateY(18px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Always-on pulsing shadow — dark depth plus a soft warm halo that breathes */
@keyframes card-shadow-pulse {
    0%, 100% {
        box-shadow:
            0 24px 54px -20px rgba(0, 0, 0, 0.30),
            0 8px 20px -10px rgba(0, 0, 0, 0.20),
            0 0 34px 2px rgba(255, 214, 170, 0),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.70);
    }
    50% {
        box-shadow:
            0 40px 84px -16px rgba(0, 0, 0, 0.40),
            0 16px 34px -10px rgba(0, 0, 0, 0.28),
            0 0 60px 12px rgba(255, 214, 170, 0.50),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.88);
    }
}

/* ---- LOGO — centerpiece ---- */
.hero-logo-link {
    display: inline-block;
    position: relative;
    margin: 0 0 clamp(14px, 3.8vw, 26px);
    line-height: 0;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    animation: logo-enter 1.0s cubic-bezier(.2,.8,.2,1) 0.15s both;
}
@keyframes logo-enter {
    0%   { opacity: 0; transform: translateY(12px) scale(0.92); filter: blur(8px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; }
}

/* Ambient glow ring behind logo */
.hero-logo-link::before {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 235, 200, 0.55) 0%,
        rgba(255, 220, 180, 0.20) 35%,
        transparent 65%);
    z-index: -1;
    animation: logo-glow 8s ease-in-out infinite;
    will-change: opacity, transform;
}
@keyframes logo-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.08); }
}

.hero-logo {
    width: clamp(116px, 25vw, 200px);
    height: auto;
    filter:
        drop-shadow(0 14px 32px rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.10));
    animation:
        logo-breathe 10s ease-in-out 1s infinite,
        logo-sway    18s ease-in-out 1s infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    transition: filter 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
@keyframes logo-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes logo-sway {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg); }
}
.hero-logo-link:hover .hero-logo {
    filter:
        drop-shadow(0 22px 44px rgba(0, 0, 0, 0.28))
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.16));
    transform: scale(1.06);
}
.hero-logo-link:hover::before { opacity: 1; transform: scale(1.15); }
.hero-logo-link:active .hero-logo { transform: scale(0.98); }

/* ---- Slogan ---- */
.hero-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 16px);
    margin: 0 0 clamp(12px, 3vw, 20px);
    color: #000;
    font-size: clamp(9px, 1.6vw, 12px);
    font-weight: 900;
    letter-spacing: 0.40em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    animation: hero-content-enter 0.8s var(--ease-out) 0.3s both;
}
.hero-slogan::before,
.hero-slogan::after {
    content: "";
    flex: 0 0 auto;
    width: clamp(3.5px, 0.9vw, 5px);
    height: clamp(3.5px, 0.9vw, 5px);
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* ---- Headline ---- */
.hero-title {
    margin: 0 0 clamp(20px, 4vw, 30px);
    line-height: 1.05;
    animation: hero-content-enter 0.8s var(--ease-out) 0.45s both;
}
.hero-title .welcome {
    display: block;
    font-size: clamp(9.5px, 1.5vw, 12px);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: clamp(6px, 1.4vw, 10px);
}
.hero-title .world {
    display: block;
    font-size: clamp(18px, 4.2vw, 28px);
    font-weight: 900;
    letter-spacing: 0.018em;
    color: var(--ink);
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.5);
}

/* ---- CTA stack ---- */
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.5vw, 16px);
    margin-top: clamp(2px, 0.8vw, 6px);
    animation: hero-content-enter 0.8s var(--ease-out) 0.6s both;
}
.cta {
    min-width: clamp(180px, 52vw, 240px);
    justify-content: center;
    padding: clamp(11px, 2.5vw, 14px) clamp(20px, 4vw, 28px);
    font-size: clamp(12.5px, 1.9vw, 14.5px);
}
.cta-link {
    font-size: clamp(11px, 1.5vw, 13px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(20, 20, 20, 0.58);
    padding: 4px 10px;
    text-decoration: none;
    transition: color var(--t-fast);
}
.cta-link:hover { color: var(--ink); }

/* ──────────────────────────────────────────────────────
 *  Hero Code-Eingabe (Gutschein/Invitation)
 *  6-char short codes (voice/SMS) und 12-char URLs.
 *  Animated entrance matches the rest of hero-content.
 * ────────────────────────────────────────────────────── */
.hero-code-box {
    margin-top: clamp(14px, 2.6vw, 22px);
    width: min(360px, 92vw);
    animation: hero-content-enter 0.8s var(--ease-out) 0.75s both;
}
.hero-code-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: clamp(10px, 1.4vw, 12px);
    color: rgba(20, 20, 20, 0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hero-code-divider::before,
.hero-code-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20,20,20,0.18), transparent);
}
.hero-code-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-code-input {
    width: 100%;
    padding: clamp(10px, 2.4vw, 13px) clamp(14px, 3vw, 18px);
    border: 1.5px solid rgba(20, 20, 20, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    font-family: 'SF Mono', 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-size: clamp(15px, 2.6vw, 18px);
    letter-spacing: 0.18em;
    color: var(--ink, #111);
    text-align: center;
    text-transform: uppercase;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.hero-code-input::placeholder {
    color: rgba(20, 20, 20, 0.32);
    letter-spacing: 0.18em;
    font-weight: 500;
}
.hero-code-input:focus {
    outline: none;
    border-color: rgba(20, 20, 20, 0.55);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.06);
}
.hero-code-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.hero-code-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: clamp(9px, 2vw, 12px) clamp(10px, 2.5vw, 16px);
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-size: clamp(11.5px, 1.8vw, 13.5px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hero-code-btn.primary {
    background: var(--ink, #111);
    color: #fff;
}
.hero-code-btn.primary:hover {
    background: #000;
    transform: translateY(-1px);
}
.hero-code-btn.ghost {
    background: transparent;
    color: var(--ink, #111);
    border-color: rgba(20, 20, 20, 0.25);
}
.hero-code-btn.ghost:hover {
    background: rgba(20, 20, 20, 0.06);
    border-color: rgba(20, 20, 20, 0.45);
    transform: translateY(-1px);
}
.hero-code-hint {
    margin: 6px 0 0;
    text-align: center;
    font-size: clamp(10.5px, 1.4vw, 12px);
    color: rgba(20, 20, 20, 0.5);
    line-height: 1.4;
    min-height: 1.4em;
}

/* ---- Shared entrance keyframe for content blocks ---- */
@keyframes hero-content-enter {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-card,
    .hero-logo-link,
    .hero-logo-link::before,
    .hero-logo,
    .hero-slogan,
    .hero-title,
    .hero-cta { animation: none !important; }
}