/* ============================================================ Soulful Connections Medium — animation layer Loaded AFTER styles.css on every page. Ethereal & soft: floating light, gentle drift, luminous glows. All motion is transform/opacity only (GPU-friendly). Progressive enhancement: the initial "hidden" states below are gated on `.anim-ready`, a class that animations.js adds to only once it runs. No JS (or a JS error) => nothing is hidden. ============================================================ */ /* ---- Keyframes ---- */ @keyframes heroGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-10px) rotate(0.5deg); } 66% { transform: translateY(-5px) rotate(-0.3deg); } } @keyframes navPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 123, 128, 0.40); } 50% { box-shadow: 0 0 0 8px rgba(74, 123, 128, 0); } } @keyframes rippleEffect { to { transform: scale(4); opacity: 0; } } @keyframes wordFadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes orbFade { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); } } /* ============================================================ 2 · HERO ANIMATED GRADIENT (Overrides the static gradient from styles.css.) ============================================================ */ .hero { background: linear-gradient(135deg, #D4C5A9 0%, #8FB5B8 35%, #B8D5D8 65%, #C9A96E 100%); background-size: 300% 300%; animation: heroGradientShift 14s ease infinite; overflow: hidden; /* keep orbs inside the hero */ } /* ============================================================ 1 · FLOATING ORB CANVAS Hosts get position/overflow so the absolute canvas is contained, and their content sits above the orbs. ============================================================ */ .about, .cta-banner, .footer { position: relative; overflow: hidden; } .hero .wrap, .about .wrap, .cta-banner .wrap, .footer .wrap { position: relative; z-index: 2; } .hero::before { z-index: 1; } /* darkening overlay above the orbs, below content */ .orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hero .orb-canvas { z-index: 1; } /* ============================================================ 3 & 4 · REVEAL SYSTEM (load + scroll) Hidden states only apply once has .anim-ready. ============================================================ */ .anim-ready .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .anim-ready .reveal.visible { opacity: 1; transform: none; } /* Opacity-only reveal for elements that also float (avoids transform clash). */ .anim-ready .reveal-fade { opacity: 0; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity; } .anim-ready .reveal-fade.visible { opacity: 1; } /* Hero critical elements: pre-hidden by selector (not by .reveal) so there is no flash before animations.js assigns classes. Staggered entry via delays. */ .anim-ready .hero .overline, .anim-ready .hero h1, .anim-ready .hero-sub, .anim-ready .hero-copy .btn { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .anim-ready .hero-portrait { opacity: 0; transition: opacity 0.9s ease; } .anim-ready .hero .overline { transition-delay: 0.15s; } .anim-ready .hero h1 { transition-delay: 0.30s; } .anim-ready .hero-sub { transition-delay: 0.45s; } .anim-ready .hero-copy .btn { transition-delay: 0.60s; } .anim-ready .hero-portrait { transition-delay: 0.60s; } /* Nav slides down on load. */ .anim-ready #nav { transform: translateY(-100%); opacity: 0; } .anim-ready #nav.nav-in { transform: none; opacity: 1; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; } /* ============================================================ 5 · FLOATING IMAGES (breathing) Use reveal-fade on these so float owns the transform. ============================================================ */ .portrait-circle, .about-img, .feature-media { animation: float 7s ease-in-out infinite; } .about-img { animation-delay: -2s; } .feature-media { animation-delay: -4s; } .feature.reverse .feature-media { animation-delay: -1.5s; } /* ============================================================ 6 · BUTTONS — ripple, glow, nav pulse ============================================================ */ .btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); width: 160px; height: 160px; margin-left: -80px; margin-top: -80px; background: rgba(255, 255, 255, 0.35); animation: rippleEffect 0.7s linear; pointer-events: none; } .btn-primary { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .btn-primary:hover { box-shadow: 0 0 20px rgba(74, 123, 128, 0.45), 0 0 40px rgba(74, 123, 128, 0.20); transform: translateY(-2px); } /* Gentle pulse on the nav "Book a Reading" button (desktop). */ .nav-actions .btn-outline-teal { animation: navPulse 3s ease-in-out infinite; } .nav-actions .btn-outline-teal:hover { animation: none; } /* ============================================================ 7 · SERVICE CARD HOVER (enhances styles.css) ============================================================ */ .service-card { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .service-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 60px rgba(43, 61, 79, 0.25); } .service-link { position: relative; } .service-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s ease; } .service-card:hover .service-link::after { width: 100%; } /* ============================================================ 8 · TESTIMONIAL SHIMMER ============================================================ */ .t-card { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .t-card::before { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%); transform: skewX(-25deg); transition: left 0.6s ease; pointer-events: none; z-index: 1; } .t-card:hover::before { left: 125%; } .t-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(74, 123, 128, 0.15); } .t-card > * { position: relative; z-index: 2; } /* ============================================================ 9 · PULL-QUOTE WORD-BY-WORD (CTA banner headings) ============================================================ */ .word { display: inline-block; opacity: 0; transform: translateY(12px); animation: wordFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-play-state: paused; } .quote-animated .word { animation-play-state: running; } /* ============================================================ 10 · NAV LINK UNDERLINE SLIDE ============================================================ */ .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 50%; width: 0; height: 2px; background: var(--teal); transition: width 0.3s ease, left 0.3s ease; } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; left: 0; } .nav.scrolled .nav-links a::after, .nav--solid .nav-links a::after { background: var(--teal); } /* ============================================================ 11 · PAGE TRANSITIONS JS-only: body starts visible; class added by JS. ============================================================ */ body.anim-page { transition: opacity 0.35s ease; } body.page-leaving { opacity: 0; } /* ============================================================ 12 · LOGO HOVER — soft spin + glow ============================================================ */ .brand .brand-mark { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .brand:hover .brand-mark { transform: rotate(15deg) scale(1.1); box-shadow: 0 0 14px rgba(74, 123, 128, 0.6); } /* ============================================================ 14 · CURSOR TRAIL (off by default — needs body[data-cursor-trail="true"]) ============================================================ */ .cursor-orb { position: fixed; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(74,123,128,0.5), transparent); transform: translate(-50%, -50%) scale(1); animation: orbFade 0.8s ease forwards; z-index: 9999; } /* ============================================================ ACCESSIBILITY & PERFORMANCE ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Never leave content hidden when motion is reduced. */ .anim-ready .reveal, .anim-ready .reveal-fade, .anim-ready .hero .overline, .anim-ready .hero h1, .anim-ready .hero-sub, .anim-ready .hero-copy .btn, .anim-ready .hero-portrait, .anim-ready #nav { opacity: 1 !important; transform: none !important; } .word { opacity: 1 !important; transform: none !important; } .orb-canvas, .cursor-orb { display: none !important; } .hero { animation: none !important; } .portrait-circle, .about-img, .feature-media { animation: none !important; } } /* Disable heavy canvas work on small screens. */ @media (max-width: 768px) { .orb-canvas { display: none; } }