/* Local map ─ ecommerce page */ /* Intro */ @keyframes lmWipe { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes lmDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes lmDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes lmRing { 0% { r: 4; opacity: 0.9; } 100% { r: 34; opacity: 0; } } @keyframes lmSoft { from { opacity: 0; } to { opacity: 1; } } /* Ambient loop */ @keyframes lmDashSwap { from { stroke-dasharray: 100; } to { stroke-dasharray: 2 6; } } @keyframes lmCurrent { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -8; } } @keyframes lmBreathe { 0%, 100% { stroke-opacity: 0.38; } 50% { stroke-opacity: 0.72; } } @keyframes lmPinGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(161, 255, 98, 0.30)); } 50% { filter: drop-shadow(0 0 10px rgba(161, 255, 98, 0.85)); } } /* ── Resting state ───────────────────────────────── */ [data-local-map] [data-lm-anim="wipe"] { transform-box: view-box; transform-origin: 0 0; transform: scaleY(0); } [data-local-map] [data-lm-anim="coast"], [data-local-map] [data-lm-anim="echo"] { stroke-dasharray: 100; stroke-dashoffset: 100; } [data-local-map] [data-lm-anim="pin"], [data-local-map] [data-lm-anim="legend"], [data-local-map] [data-lm-anim="ring"] { opacity: 0; } /* ── Intro, plays once ───────────────────────────── */ [data-local-map].is-in [data-lm-anim="wipe"] { animation: lmWipe 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } [data-local-map].is-in [data-lm-anim="coast"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } [data-local-map].is-in [data-lm-anim="echo"][data-lm-i="1"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) 140ms forwards; } [data-local-map].is-in [data-lm-anim="echo"][data-lm-i="2"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards; } [data-local-map].is-in [data-lm-anim="echo"][data-lm-i="3"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) 380ms forwards; } [data-local-map].is-in [data-lm-anim="pin"][data-lm-i="1"] { animation: lmDrop 520ms cubic-bezier(0.16, 1, 0.3, 1) 1800ms forwards; } [data-local-map].is-in [data-lm-anim="pin"][data-lm-i="2"] { animation: lmDrop 520ms cubic-bezier(0.16, 1, 0.3, 1) 2000ms forwards; } [data-local-map].is-in [data-lm-anim="pin"][data-lm-i="3"] { animation: lmDrop 520ms cubic-bezier(0.16, 1, 0.3, 1) 2200ms forwards; } [data-local-map].is-in [data-lm-anim="ring"][data-lm-i="1"] { animation: lmRing 1800ms ease-out 2000ms forwards; } [data-local-map].is-in [data-lm-anim="ring"][data-lm-i="2"] { animation: lmRing 1800ms ease-out 2200ms forwards; } [data-local-map].is-in [data-lm-anim="ring"][data-lm-i="3"] { animation: lmRing 1800ms ease-out 2400ms forwards; } [data-local-map].is-in [data-lm-anim="legend"] { animation: lmSoft 600ms ease-out 2400ms forwards; } /* ── Ambient loop, only while the map is on screen ─ */ /* Offshore lines break into dashes and drift south, like current */ [data-local-map].is-in.is-live [data-lm-anim="echo"][data-lm-i="1"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) 140ms forwards, lmDashSwap 1ms linear 1960ms forwards, lmCurrent 2600ms linear 1960ms infinite; } [data-local-map].is-in.is-live [data-lm-anim="echo"][data-lm-i="2"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards, lmDashSwap 1ms linear 2080ms forwards, lmCurrent 3100ms linear 2080ms infinite; } [data-local-map].is-in.is-live [data-lm-anim="echo"][data-lm-i="3"] { animation: lmDraw 1800ms cubic-bezier(0.16, 1, 0.3, 1) 380ms forwards, lmDashSwap 1ms linear 2200ms forwards, lmCurrent 3700ms linear 2200ms infinite; } /* Pins pulse */ [data-local-map].is-in.is-live [data-lm-anim="pin"][data-lm-i="1"] { animation: lmDrop 520ms cubic-bezier(0.16, 1, 0.3, 1) 1800ms forwards, lmPinGlow 3400ms ease-in-out 2320ms infinite; } [data-local-map].is-in.is-live [data-lm-anim="pin"][data-lm-i="2"] { animation: lmDrop 520ms cubic-bezier(0.16, 1, 0.3, 1) 2000ms forwards, lmPinGlow 3400ms ease-in-out 2900ms infinite; } [data-local-map].is-in.is-live [data-lm-anim="pin"][data-lm-i="3"] { animation: lmDrop 520ms cubic-bezier(0.16, 1, 0.3, 1) 2200ms forwards, lmPinGlow 3400ms ease-in-out 3480ms infinite; } /* Rivers breathe */ [data-local-map].is-in.is-live [data-lm-flow="river"] { animation: lmBreathe 5200ms ease-in-out 2400ms infinite; } /* ── Accessibility ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-local-map] [data-lm-anim], [data-local-map] [data-lm-flow] { animation: none !important; } [data-local-map] [data-lm-anim="wipe"] { transform: scaleY(1); } [data-local-map] [data-lm-anim="coast"], [data-local-map] [data-lm-anim="echo"] { stroke-dashoffset: 0; } [data-local-map] [data-lm-anim="pin"], [data-local-map] [data-lm-anim="legend"] { opacity: 1; } [data-local-map] [data-lm-anim="ring"] { opacity: 0; } }