/* =============================================================
   interactive.css — desktop premium interaction layer
   Square-cursor, blueprint grid, signature 3D monolith,
   reveal masks, footer auto-fit. Desktop-first; gated on
   (hover:hover) + (min-width) and reduced-motion.
   ============================================================= */

/* ---------- Global blueprint grid (depth backdrop) ---------- */
.bp-grid {
  position: fixed; inset: -10vmax; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(195,154,99,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195,154,99,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
  opacity: 0; transition: opacity 1.2s ease; will-change: transform;
}
.is-loaded .bp-grid { opacity: 1; }
/* keep page content above the grid */
main, .footer { position: relative; z-index: 3; }
.header { z-index: 100; }

/* ---------- Square cursor swarm ---------- */
.sq-cursor { position: fixed; inset: 0; z-index: 9997; pointer-events: none; overflow: hidden; }
.sq {
  position: absolute; top: 0; left: 0; width: 16px; height: 16px;
  border: 1px solid rgba(195,154,99,0.55); border-radius: 1px;
  translate: -50% -50%; opacity: 0; will-change: transform, opacity;
}
.sq--solid { border-color: transparent; background: rgba(245,241,233,0.5); width: 5px; height: 5px; }

/* ---------- Hero animated blueprint corner ---------- */
.hero__blueprint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(195,154,99,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195,154,99,0.06) 1px, transparent 1px);
  background-size: 90px 90px;
  -webkit-mask-image: linear-gradient(115deg, transparent 38%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 38%, #000 100%);
  will-change: transform;
}

/* ---------- Signature 3D monolith (wireframe square cube) ---------- */
.monolith-stage {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px; z-index: 2;
  perspective: 1100px; pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity 1s ease;
}
.is-loaded .monolith-stage { opacity: 1; }
.monolith {
  position: relative; width: var(--mono-size, 220px); height: var(--mono-size, 220px);
  transform-style: preserve-3d; translate: -50% -50%; will-change: transform;
}
.monolith__face {
  position: absolute; inset: 0; border: 1px solid rgba(195,154,99,0.5);
  background: rgba(195,154,99,0.015); backface-visibility: visible;
}
.monolith__face::before {
  content: ""; position: absolute; inset: 18% ; border: 1px solid rgba(195,154,99,0.16);
}
.monolith__face::after {
  content: ""; position: absolute; left: 50%; top: 8%; width: 1px; height: 84%;
  background: rgba(195,154,99,0.14);
}
/* cube faces */
.monolith .f-front  { transform: translateZ(calc(var(--mono-size,220px) / 2)); }
.monolith .f-back   { transform: rotateY(180deg) translateZ(calc(var(--mono-size,220px) / 2)); }
.monolith .f-right  { transform: rotateY(90deg)  translateZ(calc(var(--mono-size,220px) / 2)); }
.monolith .f-left   { transform: rotateY(-90deg) translateZ(calc(var(--mono-size,220px) / 2)); }
.monolith .f-top    { transform: rotateX(90deg)  translateZ(calc(var(--mono-size,220px) / 2)); }
.monolith .f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--mono-size,220px) / 2)); }
/* inner core square for added depth */
.monolith__core {
  position: absolute; inset: 30%; transform-style: preserve-3d;
  border: 1px solid rgba(194,95,60,0.35);
}
.monolith__label {
  position: absolute; left: 50%; bottom: -1.6rem; translate: -50% 0;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(195,154,99,0.6); white-space: nowrap;
}

/* ---------- Image / panel mask reveals ---------- */
[data-mask] { clip-path: inset(0 0 100% 0); will-change: clip-path; }
[data-mask-up] { clip-path: inset(100% 0 0 0); }
.js [data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* depth shadow under floating cards on hover */
.work__media, .frame-art, .svc__panel, .map-card { transition: box-shadow .6s var(--ease), transform .6s var(--ease); }
.work:hover .work__media { box-shadow: 0 48px 90px -42px rgba(0,0,0,0.88); }

/* premium work-card hover — desaturate→colour, bronze frame, title accent */
.work__media .scale img { filter: saturate(0.88) brightness(0.9) contrast(1.02); transition: filter .8s var(--ease); }
.work:hover .work__media .scale img { filter: saturate(1.06) brightness(1.0) contrast(1.04); }
.work__media::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid transparent; border-radius: 4px; pointer-events: none; transition: border-color .6s var(--ease); }
.work:hover .work__media::after { border-color: rgba(195,154,99,0.5); }
.work__title { transition: color .55s var(--ease); }
.work:hover .work__title { color: var(--bronze); }

/* scroll-typography accent (each line of split gets a hairline) */
.sec-head__title .split-line { position: relative; }

/* ---------- Footer auto-fit wordmark (SVG) ---------- */
.footer__giant { font-size: 0; line-height: 0; }
.footer__giant svg { width: 100%; height: auto; display: block; overflow: visible; }
.footer__giant svg text {
  font-family: var(--display); font-weight: 360; letter-spacing: -0.03em;
  fill: var(--ink-3);
}
.footer__giant .fg-letter { fill: var(--ink-3); }

/* ---------- Gate the whole layer off on touch / reduced motion ---------- */
@media (hover: none), (max-width: 900px) {
  .sq-cursor, .monolith-stage { display: none !important; }
  .bp-grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sq-cursor, .monolith-stage, .bp-grid, .hero__blueprint { display: none !important; }
  [data-mask], [data-mask-up] { clip-path: none !important; }
}