/* Custom page loader — same base color as the mobile-menu overlay (at full opacity, for visual consistency) — a 1s hold, then left-aligned "Welcome to my Portfolio" typed on with a blinking cursor, then a smooth dissolve into the homepage. See ./README.md */ body.wm-loading { overflow: hidden; } /* Set on before paint (see index.html's early inline script) when the loader has already played this session. */ .wm-no-loader #wm-loader { display: none !important; } .wm-no-loader body.wm-loading { overflow: visible !important; } #wm-loader { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; padding: 0 3rem; background: rgb(13, 15, 20); opacity: 1; animation: wmLoaderOut 0.7s cubic-bezier(0.4, 0, 0.2, 1) 3s forwards; } @keyframes wmLoaderOut { to { opacity: 0; visibility: hidden; } } @media (min-width: 768px) { #wm-loader { padding: 0 6rem; } } @media (min-width: 1600px) { #wm-loader { padding: 0 10rem; } } .wm-loader__line { margin: 0; } .wm-loader__box { position: relative; display: inline-block; } /* An invisible copy of the text establishes the box's natural width/height (via normal layout flow) so the revealing layer has a stable 100% target to animate toward, independent of its own animated width. */ .wm-loader__ghost { visibility: hidden; } .wm-loader__reveal { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; width: 0; border-right: 0.15em solid #fff; animation: wmTypeReveal 1.3s steps(23, end) 1.1s forwards, wmCursorBlink 0.9s step-end 1.1s infinite; } @keyframes wmTypeReveal { to { width: 100%; } } @keyframes wmCursorBlink { 50% { border-color: transparent; } } .wm-loader__text { display: inline-block; white-space: nowrap; font: normal 500 1.5rem/1.4 var(--_font-default); letter-spacing: 0.25em; text-transform: uppercase; color: #fff; } @media (min-width: 768px) { .wm-loader__text { font-size: 1.8rem; } } @media (min-width: 1200px) { .wm-loader__text { font-size: 2.1rem; } } @media (prefers-reduced-motion: reduce) { #wm-loader { animation-duration: 0.15s !important; } .wm-loader__reveal { animation: none !important; width: 100% !important; border-right: none !important; } }