/* ========================================================================== Transição de página "cortina" (MPA) Um painel cobre a tela ao sair e revela ao chegar na página nova, dando sensação de continuidade mesmo mudando de URL. Funciona em qualquer navegador (não depende da View Transitions API, que não roda no Safari iOS). Coordenação entre páginas via sessionStorage (ver js/page-transition.js). ========================================================================== */ .pt-curtain{ position: fixed; inset: 0; z-index: 9999; background: var(--bg, #030603); transform: translateY(100%); /* parado abaixo da viewport */ pointer-events: none; will-change: transform; } /* CHEGANDO: cobre instantaneamente (sem flash), setado no antes do paint */ html[data-pt-state="cover"] .pt-curtain{ transform: translateY(0); transition: none; pointer-events: auto; } /* CHEGANDO: revela — sobe e sai por cima */ html[data-pt-state="out"] .pt-curtain{ transform: translateY(-100%); transition: transform .62s cubic-bezier(.76,0,.24,1); pointer-events: none; } /* SAINDO: sobe de baixo até cobrir, antes de navegar */ html[data-pt-state="in"] .pt-curtain{ transform: translateY(0); transition: transform .5s cubic-bezier(.76,0,.24,1); pointer-events: auto; } /* elementos que disparam a transição */ [data-pt-href]{ cursor: pointer; } /* cards do ecossistema têm cursor custom "+": esconde o nativo pra não sobrepor */ .ecard[data-pt-href]{ cursor: none; } /* feedback de clique no card — só filter (não mexe no transform do deck nem no box-shadow !important dos cards): pulso rápido de brilho + glow neon */ @keyframes ptCardPulse{ 0% { filter: brightness(1.55) drop-shadow(0 0 26px rgba(24,255,0,.7)); } 100% { filter: none; } } .ecard.pt-clicked{ animation: ptCardPulse .45s ease-out both; } @media (prefers-reduced-motion: reduce){ .ecard.pt-clicked{ animation: none; } } /* -------------------------------------------------------------------------- Intro de apresentação da página que chega. Marque elementos com .pt-intro; escalone com --pt-delay inline se quiser. Começa logo após a cortina começar a revelar (~.28s). -------------------------------------------------------------------------- */ @keyframes ptIntroUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } } .pt-intro{ opacity:0; animation: ptIntroUp .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.28s + var(--pt-delay, 0s)); } @media (prefers-reduced-motion: reduce){ html[data-pt-state] .pt-curtain{ transition-duration: .001s !important; } .pt-intro{ animation: none; opacity: 1; } }