/* ============================================================
   Stardust — maximum-sparkle sub-variant of Pastel Sparkle
   Twilight sky, generated starfield, shooting stars, aurora,
   holographic shimmer type, dark glass cards.
   Loaded AFTER style.css; overrides via body.theme-stardust.
   ============================================================ */

body.theme-stardust {
    --bg-color: linear-gradient(165deg, #150B2E 0%, #2A1656 38%, #5B2D7F 70%, #A6539B 100%);
    --bg-pattern: none;
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: 1px solid rgba(255, 255, 255, 0.22);
    --card-border-style: solid;
    --card-border-width: 1px;
    --card-shadow: 0 8px 40px rgba(20, 8, 50, 0.55);
    --text-main: #F2EAFF;
    --text-accent: #D9BFFF;
    --gold-accent: linear-gradient(120deg, #FFB6DE, #C9A7FF 30%, #8FD8FF 55%, #FFE9A7 80%, #FFB6DE 100%);
    --btn-primary: linear-gradient(120deg, #FFB6DE, #C9A7FF 40%, #8FD8FF 90%);
    --btn-primary-text: #241245;
    --btn-secondary: rgba(255, 255, 255, 0.06);
    --btn-secondary-border: 1px solid rgba(255, 255, 255, 0.35);
    --font-headings: 'Playfair Display', serif;
    --font-sans: 'Montserrat', sans-serif;
    --border-radius-card: 28px;
    --border-radius-btn: 30px;
    --btn-transform: translateY(-3px);
    --glass-blur: blur(16px);
    --sparkle-display: none; /* base layer replaced by the real starfield */
    --heading-letter-spacing: 0.5px;
    --heading-transform: none;
    background-attachment: fixed;
}

/* Holographic shimmer on the logo */
body.theme-stardust .logo {
    background: var(--gold-accent);
    background-size: 250% 250%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holo-shift 6s ease-in-out infinite;
    font-weight: 700;
}

/* Shimmering headline */
body.theme-stardust .hero-text h2 {
    font-style: italic;
    background: var(--gold-accent);
    background-size: 250% 250%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holo-shift 6s ease-in-out infinite;
}

@keyframes holo-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.holo-star {
    display: inline-block;
    animation: star-spin 5s linear infinite;
}

@keyframes star-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

body.theme-stardust section h2::after {
    color: #FFE9A7;
    opacity: 0.9;
    text-shadow: 0 0 12px rgba(255, 233, 167, 0.8);
}

/* Iridescent gradient borders on the glass cards */
body.theme-stardust .hero,
body.theme-stardust section {
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(30, 16, 62, 0.55), rgba(30, 16, 62, 0.55)) padding-box,
        linear-gradient(120deg, rgba(255, 182, 222, 0.7), rgba(160, 122, 255, 0.5), rgba(143, 216, 255, 0.7), rgba(255, 233, 167, 0.5)) border-box;
}

/* Buttons: glitter sweep */
body.theme-stardust .btn {
    position: relative;
    overflow: hidden;
}

body.theme-stardust .btn-primary {
    box-shadow: 0 0 24px rgba(201, 167, 255, 0.55);
    font-weight: 700;
}

body.theme-stardust .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: btn-shine 3s ease-in-out infinite;
}

@keyframes btn-shine {
    0%       { left: -80%; }
    45%, 100% { left: 130%; }
}

body.theme-stardust .btn-secondary {
    color: var(--text-main);
}

/* Service cards on dark glass */
body.theme-stardust .service-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.theme-stardust .service-card:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 30px rgba(201, 167, 255, 0.35);
}

body.theme-stardust .service-card h3 {
    color: #FFD9F0;
}

/* Hero orb with orbiting stars */
.hero-orb-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-orb {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04) 60%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 60px rgba(201, 167, 255, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-accent);
}

.orbit-star {
    position: absolute;
    color: #FFE9A7;
    text-shadow: 0 0 10px rgba(255, 233, 167, 0.9);
    animation: orbit-twinkle 3s ease-in-out infinite;
}

.orbit-star.s1 { top: 8%;    right: 18%; font-size: 1.6rem; }
.orbit-star.s2 { bottom: 12%; right: 8%;  font-size: 1.1rem; animation-delay: 1s; color: #8FD8FF; text-shadow: 0 0 10px rgba(143, 216, 255, 0.9); }
.orbit-star.s3 { bottom: 4%;  left: 16%;  font-size: 1.3rem; animation-delay: 2s; color: #FFB6DE; text-shadow: 0 0 10px rgba(255, 182, 222, 0.9); }

@keyframes orbit-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Aurora glow drifting behind everything */
.aurora {
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(40% 35% at 25% 30%, rgba(143, 216, 255, 0.16), transparent 70%),
        radial-gradient(45% 40% at 75% 20%, rgba(255, 182, 222, 0.18), transparent 70%),
        radial-gradient(50% 45% at 55% 75%, rgba(201, 167, 255, 0.16), transparent 70%);
    animation: aurora-drift 18s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(3%, 3%, 0) scale(1.15); }
}

/* Starfield (spans generated by inline script) */
.star-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.star-field .star {
    position: absolute;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.7);
    animation: star-twinkle 4s ease-in-out infinite;
}

.star-field .star-glyph {
    position: absolute;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: star-twinkle 5s ease-in-out infinite;
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 1; }
}

/* Shooting stars */
.shooting-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.shooting-stars span {
    position: absolute;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
    border-radius: 999px;
    opacity: 0;
    transform: rotate(-35deg);
    animation: shoot 7s linear infinite;
}

.shooting-stars span:nth-child(1) { top: 12%; left: 65%; animation-delay: 1s; }
.shooting-stars span:nth-child(2) { top: 30%; left: 15%; animation-delay: 3.8s; }
.shooting-stars span:nth-child(3) { top: 6%;  left: 35%; animation-delay: 6s; }

@keyframes shoot {
    0%   { opacity: 0; transform: rotate(-35deg) translateX(0); }
    2%   { opacity: 1; }
    8%   { opacity: 0; transform: rotate(-35deg) translateX(-320px); }
    100% { opacity: 0; transform: rotate(-35deg) translateX(-320px); }
}

/* Forms on dark glass */
body.theme-stardust input,
body.theme-stardust textarea {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body.theme-stardust input::placeholder,
body.theme-stardust textarea::placeholder {
    color: rgba(242, 234, 255, 0.5);
}

body.theme-stardust input:focus,
body.theme-stardust textarea:focus {
    border-color: #C9A7FF;
    box-shadow: 0 0 0 3px rgba(201, 167, 255, 0.25);
}

/* Switcher on dark glass */
body.theme-stardust .theme-switcher {
    background: rgba(30, 16, 62, 0.7);
}

@media (max-width: 768px) {
    .hero-orb { width: 230px; height: 230px; }
}