/* Vigthoria Motion Runtime v3 — composable UI and full-surface hero motion. */
[data-v-motion~="3d-tilt"] {
  transform: perspective(1200px) rotateX(var(--v-tilt-x, 0deg)) rotateY(var(--v-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

[data-v-motion~="magnetic"] {
  transform: translate3d(var(--v-magnetic-x, 0), var(--v-magnetic-y, 0), 0);
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* Full-surface hero field. It uses the same normalized pointer values as the
   image scene so light, particles and photographic depth remain coherent. */
.v-motion-hero {
  --v-pointer-x: 50%;
  --v-pointer-y: 50%;
  --v-pointer-nx: 0;
  --v-pointer-ny: 0;
  --v-pointer-speed: 0;
  --v-hero-pan-x: 0px;
  --v-hero-pan-y: 0px;
  --v-hero-counter-x: 0px;
  --v-hero-counter-y: 0px;
  --v-hero-angle: 92deg;
  isolation: isolate;
  overflow: hidden;
}

.v-motion-hero > .v-motion-hero-field,
.v-motion-hero > .v-motion-hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.v-motion-hero > .v-motion-hero-field {
  opacity: .6;
  background:
    radial-gradient(circle 32rem at var(--v-pointer-x) var(--v-pointer-y), rgb(255 255 255 / .15), transparent 58%),
    conic-gradient(from var(--v-hero-angle) at var(--v-pointer-x) var(--v-pointer-y), transparent, rgb(117 136 255 / .13), transparent 24%);
  mix-blend-mode: screen;
  transition: opacity 500ms ease;
}

.v-motion-hero > .v-motion-hero-field::before,
.v-motion-hero > .v-motion-hero-field::after {
  content: "";
  position: absolute;
  inset: -18%;
  will-change: transform, opacity;
}

.v-motion-hero > .v-motion-hero-field::before {
  background: repeating-linear-gradient(115deg, transparent 0 34px, rgb(255 255 255 / .09) 35px, transparent 36px 72px);
  mask-image: radial-gradient(circle 27rem at var(--v-pointer-x) var(--v-pointer-y), #000, transparent 72%);
  transform: translate3d(var(--v-hero-pan-x), var(--v-hero-pan-y), 0) rotate(-2deg);
  opacity: calc(.14 + var(--v-pointer-speed) * .7);
}

.v-motion-hero > .v-motion-hero-field::after {
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 50%;
  transform: translate3d(var(--v-hero-counter-x), var(--v-hero-counter-y), 0) scale(.74);
  opacity: .22;
  animation: v-motion-hero-orbit 18s linear infinite;
}

.v-motion-hero[data-v-pointer="active"] > .v-motion-hero-field { opacity: 1; }

.v-motion-hero > .v-motion-hero-particles i {
  position: absolute;
  left: var(--v-px);
  top: var(--v-py);
  width: var(--v-size);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: currentColor;
  box-shadow: 0 0 1rem currentColor;
  opacity: var(--v-alpha);
  animation: v-motion-particle-float var(--v-float) ease-in-out infinite alternate;
}

.v-motion-hero > .v-motion-hero-particles {
  transform: translate3d(var(--v-hero-pan-x), var(--v-hero-pan-y), 0);
  transition: transform 500ms cubic-bezier(.16,1,.3,1);
}

@keyframes v-motion-hero-orbit {
  to { transform: translate3d(var(--v-hero-counter-x), var(--v-hero-counter-y), 0) scale(.74) rotate(360deg); }
}

@keyframes v-motion-particle-float {
  to { margin-top: -22px; opacity: .72; }
}

/* Authored image scenes. */
.v-motion-scene {
  --v-scene-x: 0px;
  --v-scene-y: 0px;
  --v-scene-rotate: 0deg;
  isolation: isolate;
  overflow: hidden;
}

:where(.v-motion-scene) { position: relative; }

.v-motion-scene > img:not(.v-motion-scene-copy) {
  position: relative;
  z-index: 0;
  will-change: transform, filter;
}

.v-motion-scene > .v-motion-scene-copy {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  animation: none !important;
  will-change: clip-path, opacity, transform, filter;
  transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), clip-path 540ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease;
}

.v-motion-scene > .v-motion-scene-fx {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
}

.v-motion-scene > .v-motion-scene-fx::after {
  content: attr(data-v-motion-label);
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  padding: .55rem .75rem;
  border: 1px solid currentColor;
  color: #fff;
  background: rgb(0 0 0 / .34);
  backdrop-filter: blur(12px);
  font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translate3d(0, -8px, 0);
  opacity: 0;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease;
}

.v-motion-scene[data-v-pointer="active"] > img:not(.v-motion-scene-copy) {
  animation-play-state: paused !important;
  transform: scale(1.095) translate3d(var(--v-scene-x), var(--v-scene-y), 0);
}

.v-motion-scene[data-v-pointer="active"] > .v-motion-scene-fx,
.v-motion-scene[data-v-pointer="active"] > .v-motion-scene-fx::after { opacity: 1; }
.v-motion-scene[data-v-pointer="active"] > .v-motion-scene-fx::after { transform: translate3d(0, 0, 0); }

/* Ember — hot aperture, smoke sweep and copper particles. */
[data-v-motion~="image-ember"] > .v-motion-scene-copy {
  clip-path: circle(0% at var(--v-pointer-x) var(--v-pointer-y));
  filter: saturate(1.65) brightness(1.24) contrast(1.1);
  transform: scale(1.14) translate3d(var(--v-scene-x), var(--v-scene-y), 0);
  mix-blend-mode: screen;
}
[data-v-motion~="image-ember"][data-v-pointer="active"] > .v-motion-scene-copy { clip-path: circle(28% at var(--v-pointer-x) var(--v-pointer-y)); opacity: .88; }
[data-v-motion~="image-ember"] > .v-motion-scene-fx {
  color: #ff8b3d;
  background:
    radial-gradient(circle 21rem at var(--v-pointer-x) var(--v-pointer-y), rgb(255 107 31 / .38), transparent 62%),
    linear-gradient(var(--v-hero-angle), transparent 35%, rgb(255 148 76 / .12), transparent 67%);
}
[data-v-motion~="image-ember"] > .v-motion-hero-field { background: radial-gradient(circle 38rem at var(--v-pointer-x) var(--v-pointer-y), rgb(255 112 42 / .34), transparent 62%), linear-gradient(110deg, transparent 30%, rgb(255 190 120 / .08), transparent 70%); }
[data-v-motion~="image-ember"] > .v-motion-hero-particles i { color: #ff8a42; }

/* Signal — chromatic tuning slice and moving scan field. */
[data-v-motion~="image-signal"] > .v-motion-scene-copy {
  clip-path: polygon(calc(var(--v-pointer-x) - 13%) 0, calc(var(--v-pointer-x) + 5%) 0, calc(var(--v-pointer-x) + 13%) 100%, calc(var(--v-pointer-x) - 5%) 100%);
  filter: hue-rotate(38deg) saturate(1.9) contrast(1.18);
  transform: translate3d(var(--v-scene-x), 0, 0) scale(1.08);
  mix-blend-mode: screen;
}
[data-v-motion~="image-signal"][data-v-pointer="active"] > .v-motion-scene-copy { opacity: .9; }
[data-v-motion~="image-signal"] > .v-motion-scene-fx {
  color: #ff3448;
  background: radial-gradient(circle 6rem at var(--v-pointer-x) var(--v-pointer-y), rgb(255 35 62 / .56), transparent 70%), repeating-linear-gradient(0deg, transparent 0 7px, rgb(66 108 255 / .08) 8px 9px);
}
[data-v-motion~="image-signal"] > .v-motion-hero-field { background: radial-gradient(circle 34rem at var(--v-pointer-x) var(--v-pointer-y), rgb(50 87 255 / .34), transparent 62%), linear-gradient(90deg, transparent, rgb(255 31 60 / .16), transparent); }
[data-v-motion~="image-signal"] > .v-motion-hero-particles i { color: #557dff; border-radius: 0; width: 6px; height: 1px; }

/* Neural — intelligence lens, spectral halo and orbital data dust. */
[data-v-motion~="image-neural"] > .v-motion-scene-copy {
  clip-path: circle(0% at var(--v-pointer-x) var(--v-pointer-y));
  filter: brightness(1.38) saturate(1.6) hue-rotate(var(--v-scene-rotate));
  transform: scale(1.2) translate3d(var(--v-scene-x), var(--v-scene-y), 0);
}
[data-v-motion~="image-neural"][data-v-pointer="active"] > .v-motion-scene-copy { clip-path: circle(22% at var(--v-pointer-x) var(--v-pointer-y)); opacity: .98; }
[data-v-motion~="image-neural"] > .v-motion-scene-fx {
  color: #31e7ff;
  background: radial-gradient(circle 23% at var(--v-pointer-x) var(--v-pointer-y), transparent 52%, rgb(59 214 255 / .58) 54%, transparent 59%), conic-gradient(from var(--v-scene-rotate) at var(--v-pointer-x) var(--v-pointer-y), transparent, rgb(105 75 255 / .26), transparent 35%);
}
[data-v-motion~="image-neural"] > .v-motion-hero-field { background: radial-gradient(circle 35rem at var(--v-pointer-x) var(--v-pointer-y), rgb(41 224 255 / .27), transparent 62%), conic-gradient(from 90deg at var(--v-pointer-x) var(--v-pointer-y), transparent, rgb(104 60 255 / .17), transparent 30%); }
[data-v-motion~="image-neural"] > .v-motion-hero-particles i { color: #4cecff; }

/* Blueprint — colour survey with full crosshair and measurement grid. */
[data-v-motion~="image-blueprint"] > img:not(.v-motion-scene-copy) { filter: grayscale(.82) contrast(1.07); }
[data-v-motion~="image-blueprint"] > .v-motion-scene-copy { clip-path: inset(0 calc(100% - var(--v-pointer-x)) 0 0); filter: saturate(.95) contrast(1.08); transform: scale(1.035); }
[data-v-motion~="image-blueprint"][data-v-pointer="active"] > .v-motion-scene-copy { opacity: 1; }
[data-v-motion~="image-blueprint"] > .v-motion-scene-fx {
  color: #f13a31;
  background: linear-gradient(90deg, transparent calc(var(--v-pointer-x) - 1px), rgb(237 51 47 / .95) var(--v-pointer-x), transparent calc(var(--v-pointer-x) + 1px)), linear-gradient(0deg, transparent calc(var(--v-pointer-y) - 1px), rgb(237 51 47 / .6) var(--v-pointer-y), transparent calc(var(--v-pointer-y) + 1px)), repeating-linear-gradient(90deg, rgb(255 255 255 / .09) 0 1px, transparent 1px 8%);
}
[data-v-motion~="image-blueprint"] > .v-motion-hero-field { background: radial-gradient(circle 32rem at var(--v-pointer-x) var(--v-pointer-y), rgb(232 49 42 / .16), transparent 62%), repeating-linear-gradient(90deg, rgb(20 20 20 / .09) 0 1px, transparent 1px 8%); mix-blend-mode: multiply; }
[data-v-motion~="image-blueprint"] > .v-motion-hero-particles i { color: #d72b25; border-radius: 0; }

/* Couture — directional cut, gallery light and floating seam points. */
[data-v-motion~="image-couture"] > .v-motion-scene-copy {
  clip-path: polygon(calc(var(--v-pointer-x) - 19%) 0, calc(var(--v-pointer-x) + 2%) 0, calc(var(--v-pointer-x) + 19%) 100%, calc(var(--v-pointer-x) - 2%) 100%);
  filter: contrast(1.32) brightness(.76);
  transform: translate3d(var(--v-scene-x), var(--v-scene-y), 0) scale(1.1) rotate(var(--v-scene-rotate));
  mix-blend-mode: multiply;
}
[data-v-motion~="image-couture"][data-v-pointer="active"] > .v-motion-scene-copy { opacity: .8; }
[data-v-motion~="image-couture"] > .v-motion-scene-fx { color: #171713; background: radial-gradient(ellipse 24% 62% at var(--v-pointer-x) var(--v-pointer-y), rgb(255 255 255 / .62), transparent 72%); mix-blend-mode: soft-light; }
[data-v-motion~="image-couture"] > .v-motion-hero-field { background: radial-gradient(ellipse 25rem 42rem at var(--v-pointer-x) var(--v-pointer-y), rgb(255 255 255 / .56), transparent 65%), linear-gradient(112deg, transparent 42%, rgb(20 20 18 / .09), transparent 58%); mix-blend-mode: soft-light; }
[data-v-motion~="image-couture"] > .v-motion-hero-particles i { color: #24241f; box-shadow: none; }

/* Kinetic controls and links. */
.v-motion-control {
  --v-control-x: 50%;
  --v-control-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease, border-color 320ms ease !important;
}
.v-motion-control::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(circle 7rem at var(--v-control-x) var(--v-control-y), rgb(255 255 255 / .34), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 260ms ease;
}
.v-motion-control:hover::before,
.v-motion-control:focus-visible::before { opacity: 1; }
.v-motion-control:hover { box-shadow: 0 12px 38px rgb(0 0 0 / .22), 0 0 0 1px rgb(255 255 255 / .18) inset; }
.v-motion-control:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.v-motion-control-ink {
  position: absolute;
  z-index: 0;
  left: var(--v-control-x);
  top: var(--v-control-y);
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: rgb(255 255 255 / .55);
  mix-blend-mode: overlay;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.1);
}

.v-motion-link { position: relative; isolation: isolate; }
.v-motion-link-trace {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.2em;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, currentColor 20% 80%, transparent);
  transform: scaleX(0);
  transform-origin: var(--v-link-x, 50%) 50%;
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
}
.v-motion-link:hover > .v-motion-link-trace,
.v-motion-link:focus-visible > .v-motion-link-trace { transform: scaleX(1); }

/* Shared nav indicator. */
.v-motion-nav { --v-nav-left: 0px; --v-nav-width: 0px; position: relative; isolation: isolate; }
.v-motion-nav > button,
.v-motion-nav > a,
.v-motion-nav > [role="tab"] { position: relative; z-index: 2; }
.v-motion-nav-indicator {
  position: absolute;
  z-index: 1;
  left: var(--v-nav-left);
  bottom: .35rem;
  width: var(--v-nav-width);
  height: 2px;
  border-radius: 99px;
  pointer-events: none;
  background: currentColor;
  box-shadow: 0 0 1rem currentColor, 0 -.55rem 2rem currentColor;
  opacity: .75;
  transition: left 520ms cubic-bezier(.16,1,.3,1), width 520ms cubic-bezier(.16,1,.3,1), opacity 220ms ease;
}

/* Pointer-scrub rails and sidebars. */
.v-motion-rail { --v-rail-y: 50%; position: relative; isolation: isolate; overflow: hidden; }
.v-motion-rail-beam {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: var(--v-rail-y);
  height: 9rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / .12), transparent);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 260ms ease;
}
.v-motion-rail[data-v-rail="active"] > .v-motion-rail-beam { opacity: 1; }
.v-motion-rail-item { position: relative; z-index: 1; transition: transform 360ms cubic-bezier(.16,1,.3,1), filter 280ms ease, opacity 280ms ease; }
.v-motion-rail-item:hover,
.v-motion-rail-item:focus-within { transform: translate3d(4px, 0, 0); filter: brightness(1.12); }

/* Local-light card surfaces. */
.v-motion-surface { --v-surface-x: 50%; --v-surface-y: 50%; --v-surface-rx: 0deg; --v-surface-ry: 0deg; isolation: isolate; transform: perspective(900px) rotateX(var(--v-surface-rx)) rotateY(var(--v-surface-ry)); transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.16,1,.3,1), box-shadow 420ms ease !important; will-change: transform; }
.v-motion-surface:hover { box-shadow: 0 24px 65px rgb(0 0 0 / .18); }
.v-motion-surface > :not(.v-motion-surface-light) { position: relative; z-index: 1; }
.v-motion-surface-light { position: absolute; z-index: 0; inset: -1px; pointer-events: none; border-radius: inherit; background: radial-gradient(circle 13rem at var(--v-surface-x) var(--v-surface-y), rgb(255 255 255 / .15), transparent 68%); opacity: 0; transition: opacity 320ms ease; }
.v-motion-surface:hover > .v-motion-surface-light { opacity: 1; }

[data-v-motion~="scroll-morph"] { --v-scroll: 0; --v-scroll-position: 12%; --v-scroll-offset: -9px; --v-scroll-opacity: .35; }
[data-v-scroll-step="1"] { --v-scroll: .1; --v-scroll-position: 20%; --v-scroll-offset: -7px; --v-scroll-opacity: .42; }
[data-v-scroll-step="2"] { --v-scroll: .2; --v-scroll-position: 27%; --v-scroll-offset: -5px; --v-scroll-opacity: .48; }
[data-v-scroll-step="3"] { --v-scroll: .3; --v-scroll-position: 35%; --v-scroll-offset: -4px; --v-scroll-opacity: .55; }
[data-v-scroll-step="4"] { --v-scroll: .4; --v-scroll-position: 42%; --v-scroll-offset: -2px; --v-scroll-opacity: .61; }
[data-v-scroll-step="5"] { --v-scroll: .5; --v-scroll-position: 50%; --v-scroll-offset: 0; --v-scroll-opacity: .68; }
[data-v-scroll-step="6"] { --v-scroll: .6; --v-scroll-position: 58%; --v-scroll-offset: 2px; --v-scroll-opacity: .74; }
[data-v-scroll-step="7"] { --v-scroll: .7; --v-scroll-position: 65%; --v-scroll-offset: 4px; --v-scroll-opacity: .81; }
[data-v-scroll-step="8"] { --v-scroll: .8; --v-scroll-position: 73%; --v-scroll-offset: 5px; --v-scroll-opacity: .87; }
[data-v-scroll-step="9"] { --v-scroll: .9; --v-scroll-position: 80%; --v-scroll-offset: 7px; --v-scroll-opacity: .94; }
[data-v-scroll-step="10"] { --v-scroll: 1; --v-scroll-position: 88%; --v-scroll-offset: 9px; --v-scroll-opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-v-motion] { animation: none !important; scroll-behavior: auto !important; transform: none !important; transition-duration: .01ms !important; }
  .v-motion-scene-copy, .v-motion-scene-fx, .v-motion-hero-field, .v-motion-hero-particles,
  .v-motion-control-ink, .v-motion-nav-indicator, .v-motion-rail-beam, .v-motion-surface-light { display: none !important; }
}

@media (pointer: coarse) {
  .v-motion-scene-copy, .v-motion-scene-fx { display: none; }
  .v-motion-control::before { opacity: .2; }
  .v-motion-hero > .v-motion-hero-field { opacity: .5; }
}