/* ------------------------------------------------------------------ * * The loader (js/intro.js). The gate adds .has-intro to * before the first paint; without it none of this shows. * * Layers, bottom up: the poster (the cue addressing the ball) · the aim * canvas · the break video · the pull handle · the hint · skip. * ------------------------------------------------------------------ */ .intro { display: none; } .has-intro { overflow: hidden; } .has-intro .intro { display: block; position: fixed; inset: 0; z-index: 1000; background: #08090a url('../intro/aim-d-poster.webp') center / cover no-repeat; transition: opacity .35s ease; } @media (max-aspect-ratio: 9/10) { .has-intro .intro { background-image: url('../intro/aim-m-poster.webp'); } } .intro__canvas, .intro__break { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .intro__canvas { opacity: 0; } .intro.is-aiming .intro__canvas { opacity: 1; } .intro__break { z-index: 1; opacity: 0; } .intro.is-breaking .intro__break { opacity: 1; } /* From above, the table comes apart. The canvas carries the frame with the holes cut in it, so everything behind it has to go. */ .intro.is-revealing { background: none; } .intro.is-revealing .intro__break { opacity: 0; } .intro.is-revealing .intro__canvas { z-index: 2; opacity: 1; } /* The whole screen is the handle: drag down anywhere to draw the cue back. */ .intro__pull { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; } .intro__pull:focus-visible { outline: 3px solid var(--yellow, #ffcc1a); outline-offset: -10px; } .intro.is-shot .intro__pull { pointer-events: none; } .intro__hint { position: absolute; z-index: 4; inset-inline: 0; bottom: calc(104px + env(safe-area-inset-bottom)); margin: 0; text-align: center; color: var(--chalk, #f5f2ea); font: 700 17px/1.3 var(--body, Heebo, sans-serif); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); pointer-events: none; visibility: hidden; /* GSAP fades it in when the visitor is idle */ } .intro__hint svg { display: block; width: 30px; height: 30px; margin: 0 auto 8px; animation: intro-nudge 1.2s ease-in-out infinite; } .intro__hint small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; opacity: .75; } @media (hover: none) { .intro__hint small { display: none; } } /* no keyboard on a phone */ @keyframes intro-nudge { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } } .intro.is-leaving { opacity: 0; pointer-events: none; } .intro__skip { position: absolute; z-index: 5; inset-block-end: calc(22px + env(safe-area-inset-bottom)); inset-inline-end: 22px; min-height: 44px; padding: 10px 20px; border: 1.5px solid rgba(245, 242, 234, .45); border-radius: 999px; background: rgba(8, 9, 10, .35); backdrop-filter: blur(6px); color: var(--chalk, #f5f2ea); font: 700 15px/1 var(--body, Heebo, sans-serif); cursor: pointer; } .intro__skip:hover { border-color: var(--chalk, #f5f2ea); } .intro__skip:focus-visible { outline: 3px solid var(--yellow, #ffcc1a); outline-offset: 3px; }