/* === fleet-interactions.css v1.0 — MORPH-29 === Shared interaction + composition layer for GAD satellite fleet. Linked in of all 7 satellite index.html files. Source modules: D:\Work\ContentStudio\morphemes\interactions\ + compositions DO NOT EDIT per-satellite styles.css for these patterns. Edit here. */ /* --- scroll-reveal --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(var(--reveal-distance, 20px)); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(var(--reveal-distance, 20px)); transition: opacity var(--reveal-duration, 0.6s) var(--reveal-easing, ease), transform var(--reveal-duration, 0.6s) var(--reveal-easing, ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; } .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 { transition-delay: 0s; } } /* --- card-hover-glow --- */ /* Per-archetype hover color overrides below — do not set here */ .card-hover { transition: box-shadow var(--card-transition, 0.3s ease), transform var(--card-transition, 0.3s ease), border-color var(--card-transition, 0.3s ease); } .card-hover:hover { box-shadow: var( --hover-shadow, 0 8px 32px rgba(45, 122, 111, 0.12), 0 2px 8px rgba(28, 43, 43, 0.06) ); transform: translateY(calc(-1 * var(--hover-lift, 3px))); border-color: var(--hover-border-color, rgba(45, 122, 111, 0.25)); } .card-hover:hover .card-logo { transform: scale(1.05); transition: transform 0.3s ease; } .card-hover:hover .card-score-number { color: var(--hover-color, #2D7A6F); transition: color 0.3s ease; } @media (prefers-reduced-motion: reduce) { .card-hover, .card-hover:hover { transition: none; transform: none; } .card-hover:hover .card-logo { transform: none; transition: none; } } /* --- cta-ripple --- */ .cta-ripple { position: relative; overflow: hidden; } .cta-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--ripple-color, rgba(255, 255, 255, 0.1)); border-radius: 50%; transform: translate(-50%, -50%); transition: width var(--ripple-duration, 0.4s) var(--ripple-easing, ease), height var(--ripple-duration, 0.4s) var(--ripple-easing, ease); pointer-events: none; } .cta-ripple:hover::after { width: var(--ripple-size, 300px); height: var(--ripple-size, 300px); } .cta-ripple:hover { transform: translateY(-1px); box-shadow: var(--cta-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.15)); } @media (prefers-reduced-motion: reduce) { .cta-ripple::after { display: none; } .cta-ripple:hover { transform: none; } } /* --- trust-pill-lift --- */ .trust-pill { transition: transform var(--pill-transition, 0.2s ease), box-shadow var(--pill-transition, 0.2s ease), background var(--pill-transition, 0.2s ease); cursor: default; } .trust-pill:hover { transform: translateY(calc(-1 * var(--pill-lift, 1px))); box-shadow: var(--pill-shadow, 0 2px 8px rgba(45, 122, 111, 0.15)); background: var(--pill-bg-hover, rgba(45, 122, 111, 0.12)); } @keyframes gentlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .card-hover:hover .trust-pill, .card-hover:hover .rating-badge { animation: gentlePulse 2s ease infinite; } a.trust-pill { cursor: pointer; text-decoration: none; } .detail-pill { transition: transform var(--pill-transition, 0.2s ease), box-shadow var(--pill-transition, 0.2s ease); } .detail-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } @media (prefers-reduced-motion: reduce) { .trust-pill, .trust-pill:hover, .detail-pill, .detail-pill:hover { transition: none; transform: none; } .card-hover:hover .trust-pill, .card-hover:hover .rating-badge { animation: none; } } /* --- section-texture --- */ .section-texture { position: relative; overflow: hidden; } .section-texture::before { content: ''; position: absolute; top: -60px; right: -100px; width: var(--blob-size-1, 400px); height: var(--blob-size-1, 400px); border-radius: 50%; background: radial-gradient( circle, var(--blob-color-1, rgba(45, 122, 111, 0.04)) 0%, transparent 70% ); pointer-events: none; z-index: 0; } .section-texture::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: var(--blob-size-2, 350px); height: var(--blob-size-2, 350px); border-radius: 50%; background: radial-gradient( circle, var(--blob-color-2, rgba(196, 149, 106, 0.05)) 0%, transparent 70% ); pointer-events: none; z-index: 0; } .section-texture > * { position: relative; z-index: 1; } .section-texture__dots { background-image: radial-gradient( circle, var(--dot-color, rgba(28, 43, 43, var(--dot-opacity, 0.03))) 1px, transparent 1px ); background-size: var(--dot-size, 24px) var(--dot-size, 24px); } .section-texture--full { position: relative; overflow: hidden; background-image: radial-gradient( circle, rgba(28, 43, 43, var(--dot-opacity, 0.03)) 1px, transparent 1px ); background-size: var(--dot-size, 24px) var(--dot-size, 24px); } .body-texture-ambient::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; background-image: radial-gradient(ellipse at 15% 20%, var(--blob-color-1, rgba(45, 122, 111, 0.03)) 0%, transparent 50%), radial-gradient(ellipse at 85% 60%, var(--blob-color-2, rgba(196, 149, 106, 0.03)) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, var(--blob-color-1, rgba(45, 122, 111, 0.02)) 0%, transparent 40%); } @media (max-width: 639px) { .section-texture__dots, .section-texture--full { --dot-opacity: 0.015; } } /* === MORPH-33: reveal-ready KILL — observer was removed in MORPH-29. These elements must be unconditionally visible. === */ .reveal-ready { opacity: 1 !important; transform: none !important; transition: none !important; } .reveal-ready.reveal-visible { opacity: 1; transform: none; } /* === MORPH-31: Reveal fallback safety net === Ensures .reveal elements are NEVER permanently invisible. (a) No-JS fallback via @media scripting query (b) Animation-based fallback: if .visible never arrives, fade in after 0.8s (c) Above-the-fold safety: first .reveal child of hero is immediately visible */ /* No-JS fallback */ @media (scripting: none) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Animation fallback — if observer never fires, element fades in on its own */ .reveal { animation: revealFallback 0.6s ease 0.8s forwards; } .reveal.visible { animation: none; } @keyframes revealFallback { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Above-the-fold: hero content is immediately visible (no reveal delay on first paint) */ .qa-hero .reveal, .rr-hero .reveal, .mb-hero .reveal, .lr-hero .reveal, .vw-hero .reveal, .eu-hero .reveal, .p-hero .reveal { opacity: 1; transform: none; transition: none; animation: none; } /* Reduced motion — always immediate */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } }