/* Load after styles.css. Pointer effects use independent transform properties
   so GSAP's reveal / scroll transforms remain owned by the existing scripts. */
.hero-visual {
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 45%;
  --spot-strength: 0;
  --pointer-dx: 0px;
  --pointer-dy: 0px;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 225px 190px at var(--spot-x) var(--spot-y), #83baa43d 0%, #a8d2c71c 44%, transparent 75%),
    radial-gradient(ellipse 205px 180px at calc(var(--spot-x) + 12%) calc(var(--spot-y) + 6%), #aea6d92b 0%, transparent 78%);
  opacity: var(--spot-strength);
}
.hero-visual #hero-canvas,
.hero-visual .molecular-fallback {
  translate: var(--pointer-dx) var(--pointer-dy);
  filter: drop-shadow(8px 16px 15px #3758631c);
}

.photo-open,
.space-main .space-image,
.space-plan > img {
  transition: box-shadow .45s var(--ease), translate .5s var(--ease);
}
.photo-open img,
.space-main .space-image img {
  transition: scale .95s var(--ease), transform .95s var(--ease);
}
.photo-expand {
  transition: background .3s, color .3s, translate .4s var(--ease), box-shadow .35s;
}
.photo-open:focus-visible {
  box-shadow: 0 14px 30px #1f4d3c20, 0 2px 8px #1f4d3c14;
}
.photo-open:focus-visible img { scale: 1.035; }
.photo-open:focus-visible .photo-expand { background: var(--ink); color: var(--white); translate: 1px -1px; }

.fund-item {
  position: relative;
  isolation: isolate;
  transition: translate .4s var(--ease), box-shadow .4s var(--ease);
}
.fund-item::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, #edf5f0e6, #f5f8f590 58%, transparent);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.fund-item::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: -12px;
  width: 2px;
  pointer-events: none;
  background: #83aaa0;
  box-shadow: 0 0 15px #79b6a775;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.fund-feature::before { background: linear-gradient(110deg, #f6f6ffe0, #e6eef760 65%, transparent); }
.fund-item:focus-within { translate: 6px 0; box-shadow: 0 13px 28px #254f430b; }
.fund-item:focus-within::before,
.fund-item:focus-within::after { opacity: 1; }

.compute { isolation: isolate; --spot-x: 50%; --spot-y: 50%; --spot-strength: 0; }
.compute::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--spot-strength);
  background:
    radial-gradient(ellipse 365px 220px at var(--spot-x) var(--spot-y), #a2dcc824 0%, #8abcb70c 55%, transparent 80%),
    linear-gradient(112deg, transparent calc(var(--spot-x) - 18%), #bdddd80c calc(var(--spot-x) - 3%), #e4f4e91a var(--spot-x), #a9d5d30b calc(var(--spot-x) + 3%), transparent calc(var(--spot-x) + 18%));
}
.compute-inner { position: relative; z-index: 1; }

.button,
.nav-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background .3s, color .3s, box-shadow .35s, transform .25s;
}
.button::before,
.nav-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, #ffffff20, transparent 58%);
  opacity: 0;
  transition: opacity .35s;
}
.button > span,
.nav-contact > span,
.contacts strong::after {
  transition: translate .35s var(--ease);
}
.button:focus-visible,
.nav-contact:focus-visible {
  box-shadow: 0 8px 19px #24463f25;
}
.button:focus-visible::before,
.nav-contact:focus-visible::before { opacity: 1; }
.button:focus-visible > span,
.nav-contact:focus-visible > span { translate: 4px 0; }
.contacts a { transition: color .25s, background .3s; }
.contacts a:focus-visible { background: #ffffff70; }
.contacts a:focus-visible strong::after { translate: 3px -2px; }

@media (hover: hover) and (pointer: fine) {
  .photo-open:hover,
  .space-main:hover .space-image,
  .space-plan:hover > img {
    translate: 0 -3px;
    box-shadow: 0 16px 32px #1f4d3c21, 0 2px 8px #1f4d3c12;
  }
  /* Override the existing photo zoom with one coherent scale operation. */
  .photo-open:hover img { transform: none; scale: 1.045; }
  .space-main:hover .space-image img { scale: 1.035; }
  .photo-open:hover .photo-expand { background: var(--ink); color: var(--white); translate: 1px -1px; box-shadow: 0 4px 10px #193b3c24; }
  .fund-item:hover { translate: 6px 0; box-shadow: 0 13px 28px #254f430b; }
  .fund-item:hover::before,
  .fund-item:hover::after { opacity: 1; }
  .button:hover,
  .nav-contact:hover { box-shadow: 0 9px 21px #24463f25; }
  .button:hover::before,
  .nav-contact:hover::before { opacity: 1; }
  .button:hover > span,
  .nav-contact:hover > span { translate: 4px 0; }
  .contacts a:hover { background: #ffffff70; }
  .contacts a:hover strong::after { translate: 3px -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual::before,
  .compute::after { display: none; }
  .hero-visual #hero-canvas,
  .hero-visual .molecular-fallback,
  .photo-open,
  .space-main .space-image,
  .space-plan > img,
  .photo-expand,
  .fund-item,
  .button > span,
  .nav-contact > span,
  .contacts strong::after { translate: none !important; }
  .photo-open img,
  .space-main .space-image img { scale: none !important; transform: none !important; }
  .button:hover,
  .button:active { transform: none; }
}