/* ============================================================ Tela de loading — fundo amarelo, personagens balançando, barra azul. Mostrada 1x por sessão (script inline no adiciona .loading no ; sem JS, .loader fica display:none). ============================================================ */ .loader { display: none; } html.loading body { overflow: hidden; } html.loading .loader { display: flex; position: fixed; inset: 0; z-index: 9999; background: var(--amarelo); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 1; transition: opacity .4s ease; } html.loading .loader.loader-done { opacity: 0; pointer-events: none; } /* Letras M A T R I X aparecendo uma a uma acima dos personagens */ .loader-letters { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1rem); } .loader-letters img, .loader-letters .loader-letter-i { height: clamp(34px, 5vw, 54px); width: auto; opacity: 0; animation: loader-letra .2s ease-out forwards; } .loader-letter-i { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1; color: var(--azul); rotate: -9deg; } /* Todas as letras terminam ~0.5s do carregamento */ .loader-letters > :nth-child(1) { animation-delay: .05s; } .loader-letters > :nth-child(2) { animation-delay: .1s; } .loader-letters > :nth-child(3) { animation-delay: .15s; } .loader-letters > :nth-child(4) { animation-delay: .2s; } .loader-letters > :nth-child(5) { animation-delay: .25s; } .loader-letters > :nth-child(6) { animation-delay: .3s; } @keyframes loader-letra { 0% { opacity: 0; translate: 0 -18px; scale: .7; } 100% { opacity: 1; translate: 0 0; scale: 1; } } .loader-chars { display: flex; align-items: flex-end; gap: clamp(.6rem, 2vw, 1.4rem); } .loader-chars img { height: clamp(70px, 12vw, 130px); width: auto; transform-origin: bottom center; animation: loader-balancar 1s ease-in-out infinite; } .loader-chars img:nth-child(1) { animation-delay: 0s; } .loader-chars img:nth-child(2) { animation-delay: .12s; } .loader-chars img:nth-child(3) { animation-delay: .24s; } .loader-chars img:nth-child(4) { animation-delay: .36s; } .loader-chars img:nth-child(5) { animation-delay: .48s; } @keyframes loader-balancar { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } } .loader-bar { width: min(320px, 70vw); height: 12px; border-radius: 999px; background: rgb(0 117 191 / .18); overflow: hidden; } .loader-bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--azul); animation: loader-encher 1.5s ease-out forwards; } @keyframes loader-encher { 0% { width: 0; } 100% { width: 100%; } } /* Letras do hero: congeladas enquanto o loading está na tela e com delays maiores (este arquivo carrega depois do style.css, então estas regras vencem na cascata) — caem ~1s após o site aparecer. */ html.loading .float-letter { animation-play-state: paused; } .float-letter[data-float="1"] { animation-delay: .5s; } .float-letter[data-float="2"] { animation-delay: .75s; } .float-letter[data-float="3"] { animation-delay: 1s; } .float-letter[data-float="4"] { animation-delay: 1.25s; } .float-letter[data-float="5"] { animation-delay: 1.5s; } .float-letter[data-float="6"] { animation-delay: 1.75s; } /* Sob reduced-motion o script inline nem adiciona .loading; este bloco é só cinto de segurança. */ @media (prefers-reduced-motion: reduce) { .loader { display: none !important; } html.loading body { overflow: auto; } }