/* ============================================================ enhance.css — motion polish for Corvex (black + gold preserved) All reveal states are scoped under .reveal-ready, which enhance.js adds to ONLY when motion is allowed. So with no JS, or with prefers-reduced-motion, nothing is ever hidden — content shows as normal. ============================================================ */ /* Scroll reveal */ .reveal-ready [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change:opacity, transform; } .reveal-ready [data-reveal].is-visible{ opacity:1; transform:none; } /* Product card: smoother zoom + gold glow on hover */ .product-card{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .product-card img{ transition:transform .6s cubic-bezier(.16,1,.3,1); } .product-card:hover{ border-color:rgba(200,169,90,.5) !important; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(200,169,90,.25), 0 0 40px -12px rgba(200,169,90,.35); } .product-card:hover img{ transform:scale(1.07); } /* Cart badge bump when an item is added */ @keyframes cvxCartBump{ 0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)} } #cartCount.cart-bump{ animation:cvxCartBump .45s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion: reduce){ .reveal-ready [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } #cartCount.cart-bump{ animation:none !important; } .product-card, .product-card img{ transition:none !important; } } /* ============================================================ Mobile navigation (hamburger + dropdown) Burger and menu are desktop-hidden; the existing desktop links (.hidden.md:flex) take over at >=768px. ============================================================ */ .cvx-nav-right{ display:flex; align-items:center; gap:10px; } .cvx-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:9px; background:transparent; border:0; cursor:pointer; } .cvx-burger span{ display:block; height:2px; width:100%; background:#e5e5e5; border-radius:2px; transition:transform .3s ease, opacity .2s ease; } .cvx-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .cvx-burger.open span:nth-child(2){ opacity:0; } .cvx-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .cvx-mobile-menu{ display:none; overflow:hidden; max-height:0; background:#000; transition:max-height .35s ease; } .cvx-mobile-menu.open{ max-height:360px; border-bottom:1px solid rgba(200,169,90,.25); } .cvx-mobile-link{ display:block; padding:16px 24px; font-size:15px; letter-spacing:.04em; color:#e5e5e5; text-decoration:none; border-top:1px solid rgba(39,39,42,.7); transition:background .2s ease, color .2s ease; } .cvx-mobile-link:first-child{ border-top:0; } .cvx-mobile-link:hover, .cvx-mobile-link:active{ background:rgba(200,169,90,.08); color:#D4B96A; } @media (max-width:767px){ .cvx-burger{ display:flex; } .cvx-mobile-menu{ display:block; } }