/* orchestratedbyczr Motion Layer : reactive, alive interaction system.
   Pairs with orchestratedbyczr-motion.js and the tokens/library files.

   Direction: interactive by default. Inspiration, not imitation. The feeling
   is "alive and reactive" pulled from Refik (atmosphere, drifting light) and
   the Off-White site language (reactive type, magnetic controls), without
   cloning a particle storm or caution tape. Cyan stays the live signal.

   Everything here is opt-in via data attributes and degrades to a calm,
   fully visible static layout under prefers-reduced-motion or no JS. */

/* ----- Cursor-tracked atmosphere -----
   A full-bleed light field that follows the pointer. The single biggest
   "alive" move. --czr-mx / --czr-my are pointer position in %, set by JS. */
.czr-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --czr-mx: 50%;
  --czr-my: 30%;
  /* Iridescent thin-film wash: violet near the cursor, teal counter-pole,
     faint magenta and ember floor. Cyan is deliberately kept OUT of the
     page-wide field so it stays a scarce focal signal elsewhere. */
  background:
    radial-gradient(38vw 38vw at var(--czr-mx) var(--czr-my), rgba(123, 92, 255, 0.16), transparent 62%),
    radial-gradient(52vw 46vw at calc(100% - var(--czr-mx)) calc(var(--czr-my) + 16%), rgba(31, 168, 160, 0.13), transparent 66%),
    radial-gradient(60vw 60vw at calc(var(--czr-mx) * 0.6 + 20%) calc(100% - var(--czr-my) * 0.4), rgba(255, 79, 163, 0.06), transparent 60%),
    radial-gradient(55vw 50vw at 50% 122%, rgba(255, 122, 47, 0.05), transparent 60%);
  transition: background-position var(--czr-dur-slow) var(--czr-ease);
  will-change: background;
}
/* Keep real content above BOTH ambient backdrops. This single rule must
   exclude every fixed backdrop layer: excluding only one would let its
   specificity (0,2,0) override the other backdrop's position:fixed and
   collapse it into the flow. */
.czr-root > *:not(.czr-atmosphere):not(.czr-constellation) { position: relative; z-index: 1; }

/* ----- Constellation backdrop : THE house signature -----
   Full-bleed drifting node network behind the page. This is the one ambient
   effect a page should run. The canvas inside fills the layer; JS paints it
   (see [data-czr-constellation] in orchestratedbyczr-motion.js). Content sits
   above via the .czr-root stacking rule below. */
.czr-constellation {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.czr-constellation canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- Scroll-driven reveals (richer than the base token reveal) -----
   JS sets --czr-rin from 0 (entering) to 1 (settled). We interpolate so the
   reveal tracks scroll position instead of snapping once. */
.czr-motion-on [data-czr-reveal] {
  --czr-rin: 0;
  opacity: calc(0.15 + 0.85 * var(--czr-rin));
  transform: translateY(calc((1 - var(--czr-rin)) * 28px));
  filter: blur(calc((1 - var(--czr-rin)) * 6px));
  will-change: opacity, transform, filter;
}
/* Optional depth: translate at a fraction of scroll. JS reads the factor. */
.czr-motion-on [data-czr-parallax] { will-change: transform; }

/* ----- Magnetic controls -----
   JS sets --czr-tx / --czr-ty (px) toward the cursor; springs back to 0. */
.czr-motion-on [data-czr-magnetic] {
  transform: translate(var(--czr-tx, 0px), var(--czr-ty, 0px));
  transition: transform var(--czr-dur-fast) var(--czr-ease);
  will-change: transform;
}

/* ----- Tilt panels -----
   JS sets --czr-rx / --czr-ry (deg) from cursor position within the element. */
.czr-motion-on [data-czr-tilt] {
  transform: perspective(900px) rotateX(var(--czr-rx, 0deg)) rotateY(var(--czr-ry, 0deg));
  transition: transform var(--czr-dur-fast) var(--czr-ease), box-shadow var(--czr-dur) var(--czr-ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.czr-motion-on [data-czr-tilt]:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

/* ----- Reactive display type -----
   The wordmark leans toward the cursor and breathes its tracking. JS sets
   --czr-skew (deg) and --czr-shift (px). */
.czr-motion-on [data-czr-reactive] {
  transform: translateX(var(--czr-shift, 0px)) skewX(var(--czr-skew, 0deg));
  transition: transform var(--czr-dur) var(--czr-ease), letter-spacing var(--czr-dur) var(--czr-ease);
  will-change: transform, letter-spacing;
}

/* ----- Reactive link underline (Off-White-adjacent, drawn not decorative) ----- */
.czr-motion-on .czr-link {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.czr-motion-on .czr-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--czr-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--czr-dur) var(--czr-ease);
}
.czr-motion-on .czr-link:hover::after { transform: scaleX(1); }

/* ----- Reduced motion / no JS: everything calm and fully visible ----- */
@media (prefers-reduced-motion: reduce) {
  .czr-atmosphere { display: none; }
  .czr-motion-on [data-czr-reveal] { opacity: 1; transform: none; filter: none; }
  .czr-motion-on [data-czr-magnetic],
  .czr-motion-on [data-czr-tilt],
  .czr-motion-on [data-czr-reactive] { transform: none; transition: none; }
}