/* ============================================================
   SIMONET.CZ — Simik Character Styles
   Two modes: sidebar vertical follow + page horizontal walk
   ============================================================ */

/* --------------------------------------------------------
   SIMIK WORLD — container at bottom of sidebar
   -------------------------------------------------------- */
.simik-world {
    position: relative;
    width: 100%;
    height: 60px;
    margin-top: auto;
    overflow: visible;
    pointer-events: none;
}

/* When Simik is in sidebar mode, he's positioned absolutely in the sidebar itself */
.site-sidebar > .simik-container {
    position: absolute;
    left: -5px;
    width: 40px;
    height: 55px;
    pointer-events: auto;
    z-index: 15;
}

/* Sidebar bottom track */
.simik-track {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.2) 10%,
        rgba(0, 212, 255, 0.3) 50%,
        rgba(0, 212, 255, 0.2) 90%,
        transparent 100%
    );
    border-radius: 1px;
}

/* Simik character container */
.simik-container {
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 40px;
    height: 55px;
    pointer-events: auto;
    z-index: 5;
    will-change: transform;
    cursor: pointer;
    overflow: visible;
}

.simik-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.3));
    will-change: transform;
}

/* --------------------------------------------------------
   PAGE-WIDE BOTTOM TRACK — shown when mouse leaves sidebar
   Simik walks here across the full page width
   -------------------------------------------------------- */
.simik-page-track {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    z-index: 9990;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.simik-page-track.is-visible {
    opacity: 1;
}

/* The neon line across the bottom */
.simik-page-track::before {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 12px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.15) 5%,
        rgba(0, 212, 255, 0.25) 30%,
        rgba(0, 212, 255, 0.3) 50%,
        rgba(0, 212, 255, 0.25) 70%,
        rgba(0, 212, 255, 0.15) 95%,
        transparent 100%
    );
    border-radius: 1px;
}

/* Subtle glow under the track */
.simik-page-track::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 8px;
    height: 8px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
}

/* Simik inside page track */
.simik-page-track .simik-container {
    bottom: 14px;
    z-index: 9991;
    pointer-events: auto;
}

/* --------------------------------------------------------
   CSS-only fallback (no GSAP)
   -------------------------------------------------------- */
.simik-no-gsap .simik-svg {
    animation: simik-float-css 2s ease-in-out infinite;
}

@keyframes simik-float-css {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* --------------------------------------------------------
   PORTAL NAV STYLES
   -------------------------------------------------------- */
.nav-portal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    color: var(--text-secondary, #8888aa);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.nav-portal:hover {
    background: var(--bg-surface, #1a1a2e);
    color: var(--text-primary, #e8e8f0);
}

.nav-portal.is-active {
    border-left-color: var(--neon-blue, #00d4ff);
    color: var(--neon-blue, #00d4ff);
    background: var(--bg-surface, #1a1a2e);
}

.nav-portal-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.nav-portal:hover .nav-portal-icon,
.nav-portal.is-active .nav-portal-icon {
    opacity: 1;
}

.nav-portal-icon svg {
    width: 20px;
    height: 20px;
}

.nav-portal-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-portal-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

.nav-portal-hint {
    font-size: 0.7rem;
    opacity: 0.5;
    line-height: 1.2;
}

.nav-portal-enter {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.nav-portal:hover .nav-portal-enter,
.nav-portal.is-active .nav-portal-enter {
    opacity: 0.5;
}

.nav-portal-enter svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------- */
@media (max-width: 1024px) {
    .simik-world,
    .simik-page-track {
        display: none;
    }
    .nav-portal-hint {
        display: none;
    }
}

@media (max-width: 768px) {
    .simik-world {
        display: block;
        height: 60px;
    }
    .simik-page-track {
        display: none;
    }
    .nav-portal-hint {
        display: block;
    }
}

/* --------------------------------------------------------
   UFO — bottom right corner
   -------------------------------------------------------- */
.ufo-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 100px;
    height: 75px;
    padding: 10px;
    z-index: 9999;
    pointer-events: auto;
    cursor: grab;
    animation: ufo-hover 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
}

.ufo-svg {
    width: 100%;
    height: 100%;
    display: block;
}

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

/* When UFO has landed at custom position, disable CSS animation (GSAP controls transform) */
.ufo-container.ufo-landed {
    animation: none;
}

/* Thruster effect during takeoff */
.ufo-container.ufo-thrusting {
    filter: drop-shadow(0 8px 20px rgba(0, 255, 136, 0.6))
            drop-shadow(0 0 12px rgba(0, 212, 255, 0.5));
    animation: none;
}

.ufo-container.ufo-thrusting .ufo-svg polygon {
    opacity: 0.5;
    animation: ufo-beam-pulse 0.2s ease-in-out infinite alternate;
}

@keyframes ufo-beam-pulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

@media (max-width: 1024px) {
    .ufo-container {
        width: 60px;
        height: 40px;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 768px) {
    .ufo-container {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simik-svg, .simik-container, .simik-page-track, .ufo-container {
        transition: none !important;
        animation: none !important;
    }
}