/* ============================================
   View Transitions API (section 9.5)
   Plynulé prechody medzi stránkami
   ============================================ */

/* Hlavný hero obrázok/obsah */
.hero-title {
    view-transition-name: hero-title;
}

.hero-subtitle {
    view-transition-name: hero-subtitle;
}

/* Server karty */
.server-card {
    view-transition-name: var(--server-card-id);
}

/* Navigácia */
header {
    view-transition-name: main-nav;
}

/* Footer */
footer {
    view-transition-name: main-footer;
}

/* View Transition animácie */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slide-from-right {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-to-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-30px); opacity: 0; }
}

::view-transition-old(root) {
    animation: 200ms ease-out both fade-out;
}

::view-transition-new(root) {
    animation: 200ms ease-in both fade-in;
}

::view-transition-old(hero-title) {
    animation: 200ms ease-out both slide-to-left;
}

::view-transition-new(hero-title) {
    animation: 200ms ease-in both slide-from-right;
}

/* ============================================
   Container Queries (section 19.11)
   Prenositeľné komponenty
   ============================================ */

.server-card-wrapper {
    container-type: inline-size;
    container-name: server-card;
}

@container server-card (min-width: 400px) {
    .server-card {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
    }
}

@container server-card (max-width: 399px) {
    .server-card {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================
   AI Fact Cards vizuálne zvýraznenie (section 6.5)
   Pre AI crawlery aj vizuálne
   ============================================ */

[data-ai-fact] {
    position: relative;
}

[data-confidence="1.0"] {
    border-left: 2px solid rgba(56, 189, 248, 0.3);
    padding-left: 8px;
}

[data-confidence="0.7"] {
    border-left: 2px solid rgba(251, 191, 36, 0.3);
    padding-left: 8px;
}

/* ============================================
   UGC Sandbox vizuálny indikátor (section 8.1)
   ============================================ */

[data-ai-security="sandbox"] {
    position: relative;
}

/* ============================================
   Screenless Design hints (section 16.2)
   CSS cues pre AI crawlery
   ============================================ */

/* Kľúčové fakty sú vizuálne výrazné */
.stat-pill,
.server-stat {
    font-variant-numeric: tabular-nums;
}

/* Citovateľné odseky */
[data-citation-ready] {
    font-weight: 500;
}

/* ============================================
   Reduced Motion preference
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(hero-title),
    ::view-transition-new(hero-title) {
        animation: none;
    }
}