/* 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(224, 176, 122, 0); } 50% { text-shadow: 0 0 30px rgba(224, 176, 122, 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-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; } }

  /* 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(224, 176, 122, 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(224, 176, 122, 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; }
  .deco-lens { animation: m-breathe 9s ease-in-out infinite alternate; 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 { position: relative; }
    .mini::after, .tcard::after, .svc-card::after, .pf-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 176, 122, 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 { opacity: 1; }
    :root[data-theme="light"] .mini::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 150, 93, 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: #e0b07a; box-shadow: 0 0 14px 4px rgba(224, 176, 122, 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: the artwork floats, the grain stays ---------- */
  .page-art { animation: m-float 7s ease-in-out infinite alternate; }

  /* ---------- Small screens: keep entrances, drop the pointer and always-on effects ---------- */
  @media (max-width: 640px) {
    .hero-bg::before, .hero-bg::after { display: none; }
    .m-js .hero-bg { inset: 0; translate: none; }
    .lm::before, .bokeh { display: none; }
  }
}