.gallery-nav {
  color: inherit;
}
.gallery-nav a {
  color: inherit;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.gallery-nav a:hover,
.gallery-nav a:focus-visible {
  opacity: 1;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px);
}
.gallery-nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-nav a { transition-duration: .01ms; }
}

/* Every world gets a quiet, reactive atmosphere. Core interactions remain local. */
body {
  isolation: isolate;
}
.world-motion-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
  contain: strict;
}
.world-motion-layer ~ * {
  z-index: 1;
}
.world-motion-layer::before,
.world-motion-layer::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  transform: translate3d(var(--world-motion-x, 0px), var(--world-motion-y, 0px), 0)
    rotate(var(--world-motion-rotate, 0deg));
  transition: opacity .6s ease;
}
.world-motion-layer::before {
  background: conic-gradient(
    from var(--world-motion-rotate, 0deg) at 50% 50%,
    transparent 0deg 32deg,
    color-mix(in srgb, var(--accent, #8bd3dd) 17%, transparent) 48deg 78deg,
    transparent 96deg 180deg,
    color-mix(in srgb, var(--accent, #8bd3dd) 12%, transparent) 206deg 242deg,
    transparent 270deg 360deg
  );
  filter: blur(42px);
  opacity: .32;
  animation: world-rotate var(--world-motion-speed, 18s) linear infinite;
}
.world-motion-layer::after {
  inset: 0;
  background:
    radial-gradient(
      280px 220px at var(--world-pointer-x, 50%) var(--world-pointer-y, 50%),
      color-mix(in srgb, var(--accent, #8bd3dd) 13%, transparent),
      transparent 72%
    ),
    radial-gradient(
      700px 460px at 50% 110%,
      color-mix(in srgb, var(--accent, #8bd3dd) 8%, transparent),
      transparent 74%
    );
  opacity: .42;
  animation: world-breathe 9s ease-in-out infinite alternate;
}
.motion-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orb-size, 30px);
  height: var(--orb-size, 30px);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #8bd3dd) 34%, transparent);
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--accent, #8bd3dd) 34%, transparent),
    transparent 72%
  );
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent, #8bd3dd) 23%, transparent);
  opacity: .26;
  transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius));
  animation: world-orbit calc(var(--world-motion-speed, 18s) + var(--orb-index) * .55s)
    ease-in-out infinite alternate;
  animation-delay: var(--orb-delay, 0s);
}
.world-motion-layer[data-shape="wave"] .motion-orb {
  border-radius: 58% 42% 35% 65%;
  animation-name: world-wave;
}
.world-motion-layer[data-shape="spark"] .motion-orb {
  border-radius: 18% 82% 24% 76%;
  transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) rotate(45deg);
  animation-name: world-spark;
}
.world-motion-layer[data-shape="ripple"] .motion-orb {
  background: transparent;
  border-width: 2px;
  animation-name: world-ripple;
}
.world-motion-layer[data-shape="grid"] .motion-orb {
  border-radius: 4px;
  animation-name: world-grid;
}
.world-motion-layer[data-shape="bloom"] .motion-orb {
  border-radius: 52% 48% 62% 38%;
  animation-name: world-bloom;
}
.world-motion-layer.is-waking::after {
  animation: world-wake .95s cubic-bezier(.2, .8, .2, 1);
  background:
    radial-gradient(
      0px 0px at var(--world-wake-x, 50%) var(--world-wake-y, 50%),
      color-mix(in srgb, var(--accent, #8bd3dd) 42%, transparent),
      transparent 0
    );
}
@keyframes world-rotate {
  to { transform: translate3d(var(--world-motion-x, 0px), var(--world-motion-y, 0px), 0) rotate(360deg); }
}
@keyframes world-breathe {
  from { transform: scale(.94); opacity: .24; }
  to { transform: scale(1.08); opacity: .52; }
}
@keyframes world-orbit {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) scale(.78); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 72deg)) translateX(var(--orb-radius)) scale(1.16); }
}
@keyframes world-wave {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(-24px) scaleX(.72); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 100deg)) translateX(var(--orb-radius)) translateY(24px) scaleX(1.35); }
}
@keyframes world-spark {
  from { opacity: .12; filter: brightness(.8); }
  50% { opacity: .58; filter: brightness(1.6); }
  to { opacity: .18; filter: brightness(1); }
}
@keyframes world-ripple {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) scale(.55); opacity: .12; }
  to { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) scale(1.5); opacity: .42; }
}
@keyframes world-grid {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(-30px); }
  to { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(30px); }
}
@keyframes world-bloom {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) rotate(-18deg) scale(.76); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 80deg)) translateX(var(--orb-radius)) rotate(18deg) scale(1.2); }
}
@keyframes world-wake {
  from { opacity: .1; background-size: 0 0; }
  45% { opacity: .72; background-size: 1000px 1000px; }
  to { opacity: 0; background-size: 1700px 1700px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-motion-layer::before,
  .world-motion-layer::after,
  .world-motion-layer .motion-orb {
    animation: none !important;
    transition: none !important;
  }
  .world-motion-layer {
    opacity: .38;
  }
}
.world-motion-layer {
  opacity: .84;
  mix-blend-mode: screen;
}
.world-motion-layer::before {
  filter: blur(32px) saturate(1.45);
  opacity: .5;
}
.world-motion-layer::after {
  opacity: .55;
}
.motion-stream {
  position: absolute;
  left: calc(50% + var(--stream-offset));
  top: calc(18% + var(--stream-index) * 17%);
  width: var(--stream-length);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent, #8bd3dd) 55%, transparent), transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent, #8bd3dd) 30%, transparent);
  opacity: .35;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: world-stream calc(var(--world-motion-speed, 18s) + var(--stream-index) * .7s) ease-in-out infinite alternate;
  animation-delay: var(--stream-delay, 0s);
}
.motion-ring {
  position: fixed;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #8bd3dd) 72%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent, #8bd3dd) 50%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  animation: world-ring 1.05s cubic-bezier(.12, .74, .2, 1) forwards;
}
.world-motion-layer[data-scene="orbit"] .motion-orb {
  border-radius: 50%;
  animation-name: world-orbit-deep;
}
.world-motion-layer[data-scene="weather"] .motion-orb {
  border-radius: 62% 38% 52% 48%;
  animation-name: world-weather;
}
.world-motion-layer[data-scene="spark"] .motion-orb {
  border-radius: 12% 88% 24% 76%;
  animation-name: world-spark-fast;
}
.world-motion-layer[data-scene="garden"] .motion-orb {
  border-radius: 72% 28% 60% 40%;
  animation-name: world-garden;
}
.world-motion-layer[data-scene="signal"] .motion-orb {
  border-radius: 3px;
  animation-name: world-scan-orb;
}
.world-motion-layer[data-scene="sonar"] .motion-orb {
  background: transparent;
  border-width: 2px;
  animation-name: world-sonar;
}
.world-motion-layer[data-scene="jelly"] .motion-orb {
  border-radius: 58% 42% 70% 30%;
  animation-name: world-jelly;
}
.world-motion-layer[data-scene="archive"] .motion-orb {
  border-radius: 3px;
  animation-name: world-archive;
}
.world-motion-layer[data-scene="dust"] .motion-orb {
  border-radius: 45%;
  animation-name: world-dust;
}
.world-motion-layer[data-scene="prism"] .motion-orb {
  border-radius: 22%;
  background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--accent, #8bd3dd) 34%, transparent), transparent);
  animation-name: world-prism;
}
.world-motion-layer[data-scene="grid"] .motion-orb {
  border-radius: 2px;
  animation-name: world-grid-deep;
}
.world-motion-layer[data-scene="wave"] .motion-stream {
  height: 2px;
  animation-name: world-wave-stream;
}
.world-motion-layer[data-scene="signal"] .motion-stream {
  height: 2px;
  animation-name: world-scan-stream;
}
.world-motion-layer[data-scene="spark"] .motion-stream {
  width: 2px;
  height: var(--stream-length);
  animation-name: world-spark-stream;
}
.world-motion-layer[data-scene="garden"] .motion-stream {
  width: 2px;
  height: var(--stream-length);
  animation-name: world-vine;
}
.world-motion-layer[data-scene="sonar"]::after {
  background:
    repeating-radial-gradient(circle at 50% 52%, transparent 0 58px, color-mix(in srgb, var(--accent, #8bd3dd) 10%, transparent) 60px 61px, transparent 63px 120px),
    radial-gradient(ellipse at center, transparent 30%, color-mix(in srgb, var(--accent, #8bd3dd) 16%, transparent));
}
.world-motion-layer[data-scene="signal"]::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, color-mix(in srgb, var(--accent, #8bd3dd) 8%, transparent) 11px 12px),
    radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--accent, #8bd3dd) 16%, transparent), transparent 65%);
}
.world-motion-layer[data-scene="prism"]::before {
  background: conic-gradient(from 40deg, color-mix(in srgb, var(--accent, #8bd3dd) 22%, transparent), transparent 22% 38%, color-mix(in srgb, #ff9fca 15%, transparent) 52%, transparent 68% 82%, color-mix(in srgb, #f8e16c 14%, transparent));
}
.world-motion-layer[data-scene="grid"]::after {
  background:
    linear-gradient(color-mix(in srgb, var(--accent, #8bd3dd) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent, #8bd3dd) 8%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at center, black, transparent 76%);
}
@keyframes world-stream {
  from { transform: translate(-80%, -50%) rotate(-18deg) scaleX(.55); opacity: .1; }
  to { transform: translate(20%, -50%) rotate(-18deg) scaleX(1.4); opacity: .58; }
}
@keyframes world-ring {
  to { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}
@keyframes world-orbit-deep {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) rotate(0deg) scale(.7); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 160deg)) translateX(var(--orb-radius)) rotate(180deg) scale(1.22); }
}
@keyframes world-weather {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(-34px) scaleX(.64); opacity: .12; }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 74deg)) translateX(var(--orb-radius)) translateY(34px) scaleX(1.4); opacity: .5; }
}
@keyframes world-spark-fast {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) scale(.55); opacity: .1; }
  40% { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 46deg)) translateX(var(--orb-radius)) scale(1.42); opacity: .8; }
  54% { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 54deg)) translateX(var(--orb-radius)) scale(.76); opacity: .24; }
}
@keyframes world-garden {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) rotate(-26deg) scale(.7); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 88deg)) translateX(var(--orb-radius)) rotate(26deg) scale(1.26); }
}
@keyframes world-scan-orb {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(-42px); opacity: .12; }
  to { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(42px); opacity: .62; }
}
@keyframes world-sonar {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) scale(.28); opacity: .08; }
  to { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) scale(1.65); opacity: .46; }
}
@keyframes world-jelly {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) skewX(-12deg) scale(.62); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 84deg)) translateX(var(--orb-radius)) skewX(12deg) scale(1.3); }
}
@keyframes world-archive {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) rotate(-10deg) translateY(-26px); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 72deg)) translateX(var(--orb-radius)) rotate(10deg) translateY(26px); }
}
@keyframes world-dust {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(28px) scale(.55); opacity: .08; }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 38deg)) translateX(var(--orb-radius)) translateY(-28px) scale(1.18); opacity: .48; }
}
@keyframes world-prism {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) rotate(0deg) scale(.7); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orb-angle) + 120deg)) translateX(var(--orb-radius)) rotate(240deg) scale(1.32); }
}
@keyframes world-grid-deep {
  from { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(-48px); }
  to { transform: translate(-50%, -50%) rotate(var(--orb-angle)) translateX(var(--orb-radius)) translateY(48px); }
}
@keyframes world-wave-stream {
  from { transform: translate(-80%, -50%) rotate(-10deg) scaleX(.5); }
  to { transform: translate(20%, -50%) rotate(10deg) scaleX(1.6); }
}
@keyframes world-scan-stream {
  from { transform: translate(-75%, -50%) rotate(0deg) scaleX(.35); opacity: .08; }
  to { transform: translate(25%, -50%) rotate(0deg) scaleX(1.7); opacity: .68; }
}
@keyframes world-spark-stream {
  from { transform: translate(-50%, -10%) rotate(8deg) scaleY(.4); opacity: .08; }
  to { transform: translate(-50%, 10%) rotate(-8deg) scaleY(1.3); opacity: .5; }
}
@keyframes world-vine {
  from { transform: translate(-50%, -12%) rotate(-14deg) scaleY(.42); opacity: .08; }
  to { transform: translate(-50%, 12%) rotate(14deg) scaleY(1.35); opacity: .46; }
}
.world-motion-layer.is-waking::after {
  background: radial-gradient(circle at var(--world-wake-x, 50%) var(--world-wake-y, 50%), color-mix(in srgb, var(--accent, #8bd3dd) 42%, transparent) 0, transparent 18%, transparent 70%);
  animation: world-wake .95s cubic-bezier(.2, .8, .2, 1);
}
@keyframes world-wake {
  from { opacity: .12; background-size: 0 0; }
  45% { opacity: .8; background-size: 1000px 1000px; }
  to { opacity: 0; background-size: 1700px 1700px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-motion-layer {
    opacity: .34;
    mix-blend-mode: normal;
  }
  .world-motion-layer::before,
  .world-motion-layer::after,
  .world-motion-layer .motion-orb,
  .world-motion-layer .motion-stream,
  .world-motion-layer .motion-ring {
    animation: none !important;
    transition: none !important;
  }
}
html,
body {
  overflow-x: clip;
}