/* ============================================================================= Terra D'Oro · Antigravity Animations animations.css — Motion design for botanical luxury aesthetic Philosophy: - Slow and considered — nothing snaps or bounces - Vertical reveals emphasise natural growth (like plants) - Respect prefers-reduced-motion at all times ============================================================================= */ /* 1. KEYFRAME DEFINITIONS ============================================================================= */ /* Page — fades in entire body after navigation */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Element reveal from below — primary entrance animation */ @keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Reveal from left — editorial/aside elements */ @keyframes revealLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } } /* Reveal from right — mirror of revealLeft */ @keyframes revealRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } /* Subtle scale from 98% — cards, images */ @keyframes revealScale { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* Botanical growth — SVG elements scale up from center */ @keyframes botanicalGrow { from { opacity: 0; transform: scale(0.85) rotate(-3deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Hero title — stagger-friendly word-by-word reveal */ @keyframes heroReveal { from { opacity: 0; transform: translateY(40px) skewY(1deg); } to { opacity: 1; transform: translateY(0) skewY(0deg); } } /* Scroll-line animation (hero indicator) */ @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } } /* Horizontal line expand — used by dividers on scroll-in */ @keyframes lineExpand { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } } /* Shimmer — skeleton loading placeholder */ @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* Pulse — availability indicator dots */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.92); } } /* Float — decorative botanical elements in background */ @keyframes botanicalFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-8px) rotate(1.5deg); } 66% { transform: translateY(5px) rotate(-1deg); } } /* 2. PAGE TRANSITION Applied to on load. Prevents flash of unstyled content. ============================================================================= */ body { animation: pageFadeIn 0.5s var(--ease-out, ease-out) both; } /* 3. SCROLL-TRIGGERED REVEAL SYSTEM Elements start hidden via .reveal class. IntersectionObserver in app.js adds .is-visible when in viewport. ============================================================================= */ /* Base reveal state — elements are invisible until JS adds .is-visible */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow, 600ms ease-out), transform var(--t-slow, 600ms ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Direction variants */ .reveal--left { transform: translateX(-24px); } .reveal--left.is-visible { transform: translateX(0); } .reveal--right { transform: translateX(24px); } .reveal--right.is-visible { transform: translateX(0); } .reveal--scale { transform: scale(0.96); } .reveal--scale.is-visible { transform: scale(1); } /* Botanical reveal — slightly rotated start */ .reveal--botanical { transform: scale(0.90) rotate(-4deg); transform-origin: center bottom; } .reveal--botanical.is-visible { transform: scale(1) rotate(0deg); } /* Stagger helpers — add to parent, children get auto-delays */ .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.55s var(--ease-out, ease-out), transform 0.55s var(--ease-out, ease-out); will-change: opacity, transform; } .stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; } .stagger-children.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; } .stagger-children.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; } .stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; } .stagger-children.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; } .stagger-children.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; } /* 4. HOVER MICROINTERACTIONS Applied directly in main.css on components where possible. Additional compound effects here. ============================================================================= */ /* Image parallax container — JS adds translateY via data-parallax */ .parallax-img { overflow: hidden; } .parallax-img img { will-change: transform; transition: transform 0.1s linear; /* Updated by rAF in JS */ } /* Link underline grow */ .link-grow { display: inline; background-image: linear-gradient(var(--color-sage), var(--color-sage)); background-size: 0% 1px; background-repeat: no-repeat; background-position: left bottom; transition: background-size var(--t-base, 300ms ease); padding-bottom: 2px; } .link-grow:hover { background-size: 100% 1px; } /* Botanical icon spin on hover */ .botanical-spin:hover svg { animation: botanicalGrow 0.6s var(--ease-out, ease-out) both; } /* 5. FLOATING DECORATIVE ELEMENTS Background botanical SVGs that drift slowly. ============================================================================= */ .botanical-float { animation: botanicalFloat 8s ease-in-out infinite; } .botanical-float:nth-child(2) { animation-delay: -2.5s; animation-duration: 10s; } .botanical-float:nth-child(3) { animation-delay: -5s; animation-duration: 7s; } /* 6. SKELETON LOADING Used in booking widget while availability is fetched. ============================================================================= */ .skeleton { background: linear-gradient( 90deg, var(--color-cream, #F2EDE4) 25%, var(--color-sand, #E8DFD0) 50%, var(--color-cream, #F2EDE4) 75% ); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm, 2px); color: transparent !important; pointer-events: none; } .skeleton-text { height: 1em; border-radius: 2px; display: block; margin-block: 0.35em; } /* 7. AVAILABILITY PULSE ============================================================================= */ .availability-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; animation: pulse 2s ease-in-out infinite; } .availability-dot--available { background: #6B9E5E; } .availability-dot--unavailable { background: #B85C5C; animation: none; } .availability-dot--partial { background: var(--color-sage, #8A9A5B); } /* 8. VIDEO HERO FADE-IN Video starts hidden; JS removes .video-loading after canplay event. ============================================================================= */ .hero__video { opacity: 0; transition: opacity 1.2s ease-out; } .hero__video.is-loaded { opacity: 1; } /* 9. MODAL / OVERLAY ============================================================================= */ .overlay { position: fixed; inset: 0; background: rgba(44, 44, 44, 0.75); backdrop-filter: blur(4px); z-index: var(--z-overlay, 50); opacity: 0; pointer-events: none; transition: opacity var(--t-base, 300ms ease); } .overlay.is-open { opacity: 1; pointer-events: auto; } /* 10. REDUCED MOTION All animations OFF for users who request it. This rule MUST remain at the bottom to override everything above. ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Reveal elements show immediately — no hiding */ .reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--botanical, .stagger-children > * { opacity: 1 !important; transform: none !important; } body { animation: none; } .hero__video { opacity: 1; } }