/* * Logo page-transition overlay. * * The overlay markup is printed at wp_body_open (so it covers the page before * content paints — no flash, valid DOM). It is robust without JavaScript: a * pure-CSS keyframe fades it out on every load (the "enter" reveal). warm- * transition.js adds the "exit" cover on internal link clicks. If JS fails the * page is never stuck, because the CSS fade-out always runs. */ .ls-page-transition { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: radial-gradient(58% 58% at 50% 42%, #fffaf0 0%, #f4e8d3 70%, #efe0c7 100%); /* Enter reveal: cover, then fade away automatically on load. */ opacity: 1; visibility: visible; animation: ls-pt-reveal 0.62s ease 0.12s forwards; } .ls-page-transition__logo { inline-size: clamp(9.5rem, 26vw, 17rem); block-size: auto; filter: drop-shadow(0 16px 36px rgba(90, 54, 18, 0.2)); transform-origin: center; animation: ls-pt-logo-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Thin gold sweep beneath the logo for a refined "loading" beat. */ .ls-page-transition__logo + .ls-page-transition__bar, .ls-page-transition::after { content: ""; position: absolute; inset-block-start: calc(50% + clamp(3.4rem, 9vw, 6rem)); inset-inline-start: 50%; inline-size: clamp(3rem, 7vw, 4.5rem); block-size: 2px; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(90deg, var(--ls-warm-gold-strong, #f5d77d), var(--ls-warm-red, #d23a34)); opacity: 0.9; animation: ls-pt-bar 1.1s ease-in-out infinite; } @keyframes ls-pt-bar { 0%, 100% { transform: translateX(-50%) scaleX(0.6); opacity: 0.45; } 50% { transform: translateX(-50%) scaleX(1); opacity: 0.95; } } @keyframes ls-pt-reveal { to { opacity: 0; visibility: hidden; } } @keyframes ls-pt-logo-in { 0% { opacity: 0; transform: scale(0.88) translateY(6px); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Exit cover: warm-transition.js adds .ls-pt-leaving to on internal navigation — re-show the overlay and animate the logo in before leaving. */ html.ls-pt-leaving .ls-page-transition { animation: none; opacity: 1; visibility: visible; pointer-events: all; transition: opacity 0.18s ease; } html.ls-pt-leaving .ls-page-transition__logo { animation: ls-pt-logo-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes ls-pt-logo-out { 0% { opacity: 0.2; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .ls-page-transition { animation: ls-pt-reveal 0.01s linear forwards; } .ls-page-transition__logo, .ls-page-transition::after { animation: none; } html.ls-pt-leaving .ls-page-transition { display: none; } }