/* ============================================================ ANIMATIONS.CSS — DJ's Dockside Premium motion system — restraint over spectacle Every animation here is intentional. Nothing moves for show. ============================================================ */ /* ── Easing curves ── --ease-out-expo : fast start, slow finish — for entrances --ease-in-out : symmetric — for transitions --ease-spring : slight overshoot — for interactive elements */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 180ms; --duration-base: 380ms; --duration-slow: 600ms; --duration-enter: 800ms; } /* ============================================================ PAGE ENTER — every page fades in on load Applied to via JS class toggle on DOMContentLoaded ============================================================ */ body { opacity: 0; transition: opacity 400ms var(--ease-out-expo); } body.page-ready { opacity: 1; } /* ============================================================ NAV — backdrop blur + smooth background transition ============================================================ */ #mainNav { transition: background var(--duration-base) var(--ease-in-out), padding var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out), backdrop-filter var(--duration-base) var(--ease-in-out); } /* Scrolled state gets a subtle blur behind it */ #mainNav.scrolled { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.92); } /* ============================================================ HERO IMAGE — subtle scale-in on load The hero-bg scales from 1.04 to 1.0 as page enters ============================================================ */ .hero-bg, .page-hero__bg { transform: scale(1.04); transition: transform 1.4s var(--ease-out-expo); } body.page-ready .hero-bg, body.page-ready .page-hero__bg { transform: scale(1.0); } /* ============================================================ SCROLL REVEAL SYSTEM Replaces the existing .fade-up with a more refined version. Three variants for staggered groups. ============================================================ */ /* Base reveal — used on standalone elements */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-enter) var(--ease-out-expo), transform var(--duration-enter) var(--ease-out-expo); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger variants — apply to children in a grid/list */ .reveal-group > * { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-enter) var(--ease-out-expo), transform var(--duration-enter) var(--ease-out-expo); } .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); } .reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); } .reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); } .reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); } .reveal-group.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); } .reveal-group.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); } /* Fade only — for elements that shouldn't move */ .reveal-fade { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out-expo); } .reveal-fade.is-visible { opacity: 1; } /* ============================================================ ROPE LINE — animate width on scroll reveal ============================================================ */ .rope-line { width: 0; transition: width var(--duration-slow) var(--ease-out-expo); } /* Triggered by JS when parent section enters viewport */ .rope-line.is-visible { width: 48px; } /* ============================================================ BUTTONS — micro-interaction on hover/active ============================================================ */ .btn-primary-dark, .btn-primary-blue, .btn-outline-dark, .btn-outline-white, .btn-amber { transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-in-out); } .btn-primary-dark:hover, .btn-primary-blue:hover, .btn-outline-dark:hover, .btn-outline-white:hover, .btn-amber:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,46,52,0.15); } .btn-primary-dark:active, .btn-primary-blue:active, .btn-outline-dark:active, .btn-outline-white:active, .btn-amber:active { transform: translateY(0); box-shadow: none; transition-duration: 80ms; } /* ============================================================ CARDS — lift on hover ============================================================ */ .lodge-card, .event-card, .t-card, .nearby-card, .philosophy-card, .about-stat, .dine-feat, .amenity-card, .signature-card, .direction-card, .faq-item, .contact-info-card, .hours-card { transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo), border-color var(--duration-base) var(--ease-out-expo), background var(--duration-base) var(--ease-in-out); } /* ============================================================ ACTIVITY CARDS (explore page) — image scale on hover ============================================================ */ .act-bg { transition: transform 600ms var(--ease-out-expo); } .activity-card:hover .act-bg { transform: scale(1.06); } /* ============================================================ GALLERY — crossfade between images ============================================================ */ .room-gallery__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease-in-out); display: block; /* override display:none — use opacity instead */ } .room-gallery__img--active { opacity: 1; position: relative; /* active image holds the layout height */ } /* Gallery track needs relative positioning for absolute children */ .room-gallery__track { position: relative; overflow: hidden; } /* ============================================================ SEASON NAV TABS — underline slide ============================================================ */ .season-tab { position: relative; transition: color var(--duration-fast) var(--ease-in-out), border-bottom-color var(--duration-fast) var(--ease-in-out); } /* ============================================================ OWNER SECTION — image reveal from slight vertical offset ============================================================ */ .owner-section__portrait, .about-origin__img, .activity-section__img { transition: transform var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo); } .owner-section__portrait:hover, .about-origin__img:hover { transform: scale(1.01); box-shadow: var(--shadow-lg); } /* ============================================================ STAT NUMBERS — count-up handled by JS, just needs opacity ============================================================ */ .stat-number, .about-stat__number { transition: opacity var(--duration-slow) var(--ease-out-expo); } /* ============================================================ FOOTER SOCIAL BUTTONS ============================================================ */ .soc-btn { transition: border-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out), background var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-spring); } .soc-btn:hover { transform: translateY(-2px); } /* ============================================================ BOOKING BAR — smooth slide up ============================================================ */ #booking-bar { transition: transform 400ms var(--ease-out-expo); } /* ============================================================ FAQ ACCORDION — smooth height animation (max-height approach already in contact CSS, this just improves the easing) ============================================================ */ .faq-answer { transition: max-height 380ms var(--ease-out-expo), padding 380ms var(--ease-out-expo); } .faq-icon { transition: transform 300ms var(--ease-spring); } /* ============================================================ SECTION DIVIDER LINE — rope-line animate on page entry ============================================================ */ .page-hero__content .rope-line { /* Hero rope line triggers immediately with page enter delay */ transition-delay: 600ms; } /* ============================================================ REDUCED MOTION — respect user preference All animations are disabled for users who prefer reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body { opacity: 1; } .hero-bg, .page-hero__bg { transform: scale(1); } .reveal, .reveal-group > *, .reveal-fade { opacity: 1; transform: none; } .rope-line { width: 48px; } }