/* ========================================================================== Drah — Unified animation layer (loaded last). One consistent motion style across the whole site: soft, quick, premium. Standard easing + timings: --drah-ease : cubic-bezier(.22,.61,.36,1) (gentle ease-out) --drah-fast : .2s (micro-interactions: hovers, taps) --drah-mid : .32s (reveals: popups, panels, conditional fields) All large reveals are gated behind prefers-reduced-motion for accessibility. ========================================================================== */ :root { --drah-ease: cubic-bezier(.22, .61, .36, 1); --drah-fast: .2s; --drah-mid: .32s; } /* ---------- 1. Scroll-in reveal (JS adds .drah-inview when visible) ---------- FAIL-SAFE: reveals only hide when has .drah-anim-ready (added by JS). If the reveal JS never runs, content stays fully visible. */ .drah-anim-ready .drah-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--drah-mid) var(--drah-ease), transform var(--drah-mid) var(--drah-ease); will-change: opacity, transform; } .drah-anim-ready .drah-reveal.drah-inview { opacity: 1; transform: none; } /* ---------- 2. Size-chart popups (necklace + ring) fade + scale in ---------- */ .drah-chain-chart-overlay { opacity: 0; transition: opacity var(--drah-mid) var(--drah-ease); } .drah-chain-chart-overlay:not([hidden]) { opacity: 1; } .drah-chain-chart-dialog { transform: scale(.94) translateY(8px); opacity: 0; transition: transform var(--drah-mid) var(--drah-ease), opacity var(--drah-mid) var(--drah-ease); } .drah-chain-chart-overlay:not([hidden]) .drah-chain-chart-dialog { transform: none; opacity: 1; } /* ---------- 3. Conditional customization fields slide-down on reveal -------- */ .single-product .drah-product-custom-field.is-conditional-active, .single-product .drah-product-custom-field-gift_card_details.is-gift-message-active { animation: drah-field-in var(--drah-mid) var(--drah-ease); } @keyframes drah-field-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---------- 4. Gift-card panel reveal -------------------------------------- */ .single-product .drah-gift-card-panel:not([hidden]) { animation: drah-field-in var(--drah-mid) var(--drah-ease); } /* ---------- 5. FAQ accordion: smooth height + fade ------------------------- */ .drah-contact-native .drah-faq-answer, .drah-faq-answer { transition: height var(--drah-mid) var(--drah-ease), opacity var(--drah-mid) var(--drah-ease) !important; } .drah-faq-question::after, .drah-contact-native .drah-faq-question::after { transition: transform var(--drah-fast) var(--drah-ease), color var(--drah-fast) var(--drah-ease); } .drah-faq-item.is-open .drah-faq-question::after, .drah-contact-native .drah-faq-item.is-open .drah-faq-question::after { transform: rotate(45deg); } /* ---------- 6. Product tabs: crossfade the active panel -------------------- */ .single-product .drah-product-tab-content, .single-product .woocommerce-Tabs-panel { animation: drah-tab-in var(--drah-mid) var(--drah-ease); } @keyframes drah-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- 7. Consistent tap/hover feel on interactive controls ----------- */ .drah-product-option-pill, .drah-chain-chart-btn, .drah-ring-chart-btn, .drah-side-cart-qty__btn, .drah-faq-question, .drah-gift-card-switch { transition: transform var(--drah-fast) var(--drah-ease), background var(--drah-fast) var(--drah-ease), border-color var(--drah-fast) var(--drah-ease), color var(--drah-fast) var(--drah-ease), box-shadow var(--drah-fast) var(--drah-ease); } .drah-product-option-pill:active, .drah-chain-chart-btn:active, .drah-ring-chart-btn:active { transform: scale(.96); } /* Selected option pill gets a gentle pop */ .drah-product-option-pill:has(input:checked) { animation: drah-pill-pop var(--drah-fast) var(--drah-ease); } @keyframes drah-pill-pop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* ---------- 8. Add-to-cart button press feedback --------------------------- */ .single-product form.cart button.single_add_to_cart_button:active, .drah-order-by-whatsapp-btn:active, .drah-product-inquiry:active { transform: scale(.98); } /* ---------- Accessibility: respect reduced-motion -------------------------- */ @media (prefers-reduced-motion: reduce) { .drah-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .drah-chain-chart-overlay, .drah-chain-chart-dialog, .single-product .drah-product-custom-field.is-conditional-active, .single-product .drah-product-tab-content, .single-product .woocommerce-Tabs-panel, .single-product .drah-gift-card-panel:not([hidden]), .drah-product-option-pill:has(input:checked) { animation: none !important; transition: opacity .01s linear !important; transform: none !important; } }