/* ========================================= Base / Reset ========================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; background: #000; color: #f5f5f7; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.05em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* NOTE: Do NOT set overflow-x on or — it breaks position: sticky. Use overflow: clip on individual sections if you ever need to hide overflow. */ img { max-width: 100%; display: block; } /* ========================================= PRELOADER ========================================== */ .preloader { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } .preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__inner { width: min(420px, 80vw); text-align: center; } .preloader__label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(245, 245, 247, 0.55); margin-bottom: 18px; } .preloader__bar { position: relative; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; } .preloader__fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #ffffff, #a78bfa, #38bdf8, #ffffff); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; transition: width 0.15s ease-out; } @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .preloader__percent { margin-top: 14px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(245, 245, 247, 0.7); } /* ========================================= SECTION 1: Scroll Sequence ========================================== */ .scroll-sequence { position: relative; width: 100%; height: 200vh; /* scrollable depth */ background: #000; } .scroll-sequence__sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; } .scroll-sequence__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ---------- Overlay "Scroll Down" ---------- */ .scroll-hint { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #f5f5f7; opacity: 1; transition: opacity 0.5s ease; pointer-events: none; user-select: none; z-index: 2; } .scroll-hint.is-hidden { opacity: 0; } .scroll-hint__text { font-size: 14px; font-weight: 500; letter-spacing: -0.03em; text-transform: none; color: rgba(245, 245, 247, 0.85); } .scroll-hint__arrow { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; animation: bob 1.8s ease-in-out infinite; color: rgba(245, 245, 247, 0.85); } .scroll-hint__arrow svg { width: 100%; height: 100%; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ========================================= SECTION 2: CTA ========================================== */ .cta { position: relative; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f7; padding: 120px 24px; } .cta__inner { text-align: center; max-width: 900px; width: 100%; } .cta__heading { font-size: clamp(56px, 10vw, 140px); font-weight: 700; line-height: 1.02; letter-spacing: -0.05em; margin-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25em; } .cta__heading-primary { color: #000; } .cta__heading-gradient { background: linear-gradient( 90deg, #ff6ec4 0%, #7873f5 25%, #4facfe 50%, #43e97b 75%, #ff6ec4 100% ); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradientShift 6s ease-in-out infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .cta__sub { font-size: clamp(16px, 1.6vw, 20px); color: rgba(0, 0, 0, 0.6); margin-bottom: 44px; letter-spacing: -0.02em; font-weight: 400; } .cta__button { display: inline-block; padding: 18px 42px; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: #fff; background: #000; border-radius: 999px; text-decoration: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease, box-shadow 0.35s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .cta__button:hover { transform: scale(1.05); filter: brightness(1.15); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22); } .cta__button:active { transform: scale(0.98); } /* ========================================= Responsive ========================================== */ @media (max-width: 768px) { .scroll-sequence { height: 180vh; } .scroll-hint { bottom: 32px; } .scroll-hint__text { font-size: 13px; } .cta { padding: 80px 20px; } .cta__heading { gap: 0.15em; } .cta__button { padding: 16px 36px; font-size: 16px; } } @media (max-width: 480px) { .scroll-sequence { height: 160vh; } } /* Reduce motion accessibility */ @media (prefers-reduced-motion: reduce) { .scroll-hint__arrow, .cta__heading-gradient, .preloader__fill { animation: none; } }