/*
 * Motion direction inspired by Motion Primitives (MIT):
 * https://github.com/ibelick/motion-primitives
 * Implemented independently in dependency-free CSS for the Sempeira static site.
 */

:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-spring: cubic-bezier(.34, 1.56, .64, 1);
  --motion-accent: rgba(232, 154, 80, .17);
  --motion-accent-strong: rgba(243, 196, 143, .72);
}

@property --motion-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#semclaw-page {
  --motion-accent: rgba(117, 222, 193, .15);
  --motion-accent-strong: rgba(158, 232, 211, .7);
}

.motion-scroll-progress {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--copper), var(--copper-soft), var(--green));
  box-shadow: 0 0 16px rgba(232, 154, 80, .35);
  will-change: transform;
}

.site-header {
  transition: box-shadow .35s ease, background-color .35s ease, border-color .35s ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: rgba(8, 10, 14, .975);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

.button,
.header-cta {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--motion-spring), border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}

.button::before,
.header-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-125%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 48%, transparent 76%);
  transition: transform .7s var(--motion-ease);
}

.button:hover,
.button:focus-visible,
.header-cta:hover,
.header-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

.button:hover::before,
.button:focus-visible::before,
.header-cta:hover::before,
.header-cta:focus-visible::before {
  transform: translateX(125%) skewX(-18deg);
}

.motion-ready .hero .eyebrow,
.motion-ready .hero h1,
.motion-ready .hero .lede,
.motion-ready .hero .actions,
.motion-ready .hero .trust-list,
.motion-ready .hero .facts,
.motion-ready .hero .inference,
.motion-ready .hero .collab-map {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 24px, 0);
  transition: opacity .78s var(--motion-ease), transform .78s var(--motion-ease), filter .78s var(--motion-ease);
}

.motion-ready .hero.motion-entered .eyebrow,
.motion-ready .hero.motion-entered h1,
.motion-ready .hero.motion-entered .lede,
.motion-ready .hero.motion-entered .actions,
.motion-ready .hero.motion-entered .trust-list,
.motion-ready .hero.motion-entered .facts,
.motion-ready .hero.motion-entered .inference,
.motion-ready .hero.motion-entered .collab-map {
  opacity: 1;
  filter: none;
  transform: none;
}

.motion-ready .hero h1 { transition-delay: 70ms; }
.motion-ready .hero .lede { transition-delay: 140ms; }
.motion-ready .hero .actions { transition-delay: 210ms; }
.motion-ready .hero .trust-list,
.motion-ready .hero .facts { transition-delay: 280ms; }
.motion-ready .hero .inference,
.motion-ready .hero .collab-map { transition-delay: 120ms; }

.motion-ready .reveal,
.motion-ready .motion-item {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 22px, 0) scale(.994);
  transition:
    opacity .68s var(--motion-ease) var(--motion-delay, 0ms),
    transform .68s var(--motion-ease) var(--motion-delay, 0ms),
    filter .68s var(--motion-ease) var(--motion-delay, 0ms);
}

.motion-ready .reveal.is-visible,
.motion-ready .motion-item.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

.motion-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  transition: transform .35s var(--motion-ease), border-color .35s ease, box-shadow .35s ease;
}

.motion-surface > :not(.trace) {
  position: relative;
  z-index: 1;
}

.motion-surface::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--spotlight-x) var(--spotlight-y), var(--motion-accent), transparent 58%);
  transition: opacity .32s ease;
}

@media (hover:hover) and (pointer:fine) {
  .motion-ready .motion-surface:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--motion-accent-strong) 48%, var(--border));
    box-shadow: 0 24px 55px rgba(0, 0, 0, .22);
  }

  .motion-surface:hover::after { opacity: 1; }
}

.motion-ring {
  position: relative;
  isolation: isolate;
}

.motion-ring::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--motion-angle), transparent 0 68%, var(--motion-accent-strong) 76%, transparent 84% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.inference .trace {
  background-size: 220% 100%;
}

.inference .trace-v {
  background-size: 100% 220%;
}

.hero.motion-entered .motion-ring::before { animation: motion-border-spin .8s .1s var(--motion-ease) 1; }
.hero.motion-entered .inference .trace { animation: motion-trace .75s .2s var(--motion-ease) 1; }
.hero.motion-entered .inference .trace-v { animation-name: motion-trace-vertical; }
.hero.motion-entered .inference .chip { animation: motion-chip-breathe .9s .15s ease-in-out 1; }
.hero.motion-entered .collab-map .map-link { animation: motion-signal .8s .2s ease-in-out 1; }

@media (hover:hover) and (pointer:fine) {
  .motion-ring:hover::before,
  .motion-ring:focus-within::before { animation: motion-border-spin 5.5s linear infinite; }
  .inference:hover .trace { animation: motion-trace 3.2s linear infinite; }
  .inference:hover .trace-v { animation-name: motion-trace-vertical; }
  .inference:hover .chip { animation: motion-chip-breathe 4.8s ease-in-out infinite; }
  .collab-map:hover .map-link { animation: motion-signal 2.3s ease-in-out infinite; }
}

.eyebrow {
  background-image: linear-gradient(100deg, currentColor 25%, #fff 48%, currentColor 72%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

.motion-ready .hero.motion-entered .eyebrow {
  animation: motion-text-shimmer 2.2s .35s ease-out 1;
}

@keyframes motion-border-spin { to { --motion-angle: 360deg; } }
@keyframes motion-trace { to { background-position: 220% 0; } }
@keyframes motion-trace-vertical { to { background-position: 0 220%; } }
@keyframes motion-chip-breathe {
  0%, 100% { box-shadow: 0 0 46px rgba(232, 154, 80, .08); }
  50% { box-shadow: 0 0 72px rgba(232, 154, 80, .2); }
}
@keyframes motion-signal {
  0%, 100% { opacity: .5; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(2px); }
}
@keyframes motion-text-shimmer {
  from { background-position: 115% 0; }
  to { background-position: -115% 0; }
}

@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .eyebrow { -webkit-text-fill-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-scroll-progress { display: none; }
  .site-header,
  .button,
  .header-cta,
  .motion-surface,
  .motion-surface::after { transition: none !important; }
  .button:hover,
  .button:focus-visible,
  .header-cta:hover,
  .header-cta:focus-visible,
  .motion-surface:hover { transform: none !important; }
  .button::before,
  .header-cta::before,
  .motion-ring::before { display: none; }
  .motion-ready .hero .eyebrow,
  .motion-ready .hero h1,
  .motion-ready .hero .lede,
  .motion-ready .hero .actions,
  .motion-ready .hero .trust-list,
  .motion-ready .hero .facts,
  .motion-ready .hero .inference,
  .motion-ready .hero .collab-map,
  .motion-ready .reveal,
  .motion-ready .motion-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .inference .trace,
  .inference .chip,
  .collab-map .map-link,
  .eyebrow { animation: none !important; }
}

@media print {
  .motion-scroll-progress,
  .motion-ring::before,
  .motion-surface::after { display: none !important; }
  .motion-ready .hero *,
  .motion-ready .reveal,
  .motion-ready .motion-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}