/* ============================================
   MagicAI – Dark Immersive Theme
   Fondo oscuro como la sección "How it works"
   con animaciones de scroll inmersivas
   ============================================ */

/* ---- Global Dark Override ---- */
:root {
    --background: 220 15% 6%;
    --foreground: 220 10% 75%;
    --heading-background: 220 12% 10%;
    --heading-foreground: 0 0% 95%;
}

html {
    scroll-behavior: smooth;
}

body.group\/body {
    background-color: #0a0c14 !important;
    color: #b0b8c8 !important;
}

/* ---- Navbar / Header ---- */
.site-header,
header,
.site-header .container,
nav {
    background-color: rgba(10, 12, 20, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Keep header dark when sticky */
.site-header.lqd-is-sticky,
.site-header.lqd-is-sticky nav,
.lqd-is-sticky .site-header-nav {
    background-color: rgba(10, 12, 20, 0.95) !important;
    color: white !important;
    backdrop-filter: blur(20px);
}

.lqd-is-sticky .site-header-nav a,
.lqd-is-sticky nav a,
.site-header.lqd-is-sticky a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.site-header a,
header a,
nav a {
    color: #d0d6e0 !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.site-header a:hover,
header a:hover,
nav a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(130, 100, 255, 0.4);
}

/* ---- Banner Section ---- */
#banner {
    background-color: #0a0c14;
}

.banner-bg {
    background: linear-gradient(135deg,
            #0d0f1a 0%,
            #1a0e3a 25%,
            #0e1a3a 50%,
            #1a0e3a 75%,
            #0d0f1a 100%) !important;
    background-size: 300% 300% !important;
    animation: dark-gradient-flow 15s ease-in-out alternate infinite !important;
    opacity: 0.9;
}

@keyframes dark-gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.banner-divider svg {
    fill: #0a0c14 !important;
}

/* ---- Section Backgrounds ---- */
.site-section {
    background-color: #0a0c14 !important;
}

section {
    position: relative;
}

/* Subtle gradient overlays for depth */
#features,
#generators,
#who-is-for,
#custom-templates,
#tools {
    background: linear-gradient(180deg, #0a0c14 0%, #0f1120 50%, #0a0c14 100%) !important;
}

/* ---- How it Works (already dark, enhance it) ---- */
#how-it-works .rounded-\[50px\] {
    background-color: #08090f !important;
    border: 1px solid rgba(130, 100, 255, 0.08);
    box-shadow:
        0 0 80px rgba(100, 60, 255, 0.05),
        0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

/* ---- Testimonials ---- */
#testimonials {
    background: linear-gradient(180deg, #0a0c14 0%, #100e20 50%, #0a0c14 100%) !important;
}

#testimonials .absolute {
    background: linear-gradient(to bottom, transparent, rgba(20, 15, 40, 0.4), transparent) !important;
}

#testimonials .rounded-\[50px\] {
    background-color: rgba(15, 14, 30, 0.6) !important;
    border-color: rgba(130, 100, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

#testimonials h6 {
    background: rgba(130, 100, 255, 0.15) !important;
    color: #a78bfa !important;
}

/* ---- Pricing ---- */
#pricing {
    background: linear-gradient(180deg, #0a0c14 0%, #0d0f1a 50%, #0a0c14 100%) !important;
}

#pricing .rounded-3xl,
#pricing .rounded-\[50px\],
#pricing [class*="border"] {
    background-color: rgba(15, 17, 30, 0.8) !important;
    border-color: rgba(130, 100, 255, 0.1) !important;
}

#pricing .bg-black {
    background: linear-gradient(135deg, #6c3ce0, #8b5cf6) !important;
}

/* ---- FAQ ---- */
#faq {
    background: #0a0c14 !important;
}

/* ---- Footer ---- */
footer,
.site-footer {
    background-color: #060810 !important;
    border-top: 1px solid rgba(130, 100, 255, 0.06);
}

footer a,
.site-footer a {
    color: #8090a8 !important;
    transition: color 0.3s ease;
}

footer a:hover,
.site-footer a:hover {
    color: #a78bfa !important;
}

/* ---- Text Colors ---- */
h1,
h2,
h3,
h4,
h5,
h6,
.text-heading-foreground {
    color: #e8ecf2 !important;
}

p,
span,
li,
td,
th,
label {
    color: #8a95a8;
}

.text-\[\#28027C\] {
    color: #a78bfa !important;
}

/* ---- Cards & Containers ---- */
.border,
[class*="border-"] {
    border-color: rgba(130, 100, 255, 0.08) !important;
}

.bg-white,
.bg-\[\#F5F5F7\],
[class*="bg-heading-background"],
.bg-background {
    background-color: rgba(15, 17, 30, 0.6) !important;
}

.shadow-xl,
.shadow-lg {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(100, 60, 255, 0.03) !important;
}

/* ---- Buttons ---- */
a[class*="bg-white"][class*="text-black"],
.bg-white.text-black {
    background: linear-gradient(135deg, #6c3ce0, #8b5cf6) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 25px rgba(108, 60, 224, 0.3);
    transition: all 0.3s ease;
}

a[class*="bg-white"][class*="text-black"]:hover,
.bg-white.text-black:hover {
    box-shadow: 0 6px 35px rgba(108, 60, 224, 0.5);
    transform: translateY(-2px);
}

/* ---- Generators / Tabs ---- */
.bg-\[\#F0EFFA\],
.bg-opacity-15 {
    background-color: rgba(130, 100, 255, 0.08) !important;
}

/* ---- Glow Effects ---- */
.banner-subtitle-gradient div {
    background: linear-gradient(135deg, #6c3ce0, #e040a0) !important;
}

/* ---- Scroll Animation Classes ---- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children */
.scroll-stagger>* {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-stagger.revealed>*:nth-child(1) {
    transition-delay: 0.05s;
}

.scroll-stagger.revealed>*:nth-child(2) {
    transition-delay: 0.12s;
}

.scroll-stagger.revealed>*:nth-child(3) {
    transition-delay: 0.19s;
}

.scroll-stagger.revealed>*:nth-child(4) {
    transition-delay: 0.26s;
}

.scroll-stagger.revealed>*:nth-child(5) {
    transition-delay: 0.33s;
}

.scroll-stagger.revealed>*:nth-child(6) {
    transition-delay: 0.40s;
}

.scroll-stagger.revealed>*:nth-child(7) {
    transition-delay: 0.47s;
}

.scroll-stagger.revealed>*:nth-child(8) {
    transition-delay: 0.54s;
}

.scroll-stagger.revealed>*:nth-child(9) {
    transition-delay: 0.61s;
}

.scroll-stagger.revealed>*:nth-child(10) {
    transition-delay: 0.68s;
}

.scroll-stagger.revealed>*:nth-child(11) {
    transition-delay: 0.75s;
}

.scroll-stagger.revealed>*:nth-child(12) {
    transition-delay: 0.82s;
}

.scroll-stagger.revealed>* {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Ambient glow behind sections ---- */
#features::before,
#generators::before,
#who-is-for::before,
#testimonials::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 60, 224, 0.06) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* ---- Smooth parallax-like floating ---- */
@keyframes float-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.site-section img:not([class*="avatar"]):not([class*="logo"]) {
    animation: float-subtle 6s ease-in-out infinite;
    animation-play-state: paused;
}

.site-section.lqd-is-in-view img:not([class*="avatar"]):not([class*="logo"]) {
    animation-play-state: running;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0c14;
}

::-webkit-scrollbar-thumb {
    background: rgba(130, 100, 255, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(130, 100, 255, 0.4);
}

/* ---- Selection ---- */
::selection {
    background: rgba(108, 60, 224, 0.3);
    color: #ffffff;
}

/* ---- Inputs / Forms ---- */
input,
textarea,
select {
    background-color: rgba(15, 17, 30, 0.8) !important;
    border-color: rgba(130, 100, 255, 0.1) !important;
    color: #d0d6e0 !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(160, 170, 190, 0.4) !important;
}

/* ---- Particle / Star Effect on body ---- */
body.group\/body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 10%, rgba(255, 255, 255, 0.1) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 40%, rgba(255, 255, 255, 0.06) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 85%, rgba(255, 255, 255, 0.07) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 45%, rgba(255, 255, 255, 0.09) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

body.group\/body>* {
    position: relative;
    z-index: 1;
}
/* ---- Glowing Border Animation ---- */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.btn-glow-border {
  position: relative;
  background: linear-gradient(#000000, #000000) padding-box,
              conic-gradient(from var(--angle), transparent 25%, #22c55e 50%, transparent 75%) border-box !important;
  border: 1px solid transparent !important;
  animation: border-rotate 4s linear infinite;
  z-index: 1;
  overflow: visible !important;
}

.btn-glow-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(from var(--angle), transparent 25%, #22c55e 50%, transparent 75%);
  animation: border-rotate 4s linear infinite;
  border-radius: 10px;
  opacity: 0.6;
  filter: blur(10px);
}

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

/* Fallback for browsers not supporting @property (like older Safari/Firefox) */
@supports not (background: paint(something)) {
  .btn-glow-border {
    border-color: #22c55e !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
    animation: pulse-green 2s infinite;
  }
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---- Animated Colorful Hero Background ---- */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
  animation: blob 10s infinite;
  filter: blur(80px);
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animation-delay-6000 {
  animation-delay: 6s;
}

.animation-delay-8000 {
  animation-delay: 8s;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.mix-blend-screen {
  mix-blend-mode: screen;
}

/* Enhancing text clarity over colorful bg */
.banner-title, 
.site-section p {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 10;
}

/* ---- Floating Card Animation ---- */
@keyframes float-card {
  0% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-10px) translateX(5px); }
  100% { transform: translateY(0px) translateX(0px); }
}

.animate-float {
  animation: float-card 6s ease-in-out infinite;
}