/* ========================================
   Utility Classes (Dark Theme)
   ======================================== */

/* --- Gradient Backgrounds --- */
.bg-gradient-brand { background: var(--gradient-brand); }
.bg-gradient-cta { background: var(--gradient-cta); }
.bg-gradient-subtle {
    background: var(--bg-secondary);
    position: relative;
}

/* --- Dot Grid Pattern --- */
.dot-grid {
    position: relative;
}

.dot-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* --- Gradient Mesh Background --- */
.gradient-mesh {
    position: relative;
    overflow: hidden;
}

.gradient-mesh::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.gradient-mesh::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -20%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* --- Gradient Borders --- */
.gradient-border-top {
    border-top: 2px solid;
    border-image: var(--gradient-brand-horizontal) 1;
}

.gradient-border-bottom {
    border-bottom: 2px solid;
    border-image: var(--gradient-brand-horizontal) 1;
}

/* --- Text Colors --- */
.text-teal { color: var(--color-teal) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-purple { color: var(--color-purple) !important; }
.text-pink { color: var(--color-pink) !important; }
.text-orange { color: var(--color-orange) !important; }
.text-amber { color: var(--color-amber) !important; }

/* --- Hover Effects --- */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* --- Decorative Elements --- */
.blob-decoration {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(80px);
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

/* --- Badge Colors --- */
.badge-gradient {
    background: var(--gradient-brand);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

/* --- Max Widths --- */
.max-w-prose { max-width: 720px; }
.max-w-narrow { max-width: 540px; }

/* --- Gap helpers for older browsers --- */
.gap-row-lg > [class*="col-"] { margin-bottom: 1.5rem; }
.gap-row-xl > [class*="col-"] { margin-bottom: 2rem; }

/* --- Glow Utilities --- */
.glow-blue { box-shadow: var(--glow-blue); }
.glow-purple { box-shadow: var(--glow-purple); }
.glow-teal { box-shadow: var(--glow-teal); }

/* --- Noise Grain Overlay --- */
.noise-grain {
    position: relative;
}

.noise-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

/* --- Section divider gradient line --- */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);
    border: none;
}

/* --- Dot Pattern Overlay (Cowork-style, orbiting spotlights) --- */
.dot-pattern {
    position: relative;
}

.dot-pattern::before,
.dot-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px);
    background-size: 24px 24px;
    background-repeat: repeat;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* Spotlight 1 — large, slow clockwise orbit */
.dot-pattern::before {
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 35%, transparent 60%);
            mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 35%, transparent 60%);
    -webkit-mask-size: 70% 70%;
            mask-size: 70% 70%;
    animation: dotOrbitA 14s linear infinite;
}

/* Spotlight 2 — smaller, faster counter-clockwise orbit */
.dot-pattern::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1.5px);
    background-position: 12px 12px;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 30%, transparent 55%);
            mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 30%, transparent 55%);
    -webkit-mask-size: 50% 50%;
            mask-size: 50% 50%;
    animation: dotOrbitB 9s linear infinite;
}

.dot-pattern > * {
    position: relative;
    z-index: 1;
}

/* Clockwise orbit: top → right → bottom → left → top */
@keyframes dotOrbitA {
    0%   { -webkit-mask-position: 50% 0%;    mask-position: 50% 0%; }
    25%  { -webkit-mask-position: 100% 50%;  mask-position: 100% 50%; }
    50%  { -webkit-mask-position: 50% 100%;  mask-position: 50% 100%; }
    75%  { -webkit-mask-position: 0% 50%;    mask-position: 0% 50%; }
    100% { -webkit-mask-position: 50% 0%;    mask-position: 50% 0%; }
}

/* Counter-clockwise orbit, offset start */
@keyframes dotOrbitB {
    0%   { -webkit-mask-position: 25% 100%;  mask-position: 25% 100%; }
    25%  { -webkit-mask-position: 0% 50%;    mask-position: 0% 50%; }
    50%  { -webkit-mask-position: 25% 0%;    mask-position: 25% 0%; }
    75%  { -webkit-mask-position: 75% 25%;   mask-position: 75% 25%; }
    100% { -webkit-mask-position: 25% 100%;  mask-position: 25% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dot-pattern::before,
    .dot-pattern::after { animation: none; }
}