@import "https://unpkg.com/normalize.css" layer(normalize); @font-face { font-family: "Geist Sans"; src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype"); } @layer foundation { *, *:after, *:before { box-sizing: border-box; } :root { --theme: hsl(30 90% 70%); accent-color: var(--theme); } html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; } body { min-height: 100vh; font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; font-weight: 80; position: relative; overflow: hidden; height: 100vh; } /* Skip intro mode - show final state immediately */ body.skip-intro * { animation-duration: 0s !important; animation-delay: 0s !important; } body.skip-intro { overflow-y: auto !important; height: auto !important; } body.scroll-enabled { overflow-y: auto; height: auto; } .bear { position: fixed; bottom: 2rem; right: 2rem; width: 44px; color: hsl(0 0% 10%); filter: grayscale(1); opacity: 0.75; } body::before { display: none; } .controls { position: fixed; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; color: hsl(0 0% 50%); display: grid; grid-template-columns: auto 1fr; } } @layer trickery { :root { --elastic-out: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 ); } /* Implementation for following tab */ ul:is(:hover, :focus-within) { --follow: 1; } :root:has(#follow:checked) ul::after { content: ""; background: hsl(0 0% 95%); border-radius: 0.875rem; position: fixed; opacity: var(--follow, 0); top: calc((var(--at) * 1px) + (var(--item-block) * 1rem)); left: calc((var(--al) * 1px) + (var(--item-inline) * 1rem)); height: calc((var(--ah) * 1px) - (var(--item-block) * 2rem)); width: calc((var(--aw) * 1px) - (var(--item-inline) * 2rem)); z-index: -1; pointer-events: none; translate: calc(clamp(-1, var(--list-x), 1) * var(--padding-x, 1rem)) calc(clamp(-1, var(--list-y), 1) * var(--padding-y, 1rem)); /* transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;*/ transition: top 0.25s, left 0.25s, width 0.25s, height 0.25s, opacity 0.25s, translate var(--speed, 0.25s) var(--ease, ease-out); } :root:has(#follow:checked) a { background-color: transparent; } ul:has(li:hover a) { --ease: ease; --speed: 0.1s; } ul:has(li a:is(:hover, :focus-within)) { --speed: 0s; } /* End follow implementation */ } /* Delayed reveal: hide most UI until `.is-ready` class is added to (exclude the animated car so it can run immediately) */ html:not(.is-ready) .container, html:not(.is-ready) .controls { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; } html.is-ready .container, html.is-ready .controls { opacity: 1; transform: none; pointer-events: auto; } /* Step 1: Car1 drives in and stops (2s), then disappears at 3s */ #car { position: absolute; left: 100%; bottom: calc(20vh - 17.5rem); width: 1000px; max-width: 90vw; z-index: 2; pointer-events: none; will-change: left, transform, opacity; animation: drive-in 2s ease-in-out forwards, fade-car 0.01s ease-in-out 2.8s forwards; } @keyframes drive-in { from { left: 100%; } to { left: 12%; } } @keyframes fade-car { from { opacity: 1; } to { opacity: 0; } } /* Step 2: Car2 appears in an eyeblink at 3s */ #car2 { position: absolute; left: 12%; bottom: calc(20vh - 17.5rem); width: 1000px; max-width: 90vw; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: normal; animation: appear-car2 0s ease-in-out 2.8s forwards; } @keyframes appear-car2 { from { opacity: 0; } to { opacity: 0.8; } } /* Person appears at 3s (same time as car1 disappears) */ #person1 { position: absolute; left: 15%; bottom: 8vh; width: 400px; max-width: 30vw; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: normal; animation: appear-person 0.1s ease-in-out 2.8s forwards; } @keyframes appear-person { from { opacity: 0; } to { opacity: 0.8; } } /* Background road image */ #bg-road { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; opacity: 1; animation: bg-fade-only 3s ease-in-out 0s forwards; } @keyframes bg-fade-only { from { opacity: 1; } to { opacity: 0.2; } } /* Main viewport container */ .main-viewport { position: relative; width: 100%; min-height: 100vh; } /* Blend Container - wraps all animated elements for unified blend */ #blend-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; animation: mishmash-blend 0.67s ease-in-out 4.5s forwards; } @keyframes mishmash-blend { from { opacity: 1; filter: blur(0px) contrast(1) brightness(1); transform: scale(1); } to { opacity: 0.6; filter: blur(40px) contrast(1.5) brightness(1.3) saturate(2); transform: scale(1.1); } } /* Right sidebar */ .sidebar-right { position: fixed; top: 0; right: 25rem; width: 3pt; height: 100vh; background: transparent; border-right: 3pt solid gold; z-index: 10001; pointer-events: none; } /* Symbol centered on sidebar */ #symble { position: fixed; top: -170px; right: calc(7.5rem - 210px); width: 500px; z-index: 99999; pointer-events: none; opacity: 0; animation: appear-symble 0.5s ease-in-out 2.8s forwards; } @keyframes appear-symble { from { opacity: 0; } to { opacity: 1; } } /* Right navigation - About and Login */ .right-nav-about { position: fixed; top: 50%; right: 12.5rem; transform: translateY(-50%); font-family: 'Assistant', 'Heebo', Arial, sans-serif; font-size: 2rem; font-weight: 400; color: violet; z-index: 99999; cursor: pointer; transition: color 0.3s ease; opacity: 0; animation: appear-right-nav 0.5s ease-in-out 2.8s forwards; text-decoration: none; } .right-nav-about:hover { color: gold; } .right-nav-login { position: fixed; bottom: 7rem; right: 12.5rem; font-family: 'Assistant', 'Heebo', Arial, sans-serif; font-size: 40px; font-weight: 400; color: violet; z-index: 99999; cursor: pointer; transition: color 0.3s ease; opacity: 0; animation: appear-right-nav 0.5s ease-in-out 2.8s forwards; text-decoration: none; } .right-nav-login:hover { color: gold; } .right-nav-contact { position: fixed; top: calc(50% + 5.5rem); right: 12.5rem; transform: translateY(-50%); font-family: 'Assistant', 'Heebo', Arial, sans-serif; font-size: 30px; font-weight: 400; color: violet; z-index: 99999; cursor: pointer; transition: color 0.3s ease; opacity: 0; animation: appear-right-nav 0.5s ease-in-out 2.8s forwards; text-decoration: none; } .right-nav-contact:hover { color: gold; } .right-nav-chess { position: fixed; top: calc(50% + 9.5rem); right: 12.5rem; transform: translateY(-50%); font-family: 'Assistant', 'Heebo', Arial, sans-serif; font-size: 28px; font-weight: 400; color: violet; z-index: 99999; cursor: pointer; transition: color 0.3s ease; opacity: 0; animation: appear-right-nav 0.5s ease-in-out 2.8s forwards; text-decoration: none; } .right-nav-chess:hover { color: gold; } @keyframes appear-right-nav { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Hebrew text in gold with blend */ .hebrew-text { position: absolute; top: calc(50% - 3rem); left: 2rem; transform: translateY(-50%); font-family: 'Rubik', Arial, sans-serif; font-size: 4rem; font-weight: 700; z-index: 1000; pointer-events: none; letter-spacing: 0.5rem; direction: rtl; } .hebrew-text span { display: inline-block; opacity: 0; animation: appear-letter 0.3s ease-in-out forwards; } @keyframes appear-letter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Second Hebrew text - thin and elegant */ .hebrew-text2 { position: absolute; top: calc(50% + 14rem + 29px); left: 12rem; transform: translateY(-50%); font-family: 'Heebo', Arial, sans-serif; font-size: 1.5rem; font-weight: 300; color: purple; z-index: 10003; pointer-events: none; letter-spacing: 0.1rem; direction: rtl; max-width: 60rem; opacity: 0; animation: appear-text2 0.5s ease-in-out 9.5s forwards; text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 1), 0 0 60px rgba(200, 200, 255, 0.9), 0 0 80px rgba(200, 200, 255, 0.8), 0 0 100px rgba(200, 200, 255, 0.6) !important; } @keyframes appear-text2 { from { opacity: 0; } to { opacity: 1; } } /* Partnership link with tooltip */ .partnership-link { color: blue; font-weight: 500; position: relative; cursor: help; pointer-events: auto; text-shadow: none !important; } .partnership-tooltip { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 139, 0.95); color: white; padding: 0.8rem 1.2rem; border-radius: 8px; font-size: 1.2rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); z-index: 10005; } .partnership-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: rgba(0, 0, 139, 0.95); } .partnership-link:hover .partnership-tooltip { opacity: 1; transform: translateX(-50%) translateY(-5px); } /* Bottom Sections */ .bottom-sections { position: relative; margin-top: 0; width: 100%; min-height: 200vh; display: flex; flex-direction: column; gap: 3rem; padding: 3rem; opacity: 0; background: transparent; animation: appear-sections 1s ease-in-out 11s forwards; filter: blur(0px); z-index: 10; } .info-section { width: 100%; min-height: 60vh; padding: 3rem; background: rgba(255, 255, 255, 0.6); border-radius: 15px; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; position: relative; z-index: 10; } .info-section:hover { background: rgba(255, 255, 255, 0.8); } .info-section h2 { font-family: 'Rubik', Arial, sans-serif; font-size: 2.5rem; margin-bottom: 1.5rem; color: #333; } .info-section p { font-family: 'Heebo', Arial, sans-serif; font-size: 1.2rem; color: #666; line-height: 1.8; } @keyframes appear-sections { from { opacity: 0; } to { opacity: 1; } } /* Footer */ .footer { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 1) 100%); padding: 2rem 3rem; z-index: 10004; opacity: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); animation: appear-footer 0.5s ease-in-out 10.5s forwards; } .footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; font-family: 'Heebo', Arial, sans-serif; direction: rtl; } .footer-contact { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; font-weight: 300; letter-spacing: 0.3px; transition: color 0.3s ease; } .footer-contact:hover { color: rgba(100, 149, 237, 1); } .footer-company { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; } @keyframes appear-footer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Download Stats Display */ .download-stats { display: flex; justify-content: space-around; gap: 2rem; padding: 2rem; } .stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-number { font-family: 'Assistant', 'Heebo', Arial, sans-serif; font-size: 3.5rem; font-weight: 600; color: violet; text-shadow: 0 0 10px rgba(238, 130, 238, 0.5); } .stat-label { font-family: 'Heebo', Arial, sans-serif; font-size: 1.2rem; color: #666; margin-top: 0.5rem; }