/*
 * LOOP Food — premium pointer + character physics
 *
 * This layer is deliberately isolated from motion.js. It consumes only
 * --ix-* custom properties and can be removed without changing layout.
 */

:root {
  --ix-cursor-x: -100px;
  --ix-cursor-y: -100px;
  --ix-ring-x: -100px;
  --ix-ring-y: -100px;
  --ix-label-x: -100px;
  --ix-label-y: -100px;
  --ix-dot-scale: 1;
  --ix-ring-scale-x: 1;
  --ix-ring-scale-y: 1;
  --ix-ring-rotate: 0deg;
  --ix-label-scale: 0.82;
}

.ix-cursor {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

.ix-cursor.is-visible {
  opacity: 1;
  visibility: visible;
}

.ix-cursor__dot,
.ix-cursor__ring,
.ix-cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform;
}

.ix-cursor__dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #fff8e8;
  box-shadow: 0 0 0 1px rgba(15, 13, 10, 0.22);
  mix-blend-mode: difference;
  transform: translate3d(var(--ix-cursor-x), var(--ix-cursor-y), 0)
    translate3d(-50%, -50%, 0)
    scale3d(var(--ix-dot-scale), var(--ix-dot-scale), 1);
}

.ix-cursor__ring {
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid #fff8e8;
  border-radius: 50%;
  mix-blend-mode: difference;
  transform: translate3d(var(--ix-ring-x), var(--ix-ring-y), 0)
    translate3d(-50%, -50%, 0)
    rotate(var(--ix-ring-rotate))
    scale3d(var(--ix-ring-scale-x), var(--ix-ring-scale-y), 1);
}

.ix-cursor__ring::before,
.ix-cursor__ring::after {
  position: absolute;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ix-cursor__ring::before {
  top: 50%;
  left: -0.18rem;
  transform: translateY(-50%);
}

.ix-cursor__ring::after {
  top: 50%;
  right: -0.18rem;
  transform: translateY(-50%);
}

.ix-cursor__label {
  max-width: 7.5rem;
  padding: 0.42rem 0.58rem 0.39rem;
  border: 1.5px solid #15130f;
  border-radius: 999px;
  opacity: 0;
  color: #fff8e8;
  background: #15130f;
  box-shadow: 0.18rem 0.18rem 0 #fff8e8;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate3d(var(--ix-label-x), var(--ix-label-y), 0)
    scale3d(var(--ix-label-scale), var(--ix-label-scale), 1);
}

/* Authored entrances: headings arrive through a crop; operational rows enter
   laterally. Content remains visible when JavaScript is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready[data-motion="full"] [data-reveal] {
    transition:
      opacity 520ms cubic-bezier(.22, 1, .36, 1),
      transform 720ms cubic-bezier(.22, 1, .36, 1),
      clip-path 720ms cubic-bezier(.22, 1, .36, 1);
  }

  html.motion-ready[data-motion="full"] [data-reveal]:not(.is-revealed) {
    opacity: .01;
    transform: translate3d(0, 1.4rem, 0);
    clip-path: inset(0 0 14% 0);
  }

  html.motion-ready[data-motion="full"] .control-deck[data-reveal]:not(.is-revealed),
  html.motion-ready[data-motion="full"] .control-deck__ledger li[data-reveal]:not(.is-revealed),
  html.motion-ready[data-motion="full"] .diagnostic-output__ledger li[data-reveal]:not(.is-revealed) {
    transform: translate3d(2rem, 0, 0);
    clip-path: inset(0 0 0 8%);
  }

  html.motion-ready[data-motion="full"] .control-deck__ledger li:nth-child(even)[data-reveal]:not(.is-revealed),
  html.motion-ready[data-motion="full"] .diagnostic-output__ledger li:nth-child(even)[data-reveal]:not(.is-revealed) {
    transform: translate3d(-2rem, 0, 0);
    clip-path: inset(0 8% 0 0);
  }
}

html[data-motion="reduced"] [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

.ix-cursor.is-hovering .ix-cursor__label {
  opacity: 1;
}

.ix-cursor.is-pressing .ix-cursor__dot {
  background: #ffc737;
}

/*
 * The class is added only after the runtime has confirmed a fine pointer.
 * If JavaScript does not run, the native cursor remains untouched.
 */
@media (hover: hover) and (pointer: fine) {
  html.ix-cursor-ready,
  html.ix-cursor-ready body,
  html.ix-cursor-ready body * {
    cursor: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .ix-cursor {
    display: none !important;
  }
}

/* Compact layouts use the native pointer. This also keeps desktop viewport
   emulation honest: the decorative cursor never covers mobile navigation. */
@media (max-width: 53.75rem) {
  .ix-cursor {
    display: none !important;
  }

  html.ix-cursor-ready,
  html.ix-cursor-ready body,
  html.ix-cursor-ready body * {
    cursor: auto !important;
  }

  html.ix-cursor-ready a,
  html.ix-cursor-ready button,
  html.ix-cursor-ready [role="button"] {
    cursor: pointer !important;
  }
}

/* Robot transforms are owned exclusively by motion.js + styles.css. Keeping
   cursor styling isolated here prevents a second runtime from reopening the
   neck seam with competing head/torso variables. */