/* ═══════════════════════════════════════════
   Baret Web – Premium Design System
   baretapp.com
═══════════════════════════════════════════ */

@layer base {
    html { scroll-behavior: smooth; }
}

[x-cloak] { display: none !important; }

/* ─── Glassmorphism ─────────────────────── */
.glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card-premium {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.dark-glass {
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Background Meshes ─────────────────── */
.bg-mesh {
    background-image:
        radial-gradient(at 20% 10%, hsla(43, 96%, 58%, 0.15) 0px, transparent 55%),
        radial-gradient(at 80% 5%, hsla(210, 80%, 68%, 0.08) 0px, transparent 45%),
        radial-gradient(at 5% 60%, hsla(355, 90%, 85%, 0.1) 0px, transparent 50%),
        radial-gradient(at 95% 60%, hsla(280, 80%, 80%, 0.08) 0px, transparent 45%),
        radial-gradient(at 50% 100%, hsla(43, 96%, 58%, 0.1) 0px, transparent 50%);
    position: fixed;
    inset: 0;
    z-index: -1;
    filter: blur(60px);
    pointer-events: none;
}

.bg-mesh-dark {
    background-image:
        radial-gradient(at 0% 0%, hsla(253, 20%, 9%, 1) 0, transparent 60%),
        radial-gradient(at 50% 0%, hsla(225, 40%, 15%, 1) 0, transparent 60%),
        radial-gradient(at 100% 0%, hsla(339, 50%, 12%, 1) 0, transparent 60%),
        radial-gradient(at 30% 100%, hsla(43, 96%, 10%, 0.8) 0, transparent 50%);
    opacity: 0.9;
}

/* ─── Float Animation ───────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-12px) rotate(1.5deg); }
    66%       { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes float-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    40%       { transform: translateY(-10px) rotate(-2deg); }
    70%       { transform: translateY(-4px) rotate(1deg); }
}

.animate-float         { animation: float 7s ease-in-out infinite; }
.animate-float-delayed { animation: float-delayed 8s ease-in-out infinite; animation-delay: 2.5s; }

/* ─── Dash Line Animation ───────────────── */
@keyframes dash {
    to { stroke-dashoffset: -1000; }
}

.svg-dash-anim {
    stroke-dasharray: 10, 10;
    animation: dash 30s linear infinite;
}

/* ─── Glow ──────────────────────────────── */
.svg-glow      { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45)); }
.svg-glow-soft { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.10)); }

/* ─── Text Gradient ─────────────────────── */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bg-gradient-baret { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }

/* ─── Scrollbar ─────────────────────────── */
.custom-scrollbar::-webkit-scrollbar        { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track  { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.1); border-radius: 10px; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

/* ─── Shimmer Effect ────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.shimmer-text {
    background: linear-gradient(90deg, #F59E0B 25%, #FDE68A 50%, #F59E0B 75%);
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Pulse Glow ────────────────────────── */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50%       { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0); }
}
.pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }

/* ─── Fade Up ───────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up           { animation: fadeUp 0.7s ease forwards; }
.fade-up-delay-1   { animation: fadeUp 0.7s 0.15s ease both; }
.fade-up-delay-2   { animation: fadeUp 0.7s 0.30s ease both; }
.fade-up-delay-3   { animation: fadeUp 0.7s 0.45s ease both; }
.fade-up-delay-4   { animation: fadeUp 0.7s 0.60s ease both; }

/* ─── Counter Animation ─────────────────── */
@keyframes countUp {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}
.count-up { animation: countUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ─── Card Hover Lift ───────────────────── */
.card-lift {
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.35s ease;
}
.card-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.12);
}

/* ─── Feature Icon Ring ─────────────────── */
.icon-ring {
    position: relative;
}
.icon-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(245,158,11,0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.icon-ring:hover::before { opacity: 1; }

/* ─── Spinning Gradient Border ──────────── */
@keyframes border-spin {
    to { transform: rotate(360deg); }
}
.gradient-border {
    position: relative;
    overflow: hidden;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, #F59E0B, #FDE68A, #D97706, #F59E0B);
    border-radius: inherit;
    animation: border-spin 4s linear infinite;
    z-index: -1;
}

/* ─── Noise Texture ─────────────────────── */
.noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px;
    pointer-events: none;
}

/* ─── Scroll Reveal ─────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }