/* ============================================================= ANIMATIONS.CSS — Keyframes, scroll-reveal, floating elements Kept subtle: calm, zen, never distracting. ============================================================= */ /* ══════════════════════════════════════════════ KEYFRAMES ══════════════════════════════════════════════ */ /* Gentle fade + rise — used for scroll-reveal */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Fade in only */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Slow drift left-right — used for background leaves */ @keyframes floatX { 0%, 100% { transform: translateX(0) rotate(0deg); } 33% { transform: translateX(12px) rotate(4deg); } 66% { transform: translateX(-8px) rotate(-3deg); } } /* Slow drift up-down — combined with floatX for organic feel */ @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Breathing scale pulse — used on hero orb / illustration */ @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } /* Slow rotation — used on decorative leaf SVG */ @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Underline expand on hover */ @keyframes expandLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Ripple for button click feedback */ @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* ══════════════════════════════════════════════ SCROLL REVEAL — driven by IntersectionObserver in animations.js PROGRESSIVE ENHANCEMENT: opacity:0 only applied when JavaScript has loaded (class "js" added to by main.js). Without JS (or file:// protocol), content is fully visible. ══════════════════════════════════════════════ */ /* Hidden state — only when JS is active */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Revealed — JS adds this class when element enters viewport */ .js [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Stagger children — hidden only when JS active */ .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .js [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; opacity:1; transform:translateY(0); } .js [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 100ms; opacity:1; transform:translateY(0); } .js [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 200ms; opacity:1; transform:translateY(0); } .js [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 300ms; opacity:1; transform:translateY(0); } .js [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 400ms; opacity:1; transform:translateY(0); } .js [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 500ms; opacity:1; transform:translateY(0); } /* Always override hidden state when user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ══════════════════════════════════════════════ HERO ENTRY ANIMATION Only animate when JS has loaded and motion is OK. Without JS, content is immediately visible. ══════════════════════════════════════════════ */ .js .hero__content > * { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .js .hero__content > *:nth-child(1) { animation-delay: 100ms; } .js .hero__content > *:nth-child(2) { animation-delay: 250ms; } .js .hero__content > *:nth-child(3) { animation-delay: 380ms; } .js .hero__content > *:nth-child(4) { animation-delay: 500ms; } .js .hero__content > *:nth-child(5) { animation-delay: 620ms; } @media (prefers-reduced-motion: reduce) { .js .hero__content > * { opacity: 1; animation: none; } } /* ══════════════════════════════════════════════ FLOATING LEAVES (decorative background elements) ══════════════════════════════════════════════ */ .leaves-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .leaf { position: absolute; opacity: 0.18; will-change: transform; } .leaf--1 { top: 8%; right: 6%; width: 80px; animation: floatY 7s ease-in-out infinite, floatX 11s ease-in-out infinite; } .leaf--2 { top: 30%; left: 3%; width: 55px; animation: floatY 9s ease-in-out infinite reverse, floatX 13s ease-in-out infinite; animation-delay: 2s; } .leaf--3 { bottom: 20%; right: 12%; width: 45px; animation: floatY 6s ease-in-out infinite, floatX 10s ease-in-out infinite reverse; animation-delay: 1s; } .leaf--4 { bottom: 10%; left: 8%; width: 65px; animation: floatY 8s ease-in-out infinite reverse, floatX 14s ease-in-out infinite; animation-delay: 3s; } /* ══════════════════════════════════════════════ BREATHING ORB (hero background decoration) ══════════════════════════════════════════════ */ .orb { position: absolute; border-radius: 50%; pointer-events: none; animation: breathe var(--orb-duration, 8s) ease-in-out infinite; will-change: transform; } .orb--1 { width: clamp(300px, 45vw, 600px); height: clamp(300px, 45vw, 600px); background: radial-gradient(circle, rgba(107,143,113,0.13) 0%, transparent 70%); top: -15%; right: -10%; --orb-duration: 9s; } .orb--2 { width: clamp(200px, 30vw, 400px); height: clamp(200px, 30vw, 400px); background: radial-gradient(circle, rgba(181,201,190,0.15) 0%, transparent 70%); bottom: -10%; left: -5%; --orb-duration: 12s; animation-delay: -3s; } /* ══════════════════════════════════════════════ HOVER UNDERLINE (nav / link decoration) ══════════════════════════════════════════════ */ .hover-underline { position: relative; display: inline-block; } .hover-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1.5px; background: var(--c-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); } .hover-underline:hover::after { transform: scaleX(1); } /* ══════════════════════════════════════════════ BREATHING CIRCLE (used on Sophrologie page) ══════════════════════════════════════════════ */ .breathing-circle { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(107,143,113,0.25) 0%, rgba(107,143,113,0.05) 100%); border: 2px solid rgba(107,143,113,0.30); display: flex; align-items: center; justify-content: center; animation: breathe 4s ease-in-out infinite; margin: 0 auto; position: relative; } .breathing-circle::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: rgba(107,143,113,0.12); animation: breathe 4s ease-in-out infinite reverse; } /* ══════════════════════════════════════════════ BUTTON RIPPLE EFFECT ══════════════════════════════════════════════ */ .btn { position: relative; overflow: hidden; } .btn__ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3); transform: scale(0); animation: ripple 600ms linear; pointer-events: none; } /* ══════════════════════════════════════════════ IMAGE ZOOM on hover (gallery / cards) ══════════════════════════════════════════════ */ .img-zoom { overflow: hidden; border-radius: var(--radius-lg); } .img-zoom img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; } .img-zoom:hover img { transform: scale(1.04); } /* ══════════════════════════════════════════════ LOGO PULSE (heartbeat feel on CTA icons) ══════════════════════════════════════════════ */ @keyframes subtlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .pulse { animation: subtlePulse 2.5s ease-in-out infinite; } /* ══════════════════════════════════════════════ ZEN MEDITATION FIGURE — sérénité & paix intérieure ══════════════════════════════════════════════ */ /* ── Keyframes zen ── */ /* Flottement doux et continu — comme une plume sur l'eau */ @keyframes zenFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* Aura au repos : à peine perceptible, respire avec la figure */ @keyframes zenAuraRest { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.09; } } /* Aura à l'éveil : lumineuse et paisible */ @keyframes zenAuraPulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.28; } } @keyframes zenAuraInnerPulse { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.40; } } /* Éveil : légère élévation et souffle */ @keyframes zenAwaken { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-5px) scale(1.018); } 100% { transform: translateY(0) scale(1); } } /* ── Wrapper : flottement perpétuel ── */ .zen-figure-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); animation: zenFloat 5.5s ease-in-out infinite; } .zen-figure { cursor: pointer; width: clamp(200px, 38vw, 300px); max-width: 300px; transition: filter 0.6s ease; -webkit-tap-highlight-color: transparent; outline: none; overflow: visible; } .zen-figure:hover { filter: drop-shadow(0 6px 16px rgba(124,174,132,0.18)); } .zen-hint { font-size: var(--text-xs); color: var(--c-muted); letter-spacing: 0.10em; font-style: italic; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; user-select: none; } .zen-figure-wrap:hover .zen-hint { opacity: 1; } /* ── Aura : toujours légèrement présente, comme un halo de paix ── */ .zen-aura { fill: none; stroke: var(--c-primary); stroke-width: 0.7; animation: zenAuraRest 5.5s ease-in-out infinite; } .zen-aura--inner { stroke-width: 1; animation-delay: 0.6s; } /* ── Corps ── */ .zen-body { fill: var(--c-primary); opacity: 0.82; transition: filter 1.5s ease; } .zen-head { fill: var(--c-primary); opacity: 0.88; transition: filter 1.5s ease; } .zen-hands { fill: var(--c-primary-dk); opacity: 0.58; } /* ── Yeux fermés : paix au repos ── */ .zen-eyes-closed path { fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 1.6; stroke-linecap: round; transition: opacity 1.4s ease 0.2s; } /* ── Yeux ouverts : s'ouvrent très lentement, comme au réveil d'un rêve ── */ .zen-eyes-open { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scaleY(0.2); transition: opacity 1.8s ease 1.2s, transform 1.8s cubic-bezier(0.34, 1.2, 0.64, 1) 1.2s; } .zen-eyes-open ellipse { fill: rgba(255,255,255,0.92); } .zen-pupil { fill: var(--c-primary-dk); } /* ── Sourire ── */ .zen-mouth { fill: none; stroke: rgba(255,255,255,0.60); stroke-width: 1.4; stroke-linecap: round; } /* ── Troisième œil : apparaît lentement à l'éveil ── */ .zen-thirdeye { fill: var(--c-secondary); opacity: 0; transition: opacity 1.5s ease 1.8s; } /* ══ ÉTAT ÉVEILLÉ ══ */ /* Souffle à l'éveil (one-shot, puis le flottement wrapper reprend) */ .zen-figure.is-awake:not(.is-settling) { animation: zenAwaken 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .zen-figure.is-awake .zen-aura--outer { animation: zenAuraPulse 4s ease-in-out infinite; } .zen-figure.is-awake .zen-aura--inner { animation: zenAuraInnerPulse 4s ease-in-out 0.5s infinite; } .zen-figure.is-awake .zen-body, .zen-figure.is-awake .zen-head { filter: drop-shadow(0 0 12px rgba(124,174,132,0.35)); } .zen-figure.is-awake .zen-thirdeye { opacity: 0.60; animation: subtlePulse 2.5s ease-in-out 2.5s infinite; } /* ══ RETOUR AU CALME (is-settling) — fermeture douce des yeux ══ */ /* Stopper l'animation d'éveil sur le wrapper */ .zen-figure.is-awake.is-settling { animation: none; } /* Aura revient au repos en douceur */ .zen-figure.is-awake.is-settling .zen-aura--outer, .zen-figure.is-awake.is-settling .zen-aura--inner { animation: zenAuraRest 5.5s ease-in-out infinite; } /* Troisième œil s'éteint */ .zen-figure.is-awake.is-settling .zen-thirdeye { opacity: 0 !important; transition: opacity 0.8s ease !important; animation: none !important; } /* Glow disparaît */ .zen-figure.is-awake.is-settling .zen-body, .zen-figure.is-awake.is-settling .zen-head { filter: none !important; transition: filter 1.5s ease !important; } /* ── Thème clair : aura plus contrastée sur fond crème ── */ @keyframes zenAuraRestLight { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.26; } } @keyframes zenAuraPulseLight { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.55; } } @keyframes zenAuraInnerPulseLight { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.68; } } html:not(.dark) .zen-aura { stroke: var(--c-primary-dk); stroke-width: 1; animation: zenAuraRestLight 5.5s ease-in-out infinite; } html:not(.dark) .zen-aura--inner { animation-delay: 0.6s; } html:not(.dark) .zen-figure.is-awake .zen-aura--outer { animation: zenAuraPulseLight 4s ease-in-out infinite; } html:not(.dark) .zen-figure.is-awake .zen-aura--inner { animation: zenAuraInnerPulseLight 4s ease-in-out 0.5s infinite; } html:not(.dark) .zen-figure.is-awake.is-settling .zen-aura--outer, html:not(.dark) .zen-figure.is-awake.is-settling .zen-aura--inner { animation: zenAuraRestLight 5.5s ease-in-out infinite; } /* ── Dark mode ── */ html.dark .zen-eyes-closed path { stroke: rgba(28,30,26,0.75); } html.dark .zen-eyes-open ellipse { fill: rgba(28,30,26,0.90); } html.dark .zen-mouth { stroke: rgba(28,30,26,0.55); } /* ══════════════════════════════════════════════ AUTUMN LEAF PARTICLES (theme toggle effect) Particles created and animated entirely in JS. These styles are for the container only. ══════════════════════════════════════════════ */ .autumn-leaf-particle { position: fixed; pointer-events: none; z-index: 9999; will-change: transform, opacity; transform-origin: center center; }