/*
 * ── Schriftarten (DSGVO-konform) ─────────────────────────────────────────
 *
 * Inter: System-Schrift-Fallback (kein CDN-Aufruf erforderlich).
 *   Für selbst-gehostete Variante: Inter-VariableFont_opsz,wght.woff2
 *   nach /fonts/ ablegen — @font-face unten ist bereits vorbereitet.
 *
 * Material Symbols Outlined: self-hosted (DSGVO-konform, kein CDN-Aufruf).
 *   Datei: fonts/material-symbols-outlined.woff2 — @font-face unten definiert.
 *   npm-Paket: material-symbols
 * ────────────────────────────────────────────────────────────────────────── */

/* Inter — self-hosted variable font (DSGVO-konform, kein CDN-Aufruf) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Inter-VariableFont.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

/* Material Symbols Outlined — self-hosted (DSGVO-konform, kein CDN-Aufruf) */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* JS-controlled show/hide — used by cookie consent instead of inline style="display:none" */
.ui-hidden {
    display: none !important;
}

/* AOS failsafe: if AOS JS fails to load, body never gets .aos-init and all
   data-aos elements would stay invisible (opacity:0). This rule shows them. */
body:not(.aos-init) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Hero background glow */
.hero-glow {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    animation: glow-pulse 6s ease-in-out infinite;
}

/* Keyframe: slow breathe on hero glow */
@keyframes glow-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.08); }
}

/* Keyframe: gentle float for decorative orbs */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-18px); }
}
.float-orb {
    animation: float 8s ease-in-out infinite;
}
.float-orb-delay {
    animation: float 8s ease-in-out infinite 2s;
}

/* Tally embed container — frames the light-bg iframe against the dark page */
.tally-card {
    background: #1a1a1a;
    border: 1px solid #27272a;
    border-radius: 1rem;
    padding: 8px 12px 0;
    overflow: hidden;
}

/* Hide scrollbar on phone carousel */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Prompt creation animation phone mockup ── */
.panim-screen {
    position: absolute;
    inset: 0;
    background: #000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    pointer-events: none;
    overflow: hidden;
}
.panim-screen.panim-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: auto;
}

/* Skeleton shimmer */
@keyframes panim-shimmer {
    0%   { background-position: -300% 0; }
    100% { background-position:  300% 0; }
}
.panim-skeleton {
    background: linear-gradient(90deg, #1c1c1e 25%, #2a2a2e 50%, #1c1c1e 75%);
    background-size: 300% 100%;
    animation: panim-shimmer 1.8s infinite ease-in-out;
    border-radius: 6px;
}

/* Blinking cursor in typing screen */
@keyframes panim-blink {
    0%, 49% { opacity: 1; }
    50%,100% { opacity: 0; }
}
.panim-cursor::after {
    content: '|';
    color: #3B82F6;
    animation: panim-blink 1s infinite;
    font-weight: 300;
    margin-left: 1px;
}

/* Navbar scroll effect */
nav {
    transition: background-color 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease;
}
nav.scrolled {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(39, 39, 42, 0.8);
}

/* Mobile menu slide animation */
#navbar-sticky {
    transition: max-height 300ms ease, opacity 300ms ease;
    overflow: hidden;
}
#navbar-sticky.hidden {
    display: block !important;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
#navbar-sticky:not(.hidden) {
    max-height: 400px;
    opacity: 1;
}