:root {
  --motion-gold: #c8a84e;
  --motion-signal: #5a7ab8;
  --motion-ink: #0a0e14;
  --motion-pointer-x: 50vw;
  --motion-pointer-y: 22vh;
  --motion-scroll: 0;
}

.signal-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

.signal-field::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at var(--motion-pointer-x) var(--motion-pointer-y), rgba(90, 122, 184, .12), transparent 22%),
    radial-gradient(ellipse at 18% 8%, rgba(200, 168, 78, .1), transparent 32%),
    radial-gradient(ellipse at 84% 76%, rgba(74, 154, 120, .055), transparent 28%);
  opacity: .88;
  transform: translate3d(0, calc(var(--motion-scroll) * -18px), 0);
  will-change: transform;
}

.signal-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 168, 78, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 168, 78, .032) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
  opacity: .52;
  transform: perspective(720px) rotateX(62deg) scale(1.35) translateY(18%);
  transform-origin: 50% 100%;
}

.signal-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .72;
}

.signal-field__noise {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

html { background: var(--bg, var(--motion-ink)); }
body { background-color: transparent !important; isolation: isolate; }

html[data-theme="light"] .signal-field::before {
  opacity: .48;
}

html[data-theme="light"] .signal-field::after {
  opacity: .28;
}

html[data-theme="light"] .signal-field canvas {
  opacity: .36;
}

html[data-motion-ready] .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(7px);
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1),
    filter .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

html[data-motion-ready] .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

[data-magnetic],
.hero-action,
.btn {
  translate: var(--magnetic-x, 0) var(--magnetic-y, 0);
  transition-property: translate, color, background-color, border-color, box-shadow;
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.art-card,
.ch-card,
.pillar-card,
[data-kinetic] {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
}

.art-card::after,
.ch-card::after,
.pillar-card::after,
[data-kinetic]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(216, 210, 196, .09), transparent 38%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.art-card:hover::after,
.ch-card:hover::after,
.pillar-card:hover::after,
[data-kinetic]:hover::after {
  opacity: 1;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: motion-page-out .24s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: motion-page-in .52s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes motion-page-out {
  to { opacity: 0; transform: scale(.992); filter: blur(4px); }
}

@keyframes motion-page-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
}

@media (max-width: 720px) {
  .signal-field::after { background-size: 44px 44px; opacity: .34; }
  .signal-field canvas { opacity: .5; }
  html[data-motion-ready] .motion-reveal { transform: translate3d(0, 16px, 0); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-field::before,
  .signal-field::after { transform: none !important; }
  .signal-field canvas { opacity: .24; }
  html[data-motion-ready] .motion-reveal,
  html[data-motion-ready] .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  [data-magnetic], .hero-action, .btn { translate: 0 0 !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media (forced-colors: active) {
  .signal-field { display: none; }
}