/* ========================================================================== Pimp-Area — pre-launch cinematic intro + page background Design tokens, site background layer, and the intro scene. No framework. Load this file, then pimp-area-intro.js (defer). ========================================================================== */ :root { /* Core palette — taken from the Pimp-Area huisstijl */ --pa-black: #040604; /* deepest shadow */ --pa-ink: #060b07; /* page base */ --pa-ink-lift: #0a130d; /* lifted centre of the page vignette */ --pa-panel: #0f1a12; /* panel / card fill */ --pa-panel-alt: #16211a; /* panel fill, one step lighter */ --pa-line: #233026; /* hairline borders */ --pa-line-soft: #1a241c; /* dividers inside panels */ --pa-gold: #e9d98d; /* primary accent */ --pa-gold-deep: #b79f52; /* accent border / pressed */ --pa-gold-glow: rgba(233, 217, 141, .38); --pa-bone: #e4eadc; /* primary text */ --pa-sage: #93a494; /* secondary text */ --pa-iron: #41513f; /* metal highlight */ --pa-red: #e8635c; /* destructive / alert only */ --pa-font-display: 'Courier Prime', 'Courier New', monospace; --pa-font-ui: 'Archivo', system-ui, -apple-system, sans-serif; } /* ========================================================================== 1. SITE BACKGROUND — put

as the first child of , or add class="pa-page" to for the gradient only. ========================================================================== */ .pa-page, body.pa-page { margin: 0; background: var(--pa-ink); color: var(--pa-bone); font-family: var(--pa-font-ui); min-height: 100vh; } /* Fixed atmosphere layer. Sits behind all content, never scrolls, never intercepts clicks. */ .pa-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 34%, var(--pa-ink-lift) 0%, var(--pa-ink) 46%, var(--pa-black) 100%); } /* Warm bloom behind the hero — anchors the eye at the top of the page. */ .pa-bg::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1400px, 150vw); height: min(760px, 88vh); transform: translateX(-50%); background: radial-gradient(ellipse at 50% 32%, rgba(233, 217, 141, .10) 0%, rgba(233, 217, 141, .035) 38%, rgba(233, 217, 141, 0) 72%); } /* Scanline texture — 1px dark line every 3px, matches the game UI. */ .pa-bg::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, rgba(0, 0, 0, 0) 1px 3px); opacity: .3; } /* Film grain. Separate element so it can animate without repainting .pa-bg. */ .pa-grain-layer { position: fixed; inset: -6%; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: pa-grain 1.1s steps(3, end) infinite; } /* All real page content goes above the atmosphere. */ .pa-content { position: relative; z-index: 2; } a { color: var(--pa-gold); text-decoration: none; } a:hover { color: #f5ecb8; } /* Panel + gold button, lifted from the huisstijl, for surrounding UI. */ .pa-panel { background: var(--pa-panel); border: 1px solid var(--pa-line); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .85); } .pa-btn { display: inline-block; font-family: var(--pa-font-ui); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: #1b2419; background: var(--pa-gold); border: 1px solid var(--pa-gold-deep); padding: 12px 22px; cursor: pointer; } .pa-btn:hover { background: #f2e5a6; } /* ========================================================================== 2. INTRO SCENE Markup is generated by pimp-area-intro.js into .pa-intro. Everything inside is sized in cqh / cqw (container query units) against .pa-stage, so the scene scales with its own box — no media queries. ========================================================================== */ .pa-intro { width: 100%; display: flex; justify-content: center; padding: 26px 18px; box-sizing: border-box; } .pa-stage { position: relative; width: 100%; max-width: 1180px; aspect-ratio: 2.353; /* anamorphic, cinematic */ min-height: min(380px, 74vw); /* taller box on phones */ overflow: hidden; container-type: size; /* enables cqh / cqw inside */ background: radial-gradient(120% 90% at 50% 62%, #0a130d 0%, #060b07 46%, #040604 100%); border: 1px solid var(--pa-line); box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9), inset 0 0 120px rgba(0, 0, 0, .7); user-select: none; } .pa-stage[data-replay="1"] { cursor: pointer; } .pa-cam { position: absolute; inset: 0; transform-origin: 50% 56%; will-change: transform; } /* ---- the street behind the gate ---------------------------------------- */ .pa-street { position: absolute; inset: 0; opacity: .12; } .pa-sky { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,5,0) 0%, #070d08 34%, #0b120d 58%, #0d160f 67%, #070c08 100%); } /* Light at the far end of the street. Drawn BEFORE the silhouettes so they read as dark shapes against it. */ .pa-glow { position: absolute; left: 50%; top: 60%; width: 40cqh; height: 56cqh; margin-left: -20cqh; margin-top: -28cqh; border-radius: 50%; background: radial-gradient(ellipse at 50% 62%, rgba(233,217,141,.62) 0%, rgba(233,217,141,.20) 30%, rgba(154,190,158,.08) 56%, rgba(0,0,0,0) 76%); opacity: 0; transform: scale(.55); will-change: opacity, transform; } /* Mid-distance blocks. The inner edge fades so the corridor of light has no hard vertical seam. */ .pa-mid { position: absolute; } .pa-mid-l { left: 33%; bottom: 30%; width: 14%; height: 27%; background: linear-gradient(180deg, #080e09, #040805); -webkit-mask-image: linear-gradient(90deg, #000 0 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 0 58%, transparent 100%); } .pa-mid-r { right: 33%; bottom: 30%; width: 15%; height: 33%; background: linear-gradient(180deg, #070d08, #040705); -webkit-mask-image: linear-gradient(270deg, #000 0 58%, transparent 100%); mask-image: linear-gradient(270deg, #000 0 58%, transparent 100%); } .pa-mid-l-win { left: 34.5%; bottom: 32%; width: 11%; height: 22%; opacity: .26; background-image: repeating-linear-gradient(0deg, rgba(233,217,141,.26) 0 .45cqh, rgba(0,0,0,0) .45cqh 3.2cqh); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 .6cqh, transparent .6cqh 2.4cqh); mask-image: repeating-linear-gradient(90deg, #000 0 .6cqh, transparent .6cqh 2.9cqh); } .pa-mid-r-win { right: 34.5%; bottom: 32%; width: 12%; height: 28%; opacity: .2; background-image: repeating-linear-gradient(0deg, rgba(233,217,141,.2) 0 .45cqh, rgba(0,0,0,0) .45cqh 3.6cqh); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 .6cqh, transparent .6cqh 2.7cqh); mask-image: repeating-linear-gradient(90deg, #000 0 .6cqh, transparent .6cqh 3.2cqh); } /* Single lit sliver at the vanishing point. */ .pa-horizon { position: absolute; left: 47%; right: 47%; bottom: 29.4%; height: .26cqh; background: #f6efcd; opacity: .8; box-shadow: 0 0 2.6cqh rgba(233,217,141,.55), 0 0 9cqh rgba(233,217,141,.26); } /* Near buildings, left and right of frame. */ .pa-bld-l { position: absolute; left: 0; bottom: 22%; width: 35%; height: 80%; background: linear-gradient(100deg, rgba(3,5,4,0), #040705 12%, #060b07 60%, rgba(7,13,9,.6) 86%, rgba(7,13,9,0) 100%); } .pa-bld-r { position: absolute; right: 0; bottom: 22%; width: 36%; height: 84%; background: linear-gradient(260deg, rgba(3,5,4,0), #040705 12%, #060b07 60%, rgba(7,13,9,.6) 86%, rgba(7,13,9,0) 100%); } /* Lit windows: a row gradient masked into columns = a grid of lit panes. */ .pa-bld-l-win { position: absolute; left: 2%; bottom: 25%; width: 27%; height: 73%; opacity: .5; background-image: repeating-linear-gradient(0deg, rgba(233,217,141,.22) 0 .6cqh, rgba(0,0,0,0) .6cqh 4.1cqh); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 .9cqh, transparent .9cqh 3.4cqh), linear-gradient(90deg, #000 0 58%, transparent 100%); -webkit-mask-composite: source-in; mask-image: repeating-linear-gradient(90deg, #000 0 .9cqh, transparent .9cqh 3.4cqh), linear-gradient(90deg, #000 0 58%, transparent 100%); mask-composite: intersect; } .pa-bld-r-win { position: absolute; right: 2.5%; bottom: 26%; width: 26%; height: 69%; opacity: .45; background-image: repeating-linear-gradient(0deg, rgba(233,217,141,.18) 0 .5cqh, rgba(0,0,0,0) .5cqh 4.4cqh); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 .8cqh, transparent .8cqh 3.6cqh), linear-gradient(270deg, #000 0 56%, transparent 100%); -webkit-mask-composite: source-in; mask-image: repeating-linear-gradient(90deg, #000 0 .8cqh, transparent .8cqh 3.6cqh), linear-gradient(270deg, #000 0 56%, transparent 100%); mask-composite: intersect; } /* Wet cobbles. The conic gradient radiates from the vanishing point, so the seams converge correctly in perspective. */ .pa-road { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #0a110b 0%, #0d150e 34%, #060a07 100%); } .pa-seams { position: absolute; left: 0; right: 0; bottom: 0; height: 29%; opacity: .38; background: repeating-conic-gradient(from 88deg at 50% 0%, rgba(198,214,192,.05) 0deg 1deg, rgba(0,0,0,.34) 1deg 3.4deg); } .pa-road-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(6,10,7,.9) 0%, rgba(6,10,7,0) 22%); } .pa-wet { position: absolute; left: 20%; right: 20%; bottom: 0; height: 29%; opacity: .75; background: radial-gradient(ellipse 32% 118% at 50% 0%, rgba(233,217,141,.40) 0%, rgba(233,217,141,.12) 42%, rgba(233,217,141,0) 76%); filter: blur(7px); } /* ---- volumetric light through the opening ------------------------------ */ .pa-shafts { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; } .pa-shafts > i { position: absolute; left: 50%; top: 52%; transform-origin: 50% 0; display: block; } .pa-shafts > i:nth-child(1) { width: 9cqh; height: 130cqh; margin-left: -4.5cqh; transform: rotate(-27deg); filter: blur(7px); background: linear-gradient(180deg, rgba(233,217,141,.30), rgba(233,217,141,0) 76%); } .pa-shafts > i:nth-child(2) { width: 12cqh; height: 140cqh; margin-left: -6cqh; transform: rotate(4deg); filter: blur(9px); background: linear-gradient(180deg, rgba(240,232,196,.30), rgba(233,217,141,0) 72%); } .pa-shafts > i:nth-child(3) { width: 8cqh; height: 126cqh; margin-left: -4cqh; transform: rotate(31deg); filter: blur(7px); background: linear-gradient(180deg, rgba(233,217,141,.26), rgba(233,217,141,0) 74%); } /* ---- mist -------------------------------------------------------------- */ .pa-fog-back { position: absolute; inset: -10%; opacity: 0; } .pa-fog-back > i { position: absolute; display: block; } .pa-fog-back > i:nth-child(1) { left: 2%; bottom: -6%; width: 62%; height: 46%; background: radial-gradient(ellipse at 50% 60%, rgba(158,186,162,.20), rgba(158,186,162,0) 66%); animation: pa-driftA 26s ease-in-out infinite; } .pa-fog-back > i:nth-child(2) { right: 0; bottom: -10%; width: 66%; height: 52%; background: radial-gradient(ellipse at 50% 60%, rgba(142,172,148,.17), rgba(142,172,148,0) 68%); animation: pa-driftB 33s ease-in-out infinite; } .pa-fog { position: absolute; inset: -14%; opacity: 0; } .pa-fog > i { position: absolute; display: block; } .pa-fog > i:nth-child(1) { left: -4%; bottom: -14%; width: 72%; height: 58%; background: radial-gradient(ellipse at 50% 62%, rgba(176,199,178,.24), rgba(176,199,178,0) 64%); animation: pa-driftB 29s ease-in-out infinite; } .pa-fog > i:nth-child(2) { right: -6%; bottom: -18%; width: 76%; height: 62%; background: radial-gradient(ellipse at 50% 62%, rgba(160,186,164,.20), rgba(160,186,164,0) 66%); animation: pa-driftA 37s ease-in-out infinite; } .pa-fog > i:nth-child(3) { left: 14%; top: -8%; width: 70%; height: 44%; background: radial-gradient(ellipse at 50% 50%, rgba(150,178,155,.13), rgba(150,178,155,0) 68%); animation: pa-driftA 44s ease-in-out infinite; } /* ---- the gate ---------------------------------------------------------- */ .pa-gate { position: absolute; top: 0; width: 50.6%; height: 100%; opacity: 0; will-change: transform, opacity; } .pa-gate-l { left: 0; } .pa-gate-r { right: 0; } .pa-pickets { position: absolute; top: 0; bottom: 0; display: flex; justify-content: space-between; align-items: stretch; } .pa-gate-l .pa-pickets { left: 2.4cqh; right: 1.6cqh; } .pa-gate-r .pa-pickets { left: 1.6cqh; right: 2.4cqh; } .pa-picket { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; } .pa-finial { width: 1.5cqh; height: 3.4cqh; flex: 0 0 auto; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: linear-gradient(90deg, #070a07, #26332a 30%, #4d5f4f 50%, #1d271f 68%, #050705); } .pa-bar { width: 1.1cqh; flex: 1 1 auto; background: linear-gradient(90deg, #080c08, #1e2820 28%, #41513f 50%, #212c1e 70%, #070a07); } .pa-rail { position: absolute; left: 0; right: 0; } .pa-rail-1 { top: 12.5%; height: 2.6cqh; background: linear-gradient(180deg, #38473a, #1d271f 42%, #080c08); box-shadow: inset 0 1px 0 rgba(180,200,180,.18), 0 2px 6px rgba(0,0,0,.7); } .pa-rail-2 { top: 60%; height: 2.4cqh; background: linear-gradient(180deg, #354434, #1b241c 42%, #070b07); box-shadow: inset 0 1px 0 rgba(180,200,180,.15), 0 2px 6px rgba(0,0,0,.7); } .pa-rail-3 { top: 88%; height: 2.8cqh; background: linear-gradient(180deg, #2f3d31, #161e17 44%, #050805); box-shadow: inset 0 1px 0 rgba(170,190,170,.13), 0 2px 6px rgba(0,0,0,.75); } .pa-orn { position: absolute; left: 3cqh; right: 3cqh; top: 70%; height: 6cqh; display: flex; justify-content: space-around; align-items: center; } .pa-orn > i { display: block; width: 4cqh; height: 4cqh; transform: rotate(45deg); border: .5cqh solid #2b382c; box-shadow: inset 0 0 0 1px rgba(150,175,150,.12); } .pa-stile { position: absolute; top: 0; height: 100%; } .pa-gate-l .pa-stile-out { left: 0; width: 2.4cqh; background: linear-gradient(90deg, #050705, #232f26 42%, #4b5c4c 54%, #141c15 78%, #040604); } .pa-gate-l .pa-stile-in { right: 0; width: 1.9cqh; background: linear-gradient(90deg, #050705, #202b22 40%, #445445 56%, #111811 80%, #040604); } .pa-gate-r .pa-stile-out { right: 0; width: 2.4cqh; background: linear-gradient(270deg, #050705, #232f26 42%, #4b5c4c 54%, #141c15 78%, #040604); } .pa-gate-r .pa-stile-in { left: 0; width: 1.9cqh; background: linear-gradient(270deg, #050705, #202b22 40%, #445445 56%, #111811 80%, #040604); } /* Gold seal. Each half is a clipped semicircle sitting on the seam, so the circle reads whole when closed and breaks in two as the gate opens. */ .pa-seal { position: absolute; top: 38%; width: 18cqh; height: 18cqh; border-radius: 50%; border: .55cqh solid var(--pa-gold); background: radial-gradient(circle at 50% 40%, #1a2419, #0a0f0a 70%); box-shadow: 0 0 3cqh rgba(233,217,141,.26); } .pa-gate-l .pa-seal { right: -9cqh; clip-path: inset(0 50% 0 0); } .pa-gate-r .pa-seal { left: -9cqh; clip-path: inset(0 0 0 50%); } .pa-seal > span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-family: var(--pa-font-display); font-weight: 700; font-size: max(16px, 7.4cqh); color: var(--pa-gold); text-shadow: 0 0 1.4cqh rgba(233,217,141,.55); } .pa-gate-l .pa-seal > span { left: 25%; } .pa-gate-r .pa-seal > span { left: 75%; } /* ---- stone pillars + lamps (the only practical light in scene 1) ------- */ .pa-frame { position: absolute; inset: 0; opacity: 0; } .pa-pillar { position: absolute; top: 0; width: 9cqh; height: 100%; } .pa-pillar-l { left: 0; background: linear-gradient(90deg, rgba(4,6,4,0), #0b110c 18%, #1a231b 52%, #0a0f0a 84%, #040604); box-shadow: 6px 0 22px rgba(0,0,0,.8); } .pa-pillar-r { right: 0; background: linear-gradient(270deg, rgba(4,6,4,0), #0b110c 18%, #1a231b 52%, #0a0f0a 84%, #040604); box-shadow: -6px 0 22px rgba(0,0,0,.8); } .pa-cap { position: absolute; top: 6%; width: 11cqh; height: 2.2cqh; background: linear-gradient(180deg, #222d23, #0a0f0a); } .pa-cap-l { left: 0; } .pa-cap-r { right: 0; } .pa-lamp { position: absolute; top: 7.6%; width: 4.6cqh; height: 2.9cqh; border-radius: 0 0 40% 40%; background: linear-gradient(180deg, #f4ebc0, #c9b168); box-shadow: 0 0 5cqh rgba(233,217,141,.60), 0 0 16cqh rgba(233,217,141,.26); opacity: 0; } .pa-lamp-l { left: 2.2cqh; } .pa-lamp-r { right: 2.2cqh; } .pa-cone { position: absolute; top: 9%; width: 36cqh; height: 82cqh; background: linear-gradient(180deg, rgba(233,217,141,.26), rgba(233,217,141,0) 72%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(5px); opacity: 0; mix-blend-mode: screen; } .pa-cone-l { left: -7cqh; } .pa-cone-r { right: -7cqh; } /* ---- weather ----------------------------------------------------------- */ .pa-rain { position: absolute; inset: -8%; opacity: 0; } .pa-dust { position: absolute; inset: 0; opacity: 0; } /* individual drops / motes get inline styles from JS (seeded, deterministic) */ /* ---- title ------------------------------------------------------------- */ .pa-bloom { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 50% 54%, rgba(233,217,141,.60), rgba(233,217,141,0) 62%); } .pa-halo { position: absolute; left: 50%; top: 52%; width: 120cqh; height: 76cqh; margin-left: -60cqh; margin-top: -38cqh; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(233,217,141,.26) 0%, rgba(233,217,141,.09) 34%, rgba(233,217,141,0) 70%); } .pa-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2cqh; } .pa-beam { width: 64%; height: .34cqh; background: linear-gradient(90deg, rgba(233,217,141,0), #fffdf0 46%, #fffdf0 54%, rgba(233,217,141,0)); box-shadow: 0 0 4cqh rgba(233,217,141,.70); opacity: 0; transform: scaleX(0); } .pa-logo { font-family: var(--pa-font-display); font-weight: 700; font-size: max(30px, min(9.4cqw, 19cqh)); line-height: 1; letter-spacing: .02em; color: var(--pa-bone); /* hard offset shadow = the typewriter-plate look from the huisstijl */ text-shadow: .035em .05em 0 #0a0f0a, 0 0 .42em rgba(233,217,141,.46), 0 0 1.3em rgba(233,217,141,.24); opacity: 0; white-space: nowrap; } .pa-rule { width: 0; height: 1px; background: linear-gradient(90deg, rgba(233,217,141,0), var(--pa-gold), rgba(233,217,141,0)); box-shadow: 0 0 1.6cqh rgba(233,217,141,.45); } .pa-badge { font-family: var(--pa-font-display); font-weight: 700; font-size: max(11px, 3.1cqh); letter-spacing: .26em; color: #1b2419; background: var(--pa-gold); border: 1px solid var(--pa-gold-deep); padding: .9cqh 2.4cqh .9cqh 2.7cqh; /* right pad trimmed for letterspacing */ box-shadow: 0 0 3.4cqh rgba(233,217,141,.34); opacity: 0; transform: translateY(8px); } /* ---- grade ------------------------------------------------------------- */ .pa-vig { position: absolute; inset: 0; opacity: .45; background: radial-gradient(ellipse 78% 72% at 50% 52%, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.92) 100%); } .pa-grain { position: absolute; inset: -6%; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: pa-grain 1.1s steps(3, end) infinite; } .pa-scan { position: absolute; inset: 0; opacity: .35; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px); } /* ========================================================================== 3. KEYFRAMES (ambient loops only — the camera, gate, and title are driven by requestAnimationFrame in JS so they can be scrubbed and frozen) ========================================================================== */ @keyframes pa-mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 14% { opacity: 1; } 82% { opacity: .6; } 100% { transform: translate3d(16px, -140px, 0); opacity: 0; } } @keyframes pa-fall { 0% { transform: translate3d(0, -40%, 0); opacity: 0; } 9% { opacity: 1; } 100% { transform: translate3d(-7%, 340%, 0); opacity: 0; } } @keyframes pa-driftA { 0% { transform: translate3d(-7%, 1%, 0) scale(1); } 50% { transform: translate3d(7%, -3%, 0) scale(1.14); } 100% { transform: translate3d(-7%, 1%, 0) scale(1); } } @keyframes pa-driftB { 0% { transform: translate3d(6%, 2%, 0) scale(1.12); } 50% { transform: translate3d(-6%, -2%, 0) scale(1); } 100% { transform: translate3d(6%, 2%, 0) scale(1.12); } } @keyframes pa-grain { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-2.5%, 1.5%, 0); } 50% { transform: translate3d(1.5%, -2.5%, 0); } 75% { transform: translate3d(-1.5%, -1.5%, 0);} 100% { transform: translate3d(0, 0, 0); } }