/* ========================================================================== DEPTH DIGITAL — ENTRANCE ("the dive") Home page only. The logo rises into view, waits for a deliberate Enter action, then the water transition clears into the site's real hero. ========================================================================== */ /* Pre-JS failsafe cover. The gate adds .is-diving before first paint. If entrance.js never arrives, this still lifts and returns the page. */ html.is-diving::before { content: ''; position: fixed; inset: 0; z-index: 400; background: radial-gradient(120% 90% at 50% 118%, rgba(240, 200, 149, .34) 0%, transparent 55%), radial-gradient(90% 60% at 50% -10%, #ffffff 0%, #eafcfb 34%, transparent 70%), linear-gradient(180deg, #f6ffff 0%, #d8f7f6 34%, #9ee9e6 68%, #5fd7dc 100%); animation: entrance-failsafe 2.6s linear forwards; } html.is-diving.entrance-live::before { display: none; } html.is-diving, html.is-diving body { overflow: hidden; overscroll-behavior: none; } @keyframes entrance-failsafe { 0%, 82% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { /* The gate normally declines the entrance under reduced motion. */ html.is-diving::before { display: none; } } /* -------------------------------------------------------------------------- Overlay proper — built by entrance.js -------------------------------------------------------------------------- */ .entrance { position: fixed; inset: 0; z-index: 401; overflow: hidden; cursor: default; outline: none; touch-action: none; } /* The surface seen from above. */ .entrance__sky { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 118%, rgba(240, 200, 149, .34) 0%, transparent 55%), radial-gradient(90% 60% at 50% -10%, #ffffff 0%, #eafcfb 34%, transparent 70%), linear-gradient(180deg, #f6ffff 0%, #d8f7f6 34%, #9ee9e6 68%, #5fd7dc 100%); } .entrance__sheen { position: absolute; inset: -20%; background: radial-gradient(46% 30% at 30% 42%, rgba(255, 255, 255, .5) 0%, transparent 70%); animation: entrance-drift 5.2s cubic-bezier(.2, .65, .3, 1) infinite alternate; } .entrance__sheen--two { background: radial-gradient(40% 26% at 68% 58%, rgba(255, 255, 255, .34) 0%, transparent 70%); animation-duration: 6.4s; animation-direction: alternate-reverse; } @keyframes entrance-drift { from { transform: translate3d(-2.2%, 0, 0); } to { transform: translate3d(2.2%, 1%, 0); } } /* The wordmark emerges gently before the sequence waits. */ .entrance__mark { position: absolute; top: 50%; left: 50%; width: min(56vw, 280px); height: auto; opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.94); filter: blur(6px); animation: entrance-logo-arrive 1.5s .12s cubic-bezier(.2, .65, .3, 1) forwards; } @keyframes entrance-logo-arrive { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.94); filter: blur(6px); } 62% { opacity: .78; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } } .entrance.has-started .entrance__mark { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; } /* The deliberate pause and call to action. */ .entrance__prompt { position: absolute; top: calc(50% + clamp(62px, 10vh, 92px)); left: 50%; z-index: 4; opacity: 0; transform: translate(-50%, 12px); animation: entrance-prompt-arrive .75s 1.05s cubic-bezier(.2, .65, .3, 1) forwards; transition: opacity .45s cubic-bezier(.2, .65, .3, 1), transform .45s cubic-bezier(.2, .65, .3, 1); } @keyframes entrance-prompt-arrive { to { opacity: 1; transform: translate(-50%, 0); } } .entrance.has-started .entrance__prompt { animation: none; opacity: 0; transform: translate(-50%, -8px); pointer-events: none; } .entrance__enter { position: relative; min-width: 132px; padding: 13px 22px 12px; border: 1px solid rgba(4, 59, 70, .3); border-radius: 999px; background: rgba(244, 255, 255, .2); box-shadow: 0 12px 34px rgba(4, 54, 65, .1), inset 0 1px 0 rgba(255, 255, 255, .5); color: #073d49; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .72rem; font-weight: 500; letter-spacing: .22em; line-height: 1; text-indent: .22em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2, .65, .3, 1); } .entrance__enter::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(255, 255, 255, .34); border-radius: inherit; pointer-events: none; } .entrance__enter:hover { transform: translateY(-2px); border-color: rgba(4, 59, 70, .48); background: rgba(247, 255, 255, .38); box-shadow: 0 16px 38px rgba(4, 54, 65, .15), inset 0 1px 0 rgba(255, 255, 255, .68); } .entrance__enter:active { transform: translateY(0) scale(.98); } .entrance__enter:focus-visible, .entrance__skip:focus-visible { outline: 2px solid #073d49; outline-offset: 4px; } /* The impact. */ .entrance__flash { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, #ffffff 0%, rgba(255, 255, 255, .85) 34%, transparent 74%); opacity: 0; } .entrance__ring { position: absolute; top: 50%; left: 50%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border: 2px solid rgba(255, 255, 255, .75); border-radius: 999px; opacity: 0; transform: scale(.16); } .entrance__ring--two { border-color: rgba(165, 255, 244, .55); } .entrance__ring--three { border-color: rgba(255, 255, 255, .4); border-width: 1px; } /* Underwater pane, caustic sweep and bubbles. */ .entrance__deep { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 120%, #020b12 0%, transparent 60%), linear-gradient(180deg, rgba(6, 42, 60, .92) 0%, #052435 34%, #03101a 100%); opacity: 0; } .entrance__sweep { position: absolute; inset: -10% -30%; background: linear-gradient( 100deg, transparent 30%, rgba(165, 255, 244, .12) 44%, rgba(165, 255, 244, .2) 50%, rgba(165, 255, 244, .12) 56%, transparent 70% ); opacity: 0; transform: translate3d(-24%, 0, 0); } .entrance__bubbles { position: absolute; inset: 0; } .entrance__bubbles span { position: absolute; bottom: -9vh; left: var(--bx, 50%); width: var(--bs, 10px); height: var(--bs, 10px); border: 1px solid rgba(165, 255, 244, .38); border-radius: 999px; background: radial-gradient( circle at 32% 30%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 46%, transparent 70% ); opacity: 0; } .entrance.is-under .entrance__bubbles span { animation: entrance-bubble var(--bd, 2s) cubic-bezier(.2, .65, .3, 1) var(--bw, 0s) forwards; } @keyframes entrance-bubble { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.8); } 12% { opacity: .9; } 78% { opacity: .55; } 100% { opacity: 0; transform: translate3d(var(--bxd, 0px), -114vh, 0) scale(1.12); } } /* Skip becomes available only after the user has deliberately entered. */ .entrance__skip { position: absolute; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 4vh, 38px); padding: 10px 18px; border: 1px solid rgba(210, 244, 246, .28); border-radius: 999px; background: rgba(3, 16, 26, .3); color: rgba(225, 245, 247, .72); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .4s cubic-bezier(.2, .65, .3, 1), color .25s ease; pointer-events: none; } .entrance.can-skip .entrance__skip { opacity: 1; pointer-events: auto; } .entrance__skip:hover { color: #f3fbfc; } .entrance__skip:focus-visible { outline-color: #a5fff4; } @media (max-width: 520px) { .entrance__mark { width: min(72vw, 280px); } .entrance__prompt { top: calc(50% + 70px); } .entrance__enter { min-width: 124px; padding: 12px 20px 11px; } }