/* ============================================================ MyPerfumes — presentational motion layer ------------------------------------------------------------ Purely additive. Load AFTER sharedCSS(): Changes no HTML, no content, no schema, no URLs. Every rule is opacity / transform / shadow / colour only. Scroll-reveal rules are gated behind html[data-mpm] which is set by myperfumes-motion.js — with JS off, nothing hides. ============================================================ */ @keyframes mpRise {from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}} @keyframes mpReveal {from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}} @keyframes mpFade {from{opacity:0} to{opacity:1}} @keyframes mpChip {from{opacity:0;transform:translateX(-10px) scale(.94)} to{opacity:1;transform:none}} @keyframes mpSheen {0%{transform:translateX(-120%) skewX(-18deg)} 55%,100%{transform:translateX(240%) skewX(-18deg)}} @keyframes mpPulse {0%,100%{box-shadow:0 0 0 0 rgba(225,57,44,.45)} 70%{box-shadow:0 0 0 12px rgba(225,57,44,0)}} @keyframes mpFloat {0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}} @keyframes mpShimmer {0%{transform:translateX(-100%)} 100%{transform:translateX(400%)}} @keyframes mpUnderline {from{transform:scaleX(0)} to{transform:scaleX(1)}} @keyframes mpBump {0%,100%{transform:scale(1)} 40%{transform:scale(1.35)}} @keyframes mpBottleIn {0%{opacity:0;transform:translateY(52px) scale(.9)} 62%{opacity:1;transform:translateY(-8px) scale(1.015)} 100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes mpReflectIn {from{opacity:0;transform:scaleY(-1) translateY(14px)} to{opacity:.2;transform:scaleY(-1) translateY(0)}} @keyframes mpSharp {from{opacity:0;filter:blur(12px)} to{opacity:1;filter:blur(0)}} @keyframes mpStamp {0%{opacity:0;transform:scale(1.7) rotate(-7deg)} 60%{opacity:1;transform:scale(.96) rotate(1.5deg)} 100%{opacity:1;transform:none}} @keyframes mpWord {from{opacity:0;transform:translateY(7px);filter:blur(4px)} to{opacity:1;transform:none;filter:blur(0)}} /* ── PDP TEXT CHOREOGRAPHY ───────────────────────────────── price sharpens → "You save" stamps → description wipes in word by word. Replays every time the block re-enters view. The animations carry their own from-state via `both` fill — there is deliberately NO standalone opacity:0 rule, so if the observer never fires (or JS dies mid-way) the text stays fully visible. */ html[data-mpm] [data-mp-choreo][data-mp-play] .pdp-price{animation:mpSharp .75s cubic-bezier(.16,1,.3,1) both} html[data-mpm] [data-mp-choreo][data-mp-play] .pdp-orig {animation:mpSharp .75s cubic-bezier(.16,1,.3,1) .12s both} html[data-mpm] [data-mp-choreo][data-mp-play] .pdp-save {animation:mpStamp .55s cubic-bezier(.34,1.56,.64,1) .3s both;display:inline-block} html[data-mpm] [data-mp-choreo][data-mp-play] .pdp-desc span[data-mp-w]{animation:mpWord .45s ease both} /* underline sweep — brand link + shipping line */ .pdp-brand a,.pdp-shipping{position:relative;display:inline-block} .pdp-brand a::after,.pdp-shipping::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1)} .pdp-brand a:hover::after,.pdp-shipping:hover::after{transform:scaleX(1)} .pdp-brand a:hover{text-decoration:none} /* ── PROMO STRIP ───────────────────────────────────────────── */ .promo-strip{position:fixed;overflow:hidden} .promo-strip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:80px; background:linear-gradient(90deg,transparent,rgba(246,197,24,.18),transparent); animation:mpShimmer 5.5s linear infinite;pointer-events:none} /* ── HEADER ────────────────────────────────────────────────── */ .nav{transition:padding .3s cubic-bezier(.16,1,.3,1),box-shadow .3s} html[data-mpm-scrolled] .nav{padding-top:9px;padding-bottom:9px;box-shadow:0 6px 22px rgba(29,29,55,.22)} .nav-icon{transition:color .3s,transform .3s} .nav-icon:hover{transform:translateY(-2px)} .nav-link{position:relative} .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#f6c518; transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)} .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)} .cart-count.mp-bump{animation:mpBump .45s cubic-bezier(.16,1,.3,1)} /* ── PDP HERO: staggered entrance ─────────────────────────── */ .pdp .breadcrumb{animation:mpRise .5s ease both} .pdp-image{animation:mpFade .7s ease both;overflow:hidden} /* entrance: the bottle rises and settles */ .pdp-image > img{animation:mpBottleIn 1.1s cubic-bezier(.22,1.15,.36,1) .15s both;position:relative;z-index:2} /* hover zoom rides on a wrapper transform so it never fights the entrance keyframes */ .pdp-image > img{transition:filter .6s ease} .pdp-image:hover > img{filter:saturate(1.05) contrast(1.02)} /* cursor spotlight — position driven by --mx/--my from myperfumes-motion.js */ .pdp-image .mp-spot{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px; border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s ease; mix-blend-mode:soft-light; background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,.35) 42%,rgba(255,255,255,0) 70%); transform:translate(var(--mx,50%),var(--my,50%))} .pdp-image:hover .mp-spot{opacity:1} /* mirror reflection — a JS-cloned, aria-hidden copy of the product image */ .pdp-image .mp-reflect{position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none; display:block;width:100%;height:38%;object-fit:contain;object-position:top; transform:scaleY(-1);opacity:.2;filter:blur(.5px); transition:opacity .45s ease,filter .45s ease; -webkit-mask-image:linear-gradient(to top,transparent 4%,#000 96%); mask-image:linear-gradient(to top,transparent 4%,#000 96%); animation:mpReflectIn 1.1s cubic-bezier(.22,1.15,.36,1) .28s both} .pdp-image:hover .mp-reflect{opacity:.38;filter:blur(1px)} .pdp-image::after{content:"";position:absolute;top:0;bottom:0;left:0;width:70px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:mpSheen 6s ease-in-out infinite} .pdp-badge{animation:mpChip .5s cubic-bezier(.16,1,.3,1) both} .pdp-badges .pdp-badge:first-child{animation:mpChip .5s cubic-bezier(.16,1,.3,1) both,mpPulse 2.8s ease-out 1.2s 3} .pdp-brand {animation:mpRise .55s cubic-bezier(.16,1,.3,1) .05s both} .pdp-title {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .10s both;text-wrap:pretty} .pdp-type {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .15s both} .pdp-desc {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .20s both} /* the description's own rise is dropped once the word wipe takes over */ html[data-mpm] .pdp-desc{animation:none} .pdp-prices {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .25s both} .pdp-sizes {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .35s both} .pdp-qty {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .45s both} .pdp-add {animation:mpRise .6s cubic-bezier(.16,1,.3,1) .50s both} .pdp-wishlist{animation:mpRise .6s cubic-bezier(.16,1,.3,1) .55s both} /* price + discount block */ .pdp-price{position:relative;display:inline-block} .pdp-price::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;opacity:.35; transform-origin:left;animation:mpUnderline .7s cubic-bezier(.16,1,.3,1) .5s both} /* ── SELECTORS / QTY / CTA ────────────────────────────────── */ .size-btn{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s,background .25s} .size-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px -14px rgba(29,29,55,.5)} .qty-btn{transition:background .25s,color .25s,transform .15s} .qty-btn:hover{background:#f6f6fa} .qty-btn:active{transform:scale(.92)} .pdp-add{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .3s} .pdp-add:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(42,32,100,.85)} .pdp-add:active:not(:disabled){transform:translateY(0) scale(.985)} .pdp-add .mp-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4); transform:scale(0);animation:mpRippleGo .6s ease-out forwards;pointer-events:none} @keyframes mpRippleGo{to{transform:scale(3.2);opacity:0}} .pdp-wishlist{transition:border-color .3s,color .3s,transform .2s} .pdp-wishlist:hover{transform:translateY(-2px)} /* ── TRUST BADGES ─────────────────────────────────────────── */ .trust-item{border-radius:8px;padding:6px 8px;transition:background .25s,color .25s,transform .25s; animation:mpChip .5s cubic-bezier(.16,1,.3,1) both} .pdp-trust .trust-item:nth-child(1){animation-delay:.60s} .pdp-trust .trust-item:nth-child(2){animation-delay:.68s} .pdp-trust .trust-item:nth-child(3){animation-delay:.76s} .pdp-trust .trust-item:nth-child(4){animation-delay:.84s} .trust-item:hover{background:#f6f6fa;color:#1d1d29;transform:translateY(-2px)} .trust-item:hover .trust-icon{transform:scale(1.18)} .trust-icon{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)} /* ── SHARE ────────────────────────────────────────────────── */ .share-btn{transition:all .25s} .share-btn:hover{transform:translateY(-2px)} /* ── TABS ─────────────────────────────────────────────────── */ .tab-btn{transition:color .3s,border-color .3s} .tab-content.active p{animation:mpRise .35s ease both} /* ── FAQ ACCORDION ────────────────────────────────────────── */ .pdp-faq details summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .25s} .pdp-faq details summary::-webkit-details-marker{display:none} .pdp-faq details summary:hover{color:#3b2f87} .pdp-faq details summary::after{content:"+";color:#3b2f87;font-weight:300;font-size:20px;line-height:1; flex-shrink:0;transition:transform .25s cubic-bezier(.16,1,.3,1)} .pdp-faq details[open] summary::after{transform:rotate(45deg)} .pdp-faq details[open] > p{animation:mpRise .3s ease both} /* ── PRODUCT CARDS (PDP related + shop/sale/brand grids) ──── */ .pcard{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s} .pcard .pimg{transition:transform .7s cubic-bezier(.16,1,.3,1)} .pcard:hover .pimg{transform:scale(1.06)} .pcard .pwish{transition:opacity .3s,color .3s,border-color .3s,transform .3s} .pcard:hover .pwish{transform:scale(1.08)} .pcard .padd{transition:background .3s,transform .2s,box-shadow .3s} .pcard .padd:hover{transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(42,32,100,.8)} .pcard .padd:active{transform:scale(.98)} .pbadge{animation:mpChip .45s cubic-bezier(.16,1,.3,1) both} /* ── LISTING PAGE CHROME (shop / sale / brand / new-arrivals) ── */ .filter-pill{transition:all .28s cubic-bezier(.16,1,.3,1)} .filter-pill:hover{transform:translateY(-2px)} .filter-select{transition:border-color .25s,box-shadow .25s} .filter-select:focus{box-shadow:0 0 0 3px rgba(59,47,135,.12)} .search-input{transition:border-color .25s,box-shadow .25s} .search-input:focus{box-shadow:0 0 0 3px rgba(59,47,135,.12)} .search-btn{transition:background .25s,transform .2s} .search-btn:active{transform:scale(.97)} .active-filter{animation:mpChip .4s cubic-bezier(.16,1,.3,1) both} .page-link{transition:all .25s} .page-link:hover{transform:translateY(-2px)} .shop-title{animation:mpRise .55s cubic-bezier(.16,1,.3,1) both} .shop-count{animation:mpRise .55s cubic-bezier(.16,1,.3,1) .08s both} /* ── FOOTER ───────────────────────────────────────────────── */ .footer-link{transition:color .3s,transform .25s} .footer-link:hover{transform:translateX(4px)} .footer-social a{transition:all .25s} /* ── BACK TO TOP ──────────────────────────────────────────── */ #backToTop{border-radius:50%;transition:opacity .3s,transform .3s cubic-bezier(.16,1,.3,1),background .3s} #backToTop:hover{transform:translateY(-3px) scale(1.06)} /* ── SCROLL REVEAL (JS-gated: no JS ⇒ always visible) ─────── */ html[data-mpm] .mp-rv{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} html[data-mpm] .mp-rv.mp-in{opacity:1;transform:none} html[data-mpm] .mp-rv-stagger.mp-in{transition-delay:var(--mp-d,0ms)} /* ── STICKY BUY BAR (mobile, JS-injected, aria-hidden) ────── */ .mp-buybar{position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;align-items:center;gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff; border-top:1px solid #eaeaf1;box-shadow:0 -8px 24px rgba(29,29,55,.12); transform:translateY(110%);transition:transform .35s cubic-bezier(.16,1,.3,1)} .mp-buybar.mp-show{transform:translateY(0)} .mp-buybar-price{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:#e1392c;white-space:nowrap} .mp-buybar-btn{flex:1;padding:14px;background:#3b2f87;border:none;border-radius:8px;color:#fff; font-family:'Outfit',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:600;cursor:pointer} .mp-buybar-btn:active{transform:scale(.985)} @media(max-width:768px){.mp-buybar{display:flex}} /* ── ACCESSIBILITY ────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} html[data-mpm] .mp-rv{opacity:1!important;transform:none!important} .mp-buybar{transform:translateY(0)} }