@font-face {
    font-family: 'Audiowide';
    src: url('../fonty/Audiowide.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    src: url('../fonty/Inter-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonty/Inter-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonty/Inter-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonty/Inter-800.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url('../fonty/FiraCode-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url('../fonty/FiraCode-500.ttf') format('truetype');
    font-weight: 500;
}

html {
    scroll-behavior: smooth;
}

body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #f8fafc; }
.code-font { font-family: 'Fira Code', monospace; }
.audiowide-font { font-family: 'Audiowide', sans-serif; }
.glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.gradient-text {
    font-family: 'Inter';
    background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.glow {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
}

.magnetic {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 0.45);
}

/* Border Glow Effect */
.border-glow {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: all 0.3s ease;
}

.border-glow::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: transparent;
    background-image: conic-gradient(
        transparent,
        var(--glow-color, #38bdf8),
        transparent 30%
    );
    animation: rotate-glow 6s linear infinite;
}

.border-glow::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 1px;
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(12px);
    border-radius: inherit;
}

@keyframes rotate-glow {
    100% { transform: rotate(360deg); }
}

/* Barvy pro glow */
.service-sky { --glow-color: #38bdf8; }
.service-purple { --glow-color: #a855f7; }
.service-pink { --glow-color: #ec4899; }

.ft-card-sky { --glow-color: #38bdf8; }
.ft-card-purple { --glow-color: #a855f7; }
.ft-card-pink { --glow-color: #ec4899; }

.border-glow:hover::before {
    animation-duration: 3s;
}

/* Typewriter Cursor */
.typewriter-cursor::after {
    content: ' ';
    display: inline-block;
    width: 8px;
    height: 1.2em;
    background-color: #7dd3fc; /* sky-300 */
    margin-left: 4px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Analog Glitch Effect */
.analog-glitch { }

.analog-glitch.glitch-active {
    filter: url(#glitch);
}

.analog-glitch.glitch-pixelate {
    image-rendering: pixelated;
}

.analog-glitch.glitch-rbg-shift h1,
.analog-glitch.glitch-rbg-shift p,
.analog-glitch.glitch-rbg-shift small {
    text-shadow:
        2px 0 #00ff00,
        -2px 0 #ff0000,
        0 2px #0000ff;
}

/* Hamburger animation */
#hamburgerBtn.active .hamburger-line:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

#hamburgerBtn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

#hamburgerBtn.active .hamburger-line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* 3D Icon Spin Animation */
.icon-spin-container {
    perspective: 1000px;
    width: 48px;
    height: 48px;
}

.icon-spin {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: spinAndPause 6s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes spinAndPause {
    0% { transform: rotateY(0deg); }
    33% { transform: rotateY(1080deg); } /* 3 otáčky za první třetinu času */
    100% { transform: rotateY(1080deg); } /* Pauza do konce cyklu */
}

/* Zastavení animace a reset rotace při hoveru */
.group:hover .icon-spin {
    animation: none;
    transform: rotateY(0deg);
}

/* LLM Personalization Enhancements */
.ft-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.ft-card-sky:hover { box-shadow: 0 0 30px rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.4); }
.ft-card-purple:hover { box-shadow: 0 0 30px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.4); }
.ft-card-pink:hover { box-shadow: 0 0 30px rgba(236, 72, 153, 0.2); border-color: rgba(236, 72, 153, 0.4); }

@keyframes ft-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.ft-floating {
    animation: ft-float 6s ease-in-out infinite;
}

/* Segmenty indikátoru složitosti - počáteční stav (skryté) */
.ft-seg {
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
}

/* Bounce vjezd segmentu */
.ft-seg.ft-bounce {
    animation: ft-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Konečný stav po dokončení bounce (zachová viditelnost) */
.ft-seg.ft-seg-done {
    transform: scaleX(1);
    opacity: 1;
}

@keyframes ft-bounce-in {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

/* Pulzující zář aktivních segmentů indikátoru složitosti */
@keyframes ft-seg-pulse-sky {
    0%, 100% { box-shadow: 0 0 4px rgba(56, 189, 248, 0.4); }
    50% { box-shadow: 0 0 14px rgba(56, 189, 248, 0.9); }
}
@keyframes ft-seg-pulse-purple {
    0%, 100% { box-shadow: 0 0 4px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 0 14px rgba(168, 85, 247, 0.9); }
}
@keyframes ft-seg-pulse-pink {
    0%, 100% { box-shadow: 0 0 4px rgba(236, 72, 153, 0.4); }
    50% { box-shadow: 0 0 14px rgba(236, 72, 153, 0.9); }
}

.ft-seg-pulse-sky { animation: ft-seg-pulse-sky 2.4s ease-in-out infinite; }
.ft-seg-pulse-purple { animation: ft-seg-pulse-purple 2.4s ease-in-out infinite; }
.ft-seg-pulse-pink { animation: ft-seg-pulse-pink 2.4s ease-in-out infinite; }

/* Respektování systémového nastavení omezeného pohybu */
@media (prefers-reduced-motion: reduce) {
    .ft-floating,
    .ft-bounce,
    .icon-spin {
        animation: none !important;
    }
}