/* ================================================================== Intro loader (home page), second design. A 7-second story on a perspective grid: manual work flies in and piles up, gets pulled into one line where the system assembles step by step, the packet starts running, then the DS Agency mark draws itself and the wordmark lands. - Timing, copy, steps: loader.js (INTRO). - Duration / disable / once-per-session: site.config.js -> intro. - Only rendered while (added by loader.js in , so the overlay paints before anything else). - Site tokens throughout, so the light theme works unchanged. - Review any phase frozen: index.html?intro=phase:chaos|connect|work|brand ================================================================== */ html.intro-on { overflow: hidden; } html.intro-on .kinetic .w { animation-play-state: paused; } .ds-loader { display: none; } html.intro-on .ds-loader { display: grid; } .ds-loader { position: fixed; inset: 0; z-index: 1000; place-items: center; padding: 24px; overflow: hidden; background: var(--bg-0); color: var(--text); opacity: 1; transition: opacity .5s var(--ease); } .ds-loader.out { opacity: 0; pointer-events: none; } .ds-loader .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Perspective floor + amber glow, the same family as the hero board */ .ds-loader-floor { position: absolute; left: -20%; right: -20%; top: 30%; bottom: -30%; pointer-events: none; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 56px 56px; opacity: 0; transform: perspective(700px) rotateX(64deg) translateY(120px); transform-origin: 50% 0; -webkit-mask-image: radial-gradient(55% 60% at 50% 35%, #000 20%, transparent 100%); mask-image: radial-gradient(55% 60% at 50% 35%, #000 20%, transparent 100%); transition: opacity 1.2s var(--ease), transform 1.6s var(--ease); } .ds-loader[data-phase] .ds-loader-floor { opacity: .32; transform: perspective(700px) rotateX(64deg) translateY(0); } .ds-loader[data-phase="brand"] .ds-loader-floor { opacity: .16; } .ds-loader-glow { position: absolute; left: 50%; top: 58%; width: 70vw; height: 40vh; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--accent-dim), transparent 75%); opacity: 0; transition: opacity 1s var(--ease); } .ds-loader[data-phase="work"] .ds-loader-glow, .ds-loader[data-phase="brand"] .ds-loader-glow { opacity: 1; } .ds-loader-content { position: relative; width: min(1000px, 100%); display: grid; gap: clamp(14px, 3.5vh, 36px); justify-items: center; } /* ---- Headline: one line per phase, words rise in like the hero headline ---- */ .ds-loader-lines { position: relative; width: 100%; min-height: 3.2em; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2.8vw, 2.1rem); letter-spacing: -0.025em; line-height: 1.2; } .ds-loader-lines p { position: absolute; inset: 0; margin: 0; padding: 0 8px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; } .ds-loader-lines p .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(1.5deg); transform-origin: left bottom; } .ds-loader[data-phase="chaos"] p[data-line="chaos"], .ds-loader[data-phase="connect"] p[data-line="connect"], .ds-loader[data-phase="work"] p[data-line="work"] { opacity: 1; visibility: visible; transition: opacity .2s var(--ease), visibility 0s; } .ds-loader[data-phase="chaos"] p[data-line="chaos"] .w, .ds-loader[data-phase="connect"] p[data-line="connect"] .w, .ds-loader[data-phase="work"] p[data-line="work"] .w { animation: dsWord .6s var(--ease) calc(var(--i) * .06s) both; } @keyframes dsWord { from { opacity: 0; transform: translateY(.5em) rotate(1.5deg); } to { opacity: 1; transform: none; } } /* ---- Brand block (final phase): the mark draws itself, letters land, tagline fades in ---- */ .ds-loader-brand { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 12px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .ds-loader[data-phase="brand"] .ds-loader-brand { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; } .ds-loader-brand .mk { width: 44px; height: 44px; display: block; overflow: visible; } .ds-loader-brand .mk .frame { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 160; stroke-dashoffset: 160; } .ds-loader-brand .mk .bar, .ds-loader-brand .mk .dot { fill: var(--bg-0); opacity: 0; } .ds-loader[data-phase="brand"] .mk .frame { animation: dsFrame 1.1s var(--ease) both; } .ds-loader[data-phase="brand"] .mk .bar, .ds-loader[data-phase="brand"] .mk .dot { animation: dsInk .4s var(--ease) .8s both; } @keyframes dsFrame { 0% { stroke-dashoffset: 160; fill-opacity: 0; } 60% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes dsInk { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .ds-loader-brand b { display: flex; gap: .02em; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.8vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; } .ds-loader-brand b .l { display: inline-block; opacity: 0; transform: translateY(.35em); white-space: pre; } .ds-loader[data-phase="brand"] b .l { animation: dsLetter .55s var(--ease) calc(.35s + var(--i) * .035s) both; } @keyframes dsLetter { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } } .ds-loader-brand small { font-weight: 400; font-size: clamp(.95rem, 1.5vw, 1.1rem); color: var(--text-2); max-width: 36rem; line-height: 1.45; opacity: 0; } .ds-loader[data-phase="brand"] small { animation: dsWord .6s var(--ease) .9s both; } /* ---- Scene ---- */ .ds-loader-scene { position: relative; width: 100%; height: clamp(200px, 32vh, 300px); transition: transform .9s var(--ease), opacity .9s var(--ease); } .ds-loader[data-phase="brand"] .ds-loader-scene { transform: translateY(6%) scale(.92); opacity: .55; } /* Wires draw segment by segment as each step lands */ .ds-loader-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ds-loader-wires .wire { /* --len (px) set by loader.js from getTotalLength() */ fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: calc(var(--len, 1000) * 1px); stroke-dashoffset: calc(var(--len, 1000) * 1px); transition: stroke-dashoffset .45s var(--ease) calc(.35s + var(--i) * .22s), stroke .5s; } .ds-loader[data-phase="connect"] .wire, .ds-loader[data-phase="work"] .wire, .ds-loader[data-phase="brand"] .wire { stroke-dashoffset: 0; } .ds-loader[data-phase="work"] .wire, .ds-loader[data-phase="brand"] .wire { stroke: var(--accent); opacity: .5; } .ds-loader-wires .packet { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: calc(var(--len, 1000) * .07px) calc(var(--len, 1000) * 1px); stroke-dashoffset: calc(var(--len, 1000) * .07px); opacity: 0; filter: drop-shadow(0 0 6px var(--accent)); } .ds-loader[data-phase="work"] .packet, .ds-loader[data-phase="brand"] .packet { opacity: 1; animation: dsPacket 1.7s cubic-bezier(.45,0,.3,1) infinite; } @keyframes dsPacket { from { stroke-dashoffset: calc(var(--len, 1000) * .07px); } to { stroke-dashoffset: calc(var(--len, 1000) * -1px); } } /* Steps: invisible until they land one after another */ .ds-loader-node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; } .ds-loader-node .ic { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text-2); opacity: 0; transform: scale(.4); transition: border-color .5s, color .5s, box-shadow .6s var(--ease), background .5s; } .ds-loader-node .ic svg { width: 22px; height: 22px; } .ds-loader-node .lb { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .5s; } .ds-loader[data-phase="connect"] .ds-loader-node .ic, .ds-loader[data-phase="work"] .ds-loader-node .ic, .ds-loader[data-phase="brand"] .ds-loader-node .ic { animation: dsPop .6s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--i) * .22s) both; } .ds-loader[data-phase="connect"] .ds-loader-node .lb, .ds-loader[data-phase="work"] .ds-loader-node .lb, .ds-loader[data-phase="brand"] .ds-loader-node .lb { animation: dsWord .5s var(--ease) calc(.45s + var(--i) * .22s) both; } @keyframes dsPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } .ds-loader[data-phase="work"] .ds-loader-node .ic, .ds-loader[data-phase="brand"] .ds-loader-node .ic { color: var(--accent); border-color: var(--accent); background: var(--bg-0); box-shadow: 0 0 0 4px var(--accent-dim), 0 0 28px -4px var(--accent); transition-delay: calc(var(--i) * .1s); } .ds-loader[data-phase="work"] .ds-loader-node .lb, .ds-loader[data-phase="brand"] .ds-loader-node .lb { color: var(--text-2); } /* Manual-work chips: fly in from the edges and pile up, then get pulled into the line */ .ds-loader-bit { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: 7px 11px 7px 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-1); font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8); transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(var(--r, 0deg)) scale(.9); opacity: 0; } .ds-loader-bit::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-dim); animation: dsPing 1.6s ease-out infinite; animation-delay: calc(var(--i) * .3s); } @keyframes dsPing { 0% { box-shadow: 0 0 0 0 rgba(242, 181, 68, .5); } 100% { box-shadow: 0 0 0 9px rgba(242, 181, 68, 0); } } .ds-loader[data-phase="chaos"] .ds-loader-bit { animation: dsFlyIn .8s var(--ease) calc(.15s + var(--i) * .17s) both; } @keyframes dsFlyIn { from { opacity: 0; transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(calc(var(--r, 0deg) * 3)) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); } } .ds-loader[data-phase="connect"] .ds-loader-bit, .ds-loader[data-phase="work"] .ds-loader-bit, .ds-loader[data-phase="brand"] .ds-loader-bit { animation: dsAbsorb .7s cubic-bezier(.6, 0, .8, .2) calc(var(--i) * .07s) both; } @keyframes dsAbsorb { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0) scale(.2); } } /* ---- Progress + skip ---- */ .ds-loader-bar { width: min(320px, 60%); height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .ds-loader-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } /* scaleX set by loader.js */ .ds-loader-skip { position: absolute; right: 24px; bottom: 24px; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: 500 .85rem/1 inherit; font-family: inherit; color: var(--text-2); background: var(--bg-1); border: 1px solid var(--line-2); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .2s, color .2s; } .ds-loader-skip.show { opacity: 1; transform: none; } .ds-loader-skip:hover { border-color: var(--accent); color: var(--text); } .ds-loader-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- Reduced motion: wordmark + tagline only, skip available at once ---- */ .ds-loader[data-motion="reduced"] * { transition: none !important; animation: none !important; } .ds-loader[data-motion="reduced"] .ds-loader-scene, .ds-loader[data-motion="reduced"] .ds-loader-bar, .ds-loader[data-motion="reduced"] .ds-loader-lines p, .ds-loader[data-motion="reduced"] .ds-loader-floor, .ds-loader[data-motion="reduced"] .ds-loader-glow { display: none; } .ds-loader[data-motion="reduced"] .ds-loader-brand { opacity: 1; visibility: visible; } .ds-loader[data-motion="reduced"] .mk .frame { stroke-dashoffset: 0; fill-opacity: 1; } .ds-loader[data-motion="reduced"] .mk .bar, .ds-loader[data-motion="reduced"] .mk .dot, .ds-loader[data-motion="reduced"] b .l, .ds-loader[data-motion="reduced"] small { opacity: 1; transform: none; filter: none; } .ds-loader[data-motion="reduced"] .ds-loader-skip { opacity: 1; transform: none; } .ds-loader[data-motion="reduced"] { transition: opacity .3s; } @media (max-width: 640px) { .ds-loader { padding: 16px; } .ds-loader-scene { height: 290px; } .ds-loader-floor { background-size: 40px 40px; } .ds-loader-node .ic { left: -22px; top: -22px; width: 44px; height: 44px; } .ds-loader-node .ic svg { width: 19px; height: 19px; } .ds-loader-node .lb { top: 27px; font-size: .58rem; } .ds-loader-bit { font-size: .58rem; padding: 6px 9px 6px 18px; } .ds-loader-skip { right: 16px; bottom: 16px; } }