/* ============================================
   PUBLIC PAGES SHARED STYLES
   Used by Index.razor, FocusHome.razor, and other public pages
   
   Theme variables are defined in: themes/theme-variables.css
   ============================================ */

/* Import theme variables */
@import url('themes/theme-variables.css');

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .flying-bird, .butterfly, .dolphin-scene,
    .snowflake, .star, .shooting-star,
    .floating-cloud, .splash, .splash-drop {
        animation: none !important;
        opacity: 0 !important;
    }
    
    .public-page::before,
    .public-page::after {
        animation: none !important;
    }
    
    .bird-wing, .butterfly-wing, .dolphin-tail, .dolphin-flipper {
        animation: none !important;
    }
}

/* ============================================
   PUBLIC PAGE CONTAINER
   ============================================ */
.public-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: background 0.5s ease;
}

/* ============================================
   PUBLIC HEADER
   ============================================ */
.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    position: relative;
    z-index: 100;
}

.public-header .logo {
    position: relative;
    z-index: 101;
}

.public-header .logo img {
    height: 32px;
    transition: opacity 0.2s ease;
}

.public-header .logo:hover img {
    opacity: 0.8;
}

.public-header .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 101;
}

.sign-in-btn {
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--theme-signin-color);
}

.sign-in-btn:hover {
    background: var(--theme-signin-hover-bg);
}

.get-started-btn {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    padding: 10px 20px;
    background: var(--theme-cta-gradient);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.get-started-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ============================================
   ACCESSIBILITY: FOCUS-VISIBLE STYLES
   Keyboard navigation support
   ============================================ */
.sign-in-btn:focus-visible,
.get-started-btn:focus-visible,
.hint-chip:focus-visible,
.learn-more-link:focus-visible,
.public-footer .footer-links a:focus-visible {
    outline: 2px solid var(--theme-chip-color);
    outline-offset: 2px;
}

.get-started-btn:focus-visible {
    outline-color: white;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.public-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px 40px;
    position: relative;
    z-index: 1;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    text-align: center;
    max-width: 700px;
    margin-bottom: 32px;
}

.hero-section.hero-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.15;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    color: var(--theme-text-primary);
    text-shadow: var(--theme-title-shadow);
}

.gradient-text {
    display: inline;
    background: var(--theme-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    position: relative;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin: 0 0 24px;
    line-height: 1.5;
    transition: color 0.3s ease;
    color: var(--theme-text-secondary);
    text-shadow: var(--theme-subtitle-shadow);
}

.search-wrapper {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

/* ============================================
   SEARCH HINTS
   ============================================ */
.search-hints {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.search-hints:hover {
    opacity: 0.9;
}

.search-hints .hint {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-hint);
}

.hint-chip {
    background: var(--theme-chip-bg);
    color: var(--theme-chip-color);
    border: none;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.hint-chip:hover {
    background: var(--theme-chip-hover-bg);
    transform: translateY(-1px);
}

.hint-chip.browse-link {
    border: 1px solid var(--theme-chip-border);
}

/* ============================================
   LEARN MORE LINK
   ============================================ */
.learn-more {
    margin-top: auto;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.learn-more:hover {
    opacity: 0.8;
}

.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--theme-link-color);
}

.learn-more-link:hover {
    background: var(--theme-link-hover-bg);
    color: var(--theme-link-hover-color);
}

.learn-more-link .arrow {
    transition: transform 0.2s ease;
}

.learn-more-link:hover .arrow {
    transform: translateX(4px);
}

/* ============================================
   PUBLIC FOOTER
   ============================================ */
.public-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    font-size: 0.85rem;
    color: var(--theme-footer-color);
}

.public-footer .footer-links {
    display: flex;
    gap: 20px;
}

.public-footer .footer-links a {
    color: var(--theme-footer-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.public-footer .footer-links a:hover {
    color: var(--theme-footer-hover-color);
}

@media (max-width: 768px) {
    .public-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ============================================
   THEME EFFECTS CONTAINER
   ============================================ */
.theme-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* ============================================
   ☁️ CLOUD THEME - Atmospheric Effects
   (Color overrides handled by CSS variables above)
   ============================================ */

/* Cloud atmospheric effects */
.public-page.theme-cloud::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse 300px 150px at 10% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse 250px 120px at 85% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 200px 100px at 70% 35%, rgba(255, 255, 255, 0.7) 0%, transparent 70%),
        radial-gradient(ellipse 180px 90px at 25% 45%, rgba(255, 255, 255, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 220px 110px at 90% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 400px 200px at 50% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: cloudDrift 20s ease-in-out infinite;
}

.public-page.theme-cloud::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse 280px 140px at 40% 25%, rgba(255, 255, 255, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 200px 100px at 60% 50%, rgba(255, 255, 255, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 150px 75px at 15% 65%, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: cloudDriftReverse 16s ease-in-out infinite;
}

/* Floating clouds */
.floating-cloud {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    z-index: 1;
}

.cloud-1 { width: 200px; height: 80px; top: 8%; left: -5%; animation: floatCloud1 25s ease-in-out infinite; }
.cloud-2 { width: 160px; height: 65px; top: 15%; right: -3%; animation: floatCloud2 30s ease-in-out infinite; }
.cloud-3 { width: 120px; height: 50px; top: 50%; left: 5%; opacity: 0.7; animation: floatCloud3 22s ease-in-out infinite; }
.cloud-4 { width: 180px; height: 70px; bottom: 25%; right: 8%; opacity: 0.6; animation: floatCloud4 28s ease-in-out infinite; }
.cloud-5 { width: 100px; height: 40px; bottom: 15%; left: 15%; opacity: 0.5; animation: floatCloud5 20s ease-in-out infinite; }

@keyframes floatCloud1 { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(80px) translateY(15px); } }
@keyframes floatCloud2 { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-70px) translateY(20px); } }
@keyframes floatCloud3 { 0%, 100% { transform: translateX(0) translateY(0); opacity: 0.7; } 50% { transform: translateX(60px) translateY(-10px); opacity: 0.9; } }
@keyframes floatCloud4 { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-50px) translateY(-15px); } }
@keyframes floatCloud5 { 0%, 100% { transform: translateX(0) translateY(0); opacity: 0.5; } 50% { transform: translateX(40px) translateY(10px); opacity: 0.7; } }
@keyframes cloudDrift { 0% { transform: translateX(0) translateY(0) scale(1); } 25% { transform: translateX(30px) translateY(-8px) scale(1.02); } 50% { transform: translateX(50px) translateY(0) scale(1); } 75% { transform: translateX(25px) translateY(8px) scale(0.98); } 100% { transform: translateX(0) translateY(0) scale(1); } }
@keyframes cloudDriftReverse { 0% { transform: translateX(0) translateY(0) scale(1); } 25% { transform: translateX(-25px) translateY(6px) scale(0.98); } 50% { transform: translateX(-40px) translateY(0) scale(1.01); } 75% { transform: translateX(-20px) translateY(-6px) scale(1); } 100% { transform: translateX(0) translateY(0) scale(1); } }

/* Flying bird easter egg */
.flying-bird {
    position: fixed;
    width: 50px;
    height: 40px;
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
    animation: birdFlyToPerch 38s ease-in-out infinite;
    animation-delay: 5s;
    will-change: transform, opacity;
}

.bird-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 10px;
    background: linear-gradient(180deg, #1e3a5f 0%, #2d4a6f 40%, #3d5a7f 100%);
    border-radius: 70% 90% 80% 50% / 60% 70% 50% 50%;
}

.bird-body::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -8px;
    width: 12px;
    height: 10px;
    background: linear-gradient(180deg, #1e3a5f 0%, #2d4a6f 100%);
    border-radius: 60% 80% 50% 40%;
}

.bird-body::after {
    content: '';
    position: absolute;
    top: 2px;
    right: -14px;
    width: 8px;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    border-radius: 0 80% 80% 0 / 0 50% 50% 0;
    transform: rotate(-5deg);
}

.bird-wing {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 8px;
    background: linear-gradient(180deg, #1e3a5f 0%, #2d4a6f 50%, #475569 100%);
    transform-origin: center right;
}

.bird-wing.left {
    left: 8px;
    border-radius: 100% 0 60% 20% / 80% 0 40% 30%;
    transform: translateY(-50%) rotate(-15deg);
    animation: leftBirdWing 38s ease-in-out infinite;
    animation-delay: 5s;
}

.bird-wing.right {
    right: 22px;
    transform-origin: center left;
    border-radius: 0 100% 20% 60% / 0 80% 30% 40%;
    transform: translateY(-50%) rotate(15deg);
    animation: rightBirdWing 38s ease-in-out infinite;
    animation-delay: 5s;
}

.bird-tail {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 10px;
    height: 6px;
    background: linear-gradient(180deg, #1e3a5f 0%, #2d4a6f 100%);
    border-radius: 20% 0 50% 50% / 30% 0 60% 60%;
    transform: translateY(-50%) rotate(-5deg);
}

/* Bird perch under "accomplish" */
.bird-perch {
    position: absolute;
    bottom: -4px;
    right: -8px;
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(30, 58, 95, 0.4), rgba(30, 58, 95, 0.6), rgba(30, 58, 95, 0.4), transparent);
    border-radius: 2px;
    opacity: 0;
}

.theme-cloud .bird-perch {
    animation: perchAppear 38s ease-in-out infinite;
    animation-delay: 5s;
}

@keyframes birdFlyToPerch {
    0% { opacity: 0; top: 12%; left: -80px; transform: scaleX(1); }
    1% { opacity: 1; top: 12%; left: -80px; transform: scaleX(1); }
    6% { opacity: 1; top: calc(50% - 140px); left: calc(50% + 120px); transform: scaleX(1); }
    7.5% { opacity: 1; top: calc(50% - 125px); left: calc(50% + 145px); transform: scaleX(1); }
    8% { opacity: 1; top: calc(50% - 125px); left: calc(50% + 145px); transform: scaleX(-1); }
    9%, 14% { opacity: 1; top: calc(50% - 125px); left: calc(50% + 145px); transform: scaleX(-1); }
    14.5% { opacity: 1; top: calc(50% - 125px); left: calc(50% + 145px); transform: scaleX(1); }
    15% { opacity: 1; top: calc(50% - 125px); left: calc(50% + 145px); transform: scaleX(1); }
    17% { opacity: 1; top: calc(50% - 150px); left: calc(50% + 200px); transform: scaleX(1); }
    21% { opacity: 1; top: 8%; left: calc(100% + 80px); transform: scaleX(1); }
    22%, 100% { opacity: 0; top: 8%; left: calc(100% + 80px); transform: scaleX(1); }
}

@keyframes leftBirdWing {
    0% { transform: translateY(-50%) rotate(-15deg); }
    1% { transform: translateY(-50%) rotate(-45deg); }
    2% { transform: translateY(-50%) rotate(-15deg); }
    3% { transform: translateY(-50%) rotate(-45deg); }
    4% { transform: translateY(-50%) rotate(-15deg); }
    5% { transform: translateY(-50%) rotate(-45deg); }
    6% { transform: translateY(-50%) rotate(-15deg); }
    7% { transform: translateY(-50%) rotate(-45deg); }
    8%, 14% { transform: translateY(-50%) rotate(10deg); }
    15% { transform: translateY(-50%) rotate(-15deg); }
    16% { transform: translateY(-50%) rotate(-45deg); }
    17% { transform: translateY(-50%) rotate(-15deg); }
    18% { transform: translateY(-50%) rotate(-45deg); }
    19% { transform: translateY(-50%) rotate(-15deg); }
    20% { transform: translateY(-50%) rotate(-45deg); }
    21% { transform: translateY(-50%) rotate(-15deg); }
    22%, 100% { transform: translateY(-50%) rotate(-15deg); }
}

@keyframes rightBirdWing {
    0% { transform: translateY(-50%) rotate(15deg); }
    1% { transform: translateY(-50%) rotate(45deg); }
    2% { transform: translateY(-50%) rotate(15deg); }
    3% { transform: translateY(-50%) rotate(45deg); }
    4% { transform: translateY(-50%) rotate(15deg); }
    5% { transform: translateY(-50%) rotate(45deg); }
    6% { transform: translateY(-50%) rotate(15deg); }
    7% { transform: translateY(-50%) rotate(45deg); }
    8%, 14% { transform: translateY(-50%) rotate(-10deg); }
    15% { transform: translateY(-50%) rotate(15deg); }
    16% { transform: translateY(-50%) rotate(45deg); }
    17% { transform: translateY(-50%) rotate(15deg); }
    18% { transform: translateY(-50%) rotate(45deg); }
    19% { transform: translateY(-50%) rotate(15deg); }
    20% { transform: translateY(-50%) rotate(45deg); }
    21% { transform: translateY(-50%) rotate(15deg); }
    22%, 100% { transform: translateY(-50%) rotate(15deg); }
}

@keyframes perchAppear {
    0%, 6% { opacity: 0; }
    7% { opacity: 1; }
    8%, 14% { opacity: 1; }
    15% { opacity: 1; }
    16%, 100% { opacity: 0; }
}

/* ============================================
   🚀 SPACE THEME - Atmospheric Effects
   (Color overrides handled by CSS variables above)
   ============================================ */

/* Space atmospheric effects */
.public-page.theme-space::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse 600px 300px at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 500px 250px at 80% 20%, rgba(236, 72, 153, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 400px 200px at 60% 70%, rgba(6, 182, 212, 0.1) 0%, transparent 70%),
        radial-gradient(circle 1px at 10% 15%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 25% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1px at 40% 10%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 55% 45%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 70% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1px at 85% 55%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(circle 2px at 20% 50%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(circle 2px at 45% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(circle 2px at 75% 60%, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: starTwinkle 4s ease-in-out infinite;
}

.public-page.theme-space::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(circle 3px at 30% 20%, rgba(168, 85, 247, 0.9) 0%, rgba(168, 85, 247, 0.3) 50%, transparent 100%),
        radial-gradient(circle 3px at 70% 45%, rgba(6, 182, 212, 0.9) 0%, rgba(6, 182, 212, 0.3) 50%, transparent 100%),
        radial-gradient(circle 3px at 15% 75%, rgba(236, 72, 153, 0.8) 0%, rgba(236, 72, 153, 0.2) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: starTwinkle 6s ease-in-out infinite reverse;
}

/* Twinkling stars */
.theme-space .star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle ease-in-out infinite;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
}

.theme-space .star:nth-child(1) { width: 2px; height: 2px; left: 5%; top: 8%; animation-duration: 4s; animation-delay: 0s; }
.theme-space .star:nth-child(2) { width: 3px; height: 3px; left: 15%; top: 15%; animation-duration: 5s; animation-delay: 0.5s; }
.theme-space .star:nth-child(3) { width: 2px; height: 2px; left: 25%; top: 5%; animation-duration: 3.5s; animation-delay: 1.5s; }
.theme-space .star:nth-child(4) { width: 2px; height: 2px; left: 35%; top: 25%; animation-duration: 4.5s; animation-delay: 2s; }
.theme-space .star:nth-child(5) { width: 3px; height: 3px; left: 50%; top: 10%; animation-duration: 6s; animation-delay: 1s; }
.theme-space .star:nth-child(6) { width: 2px; height: 2px; left: 65%; top: 20%; animation-duration: 4.5s; animation-delay: 3s; }
.theme-space .star:nth-child(7) { width: 2px; height: 2px; left: 75%; top: 8%; animation-duration: 4s; animation-delay: 0.5s; }
.theme-space .star:nth-child(8) { width: 3px; height: 3px; left: 88%; top: 18%; animation-duration: 5.5s; animation-delay: 1.8s; }
.theme-space .star:nth-child(9) { width: 2px; height: 2px; left: 92%; top: 35%; animation-duration: 4s; animation-delay: 3.5s; }
.theme-space .star:nth-child(10) { width: 2px; height: 2px; left: 8%; top: 40%; animation-duration: 5s; animation-delay: 1.2s; }
.theme-space .star:nth-child(11) { width: 3px; height: 3px; left: 20%; top: 55%; animation-duration: 5.5s; animation-delay: 2.2s; }
.theme-space .star:nth-child(12) { width: 2px; height: 2px; left: 40%; top: 45%; animation-duration: 4.2s; animation-delay: 0.8s; }
.theme-space .star:nth-child(13) { width: 2px; height: 2px; left: 55%; top: 60%; animation-duration: 5.2s; animation-delay: 2.8s; }
.theme-space .star:nth-child(14) { width: 3px; height: 3px; left: 70%; top: 50%; animation-duration: 4s; animation-delay: 1.4s; }
.theme-space .star:nth-child(15) { width: 2px; height: 2px; left: 82%; top: 65%; animation-duration: 5s; animation-delay: 3.4s; }
.theme-space .star:nth-child(16) { width: 2px; height: 2px; left: 95%; top: 55%; animation-duration: 4.5s; animation-delay: 0.2s; }
.theme-space .star:nth-child(17) { width: 3px; height: 3px; left: 12%; top: 75%; animation-duration: 6s; animation-delay: 2s; }
.theme-space .star:nth-child(18) { width: 2px; height: 2px; left: 30%; top: 70%; animation-duration: 4s; animation-delay: 3.2s; }
.theme-space .star:nth-child(19) { width: 2px; height: 2px; left: 60%; top: 80%; animation-duration: 5s; animation-delay: 0.6s; }
.theme-space .star:nth-child(20) { width: 3px; height: 3px; left: 85%; top: 85%; animation-duration: 4.5s; animation-delay: 2.6s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.2); }
    50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.6); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Shooting star */
.theme-space .shooting-star {
    position: absolute;
    top: 65%;
    left: -50px;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: shootingStar 20s linear infinite;
    animation-delay: 10s;
    z-index: 2;
}

.theme-space .shooting-star::after {
    content: '';
    position: absolute;
    top: 2px;
    left: -100px;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(168, 85, 247, 0.4), rgba(255, 255, 255, 0.8));
    border-radius: 2px;
    transform: rotate(-40deg);
    transform-origin: right center;
}

@keyframes shootingStar {
    0%, 50% { opacity: 0; left: -50px; top: 65%; }
    52% { opacity: 1; left: -50px; top: 65%; }
    72% { opacity: 1; left: calc(100% - 150px); top: 8%; }
    74%, 100% { opacity: 0; left: calc(100% - 100px); top: 5%; }
}

/* ============================================
   ❄️ WINTER THEME - Atmospheric Effects
   (Color overrides handled by CSS variables above)
   ============================================ */

/* Winter atmospheric effects */
.public-page.theme-winter::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse 100% 50% at 50% 100%, rgba(255, 255, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 10% 30%, rgba(186, 230, 253, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 250px 125px at 90% 40%, rgba(186, 230, 253, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Snowflakes */
.snowflake {
    position: absolute;
    top: -5vh;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    animation: snowflake-fall linear infinite;
}

.snowflake:nth-child(1) { left: 10%; animation-duration: 25s; animation-delay: 0s; font-size: 1rem; }
.snowflake:nth-child(2) { left: 25%; animation-duration: 30s; animation-delay: 3s; font-size: 1.4rem; }
.snowflake:nth-child(3) { left: 40%; animation-duration: 28s; animation-delay: 6s; font-size: 1.1rem; }
.snowflake:nth-child(4) { left: 55%; animation-duration: 32s; animation-delay: 2s; font-size: 1.3rem; }
.snowflake:nth-child(5) { left: 70%; animation-duration: 26s; animation-delay: 5s; font-size: 1.2rem; }
.snowflake:nth-child(6) { left: 85%; animation-duration: 29s; animation-delay: 8s; font-size: 1.5rem; }

@keyframes snowflake-fall {
    0% { transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.6; }
    100% { transform: translateY(105vh) translateX(40px) rotate(360deg); opacity: 0; }
}

/* ============================================
   🌿 NATURE THEME - Atmospheric Effects
   (Color overrides handled by CSS variables above)
   ============================================ */

/* Nature atmospheric effects */
.public-page.theme-nature::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse 200px 600px at 30% 0%, rgba(253, 224, 71, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 150px 500px at 70% 0%, rgba(253, 224, 71, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 10% 20%, rgba(5, 46, 22, 0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: lightSway 8s ease-in-out infinite;
}

.public-page.theme-nature::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(circle 3px at 15% 25%, rgba(253, 224, 71, 0.6) 0%, transparent 100%),
        radial-gradient(circle 2px at 35% 45%, rgba(253, 224, 71, 0.5) 0%, transparent 100%),
        radial-gradient(circle 3px at 55% 20%, rgba(253, 224, 71, 0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 75% 55%, rgba(253, 224, 71, 0.5) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: particleFloat 6s ease-in-out infinite;
}

@keyframes lightSway { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
@keyframes particleFloat { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.8; } 50% { transform: translateY(-10px) translateX(5px); opacity: 1; } }

/* Butterfly */
.butterfly {
    position: fixed;
    width: 40px;
    height: 30px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: butterflyFlight 30s ease-in-out infinite;
    animation-delay: 5s;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.butterfly-body {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 2px;
    z-index: 2;
}

.butterfly-wing {
    position: absolute;
    top: 50%;
    transform-origin: center right;
    transform-style: preserve-3d;
}

.butterfly-wing.left {
    right: 50%;
    transform: translateY(-50%) rotateY(25deg);
    animation: leftWingFlap 0.35s ease-in-out infinite;
}

.butterfly-wing.right {
    left: 50%;
    transform-origin: center left;
    transform: translateY(-50%) rotateY(-25deg);
    animation: rightWingFlap 0.35s ease-in-out infinite;
}

.butterfly-wing::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 14px;
    top: -7px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 25%, #f97316 50%, #fb923c 75%, #fdba74 100%);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 80% 10% 60% 10%;
}

.butterfly-wing::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 11px;
    top: 5px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 25%, #f97316 50%, #fb923c 75%, #fdba74 100%);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 10% 60% 10% 80%;
}

.butterfly-wing.left::before, .butterfly-wing.left::after { right: 0; transform: scaleX(-1); }
.butterfly-wing.right::before, .butterfly-wing.right::after { left: 0; }

@keyframes leftWingFlap { 0%, 100% { transform: translateY(-50%) rotateY(25deg) rotateX(0deg); } 50% { transform: translateY(-50%) rotateY(75deg) rotateX(-10deg); } }
@keyframes rightWingFlap { 0%, 100% { transform: translateY(-50%) rotateY(-25deg) rotateX(0deg); } 50% { transform: translateY(-50%) rotateY(-75deg) rotateX(-10deg); } }
@keyframes butterflyFlight {
    0%, 15% { opacity: 0; left: -60px; top: 30%; transform: rotate(-5deg); }
    16% { opacity: 1; left: -60px; top: 30%; transform: rotate(-5deg); }
    25% { opacity: 1; left: 15%; top: 22%; transform: rotate(8deg); }
    35% { opacity: 1; left: 30%; top: 35%; transform: rotate(-3deg); }
    45% { opacity: 1; left: 45%; top: 25%; transform: rotate(10deg); }
    55% { opacity: 1; left: 55%; top: 38%; transform: rotate(-8deg); }
    65% { opacity: 1; left: 70%; top: 28%; transform: rotate(5deg); }
    75% { opacity: 1; left: 85%; top: 35%; transform: rotate(-5deg); }
    85% { opacity: 1; left: calc(100% + 30px); top: 25%; transform: rotate(10deg); }
    86%, 100% { opacity: 0; left: calc(100% + 60px); top: 25%; transform: rotate(10deg); }
}

/* ============================================
   🌊 OCEAN THEME - Atmospheric Effects
   (Color overrides handled by CSS variables above)
   ============================================ */

/* Ocean atmospheric effects */
.public-page.theme-ocean::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse 400px 200px at 75% 5%, rgba(251, 191, 36, 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 75% 5%, rgba(251, 146, 60, 0.15) 0%, transparent 60%),
        radial-gradient(circle 2px at 20% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(circle 3px at 40% 25%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
        radial-gradient(circle 2px at 60% 35%, rgba(255, 255, 255, 0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: waterSparkle 3s ease-in-out infinite;
}

.public-page.theme-ocean::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 150px;
    background: linear-gradient(0deg, rgba(254, 243, 199, 0.4) 0%, rgba(254, 243, 199, 0.2) 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

@keyframes waterSparkle { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

/* Dolphin */
.dolphin-scene {
    position: fixed;
    bottom: 5%;
    left: 20%;
    width: 100px;
    height: 120px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    animation: dolphinSceneAppear 34s ease-in-out infinite;
    animation-delay: 15s;
    will-change: opacity;
}

.dolphin {
    position: absolute;
    width: 80px;
    height: 45px;
    bottom: 0;
    left: 10px;
    animation: dolphinJump 34s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 15s;
    transform-origin: center bottom;
}

.dolphin-body {
    position: absolute;
    width: 65px;
    height: 28px;
    background: linear-gradient(180deg, #64748b 0%, #94a3b8 40%, #cbd5e1 100%);
    border-radius: 60% 85% 50% 40% / 70% 60% 50% 45%;
    top: 8px;
    left: 5px;
}

.dolphin-body::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 10px;
    background: linear-gradient(180deg, #64748b 0%, #94a3b8 100%);
    border-radius: 80% 100% 60% 20% / 80% 100% 40% 30%;
    top: 12px;
    right: -16px;
    transform: rotate(-8deg);
}

.dolphin-body::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #1e293b;
    border-radius: 50%;
    top: 8px;
    right: 8px;
}

.dolphin-tail {
    position: absolute;
    width: 24px;
    height: 18px;
    left: -8px;
    top: 12px;
    animation: tailWag 0.3s ease-in-out infinite;
}

.dolphin-tail::before, .dolphin-tail::after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg, #64748b 0%, #94a3b8 100%);
}

.dolphin-tail::before { width: 18px; height: 8px; border-radius: 100% 20% 80% 0% / 100% 30% 70% 0%; top: 0; left: 0; transform: rotate(-25deg); }
.dolphin-tail::after { width: 18px; height: 8px; border-radius: 0% 80% 20% 100% / 0% 70% 30% 100%; bottom: 0; left: 0; transform: rotate(25deg); }

.dolphin-fin {
    position: absolute;
    width: 16px;
    height: 20px;
    background: linear-gradient(90deg, #64748b 0%, #475569 100%);
    border-radius: 0 100% 30% 50%;
    top: -6px;
    left: 28px;
    transform: rotate(-15deg);
}

.dolphin-flipper {
    position: absolute;
    width: 14px;
    height: 7px;
    background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 100%);
    border-radius: 60% 100% 100% 40%;
    top: 26px;
    left: 35px;
    transform: rotate(20deg);
    animation: flipperMove 0.4s ease-in-out infinite;
}

.splash {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    opacity: 0;
    animation: splashAppear 34s ease-in-out infinite;
    animation-delay: 15s;
}

.splash-drop {
    position: absolute;
    bottom: 0;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(125, 211, 252, 0.6) 100%);
    border-radius: 50%;
    opacity: 0;
    animation: splashDrop 34s ease-out infinite;
    animation-delay: 15s;
}

.splash-drop:nth-child(1) { left: 15%; }
.splash-drop:nth-child(2) { left: 30%; }
.splash-drop:nth-child(3) { left: 50%; }
.splash-drop:nth-child(4) { left: 70%; }
.splash-drop:nth-child(5) { left: 85%; }

@keyframes dolphinSceneAppear { 0%, 1% { opacity: 0; } 2%, 10% { opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes dolphinJump {
    0% { transform: translateY(60px) rotate(-130deg); }
    3% { transform: translateY(-40px) rotate(-60deg); }
    6% { transform: translateY(-80px) rotate(-15deg); }
    9% { transform: translateY(-40px) rotate(25deg); }
    12%, 100% { transform: translateY(60px) rotate(50deg); }
}
@keyframes tailWag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } }
@keyframes flipperMove { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(35deg); } }
@keyframes splashAppear { 0%, 1% { opacity: 0; } 2%, 4% { opacity: 1; } 5%, 8% { opacity: 0; } 9%, 11% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes splashDrop {
    0%, 1% { opacity: 0; transform: translateY(0) scale(1); }
    2% { opacity: 1; transform: translateY(0) scale(1); }
    4% { opacity: 0.6; transform: translateY(-30px) scale(0.6); }
    6% { opacity: 0; transform: translateY(5px) scale(0.3); }
    9% { opacity: 1; transform: translateY(0) scale(1); }
    11% { opacity: 0.6; transform: translateY(-25px) scale(0.6); }
    13%, 100% { opacity: 0; transform: translateY(5px) scale(0.3); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .public-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .public-header .header-actions { gap: 8px; }
    .public-header .logo img { height: 28px; }
    .public-page .get-started-btn { padding: 6px 14px; font-size: 0.85rem; }
    .public-main { padding: 0 16px 24px; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 20px; }
    
    .public-page::before, .public-page::after { animation: none; }
}