.tm-luxury-hero-wrapper { position: relative; height: 220vh; background-color: #0b0d10; margin-top: -1px; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .tm-luxury-hero-sticky { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; } .tm-luxury-hero-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; z-index: 1; pointer-events: none; } .tm-luxury-hero-overlay { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 75% 50%, rgba(0,0,0,0.08) 0%, rgba(10,12,16,0.52) 60%, rgba(10,12,16,0.85) 100%), linear-gradient(90deg, rgba(8,10,14,0.86) 0%, rgba(8,10,14,0.5) 45%, rgba(8,10,14,0.15) 100%), linear-gradient(0deg, rgba(8,10,14,0.95) 0%, rgba(8,10,14,0) 30%); pointer-events: none; } .tm-luxury-hero-content { position: relative; z-index: 3; max-width: 1320px; margin: 0 auto; padding: 0 40px; width: 100%; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; } .tm-luxury-hero-text-block { max-width: 680px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; } .tm-luxury-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #f7a844; margin-bottom: 20px; } .tm-luxury-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #f7a844; box-shadow: 0 0 8px #f7a844; } .tm-luxury-hero-title { font-size: clamp(34px, 4.2vw, 56px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #ffffff; margin-bottom: 18px; text-shadow: 0 2px 16px rgba(0,0,0,0.5); } .tm-luxury-hero-title .accent { background: linear-gradient(135deg, #ffffff 30%, #e0d5c1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tm-luxury-hero-subtitle { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.84); font-weight: 400; margin-bottom: 32px; max-width: 580px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .tm-luxury-cta-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; } .tm-luxury-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%); color: #ffffff !important; padding: 16px 32px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-decoration: none !important; box-shadow: 0 8px 24px rgba(229, 57, 53, 0.35); transition: transform 0.25s, box-shadow 0.25s; cursor: pointer; } .tm-luxury-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(229, 57, 53, 0.5); } .tm-luxury-btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff !important; padding: 16px 28px; border-radius: 999px; font-weight: 500; font-size: 15px; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.25s, border-color 0.25s; cursor: pointer; } .tm-luxury-btn-secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); } .tm-luxury-trust-tags { display: flex; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .tm-luxury-trust-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.72); font-weight: 500; } .tm-luxury-scroll-prompt { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.55); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; transition: opacity 0.3s; } .tm-luxury-scroll-wheel { width: 20px; height: 32px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; position: relative; } .tm-luxury-scroll-wheel::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 6px; background: #ffffff; border-radius: 2px; animation: tmScrollAnim 1.8s infinite; } @keyframes tmScrollAnim { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 12px); opacity: 0; } } .tm-luxury-hero-phase-2 { position: absolute; right: 60px; bottom: 100px; max-width: 400px; background: rgba(14, 17, 22, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 24px 28px; opacity: 0; transform: translateY(24px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 4; box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(247, 168, 68, 0.15); pointer-events: none; } .tm-luxury-hero-phase-2.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .tm-luxury-hero-phase-2 h3 { font-size: 19px; font-weight: 700; color: #ffffff; margin-bottom: 8px; } .tm-luxury-hero-phase-2 p { font-size: 13.5px; color: rgba(255,255,255,0.8); line-height: 1.55; margin-bottom: 14px; } @media (max-width: 768px) { .tm-luxury-hero-wrapper { height: 85vh; } .tm-luxury-hero-sticky { height: 85vh; } .tm-luxury-hero-content { grid-template-columns: 1fr; padding: 0 20px; } .tm-luxury-hero-phase-2 { display: none; } .tm-luxury-scroll-prompt { display: none; } .tm-luxury-trust-tags { flex-wrap: wrap; gap: 14px; } } (function() { var wrapper = document.getElementById('tmHeroWrapper'); var video = document.getElementById('tmHeroVideo'); var textBlock = document.getElementById('tmHeroTextBlock'); var phase2Card = document.getElementById('tmPhase2Card'); var scrollPrompt = document.getElementById('tmScrollPrompt'); if (!wrapper || !video) return; var videoDuration = 5.8; var isMobile = window.innerWidth 0) { var scrolled = -rect.top; var progress = scrolled / scrollDistance; targetProgress = Math.max(0, Math.min(1, progress)); } } window.addEventListener('scroll', updateScrollProgress, { passive: true }); window.addEventListener('resize', function() { isMobile = window.innerWidth 0) { var t = prog * videoDuration; if (Math.abs(video.currentTime - t) > 0.03) { video.currentTime = t; } } if (scrollPrompt) { scrollPrompt.style.opacity = prog > 0.08 ? '0' : '1'; } if (textBlock) { if (prog > 0.35) { var fade = Math.max(0, 1 - (prog - 0.35) * 2.5); textBlock.style.opacity = fade; textBlock.style.transform = 'translateY(' + (- (prog - 0.35) * 80) + 'px)'; } else { textBlock.style.opacity = '1'; textBlock.style.transform = 'translateY(0)'; } } if (phase2Card) { if (prog > 0.45 && prog < 0.98) { phase2Card.classList.add('active'); } else { phase2Card.classList.remove('active'); } } } function rafLoop() { if (!isMobile && !prefersReducedMotion && isVisible) { currentProgress += (targetProgress - currentProgress) * 0.12; applyProgress(currentProgress); } requestAnimationFrame(rafLoop); } if (isMobile || prefersReducedMotion) { video.loop = true; video.play().catch(function() {}); } else { video.pause(); requestAnimationFrame(rafLoop); } })();