/* =============================================================
   interactive.css — desktop premium interaction layer
   Square-cursor, blueprint grid, CAD-to-built 3D study,
   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.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195,154,99,0.085) 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; }

/* ---------- 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.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195,154,99,0.10) 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;
}

/* ---------- CAD → built reality — global architectural study ---------- */
.sculpture-stage {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: clamp(280px, 26vw, 380px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: opacity 1.2s var(--ease);
  contain: layout paint size;
}
.is-loaded .sculpture-stage.is-ready { opacity: 0.96; }
.sculpture-stage__canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 24px 30px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 24px rgba(195, 154, 99, 0.055));
}
.sculpture-stage__meta {
  position: absolute;
  left: 50%;
  bottom: 0.6%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(215, 204, 185, 0.48);
  font-family: var(--label);
  font-size: 0.45rem;
  font-weight: 550;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.sculpture-stage__meta::before,
.sculpture-stage__meta::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: rgba(195, 154, 99, 0.34);
}
.sculpture-stage__meta::before { right: calc(100% + 10px); }
.sculpture-stage__meta::after { left: calc(100% + 10px); }
.sculpture-stage__meta b {
  color: rgba(211, 166, 110, 0.9);
  font-weight: 650;
  letter-spacing: 0.19em;
}
.sculpture-stage__scale {
  position: absolute;
  top: 4.5%;
  right: 7%;
  color: rgba(213, 198, 177, 0.36);
  font-family: var(--label);
  font-size: 0.39rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
}

/* Keep homepage copy legible as the CAD study crosses behind it.
   The protection is deliberately local: no panel, blur or layout change. */
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
  #services .sec-head__aside,
  #services .service__desc {
    position: relative;
    z-index: 1;
    text-shadow:
      0 1px 2px rgba(17, 15, 13, 0.98),
      0 3px 14px rgba(17, 15, 13, 0.88),
      0 0 28px rgba(17, 15, 13, 0.58);
  }

  #services .sec-head__aside::before,
  #services .service__desc::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -0.7rem -1rem;
    pointer-events: none;
    background: radial-gradient(
      ellipse at 42% 50%,
      rgba(17, 15, 13, 0.22) 0%,
      rgba(17, 15, 13, 0.1) 52%,
      rgba(17, 15, 13, 0) 100%
    );
  }

  #services .sec-head__aside p {
    color: rgba(245, 241, 233, 0.9);
  }

  #services .sec-index {
    color: var(--paper-2);
  }

  #services .service__desc {
    color: rgba(245, 241, 233, 0.9);
    opacity: 1;
  }
}

/* ---------- 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: 600; letter-spacing: -0.02em;
  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: 1100px) {
  .sculpture-stage { display: none !important; }
}
@media (hover: none), (max-width: 900px) {
  .bp-grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sculpture-stage, .bp-grid, .hero__blueprint { display: none !important; }
  [data-mask], [data-mask-up] { clip-path: none !important; }
}

/* Module 2: gallery cards link to detail pages - visually neutral wrapper */
.work__link { display: block; color: inherit; text-decoration: none; }