/* ==========================================================================
   Hassoun Studio: interaction effects (fx.js adds html.fx when they're on).
   Nothing here changes layout, colors or fonts. Delete this file and the
   fx.js script tag to turn every effect off.
   ========================================================================== */

/* Scroll progress line along the top edge */
.fx-progress {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 100%; height: 2px;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  pointer-events: none;
}

/* Cursor ring (mouse/trackpad only; the normal cursor stays) */
/* Hidden while you're just moving around; grows out of the cursor over anything clickable */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 101;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1.5px solid rgba(30, 58, 138, 0.45); border-radius: 50%;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
              background-color .25s ease, border-color .25s ease, opacity .25s ease, scale .2s ease;
}
.fx-cursor.on.is-link, .fx-cursor.on.is-view { opacity: 1; }
.fx-cursor.is-link { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.55); }
.fx-cursor.is-view { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: var(--accent); border-color: var(--accent); }
.fx-cursor span { font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity .2s ease; }
.fx-cursor.is-view span { opacity: 1; }
.fx-cursor.down { scale: .82; }

/* Hero: a dot grid that lights up around the cursor */
.fx-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background-image: radial-gradient(circle, rgba(30, 58, 138, 0.42) 1.1px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
          mask-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
}
.fx .hero:hover .fx-grid { opacity: 1; }

/* Cards: 3D tilt (set from JS with the `rotate` property) + a light that follows the cursor */
.fx .pitch-grid, .fx .work-grid, .fx .about-top, .fx .grid-2, .fx .grid-3, .fx .skills { perspective: 1100px; }
.fx .work-card, .fx .card { position: relative; }
.fx-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(37, 99, 235, 0.10), transparent 60%);
}
.fx-glare.dark { background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(147, 180, 255, 0.16), transparent 60%); }
.fx-tilt:hover > .fx-glare, .fx-lit:hover > .fx-glare { opacity: 1; }

/* Hero monogram: parallax + click to flip */
.fx .hero-mono { perspective: 800px; }
.fx .hero-mono svg { cursor: pointer; }

/* "Start a project" tether: rope, off-screen needle and click ripple are drawn here */
.fx-rope { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99; pointer-events: none; }