:root {
  --ss-motion-gold: #c7a35a;
  --ss-motion-ivory: #f5f0e8;
  --ss-motion-wine: #7e0c1f;
  --ss-motion-line: rgba(199, 163, 90, 0.28);
}

html {
  scroll-behavior: smooth;
}

html[data-ss-motion] body {
  overflow-x: hidden;
}

html[data-ss-motion] body::before {
  content: "";
  position: fixed;
  z-index: -5;
  inset: -18vh -12vw auto;
  height: 72vh;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(circle at 18% 28%, rgba(126, 12, 31, 0.22), transparent 28rem),
    radial-gradient(circle at 78% 12%, rgba(199, 163, 90, 0.13), transparent 25rem);
  filter: blur(2px);
  animation: ss-ambient-drift 18s ease-in-out infinite alternate;
}

html[data-ss-motion] body::after {
  content: "";
  position: fixed;
  z-index: -4;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: linear-gradient(115deg, transparent 0 48%, rgba(245, 240, 232, 0.18) 50%, transparent 52%);
  background-size: 9rem 9rem;
  mix-blend-mode: screen;
  animation: ss-grain-drift 22s linear infinite;
}

html[data-ss-motion] main > section,
html[data-ss-motion] main > header,
html[data-ss-motion] main > .hero,
html[data-ss-motion] main > .custom,
html[data-ss-motion] main > .how,
html[data-ss-motion] main > .proof,
html[data-ss-motion] main > .cta,
html[data-ss-motion] .event-header,
html[data-ss-motion] .booking-shell {
  position: relative;
}

[data-ss-motion-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0) skewY(0.35deg);
  transform-origin: 50% 0;
  transition:
    opacity 760ms cubic-bezier(.16, 1, .3, 1),
    transform 900ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--ss-motion-index, 0) * 55ms);
  will-change: opacity, transform;
}

[data-ss-motion-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.ss-tilt {
  --ss-rx: 0deg;
  --ss-ry: 0deg;
  --ss-lift: 0px;
  transform: perspective(1100px) rotateX(var(--ss-rx)) rotateY(var(--ss-ry)) translateY(var(--ss-lift));
  transform-style: preserve-3d;
  transition:
    transform 540ms cubic-bezier(.16, 1, .3, 1),
    border-color 360ms ease,
    box-shadow 360ms ease;
  will-change: transform;
}

.ss-tilt:hover {
  --ss-lift: -6px;
  border-color: rgba(199, 163, 90, 0.62) !important;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(199, 163, 90, 0.06);
}

.ss-tilt::before {
  pointer-events: none;
}

.button,
.btn,
.nav-cta,
.external-link,
.wb-generate-button,
.wb-panel-button,
.wb-qa-button,
.wb-published-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow 360ms ease, border-color 360ms ease;
}

.button::after,
.btn::after,
.nav-cta::after,
.external-link::after,
.wb-generate-button::after,
.wb-panel-button::after,
.wb-qa-button::after,
.wb-published-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -120% 45% -120% -35%;
  background: linear-gradient(110deg, transparent, rgba(255, 249, 229, 0.32), transparent);
  transform: translateX(-120%) rotate(16deg);
  transition: transform 760ms cubic-bezier(.16, 1, .3, 1);
}

.button:hover,
.btn:hover,
.nav-cta:hover,
.external-link:hover,
.wb-generate-button:hover,
.wb-panel-button:hover,
.wb-qa-button:hover,
.wb-published-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.button:hover::after,
.btn:hover::after,
.nav-cta:hover::after,
.external-link:hover::after,
.wb-generate-button:hover::after,
.wb-panel-button:hover::after,
.wb-qa-button:hover::after,
.wb-published-card:hover::after {
  transform: translateX(260%) rotate(16deg);
}

.selected-work-card,
.visual-panel,
.service-card,
.package-card,
.process-grid > article,
.lab-card,
.passport-proof-card,
.proof4-verifier,
.proof4-flow,
.proof4-boundary,
.wb-glass-panel,
.wb-preview-device,
.wb-proof-card,
.framework-card,
.framework-highlight,
.pillar-card,
.price-card,
.card,
.custom,
.proof,
.capability-lab {
  position: relative;
  isolation: isolate;
}

.selected-work-card::after,
.visual-panel::after,
.service-card::after,
.package-card::after,
.lab-card::after,
.passport-proof-card::after,
.proof4-verifier::after,
.proof4-boundary::after,
.wb-glass-panel::after,
.wb-preview-device::after,
.framework-card::after,
.pillar-card::after,
.price-card::after,
.card::after,
.custom::after,
.proof::after,
.capability-lab::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: -40%;
  width: 28%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(245, 240, 232, 0.11), transparent);
  transform: skewX(-18deg) translateX(-140%);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.selected-work-card:hover::after,
.visual-panel:hover::after,
.service-card:hover::after,
.package-card:hover::after,
.lab-card:hover::after,
.passport-proof-card:hover::after,
.proof4-verifier:hover::after,
.proof4-boundary:hover::after,
.wb-glass-panel:hover::after,
.wb-preview-device:hover::after,
.framework-card:hover::after,
.pillar-card:hover::after,
.price-card:hover::after,
.card:hover::after,
.custom:hover::after,
.proof:hover::after,
.capability-lab:hover::after {
  transform: skewX(-18deg) translateX(560%);
}

.selected-work-image,
.visual-panel-image,
.hires-media,
.wb-preview-device,
.proof4-asset,
.proof4-boundary img {
  overflow: hidden;
}

.selected-work-image img,
.visual-panel-image img,
.hires-media img,
.proof4-asset img,
.proof4-boundary img {
  transition: transform 1200ms cubic-bezier(.16, 1, .3, 1), filter 900ms ease;
}

.selected-work-card:hover img,
.visual-panel:hover img,
.hires-media:hover img,
.proof4-boundary:hover img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.03);
}

.site-footer,
.framework-footer,
.footer {
  position: relative;
}

.site-footer::before,
.framework-footer::before,
.footer::before,
.event-header::after,
.passport-nav::after,
.proof4-nav::after,
.wb-nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ss-motion-gold), transparent);
  background-size: 200% 100%;
  animation: ss-line-sweep 8s ease-in-out infinite;
}

.site-shell,
.passport-shell,
.proof4-shell,
.wb-page {
  position: relative;
  isolation: isolate;
}

.site-shell::before,
.passport-shell::before,
.proof4-shell::before,
.wb-page::before {
  content: "";
  position: fixed;
  z-index: -3;
  top: 12vh;
  right: -10vw;
  width: min(44rem, 72vw);
  aspect-ratio: 1;
  border: 1px solid rgba(199, 163, 90, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(199, 163, 90, 0.018), 0 0 0 140px rgba(126, 12, 31, 0.014);
  pointer-events: none;
  animation: ss-orbit-drift 20s ease-in-out infinite alternate;
}

@keyframes ss-ambient-drift {
  from { transform: translate3d(-2%, 0, 0) scale(.96); }
  to { transform: translate3d(4%, 5%, 0) scale(1.06); }
}

@keyframes ss-grain-drift {
  from { background-position: 0 0; }
  to { background-position: 9rem 7rem; }
}

@keyframes ss-orbit-drift {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(-6%, 4%, 0) rotate(8deg); }
}

@keyframes ss-line-sweep {
  0%, 100% { background-position: 200% 50%; opacity: .32; }
  50% { background-position: 0% 50%; opacity: 1; }
}

@media (max-width: 700px) {
  .site-shell::before,
  .passport-shell::before,
  .proof4-shell::before,
  .wb-page::before {
    right: -36vw;
    width: 30rem;
    opacity: .68;
  }

  .ss-tilt:hover {
    --ss-lift: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html[data-ss-motion] body::before,
  html[data-ss-motion] body::after,
  .site-shell::before,
  .passport-shell::before,
  .proof4-shell::before,
  .wb-page::before,
  .site-footer::before,
  .framework-footer::before,
  .footer::before,
  .event-header::after,
  .passport-nav::after,
  .proof4-nav::after,
  .wb-nav::after {
    animation: none !important;
  }

  [data-ss-motion-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ss-tilt,
  .ss-tilt:hover,
  .button:hover,
  .btn:hover,
  .nav-cta:hover,
  .external-link:hover,
  .wb-generate-button:hover,
  .wb-panel-button:hover,
  .wb-qa-button:hover,
  .wb-published-card:hover {
    transform: none !important;
    box-shadow: none;
  }
}