/* Chiefex shared design-system CSS
   Consolidated from the per-page <style> blocks across every Stitch-generated
   page. Several pages invented their own class name for the same visual
   effect (glow, gradient line, floating card, gradient text) — those are
   aliased here to one canonical rule so every page renders identically
   without needing markup class-name changes. */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* Glass panel surfaces */
.glass-panel,
.glass-card,
.luminous-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.glass-panel-light,
.glass-card-light,
.light-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-card:hover,
.glass-panel:hover {
    border-color: #00D2FF;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.1);
}

/* Glow accents (electric-cyan canonical; radiant-magenta-named classes
   from several pages are aliased to the same treatment) */
.electric-glow,
.radiant-glow {
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
}

.electric-glow:hover,
.electric-glow-hover:hover,
.radiant-glow-hover:hover,
.radiant-glow-intense:hover,
.hover-radiant:hover,
.glow-hover:hover {
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.35);
}

.electric-bg {
    background: linear-gradient(135deg, #00D2FF, #0072FF);
}

/* Animated gradient "data flow" line */
.workflow-line,
.flow-line,
.animate-flow-line,
.node-line,
.flow-line-gradient {
    background: linear-gradient(90deg, transparent, #00D2FF, transparent);
    background-size: 200% 100%;
    animation: flow 3s linear infinite;
}

@keyframes flow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Gentle floating bob */
.floating,
.floating-card,
.animate-float {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Slow pulse (badges, live indicators) */
.animate-pulse-soft,
.animate-pulse-slow,
.pulse-slow {
    animation: pulse-soft 2.5s ease-in-out infinite;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Cyan/gradient text treatment */
.gradient-text,
.text-gradient-cyan,
.cyan-text-gradient {
    background: linear-gradient(90deg, #0d1c32, #00D2FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.toggle-switch-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Shimmer sweep (manufacturing page) */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 2.5s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Step connector line (partner program) */
.step-line::after {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: 50%;
    width: 1px;
    height: calc(100% - 1rem);
    background: linear-gradient(180deg, rgba(0, 210, 255, 0.4), transparent);
}

/* Header shrink-on-scroll (applied to #site-header nav via main.js) */
.header-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Simple mesh-gradient background accent (crm page) */
.mesh-gradient {
    background: radial-gradient(circle at 20% 20%, rgba(0, 210, 255, 0.08), transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(184, 0, 71, 0.06), transparent 40%);
}