/* --- APPEAR-ANIMATION --- */ /* desktop – стартово състояние */ .appear-anim { opacity: 0; transform: translateY(3em); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } /* когато е във viewport */ .appear-anim.is-visible { opacity: 1; transform: translateY(0); } /* mobile – без анимация */ @media (max-width: 767px) { .appear-anim { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --- POTENTIAL-LINE --- */ .potential-line-wrapper { position: relative; display: flex; justify-content: center; align-items: center; } .line-potential { width: 0.0625em; height: 58em; background: #FCFCFC; /* смени с твоя цвят */ transform: rotateZ(-15deg) scaleY(0); transform-origin: top center; will-change: transform; } /* --- CV Texts --- */ /* --- Голям текст --- */ .cv-wrap { position: relative; height: 6em; /* фиксирана височина за текста, не се мърда нищо */ } /* Голям текст */ .txt-cv-large { opacity: 0.3; transition: opacity 0.4s ease; } .cv-wrap.is-active .txt-cv-large { opacity: 1; } /* Малък текст – fade only */ .txt-cv-small { opacity: 0; transform: translateY(-0.5em); transition: opacity 0.6s ease, transform 0.6s ease; } .cv-wrap.is-active .txt-cv-small { opacity: 1; transform: translateY(0); } /*--- DRAWER ---*/ /* Overlay */ .drawer-overlay { position: fixed; inset: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 11; } .drawer-overlay.active { opacity: 1; pointer-events: auto; } /* Drawer base state */ .drawer, .drawer-full-member { transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 0.5s cubic-bezier(.77, 0, .18, 1), opacity 0.3s ease; } /* Drawer active state */ .drawer.active, .drawer-full-member.active { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Drawer items initial state */ .drawer-item { transform: translateX(50px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; } /* Drawer items animation (both drawers) */ .drawer.active .drawer-item, .drawer-full-member.active .drawer-item { transform: translateX(0); opacity: 1; } /* Staggered appearance */ .drawer.active .drawer-item:nth-child(1), .drawer-full-member.active .drawer-item:nth-child(1) { transition-delay: 0.3s; } .drawer.active .drawer-item:nth-child(2), .drawer-full-member.active .drawer-item:nth-child(2) { transition-delay: 0.35s; } .drawer.active .drawer-item:nth-child(3), .drawer-full-member.active .drawer-item:nth-child(3) { transition-delay: 0.4s; } .drawer.active .drawer-item:nth-child(4), .drawer-full-member.active .drawer-item:nth-child(4) { transition-delay: 0.45s; } /* Closing animation */ .drawer:not(.active) .drawer-item, .drawer-full-member:not(.active) .drawer-item { transform: translateX(50px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; }