/* ============================================
   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, .shooting-star-2,
.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; /* Prevent scrollbar flash during entrance animations */
    transition: background 0.5s ease;
    padding: 12px;
    /* No padding-top - individual pages control their own spacing */
}

/* ============================================
   PUBLIC HEADER
   ============================================ */
.public-header {
    /* 2026-05-26: changed from justify-content: space-between to flex-start +
       margin-left: auto on .header-actions. Previously, space-between with three
       children (logo / nav / actions) forced the nav into the center of the
       header — which made the Tools mega-menu trigger look like an orphaned
       floating pill instead of being anchored to a nav home. flex-start +
       gap groups the logo and nav together on the left (standard public-marketing
       nav pattern: Stripe / Linear / Notion all do this), and the actions get
       pushed right via auto-margin. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    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;
    margin-left: auto; /* pushes actions to the right edge */
    position: relative;
    z-index: 101;
}

.sign-in-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 18px;
    border-radius: 20px;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--theme-text-primary, #1e293b) !important;
    border: 1px solid var(--theme-border, rgba(30, 41, 59, 0.2));
}

.sign-in-btn:hover {
    background: var(--theme-hover-bg, rgba(30, 41, 59, 0.05));
    border-color: var(--theme-text-primary, #1e293b);
    color: var(--theme-text-primary, #1e293b) !important;
}

/* Dark Theme Overrides for Sign In Button */
.is-dark .sign-in-btn {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.5);
}

.is-dark .sign-in-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
    color: white !important;
}

/* CTA Button - IMPORTANT: Uses !important on color to override global a:hover styles */
.get-started-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 20px;
    padding: 8px 18px;
    background: var(--theme-cta-gradient);
    color: white !important; /* Override global a:hover from bootstrap-compat.css */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.get-started-btn:hover {
    color: white !important; /* Must override bootstrap-compat.css a:hover color change */
    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: flex-start;
    padding: 8px 24px;
    position: relative;
    z-index: 1;
}

/* When main has only hero, center vertically */
.public-main:has(.hero-section:only-child) {
    justify-content: center;
    padding-top: 0;
}

/* ============================================
   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;
}

/* Cloud theme: Ensure wrapper has white background to prevent page gradient bleed-through */
.theme-cloud .search-wrapper,
.theme-executive .search-wrapper {
    background: #ffffff;
    border-radius: 20px;
}

/* ============================================
   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);
}

/* ============================================
   AUTH PAGE FOOTER LINKS (Login/Register)
   ============================================ */
.login-link,
.register-cta {
    text-align: center;
    margin-top: 24px;
    color: #1e3a5f !important;
    font-size: 0.95rem;
    font-weight: 500;
}

.login-link a,
.register-cta a {
    color: #7c3aed !important;
    font-weight: 700;
    text-decoration: none;
}

.login-link a:hover,
.register-cta a:hover {
    text-decoration: underline;
    color: #6d28d9 !important;
}

/* Executive Theme - Professional link colors */
.theme-executive .login-link a,
.theme-executive .register-cta a {
    color: #334155 !important;
}

.theme-executive .login-link a:hover,
.theme-executive .register-cta a:hover {
    color: #1e293b !important;
}

/* ============================================
   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;
    /* Clear the fixed chat-widget orb (bottom-right) so the last link
       (Contact) isn't sitting underneath it. Reset to 0 on mobile, where
       the footer re-centers and the links stack clear of the orb. */
    margin-right: 72px;
}

.public-footer .footer-links a {
    color: var(--theme-footer-color);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 6px 12px;
    border-radius: 6px;
    position: relative;
}

.public-footer .footer-links a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: all 0.2s ease;
    transform: translateX(-50%);
    border-radius: 1px;
}

.public-footer .footer-links a:hover {
    color: var(--theme-footer-hover-color);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.public-footer .footer-links a:hover::after {
    width: calc(100% - 24px);
}

@media (max-width: 768px) {
    .public-footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 16px 20px;
    }
    
    .public-footer .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 16px;
        margin-right: 0; /* orb-clearance is desktop-only; mobile footer re-centers */
    }
    
    .public-footer .footer-links a {
        padding: 4px 8px;
        font-size: 0.8rem;
        background: transparent;
    }
    
    .public-footer .footer-links a:hover {
        background: transparent;
        transform: none;
    }
}

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

/* CL-EE-V-1 (2026-05-10): `.theme-effects.hunter-mode` rule removed —
   bird-shooting easter egg retired. */

/* Cloud theme enables pointer events for clickable elements */
.public-page.theme-cloud .theme-effects .floating-cloud {
    pointer-events: auto !important;
}

/* ============================================
   ☁️ 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 - clickable for easter egg */
.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: auto !important;
    cursor: pointer;
    z-index: 10;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.floating-cloud:hover {
    filter: blur(6px) brightness(1.2);
    transform: scale(1.05);
}

.floating-cloud:active {
    transform: scale(0.95);
    filter: blur(4px) brightness(1.3);
}

.cloud-1 { width: 200px; height: 80px; top: 8%; left: 2%; animation: floatCloud1 25s ease-in-out infinite; }
.cloud-2 { width: 160px; height: 65px; top: 15%; right: 5%; animation: floatCloud2 30s ease-in-out infinite; }
.cloud-3 { width: 120px; height: 50px; top: 50%; left: 8%; opacity: 0.8; animation: floatCloud3 22s ease-in-out infinite; }
.cloud-4 { width: 180px; height: 70px; bottom: 25%; right: 10%; opacity: 0.75; animation: floatCloud4 28s ease-in-out infinite; }
.cloud-5 { width: 100px; height: 40px; bottom: 15%; left: 18%; opacity: 0.7; 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;
    /* CL-V-2 (2026-05-10): Cycle stretched from 38s → 190s (5× scale).
       Bird flight visual stays the same speed (~9.5s of flight) but only
       appears once every ~3 minutes instead of every 38 seconds. The
       keyframes below are also scaled by 0.2× so the in-flight motion
       and wing flap rates remain identical to the prior implementation —
       only the idle gap between flights grew. */
    animation: birdFlyToPerch 190s ease-in-out infinite;
    animation-delay: 5s;
    will-change: transform, opacity;
}

/* CL-EE-V-1 (2026-05-10): `.flying-bird.targetable`, `.flying-bird.shot`,
   `@keyframes birdFall`, `@keyframes wingShotFlap` all removed — the
   bird-shooting easter egg is retired. The base `.flying-bird` element
   is preserved as pure ambient decoration (with its rarity dialed back
   in CL-V-2 below). */

.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 - subtle shadow effect under bird when perched */
.bird-perch {
    display: none; /* Perch is no longer used - bird now lands near top of page */
}

.theme-cloud .bird-perch {
    display: none; /* No longer using perch animation */
}

@keyframes birdFlyToPerch {
    /* Hidden, waiting */
    /* CL-V-2 (2026-05-10): All keyframe percentages scaled by 0.2× to fit
       the new 190s cycle. Visible flight occupies 0.2%-5.2% (= 9.5s, same
       as before); 5.2%-100% is the long idle gap that makes the bird rare. */
    0% { opacity: 0; top: 15%; left: -80px; transform: scaleX(1); }
    /* Fly in from left */
    0.2% { opacity: 1; top: 15%; left: -80px; transform: scaleX(1); }
    /* Graceful arc across screen - dip down in the middle */
    1% { opacity: 1; top: 20%; left: 15%; transform: scaleX(1); }
    2% { opacity: 1; top: 28%; left: 35%; transform: scaleX(1); }
    /* Lowest point - glide near center */
    3% { opacity: 1; top: 32%; left: 55%; transform: scaleX(1); }
    /* Rise back up as it exits */
    4% { opacity: 1; top: 22%; left: 75%; transform: scaleX(1); }
    /* Fly out to right */
    5% { opacity: 1; top: 12%; left: calc(100% + 80px); transform: scaleX(1); }
    5.2%, 100% { opacity: 0; top: 12%; left: calc(100% + 80px); transform: scaleX(1); }
}

@keyframes leftBirdWing {
    /* CL-V-2 (2026-05-10): Wing flap keyframes scaled by 0.2× to match the
       190s cycle. Flap rate stays the same (~2.6 flaps/sec during flight). */
    /* Continuous flapping throughout flight (0-5%) */
    0%   { transform: translateY(-50%) rotate(-15deg); }
    0.2% { transform: translateY(-50%) rotate(-45deg); }
    0.4% { transform: translateY(-50%) rotate(-15deg); }
    0.6% { transform: translateY(-50%) rotate(-45deg); }
    0.8% { transform: translateY(-50%) rotate(-15deg); }
    1%   { transform: translateY(-50%) rotate(-45deg); }
    1.2% { transform: translateY(-50%) rotate(-15deg); }
    1.4% { transform: translateY(-50%) rotate(-45deg); }
    1.6% { transform: translateY(-50%) rotate(-15deg); }
    1.8% { transform: translateY(-50%) rotate(-45deg); }
    2%   { transform: translateY(-50%) rotate(-15deg); }
    2.2% { transform: translateY(-50%) rotate(-45deg); }
    2.4% { transform: translateY(-50%) rotate(-15deg); }
    2.6% { transform: translateY(-50%) rotate(-45deg); }
    2.8% { transform: translateY(-50%) rotate(-15deg); }
    3%   { transform: translateY(-50%) rotate(-45deg); }
    3.2% { transform: translateY(-50%) rotate(-15deg); }
    3.4% { transform: translateY(-50%) rotate(-45deg); }
    3.6% { transform: translateY(-50%) rotate(-15deg); }
    3.8% { transform: translateY(-50%) rotate(-45deg); }
    4%   { transform: translateY(-50%) rotate(-15deg); }
    4.2% { transform: translateY(-50%) rotate(-45deg); }
    4.4% { transform: translateY(-50%) rotate(-15deg); }
    4.6% { transform: translateY(-50%) rotate(-45deg); }
    4.8% { transform: translateY(-50%) rotate(-15deg); }
    5%   { transform: translateY(-50%) rotate(-45deg); }
    /* Rest for remaining cycle (5.2%-100% = idle while bird is invisible) */
    5.2%, 100% { transform: translateY(-50%) rotate(-15deg); }
}

@keyframes rightBirdWing {
    /* CL-V-2 (2026-05-10): mirrors leftBirdWing — same 0.2× scaling. */
    0%   { transform: translateY(-50%) rotate(15deg); }
    0.2% { transform: translateY(-50%) rotate(45deg); }
    0.4% { transform: translateY(-50%) rotate(15deg); }
    0.6% { transform: translateY(-50%) rotate(45deg); }
    0.8% { transform: translateY(-50%) rotate(15deg); }
    1%   { transform: translateY(-50%) rotate(45deg); }
    1.2% { transform: translateY(-50%) rotate(15deg); }
    1.4% { transform: translateY(-50%) rotate(45deg); }
    1.6% { transform: translateY(-50%) rotate(15deg); }
    1.8% { transform: translateY(-50%) rotate(45deg); }
    2%   { transform: translateY(-50%) rotate(15deg); }
    2.2% { transform: translateY(-50%) rotate(45deg); }
    2.4% { transform: translateY(-50%) rotate(15deg); }
    2.6% { transform: translateY(-50%) rotate(45deg); }
    2.8% { transform: translateY(-50%) rotate(15deg); }
    3%   { transform: translateY(-50%) rotate(45deg); }
    3.2% { transform: translateY(-50%) rotate(15deg); }
    3.4% { transform: translateY(-50%) rotate(45deg); }
    3.6% { transform: translateY(-50%) rotate(15deg); }
    3.8% { transform: translateY(-50%) rotate(45deg); }
    4%   { transform: translateY(-50%) rotate(15deg); }
    4.2% { transform: translateY(-50%) rotate(45deg); }
    4.4% { transform: translateY(-50%) rotate(15deg); }
    4.6% { transform: translateY(-50%) rotate(45deg); }
    4.8% { transform: translateY(-50%) rotate(15deg); }
    5%   { transform: translateY(-50%) rotate(45deg); }
    /* Rest for remaining cycle */
    5.2%, 100% { transform: translateY(-50%) rotate(15deg); }
}

@keyframes perchAppear {
    /* CL-V-2 (2026-05-10): scaled by 0.2× for the 190s cycle. */
    0%, 1.2% { opacity: 0; }
    1.4% { opacity: 1; }
    1.6%, 2.8% { opacity: 1; }
    3% { opacity: 1; }
    3.2%, 100% { opacity: 0; }
}

/* ============================================
   EASTER EGG INFRASTRUCTURE
   Shared base styles for hint badges + score popups.
   Theme-specific easter eggs (Space UFO, Nature firefly catcher, etc.)
   override these via .easter-egg-hint.{theme}-hint and
   .score-popup.{theme}-score subclasses further down in this file.
   CL-EE-V-1 (2026-05-10): Cloud-specific bits (.cloud-hotspot,
   .feather-burst, .hunter-mode-badge, .theme-effects.hunter-mode,
   @keyframes featherFly, badgeSlideIn, badgeGlow) all removed with
   the bird-shooting easter egg. Base classes below stay because the
   other theme easter eggs depend on them.
   ============================================ */

/* Easter egg progress hint */
.easter-egg-hint {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: #1e3a5f;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: hintBounce 0.6s ease-out, hintPulse 1.5s ease-in-out 0.6s infinite;
    z-index: 1000;
    pointer-events: none;
}

@keyframes hintBounce {
    0% {
        transform: scale(0) translateY(20px);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes hintPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(124, 58, 237, 0.3);
    }
}

/* CL-EE-V-1 (2026-05-10): `.hunter-mode-badge` + `@keyframes badgeSlideIn` +
   `@keyframes badgeGlow` removed — Cloud bird-shooting easter egg retired. */

/* Score popup (base — shared by Space/Winter/Mystic easter eggs via subclasses) */
.score-popup {
    position: fixed;
    font-size: 32px;
    font-weight: 900;
    color: #16a34a;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4), 0 0 20px rgba(22, 163, 74, 0.5);
    animation: scoreFloat 2.5s ease-out forwards;
    z-index: 1002;
    pointer-events: none;
}

@keyframes scoreFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.8);
    }
}

/* ============================================
   🚀 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 - travels from left-middle to upper-right */
/* SPACE-SHOOT-V-2 (2026-05-08): slowed cycle from 45s → 110s and rewrote
   the keyframe so the star is hidden for the first ~93% of each cycle
   (~102s of dormant) and only visible during the remaining ~7s as a quick
   streak. Previous cadence felt constant — a star every ~45s with a 12s
   visible window read as "always something flying" rather than the rare
   ambient touch we want. New cadence: ~one streak every ~2 minutes,
   crossing the screen in ~6s. Tweak both `animation:` duration here and
   the `@keyframes shootingStar` percentages below if you change one. */
.theme-space .shooting-star {
    position: absolute;
    top: 45%;
    left: -50px;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: shootingStar 110s linear infinite;
    animation-delay: 25s;
    z-index: 2;
    will-change: transform, opacity, left, top;
}

/* Tail trails behind the star - extends down-left as star moves up-right */
.theme-space .shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 120px;
    height: 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(168, 85, 247, 0.5), rgba(96, 165, 250, 0.3), transparent);
    border-radius: 2px;
    transform: translateY(-50%) rotate(-20deg);
    transform-origin: right center;
}

/* Secondary glow trail */
.theme-space .shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 80px;
    height: 4px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.6), rgba(168, 85, 247, 0.2), transparent);
    border-radius: 2px;
    transform: translateY(-50%) rotate(-20deg);
    transform-origin: right center;
    filter: blur(2px);
}

/* SPACE-SHOOT-V-2: visible portion compressed from 47-73% (26% of cycle)
   to 93-99% (~6% of cycle) so the streak stays quick (~6s at 110s cycle)
   while the dormant period stretches to ~102s. */
@keyframes shootingStar {
    0%, 93% { opacity: 0; left: -5%; top: 45%; }
    94% { opacity: 1; left: 5%; top: 40%; }
    96% { opacity: 1; left: 35%; top: 28%; }
    98% { opacity: 1; left: 65%; top: 16%; }
    99% { opacity: 0.8; left: 85%; top: 10%; }
    100% { opacity: 0; left: 100%; top: 6%; }
}

/* Second shooting star — different trajectory (upper-left to lower-right).
   SPACE-SHOOT-V-2: cycle slowed from 55s → 140s and offset to 70s so the
   two stars don't pulse at the same time. With staggered cycles a viewer
   sees ~one streak per minute on average (110s + 140s averaging). */
.theme-space .shooting-star-2 {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: shootingStar2 140s linear infinite;
    animation-delay: 70s;
    z-index: 2;
    will-change: transform, opacity, left, top;
}

.theme-space .shooting-star-2::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 90px;
    height: 1.5px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(6, 182, 212, 0.5), rgba(139, 92, 246, 0.3), transparent);
    border-radius: 2px;
    transform: translateY(-50%) rotate(18deg);
    transform-origin: right center;
}

.theme-space .shooting-star-2::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 60px;
    height: 3px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(6, 182, 212, 0.2), transparent);
    border-radius: 2px;
    transform: translateY(-50%) rotate(18deg);
    transform-origin: right center;
    filter: blur(2px);
}

/* SPACE-SHOOT-V-2: visible portion compressed from 57-79% (22% of cycle)
   to 94-99% (~5% of cycle) so the streak stays quick (~7s at 140s cycle). */
@keyframes shootingStar2 {
    0%, 94% { opacity: 0; left: 10%; top: 12%; }
    95% { opacity: 1; left: 18%; top: 18%; }
    97% { opacity: 1; left: 48%; top: 38%; }
    99% { opacity: 0.7; left: 78%; top: 58%; }
    100% { opacity: 0; left: 95%; top: 68%; }
}

/* ============================================
   🛸 UFO - Space Theme Easter Egg
   Unlock: Click 5 stars to enable Contact Mode
   ============================================ */

/* UFO container */
.ufo {
    position: fixed;
    width: 60px;
    height: 35px;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    animation: ufoFlyBy 45s ease-in-out infinite;
    animation-delay: 8s;
}

/* UFO becomes clickable in contact mode */
.ufo.targetable {
    pointer-events: auto;
    cursor: pointer;
}

.ufo.targetable:hover {
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 30px rgba(6, 182, 212, 0.6));
}

/* UFO dome (top part) */
.ufo-dome {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 14px;
    background: linear-gradient(180deg, 
        rgba(6, 182, 212, 0.9) 0%, 
        rgba(168, 85, 247, 0.7) 50%,
        rgba(139, 92, 246, 0.5) 100%
    );
    border-radius: 50% 50% 30% 30%;
    box-shadow: 
        inset 2px -2px 6px rgba(255, 255, 255, 0.4),
        0 0 10px rgba(6, 182, 212, 0.5);
}

/* UFO body (main saucer) */
.ufo-body {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 18px;
    background: linear-gradient(180deg, 
        #94a3b8 0%, 
        #64748b 30%,
        #475569 70%,
        #334155 100%
    );
    border-radius: 50%;
    box-shadow: 
        inset 3px -3px 8px rgba(255, 255, 255, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(168, 85, 247, 0.3);
}

/* UFO lights container */
.ufo-lights {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    display: flex;
    justify-content: space-around;
}

/* Individual lights */
.ufo-light {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    box-shadow: 0 0 8px #fbbf24, 0 0 15px rgba(251, 191, 36, 0.6);
    animation: ufoLightBlink 0.5s ease-in-out infinite;
}

.ufo-light:nth-child(2) {
    animation-delay: 0.15s;
}

.ufo-light:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes ufoLightBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* UFO fly-by animation */
@keyframes ufoFlyBy {
    0%, 20% { opacity: 0; top: 25%; left: -80px; transform: rotate(-5deg); }
    22% { opacity: 1; top: 25%; left: -80px; transform: rotate(-5deg); }
    30% { opacity: 1; top: 18%; left: 15%; transform: rotate(3deg); }
    40% { opacity: 1; top: 28%; left: 35%; transform: rotate(-8deg); }
    50% { opacity: 1; top: 15%; left: 55%; transform: rotate(5deg); }
    60% { opacity: 1; top: 22%; left: 75%; transform: rotate(-3deg); }
    68% { opacity: 1; top: 12%; left: calc(100% + 80px); transform: rotate(8deg); }
    70%, 100% { opacity: 0; top: 12%; left: calc(100% + 80px); transform: rotate(8deg); }
}

/* Abducted UFO - hovers and beams */
.ufo.abducted {
    animation: ufoHover 2s ease-in-out infinite !important;
    opacity: 1 !important;
}

@keyframes ufoHover {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

/* Tractor beam effect */
.ufo-beam {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 150px;
    background: linear-gradient(180deg,
        rgba(6, 182, 212, 0.8) 0%,
        rgba(168, 85, 247, 0.6) 30%,
        rgba(139, 92, 246, 0.4) 60%,
        transparent 100%
    );
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: beamPulse 0.5s ease-in-out infinite;
}

@keyframes beamPulse {
    0%, 100% { opacity: 0.8; width: 10px; }
    50% { opacity: 1; width: 14px; }
}

/* ============================================
   🛸 UFO BOOP EFFECT - Fun click interaction
   ============================================ */

/* UFO wobble and flash when booped */
/* UFO boop effect - DON'T override the main animation, just add visual flair */
.ufo.booped {
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 40px rgba(168, 85, 247, 0.7));
}

.ufo.booped .ufo-body {
    animation: bodyWobble 1.2s ease-in-out;
}

.ufo.booped .ufo-dome {
    animation: domePulse 0.3s ease-in-out 4;
}

.ufo.booped .ufo-light {
    animation: lightRave 0.15s ease-in-out 8 !important;
}

/* Apply wobble to the body so it doesn't break fly-by animation */
@keyframes bodyWobble {
    0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
    10% { transform: translateX(-50%) rotate(-8deg) scale(1.05); }
    20% { transform: translateX(-50%) rotate(6deg) scale(1.02); }
    30% { transform: translateX(-50%) rotate(-5deg) scale(1.04); }
    40% { transform: translateX(-50%) rotate(4deg) scale(1.02); }
    50% { transform: translateX(-50%) rotate(-3deg) scale(1.03); }
    60% { transform: translateX(-50%) rotate(2deg) scale(1.01); }
    70% { transform: translateX(-50%) rotate(-1deg) scale(1.02); }
    80% { transform: translateX(-50%) rotate(1deg) scale(1.01); }
    90% { transform: translateX(-50%) rotate(0deg) scale(1); }
}

@keyframes domePulse {
    0%, 100% { 
        background: linear-gradient(180deg, rgba(6, 182, 212, 0.9) 0%, rgba(168, 85, 247, 0.7) 50%, rgba(139, 92, 246, 0.5) 100%);
        box-shadow: inset 2px -2px 6px rgba(255, 255, 255, 0.4), 0 0 10px rgba(6, 182, 212, 0.5);
    }
    50% { 
        background: linear-gradient(180deg, rgba(168, 85, 247, 1) 0%, rgba(236, 72, 153, 0.9) 50%, rgba(251, 191, 36, 0.8) 100%);
        box-shadow: inset 2px -2px 6px rgba(255, 255, 255, 0.6), 0 0 25px rgba(168, 85, 247, 0.9), 0 0 40px rgba(236, 72, 153, 0.6);
    }
}

@keyframes lightRave {
    0%, 100% { 
        background: radial-gradient(circle, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
        box-shadow: 0 0 8px #fbbf24, 0 0 15px rgba(251, 191, 36, 0.6);
        transform: scale(1);
    }
    25% { 
        background: radial-gradient(circle, #ec4899 0%, #db2777 50%, #be185d 100%);
        box-shadow: 0 0 12px #ec4899, 0 0 25px rgba(236, 72, 153, 0.8);
        transform: scale(1.3);
    }
    50% { 
        background: radial-gradient(circle, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
        box-shadow: 0 0 12px #06b6d4, 0 0 25px rgba(6, 182, 212, 0.8);
        transform: scale(1.2);
    }
    75% { 
        background: radial-gradient(circle, #a855f7 0%, #9333ea 50%, #7c3aed 100%);
        box-shadow: 0 0 12px #a855f7, 0 0 25px rgba(168, 85, 247, 0.8);
        transform: scale(1.4);
    }
}



/* Boop beam - quick flash tractor beam */
.ufo-boop-beam {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 80px;
    background: linear-gradient(180deg,
        rgba(251, 191, 36, 0.9) 0%,
        rgba(236, 72, 153, 0.7) 30%,
        rgba(168, 85, 247, 0.5) 60%,
        transparent 100%
    );
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: boopBeamFlash 1.2s ease-out forwards;
}

@keyframes boopBeamFlash {
    0% { opacity: 0; height: 0; }
    15% { opacity: 1; height: 100px; width: 12px; }
    30% { opacity: 0.8; height: 120px; width: 10px; }
    50% { opacity: 0.6; height: 80px; width: 8px; }
    70% { opacity: 0.4; height: 50px; width: 6px; }
    100% { opacity: 0; height: 20px; width: 4px; }
}

/* Boop sparkles - little stars around the UFO */
.ufo-boop-sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ufo-boop-sparkles span {
    position: absolute;
    font-size: 14px;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8), 0 0 20px rgba(168, 85, 247, 0.6);
    animation: sparkleExpand 1.2s ease-out forwards;
}

.ufo-boop-sparkles span:nth-child(1) { animation-delay: 0s; }
.ufo-boop-sparkles span:nth-child(2) { animation-delay: 0.1s; }
.ufo-boop-sparkles span:nth-child(3) { animation-delay: 0.2s; }

@keyframes sparkleExpand {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.5) rotate(0deg); 
    }
    20% { 
        opacity: 1; 
        transform: translate(var(--tx, 30px), var(--ty, -20px)) scale(1.2) rotate(180deg); 
    }
    100% { 
        opacity: 0; 
        transform: translate(var(--tx-end, 50px), var(--ty-end, -40px)) scale(0.3) rotate(360deg); 
    }
}

.ufo-boop-sparkles span:nth-child(1) { 
    --tx: -35px; --ty: -25px; --tx-end: -60px; --ty-end: -45px; 
}
.ufo-boop-sparkles span:nth-child(2) { 
    --tx: 0px; --ty: -35px; --tx-end: 0px; --ty-end: -60px; 
}
.ufo-boop-sparkles span:nth-child(3) { 
    --tx: 35px; --ty: -25px; --tx-end: 60px; --ty-end: -45px; 
}

/* Star hotspots for Space easter egg */
.star-hotspot {
    background: transparent;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1.5rem;
    cursor: pointer;
    pointer-events: auto !important;
    opacity: 0.4;
    transition: all 0.3s ease;
    filter: blur(0.5px);
    padding: 8px;
    z-index: 100;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.star-hotspot:hover {
    opacity: 1;
    transform: scale(1.5) rotate(20deg);
    filter: blur(0) drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
    background: transparent;
}

.star-hotspot:active {
    transform: scale(1.2) rotate(-10deg);
    opacity: 0.8;
    background: transparent;
}

.star-hotspot:focus {
    outline: none;
    background: transparent;
}

/* Space theme hint styling */
.easter-egg-hint.space-hint {
    background: rgba(30, 27, 75, 0.95);
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3), 0 0 30px rgba(6, 182, 212, 0.2);
}

/* Space theme score popup */
.score-popup.space-score {
    color: #a855f7;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.8), 0 0 60px rgba(6, 182, 212, 0.5);
}

/* Beam burst particles */
.beam-burst {
    position: fixed;
    pointer-events: none;
    z-index: 1001;
}

.beam-burst .beam-particle {
    position: absolute;
    font-size: 20px;
    color: #a855f7;
    text-shadow: 0 0 10px #06b6d4, 0 0 20px rgba(168, 85, 247, 0.8);
    animation: beamParticleFly 2s ease-out forwards;
}

.beam-burst .beam-particle:nth-child(1) {
    animation-delay: 0s;
    --fly-x: -50px;
    --fly-y: -60px;
    --rotate: -30deg;
}

.beam-burst .beam-particle:nth-child(2) {
    animation-delay: 0.1s;
    --fly-x: 40px;
    --fly-y: -50px;
    --rotate: 45deg;
}

.beam-burst .beam-particle:nth-child(3) {
    animation-delay: 0.15s;
    --fly-x: 20px;
    --fly-y: 50px;
    --rotate: 90deg;
}

@keyframes beamParticleFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--rotate)) scale(0.3);
    }
}

/* NA-EE-V-1 (2026-05-10): Nature 🪲 FIREFLY CATCHER easter egg block (~210 lines) removed entirely.
   Selectors retired: .glow-hotspot + states/nth-child, .easter-egg-hint.nature-hint,
   .firefly-jar, .jar-body, .jar-lid (+ ::before), .caught-firefly, .jar-count,
   .firefly.catchable, .catch-effect, .catch-sparkle (+ nth-child),
   .firefly-catcher-overlay (full-screen click overlay).
   See DECISIONS.md → NA-EE-V-1 for rationale. To bring back: restore from git.
*/

/* OC-EE-V-1 (2026-05-10): Ocean 🐠 TROPICAL FISH FRENZY easter egg block (~275 lines) removed entirely.
   Selectors retired: .wave-hotspot + states/nth-child, .easter-egg-hint.ocean-hint,
   .aquarium-badge, .fish-counter, .fish-release-overlay (full-screen click overlay),
   .fish-school + variants (.clownfish, .angelfish, .pufferfish, .blue-tang, .yellow-tang),
   .fish + .fish-1 through .fish-5 + ::before/::after, .fish-school.{type} .fish::before/::after
   color overrides for all 5 species. Keyframes retired: any fishSwim-related animations.
   See DECISIONS.md → OC-EE-V-1 for rationale. To bring back: restore from git.
*/
/* WI-EE-V-1 (2026-05-10): Winter ⛄ SNOWMAN BUILDER easter egg block (510 lines) removed entirely.
   Selectors retired: .snowflake-hotspot + states/nth-child, .easter-egg-hint.winter-hint,
   .builder-badge, .build-progress, .snowman-build-overlay, .snowman-container (+ .melting),
   .snowman-part (+ .visible / .bottom / .middle / .head), .snowball (+ large/medium/small),
   .snowman-buttons, .coal-button, .snowman-face, .coal-eye (+ left/right), .carrot-nose,
   .coal-mouth, .coal-dot (+ nth-child), .snowman-arms, .stick-arm (+ left/right + ::before/::after),
   .snowman-accessories, .top-hat, .hat-brim, .hat-top, .hat-band, .scarf-wrap, .scarf-tail,
   .score-popup.winter-score, .snowflake-burst (+ .burst-flake + nth-child).
   Keyframes retired: @keyframes snowmanMelt, @keyframes burstFlake.
   See DECISIONS.md → WI-EE-V-1 for rationale. To bring back: restore from git history.
*/

/* MY-EE-V-1 (2026-05-10): Mystic 🌀 PORTAL OPENING easter egg block (~614 lines) removed entirely.
   Selectors retired: .rune-hotspot + states/nth-child, .easter-egg-hint.mystic-hint,
   .portal-badge, .charge-progress, .portal-charge-overlay (full-screen click overlay),
   .portal-container (+ .open / .closing), .portal-outer-ring + .charge-1..5 variants,
   .portal-runes + .charge-N + .portal-rune (with --i positioning), .portal-frame + .frame-segment,
   .portal-particles, .energy-particle, .portal-vortex, .vortex-layer, .portal-void,
   .void-stars, .void-star + nth-child, .void-nebula, .void-entity, .portal-lightning,
   .lightning-bolt, .magic-burst, .magic-sparkle, .score-popup.mystic-score.
   Keyframes retired: any portal-charge-related, magicSparkle, vortex/void animations.
   See DECISIONS.md → MY-EE-V-1 for rationale. To bring back: restore from git.
*/

/* ============================================
   ❄️ 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;
}

/* WI-V-1 (2026-05-10, ROOT CAUSE FIX): Duplicate `.snowflake` block removed.
   The canonical snowflake rules + `@keyframes snowflake-fall` live in
   `wwwroot/css/themes.css` only. This file previously had a complete
   duplicate of the rule set (with the original FAST 25-32s durations and
   6 nth-child rules) that was silently overriding every speed-tuning pass
   in themes.css. Three rounds of slowing the durations in themes.css had no
   visible effect because public-pages.css's duplicate kept winning the
   cascade. Surfaced when Josh asked "is there css/js somewhere else didn't
   see" after the third iteration didn't slow the snow at all.

   Also retired the duplicate `@keyframes snowflake-fall` definition that
   lived here — the one in themes.css is the canonical source. */

/* ============================================
   🌿 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) translateY(0); }
    16% { opacity: 1; left: -60px; top: 30%; transform: rotate(-5deg) translateY(0); }
    20% { opacity: 1; left: 5%; top: 26%; transform: rotate(5deg) translateY(-8px); }
    25% { opacity: 1; left: 15%; top: 22%; transform: rotate(8deg) translateY(0); }
    30% { opacity: 1; left: 22%; top: 28%; transform: rotate(2deg) translateY(6px); }
    35% { opacity: 1; left: 30%; top: 35%; transform: rotate(-3deg) translateY(0); }
    40% { opacity: 1; left: 38%; top: 30%; transform: rotate(5deg) translateY(-6px); }
    45% { opacity: 1; left: 45%; top: 25%; transform: rotate(10deg) translateY(0); }
    50% { opacity: 1; left: 50%; top: 32%; transform: rotate(0deg) translateY(8px); }
    55% { opacity: 1; left: 55%; top: 38%; transform: rotate(-8deg) translateY(0); }
    60% { opacity: 1; left: 62%; top: 33%; transform: rotate(-2deg) translateY(-5px); }
    65% { opacity: 1; left: 70%; top: 28%; transform: rotate(5deg) translateY(0); }
    70% { opacity: 1; left: 78%; top: 32%; transform: rotate(0deg) translateY(6px); }
    75% { opacity: 1; left: 85%; top: 35%; transform: rotate(-5deg) translateY(0); }
    80% { opacity: 1; left: 92%; top: 30%; transform: rotate(3deg) translateY(-5px); }
    85% { opacity: 1; left: calc(100% + 30px); top: 25%; transform: rotate(10deg) translateY(0); }
    86%, 100% { opacity: 0; left: calc(100% + 60px); top: 25%; transform: rotate(10deg) translateY(0); }
}

/* 🐞 Ladybug - crawls around the screen */
.ladybug {
    position: fixed;
    width: 32px;
    height: 40px;
    z-index: 1000;
    opacity: 0;
    animation: ladybugCrawl 35s ease-in-out infinite;
    animation-delay: 3s;
    transform-origin: center center;
}

.ladybug-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.ladybug-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 10px;
    background: #1a1a1a;
    border-radius: 50% 50% 40% 40%;
    z-index: 3;
}

.ladybug-shell {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 32px;
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    border-radius: 50% 50% 45% 45%;
    box-shadow: 
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    overflow: hidden;
}

.shell-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: #1a1a1a;
}

.ladybug-spot {
    position: absolute;
    background: #1a1a1a;
    border-radius: 50%;
}

.ladybug-spot.spot-1 { width: 6px; height: 6px; top: 20%; left: 15%; }
.ladybug-spot.spot-2 { width: 6px; height: 6px; top: 20%; right: 15%; }
.ladybug-spot.spot-3 { width: 5px; height: 5px; top: 45%; left: 20%; }
.ladybug-spot.spot-4 { width: 5px; height: 5px; top: 45%; right: 20%; }
.ladybug-spot.spot-5 { width: 4px; height: 4px; top: 70%; left: 25%; }
.ladybug-spot.spot-6 { width: 4px; height: 4px; top: 70%; right: 25%; }

.ladybug-legs {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 28px;
    z-index: 1;
}

.ladybug-legs .leg {
    position: absolute;
    width: 8px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 1px;
}

.leg.leg-1 { top: 5px; left: -4px; transform: rotate(-30deg); animation: legWiggle 0.3s ease-in-out infinite; }
.leg.leg-2 { top: 12px; left: -6px; transform: rotate(-15deg); animation: legWiggle 0.3s ease-in-out infinite 0.05s; }
.leg.leg-3 { top: 19px; left: -4px; transform: rotate(10deg); animation: legWiggle 0.3s ease-in-out infinite 0.1s; }
.leg.leg-4 { top: 5px; right: -4px; transform: rotate(30deg); animation: legWiggle 0.3s ease-in-out infinite 0.15s; }
.leg.leg-5 { top: 12px; right: -6px; transform: rotate(15deg); animation: legWiggle 0.3s ease-in-out infinite 0.2s; }
.leg.leg-6 { top: 19px; right: -4px; transform: rotate(-10deg); animation: legWiggle 0.3s ease-in-out infinite 0.25s; }

@keyframes legWiggle {
    0%, 100% { transform: rotate(var(--base-rotate, 0deg)); }
    50% { transform: rotate(calc(var(--base-rotate, 0deg) + 15deg)); }
}

.ladybug-antennae {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    z-index: 4;
}

.ladybug-antennae .antenna {
    position: absolute;
    width: 2px;
    height: 8px;
    background: #1a1a1a;
    border-radius: 1px;
    transform-origin: bottom center;
}

.antenna.left { left: 2px; transform: rotate(-20deg); animation: antennaWiggle 1s ease-in-out infinite; }
.antenna.right { right: 2px; transform: rotate(20deg); animation: antennaWiggle 1s ease-in-out infinite 0.5s; }

.antenna::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    background: #1a1a1a;
    border-radius: 50%;
}

@keyframes antennaWiggle {
    0%, 100% { transform: rotate(var(--base-rotate, -20deg)); }
    50% { transform: rotate(calc(var(--base-rotate, -20deg) + 10deg)); }
}

/* Ladybug wings (shown when booped) */
.ladybug-wings {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 35px;
    z-index: 1;
}

.ladybug-wings .wing {
    position: absolute;
    width: 20px;
    height: 30px;
    background: rgba(200, 200, 200, 0.4);
    border: 1px solid rgba(150, 150, 150, 0.3);
    border-radius: 50% 50% 40% 40%;
}

.ladybug-wings .wing.left {
    left: -8px;
    transform-origin: right center;
    animation: wingOpenLeft 2s ease-in-out;
}

.ladybug-wings .wing.right {
    right: -8px;
    transform-origin: left center;
    animation: wingOpenRight 2s ease-in-out;
}

@keyframes wingOpenLeft {
    0%, 100% { transform: rotateY(0deg); }
    30%, 70% { transform: rotateY(-60deg) translateX(-5px); }
}

@keyframes wingOpenRight {
    0%, 100% { transform: rotateY(0deg); }
    30%, 70% { transform: rotateY(60deg) translateX(5px); }
}

/* Ladybug crawl animation */
@keyframes ladybugCrawl {
    0%, 10% { opacity: 0; bottom: -50px; right: 30%; transform: rotate(0deg); }
    11% { opacity: 1; }
    15% { opacity: 1; bottom: 5%; right: 30%; transform: rotate(-5deg); }
    25% { opacity: 1; bottom: 15%; right: 35%; transform: rotate(10deg); }
    35% { opacity: 1; bottom: 25%; right: 28%; transform: rotate(-8deg); }
    45% { opacity: 1; bottom: 35%; right: 38%; transform: rotate(5deg); }
    55% { opacity: 1; bottom: 45%; right: 32%; transform: rotate(-3deg); }
    65% { opacity: 1; bottom: 55%; right: 40%; transform: rotate(12deg); }
    75% { opacity: 1; bottom: 65%; right: 35%; transform: rotate(-10deg); }
    85% { opacity: 1; bottom: 75%; right: 42%; transform: rotate(8deg); }
    90% { opacity: 1; bottom: 85%; right: 38%; transform: rotate(0deg); }
    95% { opacity: 1; bottom: 95%; right: 40%; transform: rotate(-5deg); }
    96%, 100% { opacity: 0; bottom: 105%; right: 40%; transform: rotate(-5deg); }
}

/* Ladybug boop - opens wings and takes off! */
.ladybug.booped {
    animation: ladybugTakeoff 2s ease-in-out forwards !important;
}

.ladybug.booped .ladybug-shell {
    animation: shellOpen 2s ease-in-out;
}

@keyframes ladybugTakeoff {
    0% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-5deg) scale(1.1); }
    40% { transform: rotate(5deg) scale(1.2) translateY(-20px); }
    60% { transform: rotate(-10deg) scale(1.1) translateY(-60px); }
    80% { transform: rotate(15deg) scale(0.9) translateY(-120px); opacity: 1; }
    100% { transform: rotate(30deg) scale(0.7) translateY(-200px); opacity: 0; }
}

@keyframes shellOpen {
    0%, 100% { transform: translateX(-50%); }
    20%, 80% { 
        transform: translateX(-50%) perspective(100px) rotateX(-10deg);
        box-shadow: 
            inset -3px -3px 8px rgba(0, 0, 0, 0.3),
            inset 2px 2px 4px rgba(255, 255, 255, 0.2),
            0 2px 4px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(220, 38, 38, 0.5);
    }
}

/* ============================================
   🌊 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 */
/* OC-V-1 (2026-05-10): Dolphin + turtle made rare and mutually exclusive.
   Both cycles stretched to 240s (~4 minutes). Visible windows are short
   (~14s dolphin, ~40s turtle) and offset via animation-delay so they never
   appear together: dolphin visible at 12-26s of cycle, turtle at 125-164s.
   First-load timing: dolphin appears ~12s after page load, then idle until
   ~252s; turtle appears ~125s after page load, then idle until ~365s. The
   keyframe blocks above (dolphinSceneTravel, dolphinMultiJump, splashMulti,
   splashDropMulti, turtleSwim) have all had their selector percentages
   pre-scaled to fit the new cycle. */
.dolphin-scene {
    position: fixed;
    bottom: -2%;
    left: 5%;
    width: 100px;
    height: 120px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    animation: dolphinSceneTravel 240s ease-in-out infinite;
    animation-delay: 12s;
    will-change: opacity, left;
}

.dolphin {
    position: absolute;
    width: 80px;
    height: 45px;
    bottom: 0;
    left: 10px;
    animation: dolphinMultiJump 240s ease-in-out infinite;
    animation-delay: 12s;
    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;
}

/* OC-V-1 (2026-05-10): splash + splash-drop cycles also stretched to 240s
   to stay synchronized with the dolphin scene above. */
.splash {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    opacity: 0;
    animation: splashMulti 240s ease-in-out infinite;
    animation-delay: 12s;
}

.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: splashDropMulti 240s ease-out infinite;
    animation-delay: 12s;
}

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

/* OC-V-1 (2026-05-10): Dolphin scene cycle stretched 40s → 240s (6× scale).
   Visible flight (~14s of jumping + swimming across) preserved at the same
   speed; only the idle gap between scenes grew. Selector percentages divided
   by 6; spatial `left:` values + the closing `100%` preserved as-is. Cycle
   matches turtleSwim (also 240s) so the two creatures can be staggered via
   animation-delay to be mutually exclusive (dolphin visible 12-26s of cycle,
   turtle visible 125-164s — they never overlap). */
@keyframes dolphinSceneTravel {
    0%, 0.17% { opacity: 0; left: 5%; }
    /* First jump */
    0.33%, 1.33% { opacity: 1; left: 10%; }
    /* Swim to second position */
    1.5%, 2.33% { opacity: 1; left: 35%; }
    /* Second jump */
    2.5%, 3.5% { opacity: 1; left: 40%; }
    /* Swim to third position */
    3.67%, 4.5% { opacity: 1; left: 65%; }
    /* Third jump */
    4.67%, 5.67% { opacity: 1; left: 70%; }
    /* Exit */
    5.83% { opacity: 0; left: 85%; }
    6%, 100% { opacity: 0; left: 5%; }
}

@keyframes dolphinMultiJump {
    /* Hidden */
    0%, 0.17% { transform: translateY(60px) rotate(50deg); }
    /* First jump - emerge */
    0.33% { transform: translateY(60px) rotate(-130deg); }
    0.5% { transform: translateY(10px) rotate(-90deg); }
    0.67% { transform: translateY(-60px) rotate(-30deg); }
    0.83% { transform: translateY(-80px) rotate(-10deg); }
    1% { transform: translateY(-60px) rotate(20deg); }
    1.17% { transform: translateY(10px) rotate(45deg); }
    1.33% { transform: translateY(60px) rotate(50deg); }
    /* Swim underwater */
    1.5%, 2.33% { transform: translateY(60px) rotate(50deg); }
    /* Second jump */
    2.5% { transform: translateY(60px) rotate(-130deg); }
    2.67% { transform: translateY(10px) rotate(-90deg); }
    2.83% { transform: translateY(-65px) rotate(-25deg); }
    3% { transform: translateY(-85px) rotate(-5deg); }
    3.17% { transform: translateY(-55px) rotate(25deg); }
    3.33% { transform: translateY(10px) rotate(45deg); }
    3.5% { transform: translateY(60px) rotate(50deg); }
    /* Swim underwater */
    3.67%, 4.5% { transform: translateY(60px) rotate(50deg); }
    /* Third jump */
    4.67% { transform: translateY(60px) rotate(-130deg); }
    4.83% { transform: translateY(10px) rotate(-85deg); }
    5% { transform: translateY(-55px) rotate(-35deg); }
    5.17% { transform: translateY(-75px) rotate(-15deg); }
    5.33% { transform: translateY(-50px) rotate(20deg); }
    5.5% { transform: translateY(10px) rotate(45deg); }
    5.67%, 100% { transform: translateY(60px) rotate(50deg); }
}

@keyframes splashMulti {
    0%, 0.25% { opacity: 0; }
    /* First jump splashes */
    0.33% { opacity: 1; }
    0.5% { opacity: 0; }
    1.17% { opacity: 0; }
    1.33% { opacity: 1; }
    1.5%, 2.42% { opacity: 0; }
    /* Second jump splashes */
    2.5% { opacity: 1; }
    2.67% { opacity: 0; }
    3.33% { opacity: 0; }
    3.5% { opacity: 1; }
    3.67%, 4.58% { opacity: 0; }
    /* Third jump splashes */
    4.67% { opacity: 1; }
    4.83% { opacity: 0; }
    5.5% { opacity: 0; }
    5.67% { opacity: 1; }
    5.83%, 100% { opacity: 0; }
}

@keyframes splashDropMulti {
    0%, 0.25% { opacity: 0; transform: translateY(0) scale(1); }
    /* First jump - emerge */
    0.33% { opacity: 1; transform: translateY(0) scale(1); }
    0.42% { opacity: 0.8; transform: translateY(-25px) scale(0.7); }
    0.5% { opacity: 0; transform: translateY(-10px) scale(0.3); }
    /* First jump - re-enter */
    1.25% { opacity: 0; transform: translateY(0) scale(1); }
    1.33% { opacity: 1; transform: translateY(0) scale(1); }
    1.42% { opacity: 0.8; transform: translateY(-30px) scale(0.7); }
    1.5% { opacity: 0; transform: translateY(-10px) scale(0.3); }
    /* Second jump - emerge */
    2.42% { opacity: 0; transform: translateY(0) scale(1); }
    2.5% { opacity: 1; transform: translateY(0) scale(1); }
    2.58% { opacity: 0.8; transform: translateY(-25px) scale(0.7); }
    2.67% { opacity: 0; transform: translateY(-10px) scale(0.3); }
    /* Second jump - re-enter */
    3.42% { opacity: 0; transform: translateY(0) scale(1); }
    3.5% { opacity: 1; transform: translateY(0) scale(1); }
    3.58% { opacity: 0.8; transform: translateY(-30px) scale(0.7); }
    3.67% { opacity: 0; transform: translateY(-10px) scale(0.3); }
    /* Third jump - emerge */
    4.58% { opacity: 0; transform: translateY(0) scale(1); }
    4.67% { opacity: 1; transform: translateY(0) scale(1); }
    4.75% { opacity: 0.8; transform: translateY(-25px) scale(0.7); }
    4.83% { opacity: 0; transform: translateY(-10px) scale(0.3); }
    /* Third jump - re-enter */
    5.58% { opacity: 0; transform: translateY(0) scale(1); }
    5.67% { opacity: 1; transform: translateY(0) scale(1); }
    5.75% { opacity: 0.8; transform: translateY(-30px) scale(0.7); }
    5.83%, 100% { opacity: 0; transform: translateY(-10px) scale(0.3); }
}

@keyframes tailWag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } }
@keyframes flipperMove { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(35deg); } }

/* ============================================
   🫧 OCEAN BUBBLES
   ============================================ */
.bubbles {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -20px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(125, 211, 252, 0.3) 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: bubbleRise 12s ease-in-out infinite;
}

.bubble:nth-child(1) { left: 10%; width: 8px; height: 8px; animation-delay: 0s; animation-duration: 14s; }
.bubble:nth-child(2) { left: 25%; width: 5px; height: 5px; animation-delay: 3s; animation-duration: 11s; }
.bubble:nth-child(3) { left: 50%; width: 10px; height: 10px; animation-delay: 6s; animation-duration: 16s; }
.bubble:nth-child(4) { left: 70%; width: 6px; height: 6px; animation-delay: 2s; animation-duration: 13s; }
.bubble:nth-child(5) { left: 85%; width: 7px; height: 7px; animation-delay: 8s; animation-duration: 15s; }

@keyframes bubbleRise {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.6; transform: translateY(-10vh) translateX(5px) scale(0.8); }
    50% { opacity: 0.4; transform: translateY(-50vh) translateX(-8px) scale(1); }
    90% { opacity: 0.2; transform: translateY(-90vh) translateX(3px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-100vh) translateX(0) scale(1.2); }
}

/* ============================================
   🐢 SEA TURTLE
   ============================================ */
/* OC-V-1 (2026-05-10): Turtle cycle stretched 60s → 240s (4× scale) and
   delay shifted from 25s → 125s so the visible window (125-164s of cycle)
   never overlaps the dolphin (12-26s of cycle). Both creatures rare,
   never on screen at the same time. */
.sea-turtle {
    position: fixed;
    width: 70px;
    height: 50px;
    bottom: 25%;
    left: -100px;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    animation: turtleSwim 240s ease-in-out infinite;
    animation-delay: 125s;
    will-change: transform, opacity, left;
}

.turtle-shell {
    position: absolute;
    width: 45px;
    height: 35px;
    background: linear-gradient(145deg, #065f46 0%, #047857 30%, #059669 60%, #10b981 100%);
    border-radius: 50% 50% 45% 45%;
    top: 8px;
    left: 12px;
    box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.3),
                inset 2px 2px 5px rgba(255, 255, 255, 0.1);
}

/* Shell pattern */
.turtle-shell::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 12px 10px at 50% 30%, rgba(4, 120, 87, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 10px 8px at 30% 55%, rgba(4, 120, 87, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 10px 8px at 70% 55%, rgba(4, 120, 87, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 8px 6px at 50% 75%, rgba(4, 120, 87, 0.5) 0%, transparent 70%);
    border-radius: inherit;
}

/* Shell edge highlight */
.turtle-shell::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    right: 5px;
    height: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    border-radius: 50% 50% 0 0;
}

.turtle-head {
    position: absolute;
    width: 18px;
    height: 14px;
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #14b8a6 100%);
    border-radius: 60% 60% 50% 50%;
    top: 18px;
    right: 0;
    transform-origin: left center;
    animation: turtleHeadBob 3s ease-in-out infinite;
}

/* Eye */
.turtle-head::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #1e293b;
    border-radius: 50%;
    top: 4px;
    right: 4px;
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.3);
}

/* Beak/mouth */
.turtle-head::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 3px;
    background: #0d9488;
    border-radius: 0 50% 50% 0;
    top: 8px;
    right: -2px;
}

.turtle-flipper {
    position: absolute;
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #14b8a6 100%);
    transform-origin: center;
}

.turtle-flipper.front-left {
    width: 22px;
    height: 10px;
    border-radius: 80% 20% 60% 40%;
    top: 12px;
    left: 5px;
    transform: rotate(-30deg);
    animation: frontFlipperLeft 1.2s ease-in-out infinite;
}

.turtle-flipper.front-right {
    width: 22px;
    height: 10px;
    border-radius: 20% 80% 40% 60%;
    top: 12px;
    right: 8px;
    transform: rotate(30deg);
    animation: frontFlipperRight 1.2s ease-in-out infinite;
}

.turtle-flipper.back-left {
    width: 14px;
    height: 8px;
    border-radius: 70% 30% 50% 50%;
    bottom: 5px;
    left: 10px;
    transform: rotate(-20deg);
    animation: backFlipper 1.5s ease-in-out infinite;
}

.turtle-flipper.back-right {
    width: 14px;
    height: 8px;
    border-radius: 30% 70% 50% 50%;
    bottom: 5px;
    right: 15px;
    transform: rotate(20deg);
    animation: backFlipper 1.5s ease-in-out infinite;
    animation-delay: 0.75s;
}

/* OC-V-1 (2026-05-10): Turtle swim cycle stretched 60s → 240s (4× scale).
   Visible swim (~40s of leisurely traversal) preserved at the same speed;
   only the idle gap between swims grew. Selector percentages divided by 4;
   spatial `left:` values + the closing `100%` preserved as-is. Cycle matches
   dolphinSceneTravel (also 240s) for mutual exclusivity via animation-delay
   (turtle visible 125-164s of cycle; dolphin visible 12-26s — non-overlapping). */
@keyframes turtleSwim {
    0%, 1.25% { opacity: 0; left: -100px; transform: translateY(0) rotate(0deg); }
    1.5% { opacity: 1; left: -50px; transform: translateY(0) rotate(-3deg); }
    3.75% { opacity: 1; left: 15%; transform: translateY(-20px) rotate(3deg); }
    6.25% { opacity: 1; left: 30%; transform: translateY(10px) rotate(-2deg); }
    8.75% { opacity: 1; left: 45%; transform: translateY(-15px) rotate(2deg); }
    11.25% { opacity: 1; left: 60%; transform: translateY(5px) rotate(-3deg); }
    13.75% { opacity: 1; left: 75%; transform: translateY(-10px) rotate(2deg); }
    16.25% { opacity: 1; left: 90%; transform: translateY(0) rotate(-2deg); }
    17.5% { opacity: 0; left: calc(100% + 50px); transform: translateY(5px) rotate(0deg); }
    17.75%, 100% { opacity: 0; left: -100px; transform: translateY(0) rotate(0deg); }
}

@keyframes turtleHeadBob {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-5deg) translateX(2px); }
    75% { transform: rotate(5deg) translateX(-1px); }
}

@keyframes frontFlipperLeft {
    0%, 100% { transform: rotate(-30deg) translateY(0); }
    50% { transform: rotate(-60deg) translateY(-5px); }
}

@keyframes frontFlipperRight {
    0%, 100% { transform: rotate(30deg) translateY(0); }
    50% { transform: rotate(60deg) translateY(-5px); }
}

@keyframes backFlipper {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(-35deg); }
}

/* ============================================
   ✨ SPACE NEBULA
   ============================================ */
.nebula {
    position: fixed;
    top: 10%;
    right: 5%;
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse at center, 
        rgba(139, 92, 246, 0.15) 0%, 
        rgba(168, 85, 247, 0.1) 30%,
        rgba(59, 130, 246, 0.05) 60%,
        transparent 80%);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
    animation: nebulaPulse 20s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes nebulaPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
    25% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
    50% { transform: scale(0.95) rotate(-3deg); opacity: 0.5; }
    75% { transform: scale(1.05) rotate(2deg); opacity: 0.7; }
}

/* CL-V-1 (2026-05-10): Cloud Sun Rays block removed entirely — both
   `.sun-rays` + `::before` rules and the `sunGlow` / `sunRaysSpin`
   keyframes. The Cloud-theme sun (this element + the lens-flare element
   that lived in themes.css) has been retired in favor of the existing
   floating-cloud + ambient-particle effects. The matching `<div class="sun-rays">`
   in `Components/ThemeEffects.razor` was deleted as well. To bring it
   back: restore from git history. */

/* ============================================
   🌌 WINTER AURORA
   ============================================ */
.aurora {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 197, 94, 0.05) 20%,
        rgba(59, 130, 246, 0.08) 40%,
        rgba(168, 85, 247, 0.06) 60%,
        rgba(34, 197, 94, 0.04) 80%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: auroraDance 15s ease-in-out infinite;
    will-change: transform, opacity;
    filter: blur(30px);
}

.aurora::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 30%;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 197, 94, 0.1) 30%,
        rgba(6, 182, 212, 0.08) 60%,
        transparent 100%);
    animation: auroraWave 12s ease-in-out infinite;
    animation-delay: 2s;
}

.aurora::after {
    content: '';
    position: absolute;
    top: 0;
    left: 40%;
    right: 10%;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(139, 92, 246, 0.08) 30%,
        rgba(236, 72, 153, 0.05) 60%,
        transparent 100%);
    animation: auroraWave 14s ease-in-out infinite reverse;
    animation-delay: 5s;
}

@keyframes auroraDance {
    0%, 100% { transform: translateX(0) scaleY(1); opacity: 0.7; }
    25% { transform: translateX(3%) scaleY(1.1); opacity: 0.9; }
    50% { transform: translateX(-2%) scaleY(0.95); opacity: 0.6; }
    75% { transform: translateX(1%) scaleY(1.05); opacity: 0.8; }
}

@keyframes auroraWave {
    0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.6; }
    50% { transform: translateX(5%) skewX(2deg); opacity: 0.9; }
}

/* ============================================
   🌿 NATURE FIREFLIES
   ============================================ */
.fireflies {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at center, 
        rgba(253, 224, 71, 1) 0%, 
        rgba(253, 224, 71, 0.8) 30%,
        rgba(253, 224, 71, 0.3) 60%,
        transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px 3px rgba(253, 224, 71, 0.6),
                0 0 20px 6px rgba(253, 224, 71, 0.3);
    animation: fireflyFloat 20s ease-in-out infinite;
}

.firefly:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; animation-duration: 22s; }
.firefly:nth-child(2) { top: 40%; left: 75%; animation-delay: 4s; animation-duration: 18s; }
.firefly:nth-child(3) { top: 60%; left: 30%; animation-delay: 8s; animation-duration: 25s; }
.firefly:nth-child(4) { top: 35%; left: 55%; animation-delay: 2s; animation-duration: 20s; }
.firefly:nth-child(5) { top: 70%; left: 85%; animation-delay: 6s; animation-duration: 23s; }

@keyframes fireflyFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(0.5); 
        opacity: 0;
    }
    5% { 
        opacity: 0.8;
        transform: translate(10px, -15px) scale(1);
    }
    15% {
        opacity: 0.3;
        transform: translate(-20px, 10px) scale(0.8);
    }
    25% {
        opacity: 0.9;
        transform: translate(30px, -25px) scale(1.1);
    }
    35% {
        opacity: 0.4;
        transform: translate(-15px, 20px) scale(0.7);
    }
    45% {
        opacity: 1;
        transform: translate(25px, -10px) scale(1);
    }
    55% {
        opacity: 0.5;
        transform: translate(-30px, 30px) scale(0.9);
    }
    65% {
        opacity: 0.8;
        transform: translate(15px, -20px) scale(1);
    }
    75% {
        opacity: 0.3;
        transform: translate(-10px, 15px) scale(0.8);
    }
    85% {
        opacity: 0.7;
        transform: translate(20px, -5px) scale(1);
    }
    95% {
        opacity: 0.2;
        transform: translate(-5px, 10px) scale(0.6);
    }
}

/* ============================================
   🍂 NATURE FALLING LEAVES
   ============================================ */
.falling-leaves {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.leaf {
    position: absolute;
    top: -50px;
    font-size: 1.5rem;
    opacity: 0;
    animation: leafFall linear infinite;
    will-change: transform, opacity;
}

.leaf-1 {
    left: 8%;
    font-size: 1.3rem;
    animation-duration: 25s;
    animation-delay: 0s;
}

.leaf-2 {
    left: 22%;
    font-size: 1.8rem;
    animation-duration: 30s;
    animation-delay: 5s;
}

.leaf-3 {
    left: 38%;
    font-size: 1.4rem;
    animation-duration: 28s;
    animation-delay: 12s;
}

.leaf-4 {
    left: 55%;
    font-size: 1.6rem;
    animation-duration: 32s;
    animation-delay: 3s;
}

.leaf-5 {
    left: 72%;
    font-size: 1.5rem;
    animation-duration: 27s;
    animation-delay: 18s;
}

.leaf-6 {
    left: 88%;
    font-size: 1.2rem;
    animation-duration: 26s;
    animation-delay: 8s;
}

@keyframes leafFall {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
        transform: translateY(0vh) translateX(15px) rotate(25deg) scale(1);
    }
    15% {
        transform: translateY(12vh) translateX(-20px) rotate(-15deg) scale(0.95);
        opacity: 0.85;
    }
    25% {
        transform: translateY(24vh) translateX(25px) rotate(45deg) scale(1);
    }
    35% {
        transform: translateY(36vh) translateX(-15px) rotate(10deg) scale(0.9);
        opacity: 0.8;
    }
    45% {
        transform: translateY(48vh) translateX(30px) rotate(60deg) scale(1);
    }
    55% {
        transform: translateY(60vh) translateX(-25px) rotate(30deg) scale(0.95);
        opacity: 0.7;
    }
    65% {
        transform: translateY(72vh) translateX(20px) rotate(80deg) scale(0.9);
    }
    75% {
        transform: translateY(84vh) translateX(-10px) rotate(50deg) scale(0.85);
        opacity: 0.5;
    }
    85% {
        transform: translateY(94vh) translateX(15px) rotate(100deg) scale(0.8);
        opacity: 0.3;
    }
    95%, 100% {
        transform: translateY(105vh) translateX(5px) rotate(120deg) scale(0.7);
        opacity: 0;
    }
}

/* ============================================
   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; }
}

/* ============================================
   🎨 THEME ELEMENT BOOP EFFECTS
   Fun click interactions for all themes
   ============================================ */

/* ☁️ CLOUD THEME BOOPS */

/* Bird loop-de-loop with musical notes */
.flying-bird.booped {
    animation: birdLoop 1.5s ease-in-out !important;
}

@keyframes birdLoop {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg) translateY(-30px); }
    50% { transform: rotate(360deg) translateY(-50px) scale(1.1); }
    75% { transform: rotate(380deg) translateY(-20px); }
    100% { transform: rotate(360deg) translateY(0); }
}

.musical-notes {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.musical-notes span {
    font-size: 16px;
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
    animation: noteFloat 1.5s ease-out forwards;
}

.musical-notes span:nth-child(1) { animation-delay: 0s; }
.musical-notes span:nth-child(2) { animation-delay: 0.2s; }
.musical-notes span:nth-child(3) { animation-delay: 0.4s; }

@keyframes noteFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    30% { opacity: 1; transform: translateY(-15px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.8) rotate(20deg); }
}

/* Cloud puff with raindrops */
.floating-cloud.booped {
    animation: cloudPuff 1.2s ease-in-out;
}

@keyframes cloudPuff {
    0%, 100% { transform: scale(1); filter: blur(8px); }
    30% { transform: scale(1.4); filter: blur(4px) brightness(1.3); }
    50% { transform: scale(1.2); filter: blur(6px); }
}

/* 🌿 NATURE THEME BOOPS */

/* Butterfly rainbow flutter */
.butterfly.booped {
    animation: butterflyFlutter 1.5s ease-in-out;
}

.butterfly.booped .butterfly-wing {
    animation: wingRainbow 0.3s ease-in-out 5;
}

@keyframes butterflyFlutter {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-15deg) scale(1.2) translateY(-20px); }
    40% { transform: rotate(15deg) scale(1.1) translateY(-30px); }
    60% { transform: rotate(-10deg) scale(1.15) translateY(-25px); }
    80% { transform: rotate(10deg) scale(1.05) translateY(-10px); }
}

@keyframes wingRainbow {
    0% { filter: hue-rotate(0deg) brightness(1.2); }
    50% { filter: hue-rotate(180deg) brightness(1.5); }
    100% { filter: hue-rotate(360deg) brightness(1.2); }
}

/* Firefly camera flash */
.fireflies.booped .firefly {
    animation: fireflyFlash 1s ease-out;
}

@keyframes fireflyFlash {
    0%, 100% { box-shadow: 0 0 10px #84cc16, 0 0 20px rgba(132, 204, 22, 0.5); transform: scale(1); }
    30% { box-shadow: 0 0 40px #fff, 0 0 80px #84cc16, 0 0 120px rgba(132, 204, 22, 0.8); transform: scale(2); }
    60% { box-shadow: 0 0 25px #84cc16, 0 0 50px rgba(132, 204, 22, 0.6); transform: scale(1.5); }
}

/* (Leaf styles removed - replaced with ladybug) */

/* 🌊 OCEAN THEME BOOPS */

/* Dolphin backflip */
.dolphin-scene.booped .dolphin {
    animation: dolphinFlip 1.8s ease-in-out;
}

.dolphin-scene.booped .splash {
    animation: splashBurst 0.8s ease-out 0.3s;
}

@keyframes dolphinFlip {
    0% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-80px) rotate(-30deg); }
    50% { transform: translateY(-120px) rotate(-180deg); }
    70% { transform: translateY(-80px) rotate(-300deg); }
    100% { transform: translateY(0) rotate(-360deg); }
}

@keyframes splashBurst {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(2); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Jellyfish squish and glow */
.jellyfish.booped, .jellyfish-2.booped {
    animation: jellyfishSquish 1.2s ease-in-out;
}

@keyframes jellyfishSquish {
    0%, 100% { transform: scaleX(1) scaleY(1); filter: brightness(1); }
    20% { transform: scaleX(1.3) scaleY(0.7); filter: brightness(1.5) hue-rotate(30deg); }
    40% { transform: scaleX(0.8) scaleY(1.3); filter: brightness(1.8) hue-rotate(60deg); }
    60% { transform: scaleX(1.2) scaleY(0.8); filter: brightness(1.5) hue-rotate(90deg); }
    80% { transform: scaleX(0.9) scaleY(1.1); filter: brightness(1.3) hue-rotate(45deg); }
}

/* Sea turtle shell retreat */
.sea-turtle.booped .turtle-head {
    animation: turtleHide 2s ease-in-out;
}

.sea-turtle.booped .turtle-flipper {
    animation: flipperTuck 2s ease-in-out;
}

@keyframes turtleHide {
    0%, 100% { transform: translateX(0); }
    30%, 70% { transform: translateX(-10px) scale(0.5); opacity: 0.3; }
}

@keyframes flipperTuck {
    0%, 100% { transform: rotate(0deg); }
    30%, 70% { transform: rotate(-30deg) scale(0.7); }
}

/* Bubble pop */
.bubbles.booped .bubble {
    animation: bubblePop 0.6s ease-out forwards;
}

@keyframes bubblePop {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.8); opacity: 0.8; border-width: 3px; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ❄️ WINTER THEME BOOPS */

/* Snowflake shatter */
.snowflake.booped {
    animation: snowflakeShatter 1s ease-out;
}

@keyframes snowflakeShatter {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    30% { transform: scale(1.5) rotate(45deg); opacity: 1; filter: brightness(2); }
    60% { transform: scale(0.5) rotate(180deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* Aurora intensify */
.aurora-container.booped .aurora-wave {
    animation: auroraIntensify 1.5s ease-in-out;
}

@keyframes auroraIntensify {
    0%, 100% { opacity: 0.4; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(2) saturate(1.5); transform: scaleY(1.3); }
}

/* 🔮 MYSTIC THEME BOOPS */

/* Rune glow and spin */
.mystic-rune.booped {
    animation: runeGlowSpin 1.2s ease-in-out;
}

@keyframes runeGlowSpin {
    0% { transform: scale(1) rotate(0deg); text-shadow: 0 0 10px rgba(249, 115, 22, 0.8); }
    25% { transform: scale(1.5) rotate(90deg); text-shadow: 0 0 30px #f97316, 0 0 60px #ec4899; color: #ec4899; }
    50% { transform: scale(1.8) rotate(180deg); text-shadow: 0 0 50px #a855f7, 0 0 100px #06b6d4; color: #06b6d4; }
    75% { transform: scale(1.5) rotate(270deg); text-shadow: 0 0 30px #fbbf24, 0 0 60px #f97316; color: #fbbf24; }
    100% { transform: scale(1) rotate(360deg); text-shadow: 0 0 10px rgba(249, 115, 22, 0.8); }
}

/* Spark explosion */
.mystic-spark.booped {
    animation: sparkExplode 0.8s ease-out;
}

@keyframes sparkExplode {
    0% { transform: scale(1); box-shadow: 0 0 10px #f97316; }
    30% { transform: scale(3); box-shadow: 0 0 40px #f97316, 0 0 80px #fbbf24; }
    60% { transform: scale(5); box-shadow: 0 0 60px #ec4899, 0 0 120px #a855f7; opacity: 0.6; }
    100% { transform: scale(8); box-shadow: 0 0 80px transparent; opacity: 0; }
}

/* 💠 TRON THEME BOOPS */

/* Identity disc boomerang */
.identity-disc.booped {
    animation: discBoomerang 2s ease-in-out;
}

@keyframes discBoomerang {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(150px) rotate(720deg) scale(0.8); filter: brightness(2); }
    50% { transform: translateX(300px) rotate(1440deg) scale(0.6); filter: brightness(2.5) drop-shadow(0 0 30px #00d4ff); }
    75% { transform: translateX(150px) rotate(2160deg) scale(0.8); filter: brightness(2); }
    100% { transform: translateX(0) rotate(2880deg) scale(1); filter: brightness(1); }
}

/* Hex node pulse with connections */
.hex-nodes.booped .hex-node {
    animation: hexPulse 1.2s ease-in-out;
}

.hex-node.active {
    animation: hexActive 1.2s ease-in-out !important;
}

.hex-nodes.booped::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, transparent 30%, rgba(0, 212, 255, 0.3) 50%, transparent 70%);
    animation: connectionPulse 1.2s ease-out;
    pointer-events: none;
}

@keyframes hexPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); transform: scale(1); }
    50% { box-shadow: 0 0 30px #00d4ff, 0 0 60px rgba(0, 212, 255, 0.8); transform: scale(1.3); }
}

@keyframes hexActive {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); transform: scale(1); }
    30% { box-shadow: 0 0 50px #00d4ff, 0 0 100px #fff; transform: scale(2); background: #00d4ff; }
    60% { box-shadow: 0 0 30px #00d4ff, 0 0 60px rgba(0, 212, 255, 0.8); transform: scale(1.5); }
}

@keyframes connectionPulse {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ============================================
   FOCUS HOME PAGE - GLOBAL STYLES
   These override scoped CSS to ensure proper theming
   ============================================ */

/* Force text colors on Focus page for Cloud/default theme */
.focus-home-page .hero-title {
    color: #1e293b !important;
}

.focus-home-page .title-line {
    color: #475569 !important;
}

.focus-home-page .hero-subtitle {
    color: #64748b !important;
}

.focus-home-page .section-title {
    color: #1e293b !important;
}

.focus-home-page .section-title svg {
    color: #7c3aed !important;
}

.focus-home-page .category-title {
    color: #1e293b !important;
}

.focus-home-page .category-description {
    color: #64748b !important;
}

.focus-home-page .stat-number {
    color: #7c3aed !important;
}

.focus-home-page .stat-label {
    color: #64748b !important;
}

.focus-home-page .tool-count {
    color: #64748b !important;
}

/* Cloud theme explicit overrides */
.focus-home-page.theme-cloud .hero-title { color: #1e293b !important; }
.focus-home-page.theme-cloud .title-line { color: #475569 !important; }
.focus-home-page.theme-cloud .hero-subtitle { color: #64748b !important; }
.focus-home-page.theme-cloud .section-title { color: #1e293b !important; }
.focus-home-page.theme-cloud .category-title { color: #1e293b !important; }
.focus-home-page.theme-cloud .category-description { color: #64748b !important; }

/* Dark theme overrides for Focus page - Space */
.focus-home-page.theme-space {
    background: linear-gradient(135deg, #0f0a1e 0%, #1e1b4b 50%, #0f172a 100%) !important;
}

.focus-home-page.theme-space .hero-title,
.focus-home-page.theme-space .section-title,
.focus-home-page.theme-space .category-title {
    color: #f1f5f9 !important;
}

.focus-home-page.theme-space .title-line {
    color: #a78bfa !important;
}

.focus-home-page.theme-space .hero-subtitle,
.focus-home-page.theme-space .category-description {
    color: #c4b5fd !important;
}

.focus-home-page.theme-space .stat-number {
    color: #a78bfa !important;
}

.focus-home-page.theme-space .stat-label,
.focus-home-page.theme-space .tool-count {
    color: #c4b5fd !important;
}

.focus-home-page.theme-space .category-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

.focus-home-page.theme-space .stats-row {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* Dark theme overrides - Winter */
.focus-home-page.theme-winter {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1e1b4b 100%) !important;
}

.focus-home-page.theme-winter .hero-title,
.focus-home-page.theme-winter .section-title,
.focus-home-page.theme-winter .category-title {
    color: #f1f5f9 !important;
}

.focus-home-page.theme-winter .title-line,
.focus-home-page.theme-winter .hero-subtitle,
.focus-home-page.theme-winter .category-description,
.focus-home-page.theme-winter .stat-label,
.focus-home-page.theme-winter .tool-count {
    color: #7dd3fc !important;
}

.focus-home-page.theme-winter .stat-number {
    color: #38bdf8 !important;
}

/* Dark theme overrides - Nature */
.focus-home-page.theme-nature {
    background: linear-gradient(135deg, #14532d 0%, #1a2e1a 50%, #365314 100%) !important;
}

.focus-home-page.theme-nature .hero-title,
.focus-home-page.theme-nature .section-title,
.focus-home-page.theme-nature .category-title {
    color: #f1f5f9 !important;
}

.focus-home-page.theme-nature .title-line,
.focus-home-page.theme-nature .hero-subtitle,
.focus-home-page.theme-nature .category-description,
.focus-home-page.theme-nature .stat-label,
.focus-home-page.theme-nature .tool-count {
    color: #86efac !important;
}

.focus-home-page.theme-nature .stat-number {
    color: #4ade80 !important;
}

/* Dark theme overrides - Ocean */
.focus-home-page.theme-ocean {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #0f766e 100%) !important;
}

.focus-home-page.theme-ocean .hero-title,
.focus-home-page.theme-ocean .section-title,
.focus-home-page.theme-ocean .category-title {
    color: #f1f5f9 !important;
}

.focus-home-page.theme-ocean .title-line,
.focus-home-page.theme-ocean .hero-subtitle,
.focus-home-page.theme-ocean .category-description,
.focus-home-page.theme-ocean .stat-label,
.focus-home-page.theme-ocean .tool-count {
    color: #67e8f9 !important;
}

.focus-home-page.theme-ocean .stat-number {
    color: #22d3ee !important;
}

/* Dark theme overrides - Mystic */
.focus-home-page.theme-mystic {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #4c1d95 100%) !important;
}

.focus-home-page.theme-mystic .hero-title,
.focus-home-page.theme-mystic .section-title,
.focus-home-page.theme-mystic .category-title {
    color: #faf5ff !important;
}

.focus-home-page.theme-mystic .title-line,
.focus-home-page.theme-mystic .hero-subtitle,
.focus-home-page.theme-mystic .category-description,
.focus-home-page.theme-mystic .stat-label,
.focus-home-page.theme-mystic .tool-count {
    color: #f0abfc !important;
}

.focus-home-page.theme-mystic .stat-number {
    color: #e879f9 !important;
}

/* Dark theme overrides - Tron */
.focus-home-page.theme-tron {
    background: linear-gradient(135deg, #0a0a0a 0%, #171717 50%, #0a0a0a 100%) !important;
}

.focus-home-page.theme-tron .hero-title,
.focus-home-page.theme-tron .section-title,
.focus-home-page.theme-tron .category-title {
    color: #f5f5f5 !important;
}

.focus-home-page.theme-tron .title-line {
    color: #00ffff !important;
}

.focus-home-page.theme-tron .hero-subtitle,
.focus-home-page.theme-tron .category-description,
.focus-home-page.theme-tron .stat-label,
.focus-home-page.theme-tron .tool-count {
    color: rgba(0, 255, 255, 0.7) !important;
}

.focus-home-page.theme-tron .stat-number {
    color: #00ffff !important;
}

/* Hide theme ambient elements on Focus page (it has its own orbs) */
/* CL-V-1 (2026-05-10): `.sun-flare` removed from this list — element retired. */
.focus-home-page ~ .star,
.focus-home-page ~ .particle,
.focus-home-page ~ .snowflake,
.focus-home-page ~ .cloud,
.focus-home-page ~ .rune,
.focus-home-page ~ .dolphin-scene,
.focus-home-page ~ .butterfly,
.focus-home-page ~ .flying-bird,
.focus-home-page .shooting-star,
.focus-home-page .shooting-star-2 {
    display: none !important;
}

/* ============================================
   💼 EXECUTIVE THEME - Professional Overrides
   Replaces all purple/playful accents with
   slate/charcoal for corporate landing page
   ============================================ */

/* Gradient text - solid dark charcoal instead of colorful gradient */
.theme-executive .gradient-text {
    background: #1e293b !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: none !important;
}

/* Hero title - strong dark text */
.theme-executive .hero-title {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Subtitle */
.theme-executive .hero-subtitle {
    color: #475569 !important;
    text-shadow: none !important;
}

/* Hint chips - slate pills, no purple */
.theme-executive .hint-chip {
    background: rgba(51, 65, 85, 0.08) !important;
    color: #334155 !important;
    border-color: rgba(51, 65, 85, 0.15) !important;
}

.theme-executive .hint-chip:hover {
    background: rgba(51, 65, 85, 0.15) !important;
    color: #1e293b !important;
}

.theme-executive .hint-chip.browse-link {
    border-color: rgba(51, 65, 85, 0.25) !important;
}

/* Hint label */
.theme-executive .search-hints .hint {
    color: #64748b !important;
}

/* Get Started Free button - vibrant emerald green for high contrast */
.theme-executive .get-started-btn {
    background: #059669 !important;
    box-shadow: 0 2px 12px rgba(5, 150, 105, 0.3) !important;
}

.theme-executive .get-started-btn:hover {
    background: #047857 !important;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4) !important;
}

/* Sign In button - professional dark border */
.theme-executive .sign-in-btn {
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.theme-executive .sign-in-btn:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.4) !important;
    color: #0f172a !important;
}

/* Footer links */
.theme-executive .public-footer {
    color: #94a3b8 !important;
}

.theme-executive .public-footer .footer-links a {
    color: #64748b !important;
}

.theme-executive .public-footer .footer-links a:hover {
    color: #334155 !important;
    background: rgba(51, 65, 85, 0.06) !important;
}

/* Stat numbers - solid charcoal instead of purple gradient */
.theme-executive .stat-number {
    background: #1e293b !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Stats bar - white glass */
.theme-executive .stats-bar {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(51, 65, 85, 0.1) !imp