diff --git a/src/components/splash/LogoSplash.vue b/src/components/splash/LogoSplash.vue index a4e19b4..ce394ea 100644 --- a/src/components/splash/LogoSplash.vue +++ b/src/components/splash/LogoSplash.vue @@ -20,40 +20,40 @@ onMounted(() => { return } - // Phase 1: Logo draws in (0–1700ms) + // Phase 1: Logo draws in requestAnimationFrame(() => { isAnimating.value = true }) - // Phase 2: Logo fades out (1800ms) + // Phase 2: Logo fades out setTimeout(() => { logoGone.value = true - }, 1800) + }, 1900) - // Phase 3: Tagline words slam in (2200ms) + // Phase 3: Tagline words blur in setTimeout(() => { showTagline.value = true - }, 2200) + }, 2300) - // Phase 4: PSYOP lands (3200ms) + // Phase 4: PSYOP slams in setTimeout(() => { showPsyop.value = true - }, 3200) + }, 3100) - // Phase 5: Fade out (4600ms) + // Phase 5: Fade everything out setTimeout(() => { isFading.value = true - }, 4600) + }, 4800) setTimeout(() => { emit('complete') - }, 5100) + }, 5400) }) @@ -97,7 +96,7 @@ onMounted(() => { align-items: center; justify-content: center; background: var(--bg-primary); - transition: opacity 500ms ease; + transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } @@ -106,7 +105,7 @@ onMounted(() => { pointer-events: none; } -/* --- Logo --- */ +/* --- Logo phase --- */ .splash-logo { width: min(60vw, 340px); height: auto; @@ -135,14 +134,18 @@ onMounted(() => { to { opacity: 1; } } -/* --- Tagline --- */ -.tagline-block { +/* --- Tagline phase --- */ +.tagline-container { display: flex; flex-direction: column; align-items: center; - gap: 0; padding: 0 3vw; - text-align: center; + animation: containerFadeIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards; +} + +@keyframes containerFadeIn { + from { opacity: 0; } + to { opacity: 1; } } .tagline-line { @@ -155,88 +158,86 @@ onMounted(() => { .word { font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif; - font-size: clamp(1.8rem, 4.2vw, 4.5rem); - font-weight: 400; /* Bebas Neue only has 400 but looks ultra bold */ + font-size: clamp(1.6rem, 4vw, 4.2rem); + font-weight: 400; color: var(--text-primary); text-transform: uppercase; - letter-spacing: 0.04em; + letter-spacing: 0.05em; line-height: 1; opacity: 0; - transform: translateY(50px) scaleY(1.3); - filter: blur(10px); + transform: translateY(30px); + filter: blur(20px); } -.tagline-block.visible .word { - animation: slamIn 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--w) * 120ms) forwards; +.tagline-line.visible .word { + animation: cinematicReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--w) * 150ms) forwards; } -@keyframes slamIn { +@keyframes cinematicReveal { 0% { opacity: 0; - transform: translateY(50px) scaleY(1.3); - filter: blur(10px); + transform: translateY(30px); + filter: blur(20px); } - 50% { + 60% { opacity: 1; - transform: translateY(-3px) scaleY(0.97); filter: blur(0); } - 75% { - transform: translateY(1px) scaleY(1.01); - } 100% { opacity: 1; - transform: translateY(0) scaleY(1); + transform: translateY(0); filter: blur(0); } } -/* PSYOP — italic serif, massive, Bitcoin orange */ -.psyop { - font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; +/* --- PSYOP --- */ +.psyop-word { + font-family: 'Playfair Display', 'Georgia', serif; font-style: italic; font-weight: 900; color: var(--accent); - font-size: clamp(4rem, 13vw, 11rem); + font-size: clamp(5rem, 18vw, 14rem); letter-spacing: 0.06em; - line-height: 0.9; - margin-top: 0.05em; - transform: translateY(80px) scale(1.4); - filter: blur(16px); + line-height: 0.85; + text-transform: uppercase; + margin-top: -0.02em; + opacity: 0; + transform: translateY(60px) scale(1.15); + filter: blur(20px); } -.psyop.landed { - animation: psyopSlam 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards; +.psyop-word.visible { + animation: psyopCinematic 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } -@keyframes psyopSlam { +@keyframes psyopCinematic { 0% { opacity: 0; - transform: translateY(80px) scale(1.4); - filter: blur(16px); + transform: translateY(60px) scale(1.15); + filter: blur(20px); } - 35% { + 30% { opacity: 1; - transform: translateY(-8px) scale(1.02); - filter: blur(0); + filter: blur(2px); } 50% { - transform: translateY(4px) scale(0.99); + transform: translateY(-6px) scale(1.01); + filter: blur(0); } - 65% { - transform: translateY(-2px) scale(1.005); + 70% { + transform: translateY(3px) scale(0.995); } - 80% { - transform: translateY(1px) scale(1.0); + 85% { + transform: translateY(-1px) scale(1.002); } 100% { opacity: 1; - transform: translateY(0) scale(1.0); + transform: translateY(0) scale(1); filter: blur(0); } } -/* Tablet: 2 lines — "EVERYTHING YOU" / "LOVE IS A" */ +/* Tablet: 2 lines */ @media (max-width: 900px) { .tagline-line { flex-wrap: wrap; @@ -245,15 +246,15 @@ onMounted(() => { } .word { - font-size: clamp(2rem, 7vw, 3.5rem); + font-size: clamp(1.8rem, 6vw, 3rem); } - .psyop { - font-size: clamp(3.5rem, 18vw, 7rem); + .psyop-word { + font-size: clamp(4rem, 20vw, 8rem); } } -/* Mobile: 4 lines — each word on its own line */ +/* Mobile: each word stacks */ @media (max-width: 500px) { .tagline-line { flex-direction: column; @@ -261,30 +262,19 @@ onMounted(() => { } .word { - font-size: clamp(2.2rem, 13vw, 3.5rem); + font-size: clamp(2rem, 11vw, 3rem); } - .psyop { - font-size: clamp(3rem, 20vw, 5rem); + .psyop-word { + font-size: clamp(3.5rem, 22vw, 5.5rem); } } @media (prefers-reduced-motion: reduce) { - .logo-path { - clip-path: none; - opacity: 1; - } - - .word, - .psyop { - opacity: 1; - transform: none; - filter: none; - animation: none !important; - } - - .splash-overlay { - transition: none; - } + .logo-path { clip-path: none; opacity: 1; } + .word { opacity: 1; transform: none; filter: none; animation: none !important; } + .psyop-word { opacity: 1; transform: none; filter: none; animation: none !important; } + .tagline-container { animation: none; } + .splash-overlay { transition: none; } }