* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: #000; color: #fff; overflow-x: hidden; position: relative; min-height: 100vh; } .cosmo-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 255, 204, 0.15), rgba(255, 0, 122, 0.15), #000 80%); z-index: -2; animation: cosmoShift 25s infinite ease-in-out; } @keyframes cosmoShift { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; } 50% { transform: scale(1.2) rotate(10deg); opacity: 1; } } #cosmo-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mix-blend-mode: screen; } .container { max-width: 1800px; margin: 0 auto; padding: 4rem; position: relative; z-index: 1; } header { text-align: center; padding: 8rem 0; } .cosmo-title { font-size: 9rem; font-weight: 900; text-transform: uppercase; background: linear-gradient(135deg, #00ffcc, #ff007a, #fff, #00ffcc); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 50px rgba(0, 255, 204, 0.9)); animation: cosmoGlow 5s infinite, cosmoFlow 12s infinite; } @keyframes cosmoGlow { 0%, 100% { transform: translateZ(0) scale(1); } 50% { transform: translateZ(200px) scale(1.1); } } @keyframes cosmoFlow { 0% { background-position: 0%; } 100% { background-position: 200%; } } .subtitle { font-size: 2.5rem; opacity: 0.9; margin-top: 2rem; background: linear-gradient(90deg, #00ffcc, #ff007a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 25px rgba(255, 255, 255, 0.8); animation: fadeIn 4s ease-in-out; } .header-cream { width: 30%; /* Увеличено */ max-width: 400px; /* Увеличено */ margin-top: 3rem; filter: drop-shadow(0 0 50px rgba(0, 255, 204, 1)) brightness(1.2); /* Улучшено освещение */ animation: floatHeader 8s infinite ease-in-out; } @keyframes floatHeader { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } /* Увеличено смещение */ } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 0.9; transform: translateY(0); } } .hero { display: flex; align-items: center; justify-content: space-between; padding: 5rem 0; flex-wrap: wrap; gap: 6rem; } .cosmo-product { width: 50%; height: 50rem; /* Увеличено */ position: relative; transform-style: preserve-3d; transition: transform 0.8s ease; } .holo-layer { position: absolute; width: 100%; height: 100%; } .layer-1 { background: url('cream.png') no-repeat center/contain; filter: drop-shadow(0 0 100px rgba(0, 255, 204, 1)) brightness(1.6); /* Улучшено освещение */ animation: holoFloat 12s infinite ease-in-out; } .layer-2 { background: radial-gradient(circle, rgba(0, 255, 204, 0.6), transparent 70%); filter: blur(25px); animation: holoPulse 6s infinite ease-in-out; } .layer-3 { background: radial-gradient(circle, rgba(255, 0, 122, 0.4), transparent 70%); filter: blur(15px); animation: holoPulse 8s infinite ease-in-out reverse; } @keyframes holoFloat { 0%, 100% { transform: translateY(0) rotateZ(5deg) translateZ(0); } 50% { transform: translateY(-70px) rotateZ(-5deg) translateZ(200px); } /* Увеличено смещение */ } @keyframes holoPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.2); } /* Увеличено масштабирование */ } .hero-text { width: 45%; } .hero-text h2 { font-size: 4.5rem; margin-bottom: 3rem; background: linear-gradient(90deg, #00ffcc, #ff007a, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(0, 255, 204, 1); animation: textGlow 4s infinite; } @keyframes textGlow { 0%, 100% { text-shadow: 0 0 30px rgba(0, 255, 204, 1); } 50% { text-shadow: 0 0 40px rgba(255, 0, 122, 1); } } .cosmo-button { padding: 2rem 6rem; font-size: 2.2rem; border: none; background: linear-gradient(45deg, #00ffcc, #ff007a, #fff, #00ffcc); background-size: 300%; color: #000; border-radius: 200px; cursor: pointer; transition: transform 0.6s, filter 0.6s, background-position 0.6s; box-shadow: 0 0 50px rgba(0, 255, 204, 1); animation: cosmoButton 5s infinite; } .cosmo-button:hover { transform: scale(1.3) translateZ(70px); filter: brightness(1.6); background-position: 100%; } @keyframes cosmoButton { 0%, 100% { box-shadow: 0 0 50px rgba(0, 255, 204, 1); } 50% { box-shadow: 0 0 70px rgba(255, 0, 122, 1); } } .features { display: flex; justify-content: space-around; padding: 8rem 0; flex-wrap: wrap; gap: 5rem; } .cosmo-pod { width: 30%; padding: 3.5rem; background: linear-gradient(135deg, rgba(0, 255, 204, 0.05), rgba(255, 0, 122, 0.05)); border-radius: 35px; text-align: center; transition: all 0.8s ease; backdrop-filter: blur(25px); border: 2px solid rgba(0, 255, 204, 0.5); transform-style: preserve-3d; } .cosmo-pod:hover, .cosmo-pod.active { transform: translateY(-40px) scale(1.25) translateZ(40px); background: linear-gradient(45deg, rgba(0, 255, 204, 0.3), rgba(255, 0, 122, 0.3)); box-shadow: 0 0 60px rgba(0, 255, 204, 1); } .cosmo-pod h3 { font-size: 2.2rem; margin-bottom: 1.5rem; background: linear-gradient(90deg, #00ffcc, #ff007a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Адаптация для мобильных */ @media (max-width: 768px) { .cosmo-title { font-size: 5rem; } .subtitle { font-size: 1.8rem; } .header-cream { width: 50%; max-width: 250px; } .hero { flex-direction: column; text-align: center; padding: 3rem 0; } .cosmo-product { width: 90%; height: 30rem; } .hero-text { width: 100%; } .hero-text h2 { font-size: 3rem; } .cosmo-button { padding: 1.5rem 4rem; font-size: 1.8rem; } .features { padding: 5rem 0; } .cosmo-pod { width: 90%; } } @media (max-width: 480px) { .cosmo-title { font-size: 3.5rem; } .subtitle { font-size: 1.4rem; } .header-cream { width: 60%; max-width: 180px; } .hero-text h2 { font-size: 2rem; } .cosmo-pod h3 { font-size: 1.6rem; } }