/* Veda Motion - motion layer.
   Cinematic motion and live visuals that follow the brand story: a film shoot becoming an edit.
   Everything lives inside one media query, so visitors who ask for reduced motion (and print) never see any of it.
   Hidden "before" states are only applied once boot.js / motion.js have run and each one has a timed failsafe,
   so a failed script can never leave content invisible. */

@media screen and (prefers-reduced-motion: no-preference) {

  /* ---------- Page-to-page cross-fade (browsers without support just navigate normally) ---------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

  /* ---------- Shared keyframes ---------- */
  @keyframes m-rise { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
  @keyframes m-rise-up { from { opacity: 0; translate: 0 44px; } to { opacity: 1; translate: 0 0; } }
  @keyframes m-slide { from { opacity: 0; translate: -16px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes m-pop { from { opacity: 0; scale: 0.55; } to { opacity: 1; scale: 1; } }
  @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes m-wipe { from { opacity: 0; clip-path: inset(-12% 100% -12% 0); } to { opacity: 1; clip-path: inset(-12% -2% -12% 0); } }
  @keyframes m-line { from { width: 0; } to { width: clamp(40px, 7vw, 84px); } }
  @keyframes m-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes m-focus { from { filter: blur(14px) brightness(0.8); scale: 1.08; } to { filter: blur(0) brightness(1); scale: 1; } }
  @keyframes m-kenburns { from { scale: 1.14; } to { scale: 1.02; } }
  @keyframes m-glow { 0%, 100% { text-shadow: 0 0 0 rgba(var(--gold-rgb), 0); } 50% { text-shadow: 0 0 30px rgba(var(--gold-rgb), 0.55); } }
  @keyframes m-shine { from { translate: -130% 0; } to { translate: 130% 0; } }
  @keyframes m-drift { from { translate: 0 0; scale: 1; } to { translate: 14px -22px; scale: 1.18; } }
  @keyframes m-float { from { translate: 0 0; } to { translate: 0 -12px; } }
  @keyframes m-zoomlens { 0%, 100% { scale: 0.88; rotate: 0deg; filter: brightness(0.92); } 45% { scale: 1.3; rotate: 10deg; filter: brightness(1.12); } 60% { scale: 1.3; rotate: 10deg; filter: brightness(1.12); } }
  @keyframes m-breathe { from { scale: 1; } to { scale: 1.07; } }
  @keyframes m-leak { from { translate: -14% 4%; opacity: 0.35; } to { translate: 14% -6%; opacity: 0.7; } }
  @keyframes m-grain { 0% { translate: 0 0; } 20% { translate: -3% 2%; } 40% { translate: 2% -3%; } 60% { translate: -2% -1%; } 80% { translate: 3% 3%; } 100% { translate: 0 0; } }
  @keyframes m-playhead { from { left: 0; } to { left: 100%; } }
  @keyframes m-clips { from { background-position-x: 0; } to { background-position-x: -88px; } }
  @keyframes m-halo { from { opacity: 0.25; } to { opacity: 0.75; } }
  @keyframes m-ping { 0% { opacity: 0.7; scale: 0.5; } 100% { opacity: 0; scale: 2.2; } }
  @keyframes m-rec { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
  @keyframes m-bracket { from { opacity: 0; scale: 1.05; } to { opacity: 0.8; scale: 1; } }
  @keyframes m-scan { from { top: -4%; opacity: 1; } 85% { opacity: 1; } to { top: 102%; opacity: 0; } }
  @keyframes m-grow { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes m-develop { from { filter: blur(14px) brightness(0.8); scale: 1.16; } to { filter: blur(0) brightness(1); scale: 1.06; } }
  @keyframes m-push { from { scale: 1.06; } to { scale: 1.13; } }
  @keyframes m-leader { from { background-position-x: 0; } to { background-position-x: -22px; } }

  /* Looping decoration only runs while its section is on screen (motion.js toggles .m-live on the section). */

  /* ---------- Scroll progress: a film playhead along the top edge ---------- */
  .m-bar { position: fixed; z-index: 120; inset: 0 0 auto 0; height: 3px; pointer-events: none; --p: 0; }
  .m-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-ink), var(--gold), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(var(--p)); }
  .m-bar b { position: absolute; top: 0; left: calc(var(--p) * 100%); width: 11px; height: 11px; margin: -4px 0 0 -6px; background: var(--gold-2); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.9)); opacity: clamp(0, calc(var(--p) * 60), 1); }

  /* ---------- Entrance of the first screen (held back from first paint by boot.js, released by motion.js) ---------- */
  .motion-on:not(.motion-go) :is(.hero-eyebrow, .hero h1 span, .hero-sub, .hero .showreel-btn, .trust li, .hero-script, .hero-badge, .page-hero .wrap > *) { opacity: 0; }
  .motion-go .hero-eyebrow { animation: m-rise 0.9s var(--ease) 0.1s backwards; }
  .motion-go .hero h1 span:first-child { animation: m-rise 1s var(--ease) 0.3s backwards; }
  .motion-go .hero h1 span.gold { animation: m-rise 1s var(--ease) 0.55s backwards, m-glow 3.6s ease-in-out 1.8s 2; }
  .motion-go .hero-sub { animation: m-rise 0.9s var(--ease) 0.85s backwards; }
  .motion-go .hero .showreel-btn { animation: m-rise 0.9s var(--ease) 1.05s backwards; }
  .motion-go .trust li { animation: m-rise 0.8s var(--ease) calc(1.25s + var(--i, 0) * 0.1s) backwards; }
  .motion-go .trust li:nth-child(2) { --i: 1; }
  .motion-go .trust li:nth-child(3) { --i: 2; }
  .motion-go .trust li:nth-child(4) { --i: 3; }
  .motion-go .hero-script { animation: m-rise 1.2s var(--ease) 1.7s backwards; }
  .motion-go .hero-badge { animation: m-rise 1s var(--ease) 1.9s backwards; }
  .motion-go .page-hero .wrap > * { animation: m-rise 0.9s var(--ease) calc(0.1s + var(--i, 0) * 0.14s) backwards; }
  .motion-go .page-hero .wrap > :nth-child(2) { --i: 1; }
  .motion-go .page-hero .wrap > :nth-child(3) { --i: 2; }
  .motion-go .page-hero .wrap > :nth-child(4) { --i: 3; }
  .motion-go .page-hero .wrap > :nth-child(5) { --i: 4; }

  /* ---------- Hero: a slow push-in, drifting light and film grain over the photograph ---------- */
  .m-js .hero-bg { inset: -64px 0 0 0; translate: 0 var(--hy, 0px); }
  .motion-go .hero-bg img { animation: m-kenburns 22s ease-out both; }
  .hero-bg::before { content: ""; position: absolute; inset: -20%; background: var(--grain, none); opacity: 0.1; pointer-events: none; animation: m-grain 0.9s steps(1) infinite; animation-play-state: paused; }
  .hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 38% 46% at 70% 40%, rgba(255, 190, 120, 0.55), transparent 70%); mix-blend-mode: screen; pointer-events: none; animation: m-leak 13s ease-in-out infinite alternate; animation-play-state: paused; }
  .hero.m-live .hero-bg::before, .hero.m-live .hero-bg::after { animation-play-state: running; }
  .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(var(--gold-rgb), 0.16), transparent 70%); mix-blend-mode: screen; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
  .hero.m-lit::after { opacity: 1; }
  :root[data-theme="light"] .hero-bg::after, :root[data-theme="light"] .hero::after { mix-blend-mode: soft-light; }

  /* Viewfinder: corner brackets, a blinking REC dot and a running timecode (injected by motion.js) */
  .vf { display: none; }
  @media (min-width: 1101px) {
    .vf { display: block; position: absolute; z-index: 1; inset: calc(var(--hdr-h) + 10px) max(10px, calc(var(--gutter) - 16px)) 14px; pointer-events: none; }
    .vf .c { position: absolute; width: 26px; height: 26px; border: 0 solid var(--gold-2); opacity: 0; animation: m-bracket 1.2s var(--ease) 2.2s both; }
    .vf .c.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
    .vf .c.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
    .vf .c.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
    .vf .c.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
    .vf .rec { position: absolute; top: 5px; left: 40px; display: inline-flex; align-items: center; gap: 9px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); opacity: 0; animation: m-fade 1s ease 2.4s both; }
    .vf .rec b { width: 9px; height: 9px; border-radius: 50%; background: #e5483d; box-shadow: 0 0 10px rgba(229, 72, 61, 0.9); animation: m-rec 1.4s steps(1) infinite; }
  }

  /* ---------- Across the globe: cards rise one after another, then a light sweeps along them ---------- */
  .globe-stage.is-in .lm-slot { animation: m-rise-up 1s var(--ease) calc(var(--i, 0) * 0.12s + 0.2s) backwards; }
  .lm-slot:nth-child(2) { --i: 1; }
  .lm-slot:nth-child(3) { --i: 2; }
  .lm-slot:nth-child(4) { --i: 3; }
  .lm-slot:nth-child(5) { --i: 4; }
  .lm-slot:nth-child(6) { --i: 5; }
  .lm::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 210, 0.4) 50%, transparent 62%); translate: -130% 0; pointer-events: none; }
  .globe-stage.is-in .lm::before { animation: m-shine 1.6s ease-in-out calc(var(--i, 0) * 0.16s + 1.4s) 1 both; }
  .lm img { animation: m-breathe 16s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.5s); animation-play-state: paused; }
  .m-live .lm img { animation-play-state: running; }
  .globe-side.is-in hr { animation: m-draw 1.2s var(--ease) 0.6s backwards; }

  /* ---------- Real emotions: the photograph pulls into focus ---------- */
  .emotions.m-pre:not(.m-in) .emo-bg img { filter: blur(14px) brightness(0.8); scale: 1.08; }
  .emotions.m-in .emo-bg img { animation: m-focus 2.2s var(--ease) backwards; }

  /* ---------- Behind the edit: the comparison slider shows itself, then the list lands ---------- */
  .ba.is-in:not(.m-touched) .ba-handle span::after { content: ""; position: absolute; inset: -2px; border: 2px solid #fff; border-radius: 50%; opacity: 0; animation: m-ping 2.4s ease-out 1.2s 3; }
  .edit-list.is-in li { animation: m-slide 0.8s var(--ease) calc(var(--i, 0) * 0.12s + 0.25s) backwards; }
  .edit-list li:nth-child(2) { --i: 1; }
  .edit-list li:nth-child(3) { --i: 2; }
  .edit-list li:nth-child(4) { --i: 3; }
  .edit-list li:nth-child(5) { --i: 4; }
  .edit-list li:nth-child(6) { --i: 5; }
  .edit-list.is-in li:last-child { animation: m-slide 0.8s var(--ease) 1.15s backwards, m-glow 3s ease-in-out 2.2s 2; }

  /* ---------- Services: columns arrive in sequence, icons pop like a lens focusing ---------- */
  .svc-cols.is-in .svc-col { animation: m-rise-up 0.9s var(--ease) calc(var(--i, 0) * 0.14s + 0.25s) backwards; }
  .svc-col:nth-child(2) { --i: 1; }
  .svc-col:nth-child(3) { --i: 2; }
  .svc-col:nth-child(4) { --i: 3; }
  .svc-cols.is-in .svc-col .ic { animation: m-pop 0.8s var(--ease) calc(var(--i, 0) * 0.14s + 0.6s) backwards; }
  /* the lens racks in and out like a zoom ring: closes in, holds a beat, pulls back */
  .deco-lens { animation: m-zoomlens 7s ease-in-out infinite; animation-play-state: paused; }
  .m-live .deco-lens { animation-play-state: running; }

  /* ---------- Section headings: gold rule draws, title wipes in ---------- */
  .eyebrow::after { content: ""; flex: none; width: 0; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
  .eyebrow.m-in::after { animation: m-line 1.1s var(--ease) 0.35s both; }
  .h2.m-pre:not(.m-in) { opacity: 0; }
  .h2.m-in { animation: m-wipe 1s var(--ease) 0.1s backwards; }

  /* ---------- Process steps: the dashed connector draws from step to step ---------- */
  .steps.m-pre:not(.m-in) .step::after { clip-path: inset(0 100% 0 0); }
  .steps.m-in .step::after { animation: m-draw 0.9s var(--ease) calc(var(--i, 0) * 0.4s + 0.4s) backwards; }
  .step:nth-child(2) { --i: 1; }
  .step:nth-child(3) { --i: 2; }
  .step:nth-child(4) { --i: 3; }
  .step:nth-child(5) { --i: 4; }
  @media (max-width: 640px) {
    .steps.m-in .step::after { animation: m-fade 0.8s ease calc(var(--i, 0) * 0.2s + 0.3s) backwards; }
    .steps.m-pre:not(.m-in) .step::after { clip-path: none; opacity: 0; }
  }

  /* ---------- Cards catch the light under the pointer ---------- */
  @media (hover: hover) and (pointer: fine) {
    .mini, .step, .blog-card, .brochure-card, .post-nav-link { position: relative; }
    .mini::after, .tcard::after, .svc-card::after, .pf-card::after, .blog-card::after, .brochure-card::after, .info-card::after, .post-nav-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), 0.17), transparent 70%); opacity: 0; pointer-events: none; transition: opacity 0.35s; z-index: 2; }
    .mini:hover::after, .tcard:hover::after, .svc-card:hover::after, .pf-card:hover::after, .blog-card:hover::after, .brochure-card:hover::after, a.info-card:hover::after, .post-nav-link:hover::after { opacity: 1; }
    .blog-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 210, 0.28) 50%, transparent 62%); translate: -130% 0; pointer-events: none; }
    .blog-card:hover .blog-thumb::after { animation: m-shine 0.9s var(--ease); }
    .info-card .ic { transition: scale 0.3s var(--ease), rotate 0.3s var(--ease); }
    a.info-card:hover .ic { scale: 1.18; rotate: -6deg; }
    .tcard img { transition: scale 0.35s var(--ease), box-shadow 0.35s; }
    .tcard:hover img { scale: 1.08; box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 3.5px var(--gold), 0 0 22px 6px rgba(var(--gold-rgb), 0.35); }
    :root[data-theme="light"] .mini::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), 0.22), transparent 70%); }
    [data-mag] { transition: transform 0.2s var(--ease), translate 0.35s var(--ease), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; }
  }

  /* ---------- Portfolio: cards develop like a frame, the category bar draws itself ----------
     work.js puts .is-intro on the grid only for a filter click or a first paint; --i (0-8) is the stagger slot. */
  .pf-grid.is-intro .pf-card { animation: m-rise 0.7s var(--ease) calc(var(--i, 0) * 70ms) backwards; }
  .pf-grid.is-intro .pf-thumb img { animation: m-focus 0.9s var(--ease) calc(var(--i, 0) * 70ms + 0.1s) backwards; }
  .pf-grid.is-intro .pf-thumb::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -4%; height: 2px; background: var(--gold-2); box-shadow: 0 0 14px 4px rgba(var(--gold-rgb), 0.55); opacity: 0; pointer-events: none; animation: m-scan 0.9s ease-in-out calc(var(--i, 0) * 70ms + 0.1s) backwards; }
  .cat-bar i { animation: m-grow 0.8s var(--ease) calc(var(--i, 0) * 60ms) backwards; }
  .cat-bar.is-static i { animation: none; }
  .filter .ic { transition: scale 0.25s var(--ease); }
  .filter:hover .ic { scale: 1.18; }
  .filter[aria-pressed="true"] .ic { animation: m-pop 0.4s var(--ease) backwards; }

  /* ---------- Closing banner: a live edit suite ---------- */
  .bokeh { animation: m-drift 9s ease-in-out infinite alternate; animation-play-state: paused; }
  .m-live .bokeh { animation-play-state: running; }
  .bokeh.b2 { animation-duration: 11s; animation-delay: -3s; }
  .bokeh.b3 { animation-duration: 13s; animation-delay: -6s; }
  .bokeh.b4 { animation-duration: 10s; animation-delay: -2s; }
  .desk-person, .mon { transition: translate 0.7s var(--ease); }
  .m-js .desk-person { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 6px); }
  .m-js .mon-l { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -8px); }
  .m-js .mon-r { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -10px); }
  .mon::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(160deg, rgba(120, 180, 240, 0.28), transparent 55%); mix-blend-mode: screen; pointer-events: none; opacity: 0.25; animation: m-halo 3.6s ease-in-out infinite alternate; animation-play-state: paused; }
  .m-live .mon::before { animation-play-state: running; }
  .scr img { animation: m-breathe 12s ease-in-out infinite alternate; animation-play-state: paused; }
  .m-live .scr img { animation-play-state: running; }
  .scr .tl { position: relative; overflow: hidden; animation: m-clips 3.4s linear infinite; animation-play-state: paused; }
  .m-live .scr .tl { animation-play-state: running; }
  .scr .tl::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #ff5f52; box-shadow: 0 0 8px rgba(255, 95, 82, 0.9); animation: m-playhead 7s linear infinite; animation-play-state: paused; }
  .m-live .scr .tl::after { animation-play-state: running; }
  .mon-r .tl::after { animation-duration: 9s; animation-delay: -3s; }
  .cta-script { animation: m-float 5s ease-in-out infinite alternate; animation-play-state: paused; }
  .m-live .cta-script { animation-play-state: running; }

  /* ---------- Trust strip ---------- */
  .strip.m-pre:not(.m-in) li { opacity: 0; }
  .strip.m-in li { animation: m-rise-up 0.8s var(--ease) calc(var(--i, 0) * 0.1s) backwards; }
  .strip li:nth-child(2) { --i: 1; }
  .strip li:nth-child(3) { --i: 2; }
  .strip li:nth-child(4) { --i: 3; }
  .strip li:nth-child(5) { --i: 4; }

  /* ---------- Inner-page headers: live grain, a scrolling film strip, drifting dust, artwork that comes into focus ---------- */
  .page-hero::before { inset: -20%; animation: m-grain 0.9s steps(1) infinite; animation-play-state: paused; }
  .page-hero::after { background-size: 22px 100%; animation: m-leader 2.4s linear infinite; animation-play-state: paused; }
  .page-hero.m-live::before, .page-hero.m-live::after { animation-play-state: running; }
  .m-motes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .m-motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), 0.5), rgba(var(--gold-rgb), 0) 70%); opacity: 0.6; animation: m-drift var(--d) ease-in-out var(--dl) infinite alternate; animation-play-state: paused; }
  .m-motes i:nth-child(1) { --x: 6%; --y: 58%; --s: 96px; --d: 11s; --dl: 0s; }
  .m-motes i:nth-child(2) { --x: 34%; --y: 14%; --s: 60px; --d: 13s; --dl: -4s; }
  .m-motes i:nth-child(3) { --x: 58%; --y: 66%; --s: 120px; --d: 15s; --dl: -7s; }
  .m-motes i:nth-child(4) { --x: 82%; --y: 30%; --s: 72px; --d: 12s; --dl: -2s; }
  .page-hero.m-live .m-motes i { animation-play-state: running; }
  :root[data-theme="light"] .m-motes i { opacity: 0.3; }

  /* ---------- Home: the first screen gets drifting dust (the same motes as the inner headers, six of them) ---------- */
  .hero .m-motes i:nth-child(1) { --x: 46%; --y: 70%; --s: 70px; --d: 12s; --dl: -1s; }
  .hero .m-motes i:nth-child(2) { --x: 62%; --y: 22%; --s: 54px; --d: 14s; --dl: -5s; }
  .hero .m-motes i:nth-child(3) { --x: 78%; --y: 58%; --s: 96px; --d: 16s; --dl: -8s; }
  .hero .m-motes i:nth-child(4) { --x: 90%; --y: 18%; --s: 62px; --d: 13s; --dl: -3s; }
  .hero .m-motes i:nth-child(5) { --x: 30%; --y: 34%; --s: 44px; --d: 15s; --dl: -10s; }
  .hero .m-motes i:nth-child(6) { --x: 70%; --y: 82%; --s: 58px; --d: 11s; --dl: -6s; }
  .hero.m-live .m-motes i { animation-play-state: running; }

  /* ---------- Home: the brand watermark sways, and a faint band of light crosses the section now and then ---------- */
  @keyframes m-wm-a { from { translate: 0 0; rotate: 0deg; scale: 1; } to { translate: -3% -6%; rotate: 5deg; scale: 1.1; } }
  @keyframes m-wm-b { from { translate: 0 0; rotate: 0deg; scale: 1; } to { translate: 4% 7%; rotate: -5deg; scale: 1.1; } }
  @keyframes m-band { 0%, 12% { translate: -110% 0; } 62%, 100% { translate: 110% 0; } }
  @keyframes m-ring { from { scale: 0.94; opacity: 0.35; } to { scale: 1.06; opacity: 0.6; } }
  @keyframes m-aura { from { translate: -6% 4%; scale: 1; opacity: 0.55; } to { translate: 8% -6%; scale: 1.18; opacity: 1; } }
  .has-wm::before { animation: m-wm-a 26s ease-in-out infinite alternate; animation-play-state: paused; }
  .has-wm.wm-l::before { animation-name: m-wm-b; animation-duration: 30s; }
  .has-wm.wm-c::before { animation-duration: 34s; }
  .has-wm.m-live::before { animation-play-state: running; }
  .has-wm::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(var(--gold-rgb), 0.08) 50%, transparent 62%); translate: -110% 0; pointer-events: none; animation: m-band 17s ease-in-out infinite; animation-play-state: paused; }
  .has-wm.m-live::after { animation-play-state: running; }
  :root[data-theme="light"] .has-wm::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); }

  /* Across the globe: the map rings breathe outward */
  .globe .deco-map { animation: m-ring 14s ease-in-out infinite alternate; animation-play-state: paused; }
  .globe.m-live .deco-map { animation-play-state: running; }

  /* Services: a warm light wanders behind the columns */
  .svc { isolation: isolate; }
  .svc::before { content: ""; position: absolute; z-index: -1; inset: -20% 10% -20% 10%; background: radial-gradient(ellipse 40% 46% at 50% 50%, rgba(var(--gold-rgb), 0.11), transparent 70%); pointer-events: none; animation: m-aura 15s ease-in-out infinite alternate; animation-play-state: paused; }
  .svc.m-live::before { animation-play-state: running; }
  :root[data-theme="light"] .svc::before { opacity: 0.6; }
  .motion-on:not(.motion-go) .page-art { opacity: 0; }
  .motion-go .page-art { animation: m-focus 1.4s var(--ease) 0.35s backwards, m-float 7s ease-in-out 1.75s infinite alternate; animation-play-state: running, paused; }
  .page-hero.m-live .page-art { animation-play-state: running, running; }
  :root:not([data-theme="light"]) .page-art { filter: drop-shadow(0 0 26px rgba(var(--gold-rgb), 0.22)); }
  .m-js .page-art { transform: translate(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -14px)); transition: transform 0.8s var(--ease); }

  /* ---------- Portraits: develop like a print, push in slowly, a light sweeps across, the gold frame draws itself ---------- */
  .figure-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 210, 0.32) 50%, transparent 62%); translate: -130% 0; pointer-events: none; }
  .about-photo.is-in .figure-frame::before, .figure-frame.reveal.is-in::before { animation: m-shine 1.5s var(--ease) 0.9s; }
  .about-photo.is-in .figure-frame::after, .figure-frame.reveal.is-in::after { animation: m-draw 1.3s var(--ease) 0.5s backwards; }
  .about-photo.is-in .figure-frame img, .figure-frame.reveal.is-in img { animation: m-develop 1.5s var(--ease) 0.15s both, m-push 18s ease-in-out 1.65s infinite alternate; animation-play-state: running, paused; }
  .about-photo.is-in .figure-frame.m-live img, .figure-frame.reveal.is-in.m-live img { animation-play-state: running, running; }
  .m-js .figure-frame img { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -7px); transition: translate 0.8s var(--ease); }
  .m-js .about-photo::before { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 9px); transition: translate 0.8s var(--ease); }

  /* ---------- Blog: thumbnails come into focus, the lead story slowly pushes in, the cover develops ---------- */
  .blog-card.is-in .blog-thumb img { animation: m-focus 1.1s var(--ease) 0.1s backwards; }
  .blog-feature.is-in .blog-thumb img { animation: m-develop 1.5s var(--ease) 0.1s both, m-push 20s ease-in-out 1.6s infinite alternate; animation-play-state: running, paused; }
  .blog-feature.is-in.m-live .blog-thumb img { animation-play-state: running, running; }
  .motion-on:not(.motion-go) .post-cover { opacity: 0; }
  .motion-go .post-cover img { animation: m-develop 1.5s var(--ease) 0.3s both, m-push 22s ease-in-out 1.8s infinite alternate; animation-play-state: running, paused; }
  .motion-go .post-cover.m-live img { animation-play-state: running, running; }

  /* ---------- Brochures: cards rise in turn, the icon rings on hover ---------- */
  .brochure-card { animation: m-rise-up 0.8s var(--ease) calc(var(--i, 0) * 0.07s) backwards; }
  .brochure-card:nth-child(2) { --i: 1; }
  .brochure-card:nth-child(3) { --i: 2; }
  .brochure-card:nth-child(4) { --i: 3; }
  .brochure-card:nth-child(5) { --i: 4; }
  .brochure-card:nth-child(n+6) { --i: 5; }
  .brochure-card-icon { position: relative; transition: scale 0.3s var(--ease), border-color 0.3s, color 0.3s; }
  .brochure-card-icon::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; }
  .brochure-card:hover .brochure-card-icon { scale: 1.1; border-color: var(--gold); color: var(--gold); }
  .brochure-card:hover .brochure-card-icon::after { animation: m-ping 1.1s ease-out infinite; }

  /* ---------- Contact, services and work ---------- */
  .map-frame::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -4%; height: 2px; background: var(--gold-2); box-shadow: 0 0 14px 4px rgba(var(--gold-rgb), 0.55); opacity: 0; pointer-events: none; }
  .map-card.is-in .map-frame::before { animation: m-scan 1.6s ease-in-out 0.5s backwards; }
  .svc-card > .ic { transition: scale 0.3s var(--ease), rotate 0.3s var(--ease); }
  .svc-card.is-in > .ic { animation: m-pop 0.8s var(--ease) 0.25s backwards; }
  .svc-card:hover > .ic { rotate: -8deg; scale: 1.12; }
  .art-note { animation: m-float 6s ease-in-out infinite alternate; animation-play-state: paused; }
  .art-note.m-live { animation-play-state: running; }

  /* ---------- Small screens: same motion as desktop (film strip, grain, dust, glows run on phones too) ----------
     Only the pointer-driven parts are skipped (motion.js sets --px/--py/--mx/--my on fine pointers only). */

  /* ---------- Closing banner on phones: no pointer to follow, so the edit suite moves by itself ---------- */
  @keyframes m-sway { from { translate: -5px 0; rotate: -0.6deg; } to { translate: 7px -9px; rotate: 0.6deg; } }
  @keyframes m-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.45); } 60% { box-shadow: 0 0 0 14px rgba(var(--gold-rgb), 0); } }
  @keyframes m-glare { 0%, 30% { translate: -140% 0; } 80%, 100% { translate: 140% 0; } }
  @media (max-width: 900px) {
    .desk-person { animation: m-sway 5s ease-in-out infinite alternate; animation-play-state: paused; }
    .m-live .desk-person { animation-play-state: running; }
    .mon-l, .mon-r { animation: m-float 4.2s ease-in-out infinite alternate; animation-play-state: paused; }
    .mon-r { animation-duration: 5.4s; animation-delay: -1.8s; }
    .m-live .mon-l, .m-live .mon-r { animation-play-state: running; }
    .scr::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%); pointer-events: none; animation: m-glare 5s ease-in-out infinite; animation-play-state: paused; }
    .m-live .scr::after { animation-play-state: running; }
    .mon-r .scr::after { animation-delay: -2.2s; }
    .cta-copy .btn { animation: m-pulse 2.4s ease-in-out infinite; animation-play-state: paused; }
    .m-live .cta-copy .btn { animation-play-state: running; }
  }
}