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

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

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

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

.div-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(--div-ease-smooth),
              height 0.3s var(--div-ease-smooth),
              border-color 0.3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

.div-site [data-div-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) {
  .div-cursor { display: none; }
  .div-site * { cursor: auto !important; }
  .div-site [data-div-effect="marquee"] { animation: none !important; transform: none !important; }
  .div-site [data-div-effect="skew"] { transform: none !important; }
  .div-site .div-grain-canvas { display: none; }
}