/* GlowRank v5 shared polish layer — motion, focus, micro-interactions. Progressive enhancement: scroll-reveal only activates when polish.js adds .js-reveal to , so content is always visible if JS fails. */ :root { --gr-ease-out: cubic-bezier(.16,1,.3,1); --gr-dur: .5s; } /* Branded focus rings everywhere (a11y + premium) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold, #B8965A); outline-offset: 2px; border-radius: 3px; } /* Button press state (tactile) */ a[class*="btn"], button[class*="btn"], .btn-primary, .btn-secondary, .price-btn, .upgrade-cta, .nav-cta, .btn { transition: transform .15s var(--gr-ease-out), background .2s, box-shadow .2s, color .2s; } a[class*="btn"]:active, button[class*="btn"]:active, .btn-primary:active, .price-btn:active, .upgrade-cta:active, .btn:active { transform: translateY(0) scale(.985); } /* CTA arrow micro-interaction (polish.js wraps trailing arrows in .gr-arrow) */ .gr-arrow { display:inline-block; transition: transform .25s var(--gr-ease-out); } a:hover .gr-arrow, button:hover .gr-arrow { transform: translateX(4px); } /* Scroll-reveal — gated on html.js-reveal so it never hides content without JS */ .js-reveal .gr-reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; } .js-reveal .gr-reveal.gr-in { opacity: 1; transform: none; transition: opacity var(--gr-dur) var(--gr-ease-out), transform var(--gr-dur) var(--gr-ease-out); } @media (prefers-reduced-motion: reduce) { .js-reveal .gr-reveal, .js-reveal .gr-reveal.gr-in { opacity:1 !important; transform:none !important; transition:none !important; } .gr-arrow { transition:none !important; } * { scroll-behavior:auto !important; } }