/* ============================================================ Mirador Law — Global Animation Layer (v2) ------------------------------------------------------------ Loaded on EVERY page (front, PI, PA, team, case results, about, etc.) — provides a premium, alive feel: 1. Scroll-reveal classes (.mdl-reveal + variants) 2. Stagger helpers for grids of cards 3. Subtle hover polish (buttons, cards, images) 4. Smooth scroll-link behavior + page entrance 5. Count-up animation for monetary amounts 6. Magnetic buttons (cursor-follow lift) 7. 3D tilt effect on cards 8. Scroll progress indicator (top bar) 9. Hero parallax (depth on scroll) 10. Cursor spotlight on hero sections (radial follow) 11. SVG icon draw-in (path stroke unwinds) 12. Marquee scroll (accolades/logos) 13. Letter-by-letter title reveal 14. Gradient shift on CTAs 15. Float / drift / pulse / shimmer keyframes The actual triggering of #6-12 is JS (assets/js/animations.js). This file only defines the CSS for those states. Performance: only transforms + opacity (GPU accelerated). Accessibility: respects prefers-reduced-motion (full block at the bottom of this file disables all motion when set). ============================================================ */ /* ============ 1. BASE REVEAL STATE ============ */ .mdl-reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s cubic-bezier(.22, .61, .36, 1), clip-path .9s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .mdl-reveal--in { opacity: 1; transform: translate3d(0, 0, 0); filter: none; clip-path: inset(0 0 0 0); } /* ============ 2. DIRECTIONAL & EFFECT VARIANTS ============ */ .mdl-reveal--up { transform: translate3d(0, 36px, 0); } .mdl-reveal--down { transform: translate3d(0, -36px, 0); } .mdl-reveal--left { transform: translate3d(-44px, 0, 0); } .mdl-reveal--right { transform: translate3d(44px, 0, 0); } .mdl-reveal--scale { transform: scale(.94); } .mdl-reveal--fade { transform: none; } .mdl-reveal--zoom { transform: scale(1.08); } /* kenburns-style in */ .mdl-reveal--blur { filter: blur(12px); } /* dreamy entrance */ .mdl-reveal--clip-l { clip-path: inset(0 100% 0 0); } /* wipe from left */ .mdl-reveal--clip-r { clip-path: inset(0 0 0 100%); } /* wipe from right */ .mdl-reveal--clip-up { clip-path: inset(100% 0 0 0); } /* wipe up */ .mdl-reveal--rotate { transform: rotate(-3deg) translate3d(0, 32px, 0); } .mdl-reveal--skew { transform: skewY(2deg) translate3d(0, 24px, 0); } .mdl-reveal--up.mdl-reveal--in, .mdl-reveal--down.mdl-reveal--in, .mdl-reveal--left.mdl-reveal--in, .mdl-reveal--right.mdl-reveal--in, .mdl-reveal--scale.mdl-reveal--in, .mdl-reveal--zoom.mdl-reveal--in, .mdl-reveal--rotate.mdl-reveal--in, .mdl-reveal--skew.mdl-reveal--in { transform: translate3d(0, 0, 0) scale(1) rotate(0) skewY(0); } /* ============ 3. STAGGER DELAYS ============ The JS adds `style="--mdl-stagger: N"` to each child of a group; this CSS converts that index to a delay. Each step is 80ms so a 6-card row finishes in 480ms after the first card. ============ */ .mdl-reveal[style*="--mdl-stagger"] { transition-delay: calc(var(--mdl-stagger) * 80ms); } /* ============ 4. SMOOTH SCROLLING ============ Removed per user request — was interfering with normal scroll behavior. Anchor links still work via native browser behavior. */ /* ============ 5. PAGE ENTRANCE ============ The whole page fades in once DOM is parsed (JS adds `mdl-loaded` to ). Hero stays subtle but feels alive. */ html:not(.mdl-loaded) body { opacity: 0; } html.mdl-loaded body { opacity: 1; transition: opacity .5s ease; } /* ============ 6. SCROLL PROGRESS BAR ============ Thin gold bar at the very top of the viewport that fills as the user scrolls down the page. Pure CSS — JS only updates --mdl-scroll on . Feels premium, costs nothing. */ .mdl-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: transparent; z-index: 9999; pointer-events: none; transform: translateZ(0); } .mdl-scroll-progress__bar { height: 100%; width: 100%; background: linear-gradient(90deg, #CAA45D 0%, #B5903F 50%, #CAA45D 100%); transform-origin: 0 50%; transform: scaleX(var(--mdl-scroll, 0)); transition: transform .12s linear; box-shadow: 0 0 12px rgba(202, 164, 93, .5); } /* ============ 7. HOVER POLISH — BUTTONS ============ Lift + glow on every primary button across the site. Skips form buttons and nav buttons (their styles already work). */ .mdl-btn, .mdl-pa-news-card__more, .mdl-press__see-all, .mdl-news__see-all, .mdl-cri-summary-btn, .mdl-team-card-btn, .mdl-cri-contact-btn, .mdl-pa-side-cta-btn, .mdl-pi-cta a, .mdl-readmore { transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important; position: relative; } .mdl-btn:hover, .mdl-pa-side-cta-btn:hover, .mdl-pi-cta a:hover, .mdl-team-card-btn:hover, .mdl-cri-contact-btn:hover, .mdl-cri-summary-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36, 57, 82, 0.16); } .mdl-btn:active, .mdl-pa-side-cta-btn:active, .mdl-pi-cta a:active { transform: translateY(0); transition-duration: .08s; } /* Gold button shimmer sweep on hover - a subtle highlight glides diagonally across the button surface. Pure CSS, GPU only. */ .mdl-btn--gold, .mdl-pi-cta a { overflow: hidden; isolation: isolate; } .mdl-btn--gold::after, .mdl-pi-cta a::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100% ); transform: skewX(-22deg); transition: left .7s cubic-bezier(.22, .61, .36, 1); pointer-events: none; z-index: 1; } .mdl-btn--gold:hover::after, .mdl-pi-cta a:hover::after { left: 130%; } /* ============ 8. MAGNETIC BUTTONS (JS-driven) ============ The JS reads cursor position relative to button center and sets these CSS variables. The CSS converts them to a small translate so the button drifts toward the cursor. Limited to .mdl-btn--gold and primary CTAs so it doesn't feel over-applied. Range: ±8px. */ .mdl-magnetic { transition: transform .2s cubic-bezier(.22, .61, .36, 1); transform: translate3d( calc(var(--mdl-mx, 0) * 1px), calc(var(--mdl-my, 0) * 1px), 0 ); } /* ============ 9. CARD 3D TILT (JS-driven) ============ Mouse over a card → it tilts subtly in 3D toward the cursor. The JS sets --mdl-rx and --mdl-ry; CSS applies the rotation. Only enabled on devices with a fine pointer (mouse), not on touch. Range: ±6deg. */ @media (pointer: fine) { .mdl-tilt { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.22, .61, .36, 1); transform: perspective(900px) rotateX(calc(var(--mdl-rx, 0) * 1deg)) rotateY(calc(var(--mdl-ry, 0) * 1deg)) translate3d(0, 0, 0); } .mdl-tilt > * { transform: translateZ(0); } } /* ============ 10. HOVER POLISH — CARDS ============ Subtle lift + shadow + image zoom on every card-style block. Already partially applied per-template; this unifies it. */ .mdl-news__card, .mdl-press__card, .mdl-pi-team__card, .mdl-pi-card, .mdl-team-press-card, .mdl-cr-result, .mdl-pa-news-card, .mdl-team-logo-card, .mdl-team-press__card, .mdl-cri-related-card { transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .25s ease !important; } .mdl-news__card:hover, .mdl-press__card:hover, .mdl-pa-news-card:hover, .mdl-team-press-card:hover, .mdl-cri-related-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(36, 57, 82, 0.14); } /* Image kenburns-style zoom inside any card thumb */ .mdl-news__thumb, .mdl-press__thumb, .mdl-pi-team__photo, .mdl-team-press-card__media, .mdl-pa-news-card__thumb, .mdl-team-logo-card__inner, .mdl-cri-related-card__media { overflow: hidden; } .mdl-news__thumb img, .mdl-press__thumb img, .mdl-pi-team__photo img, .mdl-team-press-card__media img, .mdl-pa-news-card__thumb img, .mdl-cri-related-card__media img { transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .4s ease; will-change: transform; } .mdl-news__card:hover .mdl-news__thumb img, .mdl-press__card:hover .mdl-press__thumb img, .mdl-pa-news-card:hover .mdl-pa-news-card__thumb img, .mdl-team-press-card:hover .mdl-team-press-card__media img, .mdl-cri-related-card:hover .mdl-cri-related-card__media img { transform: scale(1.07); } /* PI team photo color saturation pop on hover */ .mdl-pi-team__photo img { filter: grayscale(15%); transition: filter .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1); } .mdl-pi-team__card:hover .mdl-pi-team__photo img { filter: grayscale(0%); transform: scale(1.05); } /* ============ 11. CHEVRON & ARROW MICRO-INTERACTIONS ============ */ .mdl-pi-card__arrow, .mdl-press__card .mdl-readmore, .mdl-news__card .mdl-readmore, .mdl-pa-news-card__more, .mdl-cri-related-card__more { transition: transform .35s cubic-bezier(.22, .61, .36, 1), color .2s ease; } .mdl-pi-card:hover .mdl-pi-card__arrow, .mdl-press__card:hover .mdl-readmore, .mdl-news__card:hover .mdl-readmore, .mdl-pa-news-card:hover .mdl-pa-news-card__more, .mdl-cri-related-card:hover .mdl-cri-related-card__more { transform: translateX(4px); } /* ============ 12. FAQ ITEM POLISH ============ */ .mdl-pi-faq__item:hover .mdl-pi-faq__chev { transform: scale(1.1); } .mdl-pi-faq__item[open]:hover .mdl-pi-faq__chev { transform: rotate(180deg) scale(1.1); } /* ============ 13. HEADER PHONE PULSE ============ Once per page load — a subtle 2s pulse to draw the eye to the click-to-call link. Doesn't repeat. */ @keyframes mdl-phone-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .mdl-header__phone { animation: mdl-phone-pulse 1.6s ease-in-out 1.5s 2; transform-origin: center; } /* ============ 14. SVG ICON DRAW-IN ============ When an SVG inside a card or icon container scrolls into view, the JS adds .mdl-draw-in. CSS unrolls the stroke from 0 to full length, giving a "drawn by hand" feel. */ .mdl-draw svg path, .mdl-draw svg circle, .mdl-draw svg line, .mdl-draw svg polyline, .mdl-draw svg rect { stroke-dasharray: var(--mdl-draw-len, 1000); stroke-dashoffset: var(--mdl-draw-len, 1000); transition: stroke-dashoffset 1.4s cubic-bezier(.22, .61, .36, 1); } .mdl-draw.mdl-draw--in svg path, .mdl-draw.mdl-draw--in svg circle, .mdl-draw.mdl-draw--in svg line, .mdl-draw.mdl-draw--in svg polyline, .mdl-draw.mdl-draw--in svg rect { stroke-dashoffset: 0; } /* ============ 15. CURSOR SPOTLIGHT (hero sections) ============ The JS sets --mdl-cx and --mdl-cy on hero sections; CSS draws a radial gradient that follows. Subtle — adds depth without distracting. Only on devices with a mouse. */ @media (pointer: fine) { .mdl-hero-spotlight, .mdl-hero, .mdl-cr-hero, .mdl-about-hero, .mdl-pi-hero, .mdl-press-hero, .mdl-news-hero, .mdl-contact-hero { position: relative; overflow: hidden; } .mdl-hero-spotlight::before, .mdl-hero::before, .mdl-cr-hero::before, .mdl-about-hero::before, .mdl-pi-hero::before, .mdl-press-hero::before, .mdl-news-hero::before, .mdl-contact-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 420px circle at calc(var(--mdl-cx, 50) * 1%) calc(var(--mdl-cy, 50) * 1%), rgba(202, 164, 93, .14) 0%, rgba(202, 164, 93, 0) 60% ); opacity: 0; transition: opacity .4s ease; z-index: 1; mix-blend-mode: screen; } .mdl-hero-spotlight:hover::before, .mdl-hero:hover::before, .mdl-cr-hero:hover::before, .mdl-about-hero:hover::before, .mdl-pi-hero:hover::before, .mdl-press-hero:hover::before, .mdl-news-hero:hover::before, .mdl-contact-hero:hover::before { opacity: 1; } } /* ============ 16. PARALLAX (JS-driven) ============ JS sets `--mdl-parallax-y` on elements with .mdl-parallax based on scroll position; CSS applies translateY. Subtle (~-40 to +40). ============ */ .mdl-parallax { transform: translate3d(0, calc(var(--mdl-parallax-y, 0) * 1px), 0); will-change: transform; } .mdl-parallax--bg { background-attachment: fixed; } @media (max-width: 768px) { .mdl-parallax--bg { background-attachment: scroll; } } /* ============ 17. COUNT-UP NUMBERS ============ JS reads the target number from .mdl-count[data-target] and animates the text content from 0 → target. CSS just adds a subtle "freshly landed" pulse the moment counting finishes. */ .mdl-count { display: inline-block; font-variant-numeric: tabular-nums; will-change: contents; } @keyframes mdl-count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } .mdl-count.mdl-count--done { animation: mdl-count-pop .5s cubic-bezier(.22, .61, .36, 1); } /* ============ 18. MARQUEE (logos / accolades) ============ Slow, continuous horizontal scroll for a row of logos. Pauses on hover so users can read individual items. */ .mdl-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 8%, #000 92%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 8%, #000 92%, transparent 100% ); } .mdl-marquee__track { display: flex; gap: 56px; width: max-content; animation: mdl-marquee-scroll 32s linear infinite; will-change: transform; } .mdl-marquee:hover .mdl-marquee__track { animation-play-state: paused; } @keyframes mdl-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ============ 19. LETTER-BY-LETTER TITLE REVEAL ============ For hero titles. JS wraps each letter in a and stagger delays. Each letter slides up + fades in. Feels editorial. */ .mdl-letter { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); } .mdl-letter--in { opacity: 1; transform: translateY(0); } .mdl-letter[style*="--mdl-letter-i"] { transition-delay: calc(var(--mdl-letter-i) * 28ms); } /* ============ 20. GENTLE BACKGROUND DECORATIONS ============ Floating geometric shapes in hero sections — slow infinite drift. Decorative, low opacity, not focal. */ @keyframes mdl-float-slow { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 33% { transform: translate3d(8px, -12px, 0) rotate(2deg); } 66% { transform: translate3d(-6px, 6px, 0) rotate(-2deg); } } @keyframes mdl-drift { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .25; } 50% { transform: translate3d(0, -18px, 0); opacity: .5; } } @keyframes mdl-rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .mdl-float-slow { animation: mdl-float-slow 9s ease-in-out infinite; } .mdl-drift { animation: mdl-drift 4.5s ease-in-out infinite; } .mdl-rotate-slow { animation: mdl-rotate-slow 24s linear infinite; } /* ============ 21. GRADIENT SHIFT (CTAs) ============ For the schedule-consultation CTAs — gentle hue shift gives the gold a slow "alive" feel. */ @keyframes mdl-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .mdl-cta-block, .mdl-pi-cta, .mdl-consult { background-size: 200% 200%; animation: mdl-gradient-shift 14s ease infinite; } /* ============ 22. INPUT FOCUS RING ============ */ input:focus, textarea:focus, select:focus { transition: border-color .2s ease, box-shadow .25s ease; } /* ============ 23. ACCESSIBILITY ============ Respect the user's OS-level reduced-motion preference. When set, all the above animations collapse to instant — content still appears, just without motion. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mdl-reveal, .mdl-reveal--in, .mdl-letter, .mdl-letter--in, .mdl-magnetic, .mdl-tilt, .mdl-parallax, .mdl-draw svg path, .mdl-draw svg circle, .mdl-draw svg line { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; } .mdl-marquee__track, .mdl-float-slow, .mdl-drift, .mdl-rotate-slow, .mdl-cta-block, .mdl-pi-cta, .mdl-consult, .mdl-header__phone, .mdl-btn--gold::after { animation: none !important; } .mdl-scroll-progress { display: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }