/* Two-second decorative entrance. All selectors are isolated from site styles. */
.washie-loader[hidden] { display: none; }
.washie-loader { position: fixed; inset: 0; z-index: 10000; overflow: hidden; pointer-events: none; background: #020815; --logo-size: min(46vh, 38vw, 420px); }
.washie-loader *, .washie-loader *::before, .washie-loader *::after { box-sizing: border-box; }
.washie-loader__clouds { position: absolute; inset: -8%; background: url('/assets/loader/clouds.webp') center / 100% 100% no-repeat; opacity: .75; }
.washie-loader__cloud-bank, .washie-loader__cloud-light { position: absolute; inset: -12%; background: url('/assets/loader/clouds.webp') center / 100% 100% no-repeat; }
.washie-loader__cloud-bank { opacity: .24; filter: blur(7px); mask-image: radial-gradient(ellipse, transparent 35%, #000 75%); transform: scale(1.12) rotate(3deg); }
.washie-loader__cloud-light { opacity: 0; mix-blend-mode: screen; filter: brightness(1.8) saturate(.75); }
.washie-loader__atmosphere { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, #1175e633, transparent 46%), linear-gradient(0deg, #020815 0%, transparent 28%, transparent 80%, #02081599); }
.washie-loader__brand { position: absolute; z-index: 1; top: 46%; left: 50%; width: var(--logo-size); aspect-ratio: 1; transform: translate(-50%, -50%); }
.washie-loader__medallion { width: 100%; height: 100%; background: url('/assets/loader/emblem.webp') 51% 47.5% / 168% auto no-repeat; border-radius: 50%; mask-image: radial-gradient(circle, #000 60%, #000d 65%, transparent 72%); filter: drop-shadow(0 0 20px #1688ff); }
.washie-loader__weather, .washie-loader__vignette { position: absolute; inset: 0; height: 100%; width: 100%; }
.washie-loader__weather { z-index: 2; }
.washie-loader__vignette { z-index: 3; background: radial-gradient(ellipse at 50% 46%, transparent 20%, #02081530 58%, #020815b3 100%); }
.washie-loader__energy-ring { position: absolute; top: 46%; left: 50%; width: var(--logo-size); aspect-ratio: 1; border: 1px solid #70c6ff; border-radius: 50%; opacity: 0; box-shadow: 0 0 35px #0d77ff, inset 0 0 22px #0d77ff; transform: translate(-50%, -50%); }
.washie-loader__caption { position: absolute; z-index: 3; top: calc(46% + var(--logo-size) / 2 + 23px); left: 50%; transform: translateX(-50%); text-align: center; width: 250px; }
.washie-loader__caption > span { font: 600 9px Arial, Helvetica, sans-serif; letter-spacing: 3.2px; color: #bdcee7; }
.washie-loader__track { width: 100px; height: 2px; margin: 20px auto 0; background: #b5d8ff1a; overflow: hidden; }
.washie-loader__track i { display: block; width: 100%; height: 100%; background: #efc77f; transform-origin: left; }
.washie-loader.is-playing { animation: washie-loader-departure 2s linear both; }
.washie-loader.is-playing .washie-loader__clouds { animation: washie-loader-gather 2s cubic-bezier(.2,.6,.3,1) both; }
.washie-loader.is-playing .washie-loader__cloud-bank { animation: washie-loader-turbulence 2s ease-out both; }
.washie-loader.is-playing .washie-loader__cloud-light { animation: washie-loader-illumination 2s ease-out both; }
.washie-loader.is-playing .washie-loader__brand { animation: washie-loader-reveal 2s ease-out both; }
.washie-loader.is-playing .washie-loader__energy-ring { animation: washie-loader-shockwave 2s ease-out both; }
.washie-loader.is-playing .washie-loader__caption { animation: washie-loader-caption 2s both; }
.washie-loader.is-playing .washie-loader__track i { animation: washie-loader-progress 2s linear both; }
@keyframes washie-loader-gather { 0% { transform: scale(1.28) rotate(-5deg); opacity: .18; } 24% { opacity: .75; } 46% { opacity: .9; } 82%,100% { transform: scale(1) rotate(0); opacity: .65; } }
@keyframes washie-loader-turbulence { from { transform: scale(1.22) rotate(5deg); opacity: .42; } to { transform: scale(1.02) rotate(-3deg); opacity: .14; } }
@keyframes washie-loader-illumination { 0%,12% { opacity: 0; } 25% { opacity: .52; } 44% { opacity: .32; } 76%,100% { opacity: 0; } }
@keyframes washie-loader-reveal { 0%,13% { opacity: 0; transform: translate(-50%,-50%) scale(.8); filter: brightness(.5); } 30% { opacity: 1; filter: brightness(1.4); transform: translate(-50%,-50%) scale(1.035); } 55%,100% { opacity: 1; filter: brightness(1); transform: translate(-50%,-50%) scale(1); } }
@keyframes washie-loader-shockwave { 0%,27% { opacity: 0; transform: translate(-50%,-50%) scale(.65); } 34% { opacity: .75; } 70%,100% { opacity: 0; transform: translate(-50%,-50%) scale(2.1); } }
@keyframes washie-loader-caption { 0%,35% { opacity: 0; } 58%,100% { opacity: 1; } }
@keyframes washie-loader-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* CSS independently hides the overlay even if JavaScript stops mid-animation. */
@keyframes washie-loader-departure { 0%,82% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (max-width: 600px) { .washie-loader { --logo-size: min(77vw, 40vh); } .washie-loader__clouds, .washie-loader__cloud-bank, .washie-loader__cloud-light { background-size: cover; } .washie-loader__caption { top: calc(46% + var(--logo-size) / 2 + 15px); } }
@media (prefers-reduced-motion: reduce) { .washie-loader { display: none !important; } }