/** * Mary Belle — Animation System v7 (Clean rewrite) * * Architecture: * - JS adds `class="mb-js"` to on load * - All hide rules scoped under `.mb-js` * - Without JS = everything visible, no animation dependency * - Safety timeout: all elements auto-reveal after 3s */ /* ============================================ 0. CURTAIN — Page load reveal ============================================ */ .mb-curtain__text { opacity: 0; transform: translateY(10px); animation: mb-curtain-text 0.8s ease 0.1s forwards; } @keyframes mb-curtain-text { to { opacity: 1; transform: translateY(0); } } /* Page hidden during curtain (JS only) */ .mb-js .mb-page { opacity: 0; transition: opacity 0.6s ease; } .mb-js .mb-page--visible { opacity: 1; } /* ============================================ 1. SCROLL REVEAL ============================================ */ .mb-js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .mb-js [data-reveal="fade-up"] { transform: translateY(40px); } .mb-js [data-reveal="fade-down"] { transform: translateY(-40px); } .mb-js [data-reveal="fade-left"] { transform: translateX(60px); } .mb-js [data-reveal="fade-right"] { transform: translateX(-60px); } .mb-js [data-reveal="zoom"] { transform: scale(0.92); } .mb-js [data-reveal="fade"] { transform: none; } /* Revealed state */ .mb-js [data-reveal].mb-revealed { opacity: 1; transform: none; } /* Safety: auto-reveal everything after animation timeout */ .mb-js .mb-force-visible [data-reveal] { opacity: 1; transform: none; } /* ============================================ 2. HERO ENTRANCE ============================================ */ .mb-js .mb-hero__label, .mb-js .mb-hero__title, .mb-js .mb-hero__subtitle, .mb-js .mb-hero__actions { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; } .mb-js .mb-hero__label { transition-delay: 0.2s; } .mb-js .mb-hero__title { transition-delay: 0.4s; } .mb-js .mb-hero__subtitle { transition-delay: 0.7s; } .mb-js .mb-hero__actions { transition-delay: 1.0s; } .mb-hero--entered .mb-hero__label, .mb-hero--entered .mb-hero__title, .mb-hero--entered .mb-hero__subtitle, .mb-hero--entered .mb-hero__actions { opacity: 1; transform: none; } /* ============================================ 3. TEXT WORD REVEAL ============================================ */ .mb-text-word { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .mb-text-revealed .mb-text-word { opacity: 1; transform: none; } /* ============================================ 4. SECTION TITLE UNDERLINE ============================================ */ .mb-section__title::after { content: ''; display: block; width: 0; height: 1px; background: #8b6d4b; margin: 20px auto 0; transition: width 1s ease; } .mb-revealed .mb-section__title::after, .mb-section__title.mb-revealed::after { width: 60px; } /* ============================================ 5. PRICE TABLE ROWS — Stagger in ============================================ */ .mb-js .mb-prices__table.mb-revealed tbody tr { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; } /* ============================================ 6. FAQ ACCORDION ============================================ */ .mb-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; } .mb-faq__answer > div { overflow: hidden; } .mb-faq__item[open] .mb-faq__answer { grid-template-rows: 1fr; } /* ============================================ 7. GALLERY HOVER ============================================ */ @media (hover: hover) { .mb-gallery__item:hover { z-index: 2; } } /* ============================================ 8. SCROLL HINT ============================================ */ .mb-hero__scroll-hint { opacity: 0; transition: opacity 1s ease 2s; } .mb-hero--entered .mb-hero__scroll-hint { opacity: 1; } .mb-hero__scroll-hint span { display: block; width: 20px; height: 20px; border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); transform: rotate(45deg); animation: mb-scroll-bounce 2s ease-in-out infinite; } @keyframes mb-scroll-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; } 50% { transform: rotate(45deg) translate(5px, 5px); opacity: 1; } } /* ============================================ 9. SPLIT IMAGE — Zoom on reveal ============================================ */ .mb-js .mb-split__image[data-reveal] img { transform: scale(1.08); } .mb-js .mb-split__image.mb-revealed img { transform: scale(1); } /* ============================================ 10. FLOATING ELEMENTS ============================================ */ @keyframes mb-float { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(6px, -10px); } 66% { transform: translate(-4px, 4px); } } .mb-hero__float--1 { animation: mb-float 10s ease-in-out infinite; } .mb-hero__float--2 { animation: mb-float 7s ease-in-out infinite reverse; } /* ============================================ 11. MOBILE — Lighter, smoother animations ============================================ */ @media (max-width: 768px) { /* Smaller hero entrance movement */ .mb-js .mb-hero__label, .mb-js .mb-hero__title, .mb-js .mb-hero__subtitle, .mb-js .mb-hero__actions { transform: translateY(12px); transition-duration: 0.6s; } /* Faster delays — don't make mobile users wait */ .mb-js .mb-hero__label { transition-delay: 0.1s; } .mb-js .mb-hero__title { transition-delay: 0.2s; } .mb-js .mb-hero__subtitle { transition-delay: 0.35s; } .mb-js .mb-hero__actions { transition-delay: 0.5s; } /* Hide decorative floating elements */ .mb-hero__float { display: none; } /* Hide scroll hint on mobile */ .mb-hero__scroll-hint { display: none; } /* Scroll reveal: reduce distance, faster transition */ .mb-js [data-reveal] { transform: translateY(16px); transition-duration: 0.5s; } .mb-js [data-reveal="fade-up"] { transform: translateY(16px); } .mb-js [data-reveal="fade-down"] { transform: translateY(-16px); } .mb-js [data-reveal="fade-left"] { transform: translateX(16px); } .mb-js [data-reveal="fade-right"] { transform: translateX(-16px); } .mb-js [data-reveal="zoom"] { transform: scale(0.97); } .mb-js [data-reveal="fade"] { transform: none; } /* Revealed state stays the same */ .mb-js [data-reveal].mb-revealed { opacity: 1; transform: none; } /* Force visible (safety timeout) stays the same */ .mb-js .mb-force-visible [data-reveal] { opacity: 1; transform: none; } } /* ============================================ 12. SMALL MOBILE — Minimal animations ============================================ */ @media (max-width: 480px) { /* Even smaller movement on tiny screens */ .mb-js [data-reveal] { transform: translateY(10px); } .mb-js [data-reveal="fade-up"] { transform: translateY(10px); } .mb-js [data-reveal="fade-down"] { transform: translateY(-10px); } .mb-js [data-reveal="fade-left"] { transform: translateX(10px); } .mb-js [data-reveal="fade-right"] { transform: translateX(-10px); } /* Even faster entrance */ .mb-js .mb-hero__label { transition-delay: 0.05s; } .mb-js .mb-hero__title { transition-delay: 0.15s; } .mb-js .mb-hero__subtitle { transition-delay: 0.25s; } .mb-js .mb-hero__actions { transition-delay: 0.35s; } } /* ─── prefers-reduced-motion (WCAG 2.1) ──────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .mb-curtain { display: none !important; } .mb-js [data-reveal] { opacity: 1 !important; transform: none !important; } .mb-hero, .mb-hero__label, .mb-hero__title, .mb-hero__subtitle, .mb-hero__actions { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; } .mb-page { opacity: 1 !important; } .mb-text-reveal__word { opacity: 1 !important; transform: none !important; } }