/* ========================================================================== 
   OnPixel Premium Motion System
   Shared, non-blocking motion layer. All essential content remains readable
   without JavaScript and under prefers-reduced-motion.
   ========================================================================== */

:root {
  --opx-motion-core: 102, 179, 255;
  --opx-motion-hot: 255, 103, 42;
  --opx-motion-cool: 138, 212, 57;
  --opx-motion-progress: 0;
}

.opx-motion-field,
.opx-motion-progress,
.opx-motion-cinematic {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.opx-motion-field {
  width: 100%;
  height: 100%;
  z-index: 18;
  opacity: .28;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.2), #000 74%);
}

.opx-motion-cinematic {
  z-index: 17;
  opacity: .92;
  background:
    radial-gradient(70% 42% at 50% -8%, rgba(var(--opx-motion-core), .065), transparent 72%),
    linear-gradient(90deg, rgba(var(--opx-motion-core), .032), transparent 16%, transparent 84%, rgba(var(--opx-motion-cool), .022)),
    linear-gradient(180deg, rgba(255,255,255,.016), transparent 16%, transparent 74%, rgba(0,0,0,.24));
  box-shadow:
    inset 0 1px rgba(255,255,255,.022),
    inset 0 -4rem 8rem rgba(0,0,0,.18);
  transition: background 1.1s ease;
}

.opx-motion-progress {
  z-index: 520;
  height: 2px;
  bottom: auto;
  overflow: hidden;
  background: rgba(255,255,255,.018);
}
.opx-motion-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(var(--opx-motion-progress));
  transform-origin: left;
  background: linear-gradient(90deg,
    rgba(var(--opx-motion-core), .18),
    rgba(var(--opx-motion-core), .95) 42%,
    rgba(var(--opx-motion-hot), .88) 72%,
    rgba(var(--opx-motion-cool), .78));
  box-shadow: 0 0 1.25rem rgba(var(--opx-motion-core), .46);
  transition: background .8s ease;
}

.opx-motion-scene {
  isolation: isolate;
}

.opx-motion-heading { position: relative; }
.opx-motion-heading__sweep {
  position: absolute;
  z-index: 4;
  inset: 4% auto 2% -12%;
  width: 18%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(96deg, transparent, rgba(var(--opx-motion-core), .14), rgba(255,255,255,.13), transparent);
  filter: blur(7px);
  transform: skewX(-14deg) translateX(-80%);
  mix-blend-mode: screen;
}
.opx-motion-heading.is-motion-entered > .opx-motion-heading__sweep {
  animation: opx-motion-heading-sweep 1.35s .18s cubic-bezier(.16,1,.3,1) both;
}

.opx-motion-reactive {
  --opx-light-x: 50%;
  --opx-light-y: 50%;
  --opx-reactive-strength: 0;
  position: relative;
  transform-style: preserve-3d;
  transition: scale .55s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.opx-motion-reactive.is-motion-hover { scale: 1.008; }
.opx-motion-sheen {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--opx-reactive-strength) * .72);
  background:
    radial-gradient(circle at var(--opx-light-x) var(--opx-light-y), rgba(var(--opx-motion-core), .15), transparent 22%),
    linear-gradient(112deg, transparent 28%, rgba(255,255,255,.055) 44%, transparent 61%);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}
.opx-motion-reactive.is-motion-glint .opx-motion-sheen::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -28%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  filter: blur(5px);
  transform: skewX(-18deg);
  animation: opx-motion-card-glint 1.05s ease-out both;
}

.opx-motion-frame {
  --opx-frame-accent: var(--opx-motion-core);
  position: absolute;
  z-index: 13;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    inset 1px 0 rgba(255,255,255,.018),
    inset 0 -1px rgba(var(--opx-frame-accent), .08);
  opacity: .72;
  transition: opacity .45s ease, box-shadow .55s ease;
}

.opx-motion-frame::before,
.opx-motion-frame::after {
  content: "";
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  opacity: .58;
  transition: width .6s cubic-bezier(.16,1,.3,1), height .6s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.opx-motion-frame::before {
  top: .72rem;
  left: .72rem;
  border-top: 1px solid rgba(var(--opx-frame-accent), .48);
  border-left: 1px solid rgba(var(--opx-frame-accent), .48);
}
.opx-motion-frame::after {
  right: .72rem;
  bottom: .72rem;
  border-right: 1px solid rgba(var(--opx-frame-accent), .32);
  border-bottom: 1px solid rgba(var(--opx-frame-accent), .32);
}
.opx-motion-reactive.is-motion-hover > .opx-motion-frame {
  opacity: 1;
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    inset 0 0 3.5rem rgba(var(--opx-frame-accent), .025),
    inset 0 -1px rgba(var(--opx-frame-accent), .2);
}
.opx-motion-reactive.is-motion-hover > .opx-motion-frame::before,
.opx-motion-reactive.is-motion-hover > .opx-motion-frame::after {
  width: 4rem;
  height: 4rem;
  opacity: .95;
}

/* Contact fields and information rows use their own dividers. Keep the
   decorative motion corners away from labels and form controls. */
.onpixel-form > .opx-motion-frame,
.onpixel-chan > .opx-motion-frame {
  display: none !important;
}

.onpixel-elem[data-element="fire"],
.opx-element-card[data-element="fire"] { --opx-frame-accent: 255, 98, 38; }
.onpixel-elem[data-element="ice"],
.opx-element-card[data-element="ice"] { --opx-frame-accent: 74, 177, 255; }
.onpixel-elem[data-element="poison"],
.opx-element-card[data-element="poison"] { --opx-frame-accent: 126, 205, 45; }
.onpixel-elem[data-element] > .opx-motion-frame,
.opx-element-card[data-element] > .opx-motion-frame { --opx-frame-accent: inherit; }

.opx-motion-index {
  position: absolute;
  z-index: 14;
  top: clamp(1rem, 2vw, 1.45rem);
  right: clamp(1rem, 2vw, 1.45rem);
  font: 680 .64rem/1 var(--onpixel-font, sans-serif);
  letter-spacing: .18em;
  color: rgba(var(--opx-frame-accent), .62);
  text-shadow: 0 0 1.2rem rgba(var(--opx-frame-accent), .3);
  transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.opx-motion-reactive.is-motion-hover > .opx-motion-index {
  color: rgba(var(--opx-frame-accent), .96);
  transform: translateY(-.2rem);
}

.opx-motion-ready .onpixel-site-header.is-stuck {
  background: rgba(5, 6, 10, .94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.22), inset 0 -1px rgba(var(--opx-motion-core), .055);
}

.opx-motion-ready ::selection {
  color: #fff;
  background: rgba(var(--opx-motion-core), .42);
}

@media (hover: hover) {
  .opx-motion-reactive.is-motion-hover {
    box-shadow: 0 1.35rem 3.6rem rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.025);
  }
}

/* Homepage element panels: darker material, clearer inactive states and
   restrained element light instead of a flat full-card colour wash. */
.opx-motion-ready .onpixel-elements__set {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.085);
}
.opx-motion-ready .onpixel-elem {
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 36%),
    #07080c;
}
.opx-motion-ready .onpixel-elem::before {
  background:
    radial-gradient(72% 62% at 18% 20%, color-mix(in srgb, var(--onpixel-el-core) 26%, transparent), transparent 67%),
    linear-gradient(155deg, color-mix(in srgb, var(--onpixel-el-core) 9%, #08090d), #050609 72%);
  opacity: 0;
}
.opx-motion-ready .onpixel-elem.is-active::before { opacity: 1; }
.opx-motion-ready .onpixel-elements__set.has-focus .onpixel-elem {
  opacity: .72;
  filter: saturate(.72) brightness(.86);
}
.opx-motion-ready .onpixel-elements__set.has-focus .onpixel-elem.is-active {
  opacity: 1;
  filter: saturate(1.04) brightness(1);
}
.opx-motion-ready .onpixel-elem__sigil {
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--onpixel-el-core) 18%, transparent), 0 1.1rem 3rem rgba(0,0,0,.26);
}
.opx-motion-ready .onpixel-elem.is-active .onpixel-elem__sigil {
  filter: drop-shadow(0 0 1.8rem color-mix(in srgb, var(--onpixel-el-core) 54%, transparent));
}
.opx-motion-ready .onpixel-elem__traits span {
  background: color-mix(in srgb, var(--onpixel-el-core) 5%, rgba(4,5,8,.74));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

/* Site-wide premium finishing: solid composited header, clearer calls to
   action and a subtle material response without another animation loop. */
.opx-motion-ready .onpixel-act {
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.22);
}
.opx-motion-ready .onpixel-act--solid {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.46);
}
.opx-motion-ready .onpixel-tie {
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 .8rem 2rem rgba(0,0,0,.12);
}
.opx-motion-ready .onpixel-nav__link[aria-current="page"],
.opx-motion-ready .onpixel-nav__link.is-current {
  text-shadow: 0 0 1.25rem rgba(var(--opx-motion-core), .22);
}

.opx-motion-magnetic {
  will-change: translate;
  transition: translate .52s cubic-bezier(.16,1,.3,1), color .3s ease, border-color .3s ease, background-color .3s ease;
}
.opx-motion-magnetic.is-motion-pulled { transition-duration: .12s, .3s, .3s, .3s; }

.opx-motion-image {
  transition: filter .8s ease, opacity .8s ease;
}
.opx-motion-ready .opx-motion-image:not(.is-motion-loaded) { opacity: .24; filter: blur(9px) saturate(.5); }
.opx-motion-image.is-motion-loaded { opacity: 1; filter: none; }

/* Homepage-specific depth and element choreography. */
.onpixel-hero__stack,
.onpixel-hero__inner > div:first-child,
.opx-decision-anatomy__card,
.opx-mini-turn__opponent,
.opx-home-pulse__mark {
  will-change: translate;
}
.onpixel-hero__stack { transition: translate .12s linear; }
.onpixel-hero__inner > div:first-child { transition: translate .18s linear; }

.opx-decision-anatomy.is-motion-hover .opx-decision-anatomy__card {
  translate: var(--opx-depth-x, 0) var(--opx-depth-y, 0);
}
.opx-mini-turn__board.is-motion-hover .opx-mini-turn__opponent { translate: 0 -.35rem; }
.opx-home-pulse__proof.is-motion-hover .opx-home-pulse__mark { translate: 0 -.3rem; }

.onpixel-elements__set.is-motion-pointer .onpixel-elem:not(.is-active) { opacity: .72; }
.onpixel-elements__set.is-motion-pointer .onpixel-elem.is-active { filter: brightness(1.1); }

.onpixel-field { position: relative; }
.onpixel-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--opx-motion-core)), rgb(var(--opx-motion-hot)));
  box-shadow: 0 0 1rem rgba(var(--opx-motion-core), .35);
  transition: right .62s cubic-bezier(.16,1,.3,1);
}
.onpixel-field.is-motion-focused::after { right: 0; }

/* Active scene micro-movement: visible but never compromises readability. */
.opx-motion-scene.is-motion-active .opx-kicker,
.opx-motion-scene.is-motion-active .onpixel-hud,
.opx-motion-scene.is-motion-active .opx-profile-kicker {
  text-shadow: 0 0 1.4rem rgba(var(--opx-motion-core), .22);
}

@keyframes opx-motion-heading-sweep {
  0% { opacity: 0; transform: skewX(-14deg) translateX(-80%); }
  22% { opacity: .82; }
  100% { opacity: 0; transform: skewX(-14deg) translateX(720%); }
}
@keyframes opx-motion-card-glint {
  0% { opacity: 0; translate: 0 0; }
  18% { opacity: .85; }
  100% { opacity: 0; translate: 760% 0; }
}
@media (max-width: 63.99rem), (pointer: coarse) {
  .opx-motion-field { opacity: .14; }
  .opx-motion-reactive { scale: 1 !important; }
  .opx-motion-sheen { display: none; }
  .opx-motion-frame::before,
  .opx-motion-frame::after { width: 1.7rem; height: 1.7rem; }
}

.opx-motion-lite .opx-motion-field { opacity: .12; }
.opx-motion-lite .opx-motion-heading__sweep { filter: none; }
.opx-motion-lite .opx-motion-reactive { box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .opx-motion-field,
  .opx-motion-cinematic,
  .opx-motion-heading__sweep,
  .opx-motion-sheen { display: none !important; }
  .opx-motion-magnetic,
  .opx-motion-image,
  .opx-motion-reactive { transition: none !important; translate: none !important; scale: 1 !important; }
}