diff --git a/src/frontend/src/app/presentation/features/landing/landing.component.css b/src/frontend/src/app/presentation/features/landing/landing.component.css index 45801fd..9a6a31a 100644 --- a/src/frontend/src/app/presentation/features/landing/landing.component.css +++ b/src/frontend/src/app/presentation/features/landing/landing.component.css @@ -14,6 +14,12 @@ background-color: #121517; } +.landing-container.transitioning-lock { + overflow: hidden !important; + height: 100vh !important; + max-height: 100vh !important; +} + /* Header Minimalista Flotante */ .zen-header { position: fixed; @@ -542,11 +548,12 @@ position: fixed; inset: 0; z-index: 9999; - background: rgba(8, 10, 14, 0.88); - backdrop-filter: blur(8px); + background: rgba(8, 10, 14, 0.94); + backdrop-filter: blur(10px); pointer-events: none; opacity: 0; - transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1); + overflow: hidden; + transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; align-items: center; @@ -558,17 +565,6 @@ pointer-events: auto; } -.curtain-scanline { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, transparent, #c59b27, #38bdf8, transparent); - box-shadow: 0 0 10px #c59b27; - animation: scanlinePass 0.8s linear infinite; -} - .curtain-logo-wrapper { position: relative; display: flex; @@ -576,29 +572,31 @@ align-items: center; justify-content: center; gap: 14px; - animation: logoWrapperEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; + animation: logoWrapperEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .logo-glow-ring { position: absolute; - top: 10px; - width: 90px; - height: 90px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 120px; + height: 120px; border-radius: 50%; - background: radial-gradient(circle, rgba(197, 155, 39, 0.45) 0%, rgba(56, 189, 248, 0.18) 50%, transparent 70%); - filter: blur(14px); + background: radial-gradient(circle, rgba(197, 155, 39, 0.5) 0%, rgba(56, 189, 248, 0.2) 50%, transparent 70%); + filter: blur(16px); animation: logoPulseGlow 1.2s ease-in-out infinite alternate; pointer-events: none; } .logo-image-container { position: relative; - width: 68px; - height: 68px; - border-radius: 12px; + width: 78px; + height: 78px; + border-radius: 14px; overflow: hidden; - border: 1px solid rgba(197, 155, 39, 0.45); - box-shadow: 0 0 24px rgba(197, 155, 39, 0.3), 0 8px 32px rgba(0, 0, 0, 0.85); + border: 1px solid rgba(197, 155, 39, 0.5); + box-shadow: 0 0 28px rgba(197, 155, 39, 0.35), 0 8px 32px rgba(0, 0, 0, 0.85); background: #000000; display: flex; align-items: center; @@ -610,15 +608,15 @@ height: 100%; object-fit: cover; transform: scale(0.92); - animation: logoBreath 1.3s ease-in-out infinite alternate; + animation: logoBreath 1.2s ease-in-out infinite alternate; } .logo-shimmer-sweep { position: absolute; inset: 0; - background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%); + background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%); transform: translateX(-100%); - animation: logoShimmer 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; + animation: logoShimmer 1.0s cubic-bezier(0.4, 0, 0.2, 1) infinite; pointer-events: none; } @@ -642,12 +640,6 @@ 100% { transform: translateX(100%); } } -@keyframes scanlinePass { - 0% { transform: translateY(0); opacity: 0; } - 50% { opacity: 1; } - 100% { transform: translateY(100vh); opacity: 0; } -} - @media (max-width: 768px) { .zen-header { padding: 0 8px; diff --git a/src/frontend/src/app/presentation/features/landing/landing.component.html b/src/frontend/src/app/presentation/features/landing/landing.component.html index f182bd1..01a447e 100644 --- a/src/frontend/src/app/presentation/features/landing/landing.component.html +++ b/src/frontend/src/app/presentation/features/landing/landing.component.html @@ -1,4 +1,4 @@ -
+