/* ===================================================== * Raj Collection — WORLD-CLASS POLISH LAYER * Hermès / Loewe / Sabyasachi-tier motion choreography. * Loaded last in the cascade. * ===================================================== */ /* ===================================================== * 1. SECTION ENTRANCE CASCADE * Each main > section starts subtly below + slightly blurred, * scroll-reveal lifts it with silk timing. * ===================================================== */ @media (prefers-reduced-motion: no-preference) { /* Only data-reveal elements (with explicit reveal intent) start hidden */ [data-reveal]:not(.is-revealed):not(.is-visible) { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(4px); transition: opacity 880ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter; } /* Sections themselves stay visible by default — protected against JS failure */ main > section, main > .rcs-section { opacity: 1; transform: none; filter: none; } main > section.is-revealed, main > section.is-visible, main > .rcs-section.is-revealed, main > .rcs-section.is-visible, [data-reveal].is-revealed, [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } /* Safety: never trap content invisibly after 3s */ main > section, main > .rcs-section, [data-reveal] { animation: rcs-section-safety 880ms cubic-bezier(0.16, 1, 0.3, 1) 3s forwards; } @keyframes rcs-section-safety { to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } } } /* ===================================================== * 2. PRODUCT CARD HOVER — silky lift with gold mark * ===================================================== */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .rcs-product-card { position: relative; transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 640ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .rcs-product-card::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(135deg, transparent 30%, rgba(201,169,97,0.45) 50%, transparent 70%) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .rcs-product-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -16px rgba(28, 26, 25, 0.18), 0 0 0 1px rgba(201, 169, 97, 0.2); } .rcs-product-card:hover::after { opacity: 1; } .rcs-product-card__media img { transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) !important; } .rcs-product-card:hover .rcs-product-card__media img { transform: scale(1.05); } } /* ===================================================== * 3. BUTTON CLICK — micro-haptic feel * ===================================================== */ .rcs-btn, button.rcs-btn, a.rcs-btn, .wp-block-button__link { transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), background 280ms cubic-bezier(0.16, 1, 0.3, 1); } .rcs-btn:active, button.rcs-btn:active, a.rcs-btn:active, .wp-block-button__link:active { transform: scale(0.96); } .rcs-btn--lg:active, .rcs-btn--primary:active { transform: scale(0.97); } /* ===================================================== * 4. INPUT FOCUS — gold thread highlight slide-in * ===================================================== */ @media (prefers-reduced-motion: no-preference) { input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select { transition: border-color 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1), background 320ms cubic-bezier(0.16, 1, 0.3, 1); position: relative; } input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus { outline: none; border-color: var(--rcs-primary); box-shadow: 0 0 0 4px rgba(107, 26, 46, 0.10), 0 0 0 1px var(--rcs-primary), 0 4px 16px -4px rgba(107, 26, 46, 0.18); } } /* ===================================================== * 5. PAGE TRANSITION — view transition crossfade * (Already enabled in micro-polish; refine timing here) * ===================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 480ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } ::view-transition-old(root) { animation-name: rcs-vt-out; } ::view-transition-new(root) { animation-name: rcs-vt-in; } @keyframes rcs-vt-out { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } } @keyframes rcs-vt-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ===================================================== * 6. SCROLL INDICATOR — subtle, gold, top-of-page * (already added scroll-thread; this refines) * ===================================================== */ .rcs-scroll-thread::after { transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1); } /* ===================================================== * 7. PRICE — animated count-up on first visibility (data-rcs-count) * Markup: 0 * ===================================================== */ [data-rcs-count] { font-variant-numeric: tabular-nums; } /* ===================================================== * 8. SECTION DIVIDERS — gold thread between sections * ===================================================== */ .rcs-section + .rcs-section::before, section + section::before { content: ''; display: block; width: 60px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--rcs-accent), transparent); opacity: 0.5; } /* ===================================================== * 9. GOLD ACCENT PULSE — for "SHOP THE EDIT" and prime CTAs * ===================================================== */ @media (prefers-reduced-motion: no-preference) { .rcs-btn--lg.rcs-pulse, .rcs-hero__cta .rcs-btn--lg { position: relative; } .rcs-hero__cta .rcs-btn--lg::after, .rcs-btn--lg.rcs-pulse::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 1px solid var(--rcs-accent); opacity: 0; animation: rcs-gold-pulse 4.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; pointer-events: none; } @keyframes rcs-gold-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.03); } } } /* ===================================================== * 10. HERO TITLE — gold cursor blink after typing * (only renders if .rcs-hero__title has data-typed-done) * ===================================================== */ .rcs-hero__title[data-typed-done]::after { content: ''; display: inline-block; width: 2px; height: 0.85em; margin-left: 6px; background: var(--rcs-accent); vertical-align: middle; animation: rcs-cursor-blink 1.2s steps(2, end) infinite; } @keyframes rcs-cursor-blink { 50% { opacity: 0; } } /* ===================================================== * 11. BADGE FLIGHT — when cart count changes * ===================================================== */ @keyframes rcs-badge-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } } .rcs-cart-added .rcs-badge-cart, .rcs-cart-added [data-bag-count] { animation: rcs-badge-pop 540ms cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--rcs-accent) !important; }