/* static/css/base.css */
/*
 * Переменные, сброс, типографика, анимации.
 * CSP-compatible: никаких inline-style зависимостей.
 */

/* ─── 0. Reset / Normalize ────────────────────────────────── */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: rgba(229, 231, 235, 0.8);
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
    /* why: запрещаем синтетические веса/курсив — лучше fallback, чем кривые глифы */
    font-synthesis: none;
}

body {
    margin: 0;
    line-height: inherit;
}

img, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button {
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: inherit; }

/* ─── 1. Fonts (Self-Hosted, CSP-safe) ────────────────────── */
/* why: variable TTF для предсказуемых весов и отсутствия synthetic bold */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/static/fonts/manrope.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url('/static/fonts/oswald.ttf') format('truetype');
}

/* ─── 2. CSS Custom Properties ────────────────────────────── */

:root {
    /* Primary palette */
    --color-primary: #0D9488;
    --color-primary-light: rgba(13, 148, 136, 0.1);
    --color-primary-glow: rgba(13, 148, 136, 0.25);

    /* Secondary palette */
    --color-secondary: #8B5CF6;
    --color-secondary-light: rgba(139, 92, 246, 0.1);
    --color-secondary-glow: rgba(139, 92, 246, 0.25);

    /* Accent */
    --color-cyan: #06B6D4;
    --color-cyan-light: rgba(6, 182, 212, 0.1);
    --color-cyan-glow: rgba(6, 182, 212, 0.25);

    /* Neutrals */
    --color-text: #111827;
    --color-muted: #6B7280;
    --color-border: rgba(229, 231, 235, 0.8);
    --color-bg: #F9FAFB;

    /* Status */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;

    /* Avatar colors */
    --avatar-color-1: #E0F2FE; --avatar-text-1: #0369A1;
    --avatar-color-2: #FCE7F3; --avatar-text-2: #BE185D;
    --avatar-color-3: #D1FAE5; --avatar-text-3: #047857;
    --avatar-color-4: #FEF3C7; --avatar-text-4: #B45309;
    --avatar-color-5: #EDE9FE; --avatar-text-5: #7C3AED;
    --avatar-color-6: #FFEDD5; --avatar-text-6: #C2410C;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 18px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 22px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 60px rgba(13, 148, 136, 0.15);

    /* Motion tokens */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── 3. Global Styles ────────────────────────────────────── */

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Scroll lock (CSP-safe replacement for body.style.overflow) */
body.no-scroll {
    overflow: hidden;
}

/* Typography System */

/* Body text */
.font-sans {
    font-family: 'Manrope', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* Headings: Manrope Bold (700) */
.font-display {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Utility to use Oswald specifically where needed */
.font-oswald {
    font-family: 'Oswald', system-ui, sans-serif;
    letter-spacing: 0.02em;
}

:target {
    scroll-margin-top: 100px;
}

::selection {
    background: var(--color-primary-light);
    color: var(--color-text);
}

/* ─── 4. Utility Classes ──────────────────────────────────── */

.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar,
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.skip-link {
    position: absolute;
    top: -9999px;
    left: 1rem;
    padding: 1rem;
    background: var(--color-text);
    color: white;
    z-index: 1000;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0.5rem;
}

.skip-link:focus {
    top: 1rem;
}

/* CSP-safe helper: hide element without inline style */
.initially-hidden {
    display: none;
}

/* Scroll-reveal: стартовое состояние без JS inline-style */
.will-animate {
    opacity: 0;
}

/* CSP-safe helper: progress bar starts at zero width */
.progress-bar--zero {
    width: 0%;
}

/* ─── 5. Typography Components ────────────────────────────── */

.section-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    background: var(--color-primary-light);
    border-radius: 9999px;
    border: 1px solid rgba(13, 148, 136, 0.15);
}

.gradient-text {
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 25%,
        var(--color-cyan) 50%,
        var(--color-secondary) 75%,
        var(--color-primary) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
}

/* ─── 6. Glass Morphism ───────────────────────────────────── */

.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255,255,255,0.2);
}

@media (max-width: 767px) {
    .glass-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* ─── 7. Hero Social Proof Avatars (CSP-safe, no inline styles) ── */

.hero-avatar--1 {
    background: var(--avatar-color-1);
    color: var(--avatar-text-1);
}

.hero-avatar--2 {
    background: var(--avatar-color-3);
    color: var(--avatar-text-3);
}

.hero-avatar--3 {
    background: var(--avatar-color-5);
    color: var(--avatar-text-5);
}

/* ─── 8. Animations ───────────────────────────────────────── */

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 0.4; }
    100% { transform: scale(1); opacity: 0.8; }
}

@keyframes orbit-spin {
    from { transform: translate(-50%, -52%) rotate(0deg); }
    to { transform: translate(-50%, -52%) rotate(360deg); }
}

@keyframes orbit-spin-reverse {
    from { transform: translate(-50%, -52%) rotate(360deg); }
    to { transform: translate(-50%, -52%) rotate(0deg); }
}

@keyframes float-product {
    0%, 100% { transform: translate3d(0, 8px, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.8s ease-out forwards; }

/* Discrete delay classes (CSP-safe replacement for el.style.animationDelay) */
.animation-delay-0 { animation-delay: 0ms; }

.animation-delay-80 { animation-delay: 80ms; }
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-160 { animation-delay: 160ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-240 { animation-delay: 240ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-320 { animation-delay: 320ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-480 { animation-delay: 480ms; }
.animation-delay-560 { animation-delay: 560ms; }
.animation-delay-600 { animation-delay: 600ms; }
.animation-delay-640 { animation-delay: 640ms; }
.animation-delay-700 { animation-delay: 700ms; }
.animation-delay-720 { animation-delay: 720ms; }

/* ─── 9. Reduced Motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .gradient-text,
    .animate-fade-in,
    .animate-slide-up,
    .animate-float {
        animation: none !important;
        transition: none !important;
    }

    /* Ensure content isn't stuck at opacity:0 */
    .will-animate {
        opacity: 1 !important;
    }
}

/* ─── 10. CSP-safe clipboard helper ───────────────────────── */
/* why: share.js fallback must not use inline styles (blocked by CSP). */
.clipboard-textarea {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}