/* Frame compartilhado PIZANI Tech — grid + glow + noise + corners + framelines + regs. Ajuste C (Codex): pausar quando aba oculta via classe .is-hidden no ; prefers-reduced-motion: reduce desabilita fractalNoise + diminui drásticamente animations. */ @keyframes pt-blink { 50% { opacity: 0; } } @keyframes pt-spin { 100% { transform: rotate(360deg); } } @keyframes pt-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes pt-noise-shift { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(1px, -2px); } 75% { transform: translate(-1px, 2px); } } @keyframes pt-grid-drift { 100% { background-position: 5vw 5vw, 5vw 5vw; } } @keyframes pt-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } } @keyframes pt-bar-fill { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .frame { position: relative; isolation: isolate; min-height: 100vh; padding: var(--shell-py) var(--shell-px) calc(var(--shell-py) - 16px); overflow: hidden; } /* grid ortogonal ultra-sutil mascarado por radial */ .frame::before { content: ""; position: absolute; inset: 0; z-index: var(--z-bg); background-image: linear-gradient(rgba(244, 241, 234, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 234, 0.022) 1px, transparent 1px); background-size: 5vw 5vw; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 100%); animation: pt-grid-drift 60s linear infinite; pointer-events: none; } /* glow radial respirando */ .frame::after { content: ""; position: absolute; inset: 0; z-index: var(--z-bg); background: radial-gradient(ellipse 1200px 600px at 50% 50%, rgba(0, 255, 170, 0.06), transparent 70%), radial-gradient(ellipse 800px 400px at 25% 70%, rgba( 74, 124, 255, 0.03), transparent 70%), radial-gradient(ellipse 800px 400px at 75% 30%, rgba(132, 101, 50, 0.03), transparent 70%); animation: pt-breathe 8s ease-in-out infinite; pointer-events: none; } /* fractal noise textura analógica — elemento separado para responder a prefers-reduced-motion */ .frame > .frame-noise { position: absolute; inset: 0; z-index: var(--z-deco); opacity: 0.025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; animation: pt-noise-shift 0.5s steps(6) infinite; } /* corners L-shape */ .frame > .frame-corners { position: absolute; inset: 0; z-index: var(--z-deco); pointer-events: none; } .frame-corners > .corner { position: absolute; width: 56px; height: 56px; border: 1px solid var(--c-electric); opacity: 0.5; } .frame-corners > .corner.tl { top: 32px; left: 32px; border-right: none; border-bottom: none; } .frame-corners > .corner.tr { top: 32px; right: 32px; border-left: none; border-bottom: none; } .frame-corners > .corner.bl { bottom: 32px; left: 32px; border-right: none; border-top: none; } .frame-corners > .corner.br { bottom: 32px; right: 32px; border-left: none; border-top: none; } /* framelines */ .frame > .frame-lines { position: absolute; inset: 0; z-index: var(--z-deco); pointer-events: none; } .frame-lines > span { position: absolute; background: var(--c-electric); opacity: 0.12; } .frame-lines > span.h { left: 0; right: 0; height: 1px; } .frame-lines > span.v { top: 0; bottom: 0; width: 1px; } .frame-lines > span.h.t { top: 68px; } .frame-lines > span.h.b { bottom: 68px; } .frame-lines > span.v.l { left: 68px; } .frame-lines > span.v.r { right: 68px; } /* registration marks (cruz + ring rotacionando) */ .frame > .frame-regs { position: absolute; inset: 0; z-index: var(--z-deco); pointer-events: none; } .frame-regs > .reg { position: absolute; width: 28px; height: 28px; opacity: 0.6; top: 50%; transform: translateY(-50%); } .frame-regs > .reg.l { left: 32px; } .frame-regs > .reg.r { right: 32px; } .frame-regs > .reg::before, .frame-regs > .reg::after { content: ""; position: absolute; background: var(--c-electric); } .frame-regs > .reg::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } .frame-regs > .reg::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .frame-regs > .reg > .reg-ring { position: absolute; inset: 4px; border: 1px solid var(--c-electric); border-top-color: transparent; border-radius: 50%; animation: pt-spin 80s linear infinite; } /* conteúdo sempre acima da decoração */ .frame > .frame-content { position: relative; z-index: var(--z-content); } /* cursor blink reutilizável */ .cursor-blink { display: inline-block; width: 0.5em; height: 0.85em; background: var(--c-electric); vertical-align: text-bottom; animation: pt-blink 1s steps(1) infinite; } /* foco visível auditável (Codex) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--c-electric); outline-offset: 4px; border-radius: 2px; } /* ===== visibility pause (Codex) ===== quando aba oculta, classe .is-hidden no para todas as animações custosas — pseudo-elementos não podem ser pausados via JS direto. */ html.is-hidden .frame::before, html.is-hidden .frame::after, html.is-hidden .frame-noise, html.is-hidden .reg-ring, html.is-hidden .cursor-blink, html.is-hidden .pt-wave-bar, html.is-hidden .pt-bar-fill { animation-play-state: paused; } /* ===== prefers-reduced-motion ===== noise e ring spin desabilitados; demais animações em 0.001ms. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .frame-noise { display: none; } .reg-ring { animation: none; } .frame::before, .frame::after { animation: none; } } /* ===== mobile (Codex review §5: breakpoint pobre no original) ===== */ @media (max-width: 640px) { .frame { padding: 56px 22px 40px; } .frame-corners > .corner { width: 28px; height: 28px; } .frame-corners > .corner.tl, .frame-corners > .corner.tr { top: 18px; } .frame-corners > .corner.bl, .frame-corners > .corner.br { bottom: 18px; } .frame-corners > .corner.tl, .frame-corners > .corner.bl { left: 18px; } .frame-corners > .corner.tr, .frame-corners > .corner.br { right: 18px; } .frame-regs { display: none; } /* clutter em mobile */ .frame-lines { display: none; } }