/* ============================================================
   RateTheWork Theme Overhaul — Deep Space Purple
   Loaded AFTER app.css to override CSS variables via cascade.
   ============================================================ */

/* ----------------------------------------------------------
   A2  Dark Theme Deepening — Purple-tinted deep space
   ---------------------------------------------------------- */
.dark {
    --background: 252 25% 6%;           /* #0C0A14 deep space */
    --surface: 252 20% 9%;              /* purple-tinted surface */
    --card: 252 18% 11%;                /* purple-tinted cards */
    --popover: 252 18% 11%;
    --muted: 252 15% 14%;
    --border: 260 20% 20%;              /* purple-tinted borders */
    --border-light: 260 15% 15%;
    --input: 260 20% 20%;
    --glass-bg: rgba(20, 16, 32, 0.7);
    --glass-border: rgba(139, 92, 246, 0.1);
    --sidebar-background: 252 25% 5%;
    --sidebar-accent: 252 15% 12%;
    --sidebar-border: 252 15% 12%;
}

/* ----------------------------------------------------------
   A3a  Glowing Border — Conic-gradient rotating border
   ---------------------------------------------------------- */
@property --glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes glow-rotate {
    from { --glow-angle: 0deg; }
    to   { --glow-angle: 360deg; }
}

.glow-border {
    position: relative;
    overflow: visible;
}

.glow-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--glow-angle),
        transparent 40%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(233, 30, 99, 0.4) 55%,
        transparent 65%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.glow-border:hover::before {
    opacity: 1;
    animation: glow-rotate 4s linear infinite;
}

.glow-border-active::before {
    opacity: 1 !important;
    animation: glow-rotate 4s linear infinite !important;
}

.glow-border-primary::before {
    background: conic-gradient(
        from var(--glow-angle),
        transparent 30%,
        rgba(233, 30, 99, 0.6) 45%,
        rgba(139, 92, 246, 0.5) 55%,
        transparent 70%
    ) !important;
}

/* ----------------------------------------------------------
   A3b  Text Gradient — White-to-fade on headings
   ---------------------------------------------------------- */
.dark .text-gradient-hero {
    background: linear-gradient(180deg, #ffffff 22.5%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------
   A3c  Purple Radial Glow — Ambient section glow
   ---------------------------------------------------------- */
.dark .purple-glow-hero {
    background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(113, 61, 255, 0.08) 0%, transparent 70%);
}

.dark .purple-glow-card {
    background-image: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(113, 61, 255, 0.06) 0%, transparent 60%);
}

.dark .purple-glow-footer {
    background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(113, 61, 255, 0.06) 0%, transparent 60%);
}

/* ----------------------------------------------------------
   A3d  Button Shimmer — Rotating edge glow on primary buttons
   ---------------------------------------------------------- */
@property --shimmer-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes shimmer-rotate {
    from { --shimmer-angle: 0deg; }
    to   { --shimmer-angle: 360deg; }
}

.btn-shimmer {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.btn-shimmer::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--shimmer-angle),
        transparent 60%,
        rgba(255, 255, 255, 0.5) 68%,
        transparent 76%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: shimmer-rotate 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* ----------------------------------------------------------
   A3e  Section Badges — Glass-effect pill badges
   ---------------------------------------------------------- */
.dark .section-badge {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ----------------------------------------------------------
   A4  Aurora & Gradient Enhancement
   ---------------------------------------------------------- */

/* Aurora background — shift to purple-dominant */
.dark .aurora-bg::before {
    background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(113, 61, 255, 0.07) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 30% 70%, rgba(233, 30, 99, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse 50% 30% at 80% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 50%) !important;
}

/* Gradient primary — slightly brighter for deep bg contrast */
.dark .gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(340 90% 52%) 100%);
}

/* Gradient text — pink -> purple -> violet three-stop */
.dark .gradient-text {
    background: linear-gradient(135deg, #E91E63 0%, #9C27B0 50%, #7C3AED 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Card glow hover — more purple in the blend */
.dark .card-glow:hover::before {
    background: radial-gradient(ellipse at 50% -20%, rgba(139, 92, 246, 0.12) 0%, rgba(233, 30, 99, 0.06) 40%, transparent 70%) !important;
}

/* ----------------------------------------------------------
   Reduced Motion — respect user preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .glow-border:hover::before,
    .glow-border-active::before,
    .btn-shimmer::before {
        animation: none !important;
    }
}