[data-scroll-animation] { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; } [data-scroll-animation].is-visible { opacity: 1; } [data-scroll-animation="fade-up"] { transform: translateY(40px); } [data-scroll-animation="fade-up"].is-visible { transform: translateY(0); } [data-scroll-animation="fade-slide"]:nth-child(odd) { transform: translateX(-40px); } [data-scroll-animation="fade-slide"]:nth-child(even) { transform: translateX(40px); } [data-scroll-animation="fade-slide"].is-visible { transform: translateX(0); } [data-scroll-animation="scale-in"] { transform: scale(0.8); } [data-scroll-animation="scale-in"].is-visible { transform: scale(1); } [data-scroll-animation="slide-right"] { transform: translateX(-30px); } [data-scroll-animation="slide-right"].is-visible { transform: translateX(0); } [data-scroll-animation="zoom-in"] { transform: scale(0.5); opacity: 0; } [data-scroll-animation="zoom-in"].is-visible { transform: scale(1); opacity: 1; } [data-scroll-animation="pop-in"] { transform: scale(0); opacity: 0; } [data-scroll-animation="pop-in"].is-visible { transform: scale(1); opacity: 1; transition: all 0.8s cubic-bezier(0.34, 2.36, 0.94, 1); } .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--app-color-blue) 0%, var(--app-color-pink) 50%, var(--app-color-yellow) 100%); z-index: 9999; transition: width 0.1s ease-out; box-shadow: 0 0 10px rgba(var(--app-color-blue-rgb), 0.5); } .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--app-color-blue); color: var(--app-color-white); border: none; font-size: 24px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(100px); transition: all 0.3s ease; z-index: 1000; box-shadow: 0 4px 12px rgba(var(--app-color-blue-rgb), 0.3); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--app-color-yellow); color: var(--app-color-yellow-contrast); transform: translateY(-4px); box-shadow: 0 6px 20px rgba(var(--app-color-yellow-rgb), 0.4); } .back-to-top:active { transform: translateY(-2px) scale(0.95); } img[data-src] { opacity: 0; transition: opacity 1s ease; } img.lazy-loaded { opacity: 1; } .dep-card:hover { box-shadow: 0 10px 40px rgba(var(--app-color-blue-rgb), 0.15), 0 0 20px rgba(var(--app-color-yellow-rgb), 0.1); } .find-card-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .find-card:hover .find-card-icon { animation: bounce 0.6s ease; } @keyframes bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(0) scale(1.2); } } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--app-color-yellow-rgb), 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(var(--app-color-yellow-rgb), 0); } } .skeleton { background: linear-gradient( 90deg, rgba(var(--app-color-blue-rgb), 0.1) 25%, rgba(var(--app-color-blue-rgb), 0.2) 50%, rgba(var(--app-color-blue-rgb), 0.1) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-typing] { border-right: 2px solid var(--app-color-blue); animation: blink 0.7s step-end infinite; } @keyframes blink { 0%, 100% { border-color: var(--app-color-blue); } 50% { border-color: transparent; } } @keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } * { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reading-progress, .back-to-top { display: none !important; } [data-scroll-animation] { opacity: 1 !important; transform: none !important; } } @media (max-width: 767px) { [data-scroll-animation] { transition-duration: 0.4s; } .custom-cursor, .reading-progress { display: none; } .welcome-card:hover, .find-card:hover { transform: none; } } [data-scroll-animation], header, .back-to-top { will-change: transform, opacity; } [data-scroll-animation].has-animated { will-change: auto; } .loading-indicator { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: 4px solid rgba(var(--app-color-blue-rgb), 0.1); border-top-color: var(--app-color-blue); border-radius: 50%; animation: spin 1s linear infinite; z-index: 10000; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } *:focus-visible { outline: 3px solid var(--app-color-blue); outline-offset: 4px; border-radius: 4px; animation: focus-pulse 1s ease-in-out; } @keyframes focus-pulse { 0%, 100% { outline-offset: 4px; } 50% { outline-offset: 8px; } } [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--app-color-black); color: var(--app-color-white); padding: 8px 12px; border-radius: 6px; font-size: 14px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; z-index: 1000; } [data-tooltip]:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } [data-counter] { font-variant-numeric: tabular-nums; transition: all 0.3s ease; }