/**
 * ICS Antigravity — Effects CSS
 * Companion to ics-effects.js
 * All rules scoped to .ics-site
 */

/* ─────────────────────────────────────────────
   CUSTOM CURSOR
   ───────────────────────────────────────────── */
/* Cursor hidden ONLY inside elements with data-ics-effect="cursor" — not globally */
[data-ics-effect="cursor"] { cursor: none; }
[data-ics-effect="cursor"] * { cursor: none; }

.ics-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--ics-z-modal);
  mix-blend-mode: difference;
}

.ics-cursor__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ics-ease-smooth),
              height 0.2s var(--ics-ease-smooth);
}

.ics-cursor__ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width  0.3s var(--ics-ease-smooth),
              height 0.3s var(--ics-ease-smooth),
              border-color 0.3s;
}

/* Expanded state (over interactive elements) */
.ics-cursor--expanded .ics-cursor__dot {
  width: 0;
  height: 0;
  opacity: 0;
}

.ics-cursor--expanded .ics-cursor__ring {
  width: 56px;
  height: 56px;
  border-color: rgba(255, 255, 255, 0.9);
}

/* Hidden state (cursor left window) */
.ics-cursor--hidden {
  opacity: 0;
}

/* Restore cursor on touch devices (JS also guards this, belt + braces) */
@media (hover: none) {
  [data-ics-effect="cursor"],
  [data-ics-effect="cursor"] * { cursor: auto; }
  .ics-cursor { display: none; }
}

/* ─────────────────────────────────────────────
   MARQUEE
   ───────────────────────────────────────────── */
.ics-site .ics-marquee-outer {
  overflow: hidden;
  white-space: nowrap;
}

.ics-site [data-ics-effect="marquee"] {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.ics-site [data-ics-effect="marquee"] > * {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   SCROLL SKEW
   ───────────────────────────────────────────── */
.ics-site [data-ics-effect="skew"] {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ─────────────────────────────────────────────
   GRAIN CANVAS
   (CSS controlled by inline style from JS,
   but transition defined here)
   ───────────────────────────────────────────── */
.ics-site .ics-grain-canvas {
  pointer-events: none;
  user-select: none;
}

/* ─────────────────────────────────────────────
   IMAGE DISTORT
   ───────────────────────────────────────────── */
.ics-site [data-ics-effect="distort"] {
  overflow: hidden;
}

.ics-site [data-ics-effect="distort"] img {
  will-change: filter, transform;
}

/* ─────────────────────────────────────────────
   THREE.JS CANVAS CONTAINER
   ───────────────────────────────────────────── */
.ics-site [data-ics-effect="threejs"] {
  position: relative;
  overflow: hidden;
}

.ics-site [data-ics-effect="threejs"] canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   REDUCED MOTION — kill all effects
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ics-cursor { display: none; }
  .ics-site * { cursor: auto !important; }
  .ics-site [data-ics-effect="marquee"] { animation: none !important; transform: none !important; }
  .ics-site [data-ics-effect="skew"] { transform: none !important; }
  .ics-site .ics-grain-canvas { display: none; }
}