/* Sdílené vizuální efekty: glassmorphism, entrance animace. */

/* Univerzální glass povrch — použij na header, navigaci, karty, empty state. */
.glass {
    background: var(--hub-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--hub-border);
    box-shadow: var(--hub-shadow-md);
}

/* Fallback pro prohlížeče bez backdrop-filter (starší Firefox apod.). */
@supports not (backdrop-filter: blur(1px)) {
    .glass { background: var(--hub-surface-strong); }
}

/* Entrance animace pro karty po načtení / refiltrování. */
@keyframes card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card {
    opacity: 0;
    animation: card-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--card-delay, 0ms);
}

/* Animovaný gradient title v hero. */
.hub-hero__title-accent {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease-in-out infinite;
}
@keyframes gradient-shift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ===== Easter egg: muchomůrka červená vyrůstá ze slova „Hub" ===== */

.hub-header__title-eg {
    position: relative;
    display: inline-block;
}

.hub-mushroom {
    position: absolute;
    top: calc(100% - 58px);
    left: 50%;
    width: 60px;
    height: 82px;
    margin-left: -30px;
    transform: scaleY(0) translateY(-4px);
    transform-origin: 50% 0%;
    opacity: 0;
    transition:
        transform 0.95s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s ease-out;
    z-index: 2;
}

.hub-mushroom svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}

.hub-header__title-eg:hover .hub-mushroom {
    opacity: 1;
    transform: scaleY(1) translateY(0);
}

/* Klobouk, prstýnek pod ním a lesk vyskočí s mírným poskočením. */
.mushroom__cap,
.mushroom__cap-shine,
.mushroom__ring {
    opacity: 0;
    transform: scale(0.55);
    transform-origin: 40px 60px;
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s,
        opacity 0.4s ease-out 0.38s;
}
.hub-header__title-eg:hover .mushroom__cap,
.hub-header__title-eg:hover .mushroom__cap-shine,
.hub-header__title-eg:hover .mushroom__ring {
    opacity: 1;
    transform: scale(1);
}

/* Bílé puntíky popnou postupně, jako by se proklubávaly. */
.mushroom__spot {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s ease-out;
}
.hub-header__title-eg:hover .mushroom__spot {
    opacity: 1;
    transform: scale(1);
}
.hub-header__title-eg:hover .mushroom__spot:nth-of-type(1) { transition-delay: 0.70s; }
.hub-header__title-eg:hover .mushroom__spot:nth-of-type(2) { transition-delay: 0.78s; }
.hub-header__title-eg:hover .mushroom__spot:nth-of-type(3) { transition-delay: 0.86s; }
.hub-header__title-eg:hover .mushroom__spot:nth-of-type(4) { transition-delay: 0.94s; }
.hub-header__title-eg:hover .mushroom__spot:nth-of-type(5) { transition-delay: 1.02s; }
.hub-header__title-eg:hover .mushroom__spot:nth-of-type(6) { transition-delay: 1.10s; }

/* Lísteček na klobouku jemně houpe ve větru. */
.mushroom__leaf {
    opacity: 0;
    transform-origin: 54px 24px;
    transform: rotate(-18deg) scale(0.35);
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s,
        opacity 0.4s ease-out 0.9s;
}
.hub-header__title-eg:hover .mushroom__leaf {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    animation: leaf-sway 2.8s ease-in-out 1.45s infinite;
}

@keyframes leaf-sway {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(8deg); }
}

/* Respekt k preferencím uživatelů s vypnutými animacemi. */
@media (prefers-reduced-motion: reduce) {
    .hub-mushroom,
    .mushroom__cap, .mushroom__cap-shine, .mushroom__ring,
    .mushroom__spot, .mushroom__leaf {
        transition-duration: 0.01s;
        animation: none;
    }
}