@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
:root { --cinematic-orange: #f97316; --cinematic-blue: #0ea5e9; --deep-space: #050b15; }

html { -ms-overflow-style: none; scrollbar-width: none; overflow-x: clip !important; }
html::-webkit-scrollbar { display: none; }

body { font-family: 'Inter', sans-serif; background-color: var(--deep-space); color: #f1f5f9; margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip !important; }

#page-content { 
    opacity: 0; 
    animation: pageIn 0.4s ease-out forwards; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    /* ZABEZPIECZENIE LUKI: Tło wsunięte pod nawigację z marginesem i zrekompensowane paddingiem */
    margin-top: -25px; 
    padding-top: 25px; 
}
.page-leave #page-content { animation: pageOut 0.4s ease-in forwards !important; }

a, button { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; }
a:hover, button:hover { transform: scale(1.05); }
a:active, button:active { transform: scale(0.95) !important; }

.nav-link-btn { font-size: 13.8px; padding: 0.6rem 1rem; border-radius: 4px; border: none; background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 75%); letter-spacing: 0.05em; transition: all 0.3s ease; }
.nav-link-btn:hover { background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, transparent 80%); }
.nav-link-active { color: var(--cinematic-orange); background: radial-gradient(ellipse at center, rgba(249, 115, 22, 0.15) 0%, transparent 80%); }
.nav-link-active:hover { background: radial-gradient(ellipse at center, rgba(249, 115, 22, 0.25) 0%, transparent 80%); }
.nav-link-cta { color: #38bdf8; background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.15) 0%, transparent 80%); }
.nav-link-cta:hover { color: #ffffff; background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.3) 0%, transparent 80%); }

#mobile-menu { transition: transform 0.3s ease-in-out; }
.menu-open { transform: translateX(0%); }
.menu-closed { transform: translateX(100%); }

@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }

/* WÓZEK KOTA CHODZĄCEGO */
.cat-mover { position: absolute; bottom: calc(100% - 5px); left: 0; width: 250px; height: 200px; z-index: 100; will-change: left, transform; }
.cat-wrapper { position: relative; width: 100%; height: 100%; cursor: pointer; overflow: hidden; transform-origin: bottom center; backface-visibility: hidden; transform-style: preserve-3d; transition: filter 0.3s ease; }
.cat-wrapper:hover { filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.6)) brightness(1.2); }
.cat-wrapper::after { content: ''; position: absolute; top: 0; left: 0; height: 200px; background-repeat: no-repeat; will-change: transform; width: 3500px; background-image: url('./img/cat-spritesheet.png'); background-size: 3500px 200px; animation: walkFrames 1.28s steps(14) infinite; }
.cat-wrapper.turning::after { width: 6500px; background-image: url('./img/cat-spritesheet2.png'); background-size: 6500px 200px; animation: turnFrames 2.4s steps(25) forwards; }

@keyframes walkFrames { 0% { transform: translateX(0); } 100% { transform: translateX(-3500px); } }
@keyframes turnFrames { 0% { transform: translateX(0); animation-timing-function: steps(10); } 48% { transform: translateX(-2500px); animation-timing-function: steps(15); } 100% { transform: translateX(-6250px); } }
@keyframes growCat { 0%, 48% { scale: 1; opacity: 1; filter: blur(0); } 58.4%, 68.8% { scale: 1.2; opacity: 1; filter: blur(0); } 79.2%, 86.13% { scale: 1.4; opacity: 1; filter: blur(0); } 93.06% { scale: 1.6; opacity: 1; filter: blur(0); } 97% { scale: 1.7; opacity: 0.5; filter: blur(2px); } 100% { scale: 1.8; opacity: 0; filter: blur(4px); } }

/* DUŻEGO KOTA ANIMACJE */
.state-climb { background-image: url('./img/cat-spritesheet-climb.png'); background-size: 6125px 196px; animation: play-climb 1.4s steps(24) forwards; }
@keyframes play-climb { 0% { background-position: 0 0; } 100% { background-position: -5880px 0; } }
/* ZMIANA: Czas trwania idle wydłużony o 25% (z 1.75s na 2.2s) */
.state-idle { background-image: url('./img/cat-spritesheet-idle.png'); background-size: 5880px 196px; animation: play-idle 2.2s steps(23) infinite; }
@keyframes play-idle { 0% { background-position: 0 0; } 100% { background-position: -5635px 0; } }
/* ZMIANA: Czas trwania blink wydłużony o 25% (z 1.4s na 1.75s) */
.state-blink { background-image: url('./img/cat-spritesheet-blink.png'); background-size: 5880px 196px; animation: play-blink 1.75s steps(23) forwards; }
@keyframes play-blink { 0% { background-position: 0 0; } 100% { background-position: -5635px 0; } }
.state-ld-start { background-image: url('./img/cat-spritesheet-ld.png'); background-size: 6860px 196px; animation: play-ld-start 1.06s steps(14) forwards; }
@keyframes play-ld-start { 0% { background-position: 0 0; } 100% { background-position: -3430px 0; } }
.state-ld-loop { background-image: url('./img/cat-spritesheet-ld.png'); background-size: 6860px 196px; animation: play-ld-loop 1.06s steps(13) infinite; }
@keyframes play-ld-loop { 0% { background-position: -3430px 0; } 100% { background-position: -6615px 0; } }
.state-lu { background-image: url('./img/cat-spritesheet-lu.png'); background-size: 4165px 196px; animation: play-lu 1s steps(16) forwards; }
@keyframes play-lu { 0% { background-position: 0 0; } 100% { background-position: -3920px 0; } }

.timeline-line { position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.1); }
.timeline-dot { position: absolute; left: -2.35rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--cinematic-orange); border: 4px solid var(--deep-space); }

/* KOTKI W FORMULARZU KONTAKTOWYM */
.cat-anim { transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

.cat-idle-hidden { opacity: 0; transform: translate(-50%, 20px) scale(0.9); }
.cat-idle-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.cat-name-state { opacity: 0; transform: translateY(20px) rotate(0deg); }
.cat-name-visible { opacity: 1; transform: translateY(-100px) rotate(-15deg); }
.cat-email-state { opacity: 0; transform: translateY(20px) rotate(0deg); }
.cat-email-visible { opacity: 1; transform: translateY(-125px) rotate(15deg); }
.cat-message-state { opacity: 0; transform: translate(-20px, -50%) rotate(0deg); }
.cat-message-visible { opacity: 1; transform: translate(145px, -50%) rotate(45deg); }

/* --- GWARANTOWANY ROZMIAR I WARSTWA KOTA (1x) --- */
#cat-form-idle {
    width: 156px !important;
    height: 156px !important;
    min-width: 156px !important;
    max-width: none !important;
    z-index: 30 !important; /* Kot ląduje NA literach */
}
#cat-name { width: 156px !important; height: 156px !important; }
#cat-email { width: 171px !important; height: 171px !important; }
#cat-message { width: 218px !important; height: 218px !important; }