/* ───────────────────────────────────────────────────────────────── MSA · Global Motion System — motion.css Loaded by every page alongside motion.js. Each section is keyed to a feature in motion.js so MEANG can disable individual behaviors via: ───────────────────────────────────────────────────────────────── */ /* ── Sticky guard ──────────────────────────────────────────── Page CSS uses `overflow-x: hidden` on html/body, which forces `overflow-y: auto` computed and turns body into a scroll container — killing position:sticky on the marquee, nav, and filter bar. Swap to `clip` (modern browsers) so horizontal overflow is contained without a new scroll context. Sticky descendants now anchor to the viewport. */ html, body { overflow-x: clip !important; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden !important; } } :root { --motion-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --motion-dur-short: 400ms; --motion-dur: 700ms; --motion-dur-long: 900ms; --motion-marquee-h: 32px; --motion-cursor-color: 168, 199, 214; /* #a8c7d6 rgb */ --msa-blue: #a8c7d6; --msa-blue-deep: #8fb1c2; --msa-ink: #1a1612; } /* A11y kill-switch — disables ALL transitions/animations on reduce */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── 2. Hero char reveal ───────────────────────────────────────── Used by elements tagged [data-motion-chars]. motion.js wraps each char in so we can stagger via CSS. */ [data-motion-chars] .mch { display: inline-block; opacity: 0; transform: translateY(12px); white-space: pre; animation: msaCharIn 700ms var(--motion-ease) both; animation-delay: calc(var(--i, 0) * 40ms + 200ms); will-change: transform, opacity; } @keyframes msaCharIn { to { opacity: 1; transform: none; } } /* ── 3. Section reveal w/ stagger ──────────────────────────────── .reveal-on is motion.js's auto-applied class. Existing .reveal classes on Home/work are preserved — we just add .in via IO. */ .reveal-on { opacity: 0; transform: translateY(24px); will-change: transform, opacity; } .reveal-on.in { opacity: 1; transform: none; transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease); transition-delay: calc(var(--stagger, 0) * 80ms); } /* ── 4. Top marquee band ──────────────────────────────────────── Injected by motion.js when body has [data-motion-marquee]. Cream band with mono caption, scrolls 40s linear, pauses on hover. */ .msa-marquee { position: sticky; top: 0; z-index: 110; background: var(--msa-blue); color: var(--msa-ink); border-bottom: 1px solid var(--msa-blue-deep); height: var(--motion-marquee-h); overflow: hidden; display: flex; align-items: center; font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'DotGothic16', Menlo, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; user-select: none; } .msa-marquee-track { display: inline-flex; white-space: nowrap; animation: msaMarquee 40s linear infinite; will-change: transform; } .msa-marquee:hover .msa-marquee-track { animation-play-state: paused; } .msa-marquee-track span { padding-right: 56px; display: inline-flex; align-items: center; gap: 14px; } .msa-marquee-track span em { color: rgba(26, 22, 18, 0.5); font-style: normal; font-size: 10px; letter-spacing: 0; } @keyframes msaMarquee { to { transform: translate3d(-50%, 0, 0); } } /* Push nav + filterbars down when marquee is present so both stay sticky */ body[data-motion-marquee] header.nav { top: var(--motion-marquee-h); } body[data-motion-marquee] .filterbar { top: calc(56px + var(--motion-marquee-h)); } /* ── 5. Tile hover enhancements ───────────────────────────────── Adds grayscale-to-color, soft tint, slow zoom. CSS-only. Hooks any element with class .tile, .row .hero, [data-tile]. */ @media (hover: hover) and (pointer: fine) { .tile .cover img, .row .hero img, [data-tile] img { transition: filter 500ms var(--motion-ease), transform 600ms var(--motion-ease); filter: grayscale(0.55) contrast(0.98); will-change: filter, transform; } .tile:hover .cover img, .row .hero:hover img, [data-tile]:hover img { filter: grayscale(0) contrast(1); } .tile:hover .cover, .row .hero:hover { /* subtle blue-gray overlay 8% */ box-shadow: inset 0 0 0 9999px rgba(var(--motion-cursor-color), 0.08); } .tile .cover, .row .hero { transition: box-shadow 400ms var(--motion-ease); } } /* ── 6. Number tickup — purely JS, no CSS needed. See motion.js → [data-count] elements animate via rAF. */ /* ── 7. Tile in-place hover ────────────────────────────────────── Project tiles & Home rows get an in-place treatment on hover: · image scales 1 → 1.06 (600ms ease) · container lifts -4px + soft shadow · grayscale 0.2 → 0 · a 56px caption strip (project name + "→ View project") slides up from the bottom of the image Tiles with no real cover image (placeholders) get a cream-tint instead. Caption strip is injected by motion.js. */ /* Base transitions */ .tile, .row { transition: transform 600ms var(--motion-ease); will-change: transform; } .tile { transition: transform 600ms var(--motion-ease), box-shadow 600ms var(--motion-ease), background 300ms var(--motion-ease); } .row .hero { transition: box-shadow 600ms var(--motion-ease); } /* Cover/hero must clip the scaled image */ .tile .cover, .row .hero { overflow: hidden; position: relative; } /* Image baseline */ .tile .cover img, .row .hero img, .row .hero image-slot { transition: transform 600ms var(--motion-ease), filter 500ms var(--motion-ease); filter: grayscale(0.2); will-change: transform, filter; } @media (hover: hover) and (pointer: fine) { /* Tiles with imagery → lift + shadow + image grow */ .tile[data-has-image]:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } .row[data-row-clickable]:hover { transform: translateY(-4px); } .row[data-row-clickable]:hover .hero { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } .tile[data-has-image]:hover .cover img, .row[data-row-clickable]:hover .hero img, .row[data-row-clickable]:hover .hero image-slot { transform: scale(1.06); filter: grayscale(0); } .tile[data-has-image]:hover .msa-hover-cap, .row[data-row-clickable]:hover .msa-hover-cap { opacity: 1; transform: translateY(0); } /* Tiles WITHOUT imagery → cream tint + slight text slide */ .tile:not([data-has-image]):hover { background: #ede5d3; } .tile:not([data-has-image]):hover .pname-en, .tile:not([data-has-image]):hover .pname-th, .tile:not([data-has-image]):hover .pmeta { transform: translateX(4px); transition: transform 300ms var(--motion-ease); } } /* Caption strip — injected by motion.js into each .cover / .hero */ .msa-hover-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--motion-ease), transform 400ms var(--motion-ease); } .msa-hover-cap .cap-name { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--msa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; } .msa-hover-cap .cap-view { font-family: 'JetBrains Mono', ui-monospace, 'DotGothic16', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6f8e9c; display: inline-flex; align-items: center; gap: 6px; } .msa-hover-cap .cap-view .arr { display: inline-block; } .tile[data-has-image]:hover .msa-hover-cap .cap-view .arr, .row[data-row-clickable]:hover .msa-hover-cap .cap-view .arr { animation: msaCapArrow 1.5s ease-in-out infinite; } @keyframes msaCapArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } /* Touch / coarse: hide caption strip, no transforms */ @media (pointer: coarse), (hover: none) { .msa-hover-cap { display: none; } .tile, .row, .tile .cover img, .row .hero img, .row .hero image-slot { transform: none !important; } } /* Cursor affordances */ .tile[data-has-image] { cursor: pointer; } .row[data-row-clickable] { cursor: pointer; } /* ── 8. Sticky year pin ───────────────────────────────────────── Injected when body has [data-motion-yearpin]. Vertical text on left edge, mirrors current section's data-year. */ .msa-year-pin { position: fixed; left: 16px; bottom: 24px; transform-origin: left bottom; transform: rotate(-90deg) translate(0, 0); font-family: 'DotGothic16', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(77, 83, 95, 0.55); z-index: 50; pointer-events: none; opacity: 0; white-space: nowrap; transition: opacity 500ms var(--motion-ease), color 300ms var(--motion-ease); } .msa-year-pin.show { opacity: 1; } .msa-year-pin .arrow { color: rgba(155, 106, 58, 0.7); } @media (max-width: 900px) { .msa-year-pin { display: none; } } /* ── Loader: spinning MSA mark ───────────────────────────────── motion.js injects a large spinning .msa-loader-mark image (the hexagon symbol) into every #loader element on the page. Wordmark stays where it was. Mark spins at 1.2s/turn so it's clearly alive, has a soft blue halo behind it, and gently scales-in on first paint. */ #loader .msa-loader-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; z-index: 2; } #loader .msa-loader-mark { width: 132px; height: 132px; object-fit: contain; display: block; filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(168,199,214,.55)); animation: msaLoaderMarkIn 700ms cubic-bezier(.2,.7,.2,1) both, msaLoaderMarkSpin 1.2s linear 700ms infinite; transform-origin: 50% 50%; will-change: transform; } #loader .msa-loader-halo { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(168, 199, 214, 0.18); pointer-events: none; animation: msaLoaderHalo 2.4s ease-in-out 700ms infinite; } #loader .msa-loader-halo.h2 { width: 300px; height: 300px; border-color: rgba(168, 199, 214, 0.10); animation-delay: 1.3s; } @keyframes msaLoaderMarkIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes msaLoaderMarkSpin { to { transform: rotate(360deg); } } @keyframes msaLoaderHalo { 0% { transform: translate(-50%,-50%) scale(.85); opacity: .55; } 60% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; } } /* Existing per-page #loader .mark wordmark sits below the spinning mark; shrink + relax the entry blur so the symbol is the hero. */ #loader:has(.msa-loader-mark) .mark { font-size: 28px !important; letter-spacing: 0.32em !important; animation: msaLoaderWordIn 600ms ease 400ms both !important; opacity: .85; } @keyframes msaLoaderWordIn { from { opacity: 0; transform: translateY(6px); } to { opacity: .85; transform: none; } } @media (prefers-reduced-motion: reduce) { #loader .msa-loader-mark { animation: none !important; } #loader .msa-loader-halo { animation: none !important; opacity: 0; } } /* ── 9. Logo motion ───────────────────────────────────────────── L1 — hexagon mark rotates slowly forever (30s/turn). L4 — on nav hover, same animation but accelerates to ~1.2s/turn so the hex visibly whips one revolution then settles back. Wordmark gets a tiny breathing scale, paused on hover. */ .nav-left .logo-mark { display: inline-block; animation: msaLogoMarkSpin 30s linear infinite; transform-origin: 50% 50%; will-change: transform; } .nav-left .logo-word { display: inline-block; animation: msaLogoIdle 8s ease-in-out infinite; transform-origin: center; will-change: transform; } .nav-left:hover .logo-word { animation-play-state: paused; } @media (hover: hover) and (pointer: fine) { .nav-left:hover .logo-mark { animation-duration: 1.2s; animation-timing-function: cubic-bezier(.3,.7,.3,1); } } @keyframes msaLogoIdle { 0%,100%{transform:scale(1);} 50%{transform:scale(1.015);} } @keyframes msaLogoMarkSpin { to { transform: rotate(360deg); } } /* ── 13. Image mask reveal (D) ────────────────────────────────── Hero & gallery images "open" from left to right with clip-path when they enter the viewport. motion.js adds .mask-in once visible. */ /* ── 13. Image mask reveal — DISABLED (caused layout/load issues). Kept rule scaffold for re-enabling later if needed. */ /* ── 14. Scroll progress bar (F) ──────────────────────────────── Thin teal line at the very top, width tracks document scroll. */ .msa-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--msa-blue-deep); z-index: 200; pointer-events: none; transition: width 80ms linear; } body[data-motion-marquee] .msa-scroll-progress { top: var(--motion-marquee-h); } /* ── 10. Page transitions ─────────────────────────────────────── Body fades to 0 before navigation, back to 1 on pageshow. */ body.msa-fade-out { opacity: 0; transition: opacity 250ms var(--motion-ease); } /* ── 11. Hero reel video reveal + hover corners ───────────────── Video opacity 0→1 on intersection. Hover draws 4 corner brackets. */ video#introVideo { opacity: 0; transition: opacity 600ms var(--motion-ease); } video#introVideo.in { opacity: 1; } .vid-wrap { position: relative; } .vid-wrap .msa-vid-corner { position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 4; opacity: 0; transition: width 450ms var(--motion-ease), height 450ms var(--motion-ease), opacity 450ms var(--motion-ease); } .vid-wrap .msa-vid-corner.tl { top: 14px; left: 14px; border-top: 1px solid rgba(255,255,255,.85); border-left: 1px solid rgba(255,255,255,.85); } .vid-wrap .msa-vid-corner.tr { top: 14px; right: 14px; border-top: 1px solid rgba(255,255,255,.85); border-right: 1px solid rgba(255,255,255,.85); } .vid-wrap .msa-vid-corner.bl { bottom: 14px; left: 14px; border-bottom: 1px solid rgba(255,255,255,.85); border-left: 1px solid rgba(255,255,255,.85); } .vid-wrap .msa-vid-corner.br { bottom: 14px; right: 14px; border-bottom: 1px solid rgba(255,255,255,.85); border-right: 1px solid rgba(255,255,255,.85); } @media (hover: hover) { .vid-wrap:hover .msa-vid-corner { opacity: 1; width: 44px; height: 44px; } } /* ── 12. CTA bounce arrow + underline draw ────────────────────── Targets .explore-link, .viewall, .cta-primary, .cta-secondary. Arrow pulses gently; hover replaces pulse with translateX + line. */ .explore-link .arrow, .viewall .arrow, [data-cta-bounce] .arrow { display: inline-block; animation: msaArrowBounceY 2.2s ease-in-out infinite; will-change: transform; } .viewall .arrow, [data-cta-bounce="x"] .arrow { animation-name: msaArrowBounceX; } @keyframes msaArrowBounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @keyframes msaArrowBounceX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .explore-link, .viewall, .cta-secondary { position: relative; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 400ms var(--motion-ease), color .15s ease; } @media (hover: hover) { .explore-link:hover, .viewall:hover, .cta-secondary:hover { background-size: 100% 1px; } .explore-link:hover .arrow, .viewall:hover .arrow, [data-cta-bounce]:hover .arrow { animation: none; transform: translateX(4px); transition: transform 300ms var(--motion-ease); } } /* Pause CTA bounces when not in viewport (set by motion.js IO) */ .msa-paused .arrow { animation-play-state: paused !important; } /* ── Dot pulse ────────────────────────────────────────────────── Soft blue-gray status dots breathe + emit a halo. CSS-only. Targets existing classes on every page (no per-page wiring). */ .pill .dot, .meta-corners .meta-tc .dot, .vid-meta .dot, .live-indicator, .status-dot, .project-dot, [data-pulse-dot] { position: relative; background: var(--msa-blue); border-radius: 50%; display: inline-block; animation: msaDotPulse 2.4s ease-in-out infinite; will-change: transform, opacity; } .pill .dot::after, .meta-corners .meta-tc .dot::after, .vid-meta .dot::after, .live-indicator::after, .status-dot::after, .project-dot::after, [data-pulse-dot]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--msa-blue); pointer-events: none; animation: msaDotHalo 2.4s ease-out infinite; transform-origin: center; } @keyframes msaDotPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.6); opacity: 0.40; } } @keyframes msaDotHalo { 0% { transform: scale(1); opacity: 0.40; } 100% { transform: scale(2.4); opacity: 0; } } /* ── Pixel symbol idle animations ──────────────────────────────── Each project's .pmark gets a class from its slug (.symbol-house, .symbol-pet-hospital, etc.) so the 8x8 pixel art above the project name breathes/sways subtly. --symbol-i staggers start times so tiles don't pulse in unison. Hover pauses + scales + tints; reduced-motion freezes them. */ .pmark { transition: transform 300ms var(--motion-ease), box-shadow 250ms ease, background 200ms ease; will-change: transform; transform-origin: center; animation-delay: calc(var(--symbol-i, 0) * 0.3s); } /* Every symbol carries an underlying 4s idle pulse via the .pmark::after ring (so the transform channel stays free for the custom motion below). */ .pmark { position: relative; } .pmark::after { content: ""; position: absolute; inset: -3px; border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 0 rgba(168, 199, 214, 0); animation: msaSymbolIdlePulse 4s ease-in-out infinite; animation-delay: calc(var(--symbol-i, 0) * 0.3s); } @keyframes msaSymbolIdlePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 199, 214, 0); } 50% { box-shadow: 0 0 0 3px rgba(168, 199, 214, 0.10); } } .pmark.symbol-default { animation: msaSymbolIdle 4s ease-in-out infinite; } .pmark.symbol-house { animation: msaSymbolHouseDoor 4.4s ease-in-out infinite; } .pmark.symbol-hotel-b2 { animation: msaSymbolSway 6s ease-in-out infinite; } .pmark.symbol-cafe { animation: msaSymbolLeafWave 4s ease-in-out infinite; } .pmark.symbol-vanillin { animation: msaSymbolSpin 30s linear infinite; } .pmark.symbol-pet-hospital { animation: msaSymbolHeartbeat 1.6s ease-in-out infinite; } /* Stagger every tile's main motion so they never beat in unison. */ .pmark.symbol-default, .pmark.symbol-house, .pmark.symbol-hotel-b2, .pmark.symbol-cafe, .pmark.symbol-vanillin, .pmark.symbol-pet-hospital { animation-delay: calc(var(--symbol-i, 0) * 0.3s); } /* Pet-hospital red glow — keyed to heartbeat via ::after override */ .pmark.symbol-pet-hospital::after { animation: msaSymbolIdlePulse 4s ease-in-out infinite, msaSymbolHeartGlow 1.6s ease-in-out infinite; animation-delay: calc(var(--symbol-i, 0) * 0.3s), 0s; } @keyframes msaSymbolHeartGlow { 0%, 100% { background: rgba(225, 60, 55, 0); } 20% { background: rgba(225, 60, 55, 0.18); box-shadow: 0 0 18px 2px rgba(225, 60, 55, 0.35); } 40% { background: rgba(225, 60, 55, 0); } 60% { background: rgba(225, 60, 55, 0.12); box-shadow: 0 0 14px 1px rgba(225, 60, 55, 0.22); } } /* House — "door slide + window flicker" A tiny horizontal slide-and-back (the door) layered with a brief brightness blip every cycle (the window). */ @keyframes msaSymbolHouseDoor { 0% { transform: translateX(0) scale(1); filter: brightness(1); } 18% { transform: translateX(0.6px) scale(1.015); filter: brightness(1); } 34% { transform: translateX(-0.4px) scale(1.02); filter: brightness(1.18); } 42% { transform: translateX(-0.4px) scale(1.02); filter: brightness(1); } 50% { transform: translateX(0) scale(1.025); filter: brightness(1.10); } 68% { transform: translateX(0) scale(1.015); filter: brightness(1); } 100% { transform: translateX(0) scale(1); filter: brightness(1); } } @keyframes msaSymbolIdle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes msaSymbolHeartbeat { 0% { transform: scale(1); } 20% { transform: scale(1.12); } 40% { transform: scale(1); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes msaSymbolSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } } @keyframes msaSymbolLeafWave { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(3deg) translateY(-0.5px); } 75% { transform: rotate(-3deg) translateY(0.5px); } } @keyframes msaSymbolSpin { to { transform: rotate(360deg); } } /* Hover: pause, scale up, blue-gray halo behind */ @media (hover: hover) and (pointer: fine) { .row:hover .pmark, .pmark:hover { animation: none !important; transform: scale(1.15); box-shadow: 0 0 0 8px rgba(168, 199, 214, 0.20); filter: brightness(1) !important; } .row:hover .pmark::after, .pmark:hover::after { animation: none !important; background: transparent !important; box-shadow: none !important; } } @media (prefers-reduced-motion: reduce) { .pmark, .pmark.symbol-pet-hospital, .pmark.symbol-house, .pmark::after, .pmark.symbol-pet-hospital::after { animation: none !important; transform: none !important; filter: none !important; background: transparent !important; box-shadow: none !important; } .pmark:hover, .row:hover .pmark { transform: none !important; opacity: 0.85; } }