/* ========================================================= KIORA AMOREZ — Premium Interaction Layer Animations are JS-gated (.js-anim on ) so the site is fully visible if JS fails. Reduced-motion aware. ========================================================= */ /* ---------- Scroll reveal (only hidden once JS is ready) ---------- */ .js-anim .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); will-change: opacity, transform; } .js-anim .reveal.in { opacity: 1; transform: none; } .js-anim .reveal-stagger > * { opacity: 0; transform: translateY(34px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); } .js-anim .reveal-stagger.in > * { opacity: 1; transform: none; } .js-anim .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.00s; } .js-anim .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.07s; } .js-anim .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.14s; } .js-anim .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.21s; } .js-anim .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.28s; } .js-anim .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.35s; } .js-anim .reveal-stagger.in > *:nth-child(7) { transition-delay: 0.42s; } .js-anim .reveal-stagger.in > *:nth-child(8) { transition-delay: 0.49s; } /* Image clip reveal — luxe wipe */ .js-anim .img-reveal { overflow: hidden; } .js-anim .img-reveal img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.3s cubic-bezier(0.76,0,0.24,1), transform 1.6s cubic-bezier(0.22,1,0.36,1); } .js-anim .img-reveal.in img { clip-path: inset(0 0 0 0); transform: scale(1); } /* ---------- Hero: block rise ---------- */ .js-anim .hero h1 { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s; } .js-anim .hero.lit h1 { opacity: 1; transform: none; } .js-anim .hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; } .js-anim .hero h1 .word > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(0.22,1,0.36,1); } .js-anim .hero.lit h1 .word > span { transform: translateY(0); } .js-anim .hero h1 .word:nth-child(1) > span { transition-delay: 0.15s; } .js-anim .hero h1 .word:nth-child(2) > span { transition-delay: 0.23s; } .js-anim .hero h1 .word:nth-child(3) > span { transition-delay: 0.31s; } .js-anim .hero h1 .word:nth-child(4) > span { transition-delay: 0.39s; } .js-anim .hero h1 .word:nth-child(5) > span { transition-delay: 0.47s; } .js-anim .hero h1 .word:nth-child(6) > span { transition-delay: 0.55s; } .js-anim .hero .eyebrow, .js-anim .hero p, .js-anim .hero .hero-cta, .js-anim .hero .hero-meta { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .js-anim .hero.lit .eyebrow { transition-delay: 0.1s; } .js-anim .hero.lit p { transition-delay: 0.6s; } .js-anim .hero.lit .hero-cta { transition-delay: 0.72s; } .js-anim .hero.lit .hero-meta { transition-delay: 0.84s; } .js-anim .hero.lit .eyebrow, .js-anim .hero.lit p, .js-anim .hero.lit .hero-cta, .js-anim .hero.lit .hero-meta { opacity: 1; transform: none; } /* Hero parallax layer */ .hero-bg { will-change: transform; } /* ---------- Header scroll states ---------- */ .header { transition: transform 0.5s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .header.scrolled { background: rgba(243, 234, 216, 0.98); box-shadow: 0 8px 40px -18px rgba(12, 30, 56, 0.28); } .header.hide { transform: translateY(-100%); } /* ---------- Scroll progress bar (gold) ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--coral)); z-index: 1200; transition: width 0.1s linear; } /* ---------- Custom cursor (desktop only) ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 999px; pointer-events: none; z-index: 3000; mix-blend-mode: difference; opacity: 0; transition: opacity 0.3s; } .cursor-dot { width: 6px; height: 6px; background: #fff; transform: translate(-50%, -50%); } .cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.6); transform: translate(-50%, -50%); transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.3s, background 0.25s; } .cursor-ring.hover { width: 56px; height: 56px; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.9); } @media (hover: hover) and (pointer: fine) { body.has-cursor { cursor: none; } body.has-cursor a, body.has-cursor button, body.has-cursor .product-card, body.has-cursor .cat-card, body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: none; } .cursor-dot.active, .cursor-ring.active { opacity: 1; } } @media (max-width: 1024px) { .cursor-dot, .cursor-ring { display: none; } } /* ---------- Magnetic buttons ---------- */ .btn, .icon-btn { will-change: transform; } /* ---------- Count-up ---------- */ .count-up { font-variant-numeric: tabular-nums; } /* ---------- Product card image zoom polish ---------- */ .product-card .product-img, .cat-card, .collection-card, .journal-img { will-change: transform; } /* Gold underline draw on section headings */ .js-anim .section-head h2 { position: relative; } /* ---------- Reduced motion: disable everything ---------- */ @media (prefers-reduced-motion: reduce) { .js-anim .reveal, .js-anim .reveal-stagger > *, .js-anim .img-reveal img, .js-anim .hero h1 .word > span, .js-anim .hero .eyebrow, .js-anim .hero p, .js-anim .hero .hero-cta, .js-anim .hero .hero-meta { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .cursor-dot, .cursor-ring { display: none !important; } .header.hide { transform: none !important; } * { scroll-behavior: auto !important; } }