/* ========================================================================== entry-animation.css — Altrix Capital · Institutional Entry Substitui integralmente o conteúdo de static/css/entry-animation.css Sem dependências. Só transform / opacity / mask-size / filter. Spec: design_handoff_entry_institutional/SPEC.md ========================================================================== */ :root { /* --- tempos (ms). Espelham AE_CONFIG em entry-animation.js --- */ --ae-t-rules: 100ms; --ae-d-rules: 600ms; --ae-t-logo: 100ms; --ae-d-logo-open: 860ms; --ae-d-logo-fade: 300ms; --ae-d-logo-settle: 700ms; --ae-d-logo-focus: 560ms; --ae-t-rule: 850ms; --ae-d-rule: 520ms; --ae-t-cap: 1110ms; --ae-d-cap: 340ms; --ae-d-pass: 1700ms; --ae-t-out: 1680ms; --ae-d-out: 180ms; --ae-t-field: 1800ms; --ae-d-field: 420ms; --ae-t-dash: 1820ms; --ae-d-dash: 500ms; --ae-d-dash-scale: 600ms; /* --- easings --- */ --ae-ease-out: cubic-bezier(.33, 1, .68, 1); /* easeOutCubic */ --ae-ease-inout: cubic-bezier(.37, 0, .63, 1); /* easeInOutSine */ /* --- geometria: tudo deriva da largura do logótipo --- */ --ae-logo-w: clamp(200px, min(60vh, 60vw), 680px); --ae-gap: calc(var(--ae-logo-w) * .0867); --ae-rule-w: calc(var(--ae-logo-w) * .827); --ae-cap-size: max(11px, calc(var(--ae-logo-w) * .0333)); --ae-cap-shift: calc(var(--ae-logo-w) * .0167); --ae-blur-start: calc(var(--ae-logo-w) * .027); --ae-rules-step: 6.25%; /* --- cor do campo (independente do tema do dashboard) --- */ --ae-field-top: #1A1436; --ae-field-mid: #100C24; --ae-field-bot: #0A0816; --ae-halo: rgba(122, 85, 200, .32); --ae-z: 9999; } /* -------------------------------------------------------------------------- 1. Cobertura pré-paint. O script inline no do index.html põe html.ae-armed antes do primeiro paint; isto garante que o dashboard nunca pisca antes do módulo montar o overlay. -------------------------------------------------------------------------- */ html.ae-armed body::before { content: ''; position: fixed; inset: 0; z-index: calc(var(--ae-z) - 1); background: linear-gradient(180deg, var(--ae-field-top) 0%, var(--ae-field-mid) 46%, var(--ae-field-bot) 100%); pointer-events: none; } html.ae-armed .app, html.ae-armed .bg-orbs { opacity: 0; } html.ae-done body::before { content: none; } html.ae-done .app, html.ae-done .bg-orbs { opacity: 1; } /* -------------------------------------------------------------------------- 2. Overlay -------------------------------------------------------------------------- */ .ae { position: fixed; inset: 0; z-index: var(--ae-z); overflow: hidden; pointer-events: none; contain: strict; } .ae-field { position: absolute; inset: 0; will-change: opacity; animation: ae-field-out var(--ae-d-field) var(--ae-ease-inout) var(--ae-t-field) both; } /* 2.1 base */ .ae-base { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ae-field-top) 0%, var(--ae-field-mid) 46%, var(--ae-field-bot) 100%); } /* 2.2 halo superior — gradiente largo, sem filter: blur (decisão de performance) */ .ae-halo { position: absolute; left: 50%; top: -10%; width: 130%; height: 105%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, var(--ae-halo) 0%, rgba(122, 85, 200, .16) 34%, rgba(122, 85, 200, 0) 72%); } /* 2.3 filetes verticais (papel de razão) */ .ae-rules { position: absolute; inset: 0; opacity: 0; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px var(--ae-rules-step)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; animation: ae-rules-in var(--ae-d-rules) var(--ae-ease-out) var(--ae-t-rules) both; } /* 2.4 filete horizontal do horizonte, interrompido atrás do logótipo */ .ae-seam { position: absolute; left: 0; right: 0; top: 50%; height: 1px; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 26%, rgba(255, 255, 255, .1) 74%, rgba(255, 255, 255, 0)); -webkit-mask-image: linear-gradient(90deg, #000 0 calc(50% - var(--ae-logo-w) * .62), transparent calc(50% - var(--ae-logo-w) * .56) calc(50% + var(--ae-logo-w) * .56), #000 calc(50% + var(--ae-logo-w) * .62) 100%); mask-image: linear-gradient(90deg, #000 0 calc(50% - var(--ae-logo-w) * .62), transparent calc(50% - var(--ae-logo-w) * .56) calc(50% + var(--ae-logo-w) * .56), #000 calc(50% + var(--ae-logo-w) * .62) 100%); animation: ae-seam-in var(--ae-d-rules) var(--ae-ease-out) var(--ae-t-rules) both; } /* 2.5 passagem de luz — a única animação ambiente */ .ae-pass { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .055), rgba(255, 255, 255, 0)); will-change: transform; animation: ae-pass var(--ae-d-pass) var(--ae-ease-inout) 0ms both; } /* 2.6 grão + vinheta */ .ae-grain { position: absolute; inset: 0; opacity: .045; background-image: radial-gradient(rgba(255, 255, 255, .9) .5px, transparent .5px); background-size: 3px 3px; } .ae-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 16vw 6vw rgba(6, 5, 12, .82); } /* -------------------------------------------------------------------------- 3. Lockup -------------------------------------------------------------------------- */ .ae-contents { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: ae-contents-out var(--ae-d-out) var(--ae-ease-out) var(--ae-t-out) both; } .ae-lockup { display: flex; flex-direction: column; align-items: center; gap: var(--ae-gap); } /* 3.1 logótipo — máscara que abre do centro (mask-size), foco a resolver no */ .ae-logo { width: var(--ae-logo-w); opacity: 0; will-change: transform, opacity, -webkit-mask-size; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 66%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 0% 100%; mask-size: 0% 100%; animation: ae-logo-open var(--ae-d-logo-open) var(--ae-ease-out) var(--ae-t-logo) both, ae-logo-fade var(--ae-d-logo-fade) var(--ae-ease-out) var(--ae-t-logo) both, ae-logo-settle var(--ae-d-logo-settle) var(--ae-ease-out) var(--ae-t-logo) both; } /* NUNCA pôr mask/clip e filter no mesmo elemento — ver SPEC §13.4 */ .ae-logo-img { display: block; width: 100%; height: auto; animation: ae-logo-focus var(--ae-d-logo-focus) var(--ae-ease-out) var(--ae-t-logo) both; } /* 3.2 filete que abre do centro */ .ae-rule { width: var(--ae-rule-w); height: 1px; background: rgba(255, 255, 255, .12); } .ae-rule-fill { display: block; height: 100%; transform: scaleX(0); transform-origin: center; background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .75), rgba(255, 255, 255, .15)); animation: ae-rule-open var(--ae-d-rule) var(--ae-ease-out) var(--ae-t-rule) both; } /* 3.3 legenda */ .ae-caption { margin: 0; padding-left: .3em; font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; font-size: var(--ae-cap-size); line-height: 1.2; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .55); opacity: 0; animation: ae-cap-in var(--ae-d-cap) var(--ae-ease-out) var(--ae-t-cap) both; } /* -------------------------------------------------------------------------- 4. Entrada do dashboard -------------------------------------------------------------------------- */ html.ae-armed .app.ae-reveal, html.ae-armed .bg-orbs.ae-reveal { will-change: transform, opacity; animation: ae-dash-in var(--ae-d-dash) var(--ae-ease-out) var(--ae-t-dash) both, ae-dash-scale var(--ae-d-dash-scale) var(--ae-ease-out) var(--ae-t-dash) both; } /* -------------------------------------------------------------------------- 5. Keyframes -------------------------------------------------------------------------- */ @keyframes ae-rules-in { from { opacity: 0 } to { opacity: .05 } } @keyframes ae-seam-in { from { opacity: 0 } to { opacity: .6 } } @keyframes ae-logo-open { from { -webkit-mask-size: 0% 100%; mask-size: 0% 100% } to { -webkit-mask-size: 400% 100%; mask-size: 400% 100% } } @keyframes ae-logo-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes ae-logo-settle{ from { transform: translateY(var(--ae-cap-shift)) scale(1.022) } to { transform: translateY(0) scale(1) } } @keyframes ae-logo-focus { from { filter: blur(var(--ae-blur-start)) } to { filter: blur(0) } } @keyframes ae-rule-open { from { transform: scaleX(0) } to { transform: scaleX(1) } } @keyframes ae-cap-in { from { opacity: 0; transform: translateY(var(--ae-cap-shift)) } to { opacity: 1; transform: translateY(0) } } @keyframes ae-pass { from { transform: translateX(-50%) } to { transform: translateX(250%) } } @keyframes ae-contents-out { from { opacity: 1 } to { opacity: 0 } } @keyframes ae-field-out { from { opacity: 1 } to { opacity: 0 } } @keyframes ae-dash-in { from { opacity: 0 } to { opacity: 1 } } @keyframes ae-dash-scale { from { transform: scale(1.012) } to { transform: scale(1) } } /* -------------------------------------------------------------------------- 6. Responsive -------------------------------------------------------------------------- */ @media (max-width: 640px) { :root { --ae-logo-w: clamp(180px, 60vw, 320px); --ae-rule-w: calc(var(--ae-logo-w) * .746); --ae-gap: calc(var(--ae-logo-w) * .093); --ae-cap-size: max(11px, calc(var(--ae-logo-w) * .0381)); --ae-rules-step: 10%; } .ae-vignette { box-shadow: inset 0 0 28vw 10vw rgba(6, 5, 12, .82); } } @media (max-width: 380px) { .ae-caption { letter-spacing: .22em; padding-left: .22em; } } @media (min-aspect-ratio: 2/1) { .ae-pass { width: 34%; } } /* -------------------------------------------------------------------------- 7. Reduced motion — lockup estático 500ms + fade 400ms, sem movimento -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ae-rules, .ae-seam, .ae-pass { animation: none; } .ae-rules { opacity: .05; } .ae-seam { opacity: .6; } .ae-pass { display: none; } .ae-logo { animation: none; opacity: 1; -webkit-mask-image: none; mask-image: none; } .ae-logo-img { animation: none; filter: none; } .ae-rule-fill { animation: none; transform: scaleX(1); } .ae-caption { animation: none; opacity: 1; transform: none; } .ae-contents { animation: ae-contents-out 200ms linear 500ms both; } .ae-field { animation: ae-field-out 400ms linear 500ms both; } html.ae-armed .app.ae-reveal, html.ae-armed .bg-orbs.ae-reveal { animation: ae-dash-in 400ms linear 500ms both; } }