/* Fridheimr — animations & micro-interactions All animation CSS. No inline styles. Reduced motion supported. */ /* ── Scroll reveal — gated by .js-ready on ───────────────────────── */ .js-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; } .js-ready .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger delays for children inside .stagger-children */ .js-ready .stagger-children > .reveal { transition-delay: 0ms; } .js-ready .stagger-children > .reveal:nth-child(2) { transition-delay: 90ms; } .js-ready .stagger-children > .reveal:nth-child(3) { transition-delay: 180ms; } .js-ready .stagger-children > .reveal:nth-child(4) { transition-delay: 270ms; } .js-ready .stagger-children > .reveal:nth-child(5) { transition-delay: 360ms; } /* ── Hero blob drift animation ───────────────────────────────────────────── */ .hero-v2__blob--1 { animation: blob-drift-1 22s ease-in-out infinite; } .hero-v2__blob--2 { animation: blob-drift-2 18s ease-in-out infinite; } @keyframes blob-drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 18px); } } @keyframes blob-drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -14px); } } /* ── Steps — connecting line drawn on scroll ─────────────────────────────── */ .steps { position: relative; } .steps::before { content: ""; position: absolute; top: 38px; left: calc(16.67% + 24px); right: calc(16.67% + 24px); height: 1px; background: rgba(147, 51, 234, 0.18); transform-origin: left center; transform: scaleX(0); transition: transform 860ms cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; z-index: 0; } .steps.line-visible::before { transform: scaleX(1); } @media (max-width: 768px) { .steps::before { display: none; } } /* ── About section — rune circle watermark (fade-in on scroll) ───────────── */ .section--lavender { position: relative; overflow: hidden; } .section--lavender > * { position: relative; z-index: 1; } .section--lavender::after { content: ""; position: absolute; right: -140px; bottom: -130px; width: 640px; height: 640px; background: url('https://runesmagic.com/wp-content/uploads/2026/06/runes_futhark.png') center / contain no-repeat; /* opacity driven by JS-set CSS custom property; fallback keeps it visible without JS */ opacity: var(--wm-opacity, 0.045); transition: opacity 1200ms ease; pointer-events: none; z-index: 0; filter: grayscale(1) sepia(0.4) hue-rotate(230deg) saturate(3); } @media (max-width: 768px) { .section--lavender::after { width: 260px; height: 260px; right: -40px; bottom: -40px; /* keep watermark subtle on mobile; JS still drives via --wm-opacity */ --wm-opacity-max: 0.028; } } /* ── Button hover ────────────────────────────────────────────────────────── */ .btn-cta { transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease; } .btn-outline { transition: transform 200ms ease, background 200ms ease; } @media (hover: hover) { .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200, 170, 40, 0.28); filter: brightness(1.06); } .btn-outline:hover { transform: translateY(-2px); background: rgba(147, 51, 234, 0.06); } } .btn-cta:focus-visible, .btn-outline:focus-visible { outline: 2px solid #9333ea; outline-offset: 3px; } /* ── Request card hover ──────────────────────────────────────────────────── */ .request-card { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .request-card__icon { transition: opacity 220ms ease, transform 220ms ease; } @media (hover: hover) { .request-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(147, 51, 234, 0.1); border-color: rgba(147, 51, 234, 0.38); } .request-card:hover .request-card__icon { opacity: 1; transform: scale(1.05); } } /* ── Service card hover ──────────────────────────────────────────────────── */ .service-card { transition: transform 220ms ease, box-shadow 220ms ease; } @media (hover: hover) { .service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(147, 51, 234, 0.08); } } /* ── Form success checkmark ──────────────────────────────────────────────── */ .srfm-success-checkmark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #9333ea; font-weight: 600; } .srfm-success-checkmark svg { animation: check-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; } @keyframes check-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } /* ── Reduced motion — disable all movement ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .js-ready .reveal, .js-ready .reveal.visible { opacity: 1; transform: none; transition: none; } .hero-v2__blob--1, .hero-v2__blob--2 { animation: none !important; } .steps::before { transform: scaleX(1); transition: none; } .hero-v2__img-wrap { transition: none !important; transform: none !important; } .section--lavender::after { /* Show immediately at full opacity, no fade */ opacity: 0.045 !important; transition: none; } .btn-cta:hover, .btn-outline:hover, .request-card:hover, .service-card:hover { transform: none; } .request-card:hover .request-card__icon { transform: none; } .srfm-success-checkmark svg { animation: none; opacity: 1; } }