/* A restrained polish of the approved portal. Layout and imagery stay intact. */
body[data-page="home"] .reference-offer h2 {
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}
body[data-page="home"] .reference-offer p {
  color: #c0c0c6;
  line-height: 1.6;
  text-wrap: pretty;
}
.reference-offer-link-text {
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.reference-offer-link > span[aria-hidden] {
  transition: transform .35s var(--ease);
}
.reference-offer-link:hover > span[aria-hidden],
.reference-offer-link:focus-visible > span[aria-hidden] {
  transform: translate(2px,-2px);
}
body[data-page="home"] .reference-node .portal-object {
  filter: brightness(1.06) contrast(1.035)
    drop-shadow(0 18px 20px rgb(0 0 0 / 65%))
    drop-shadow(0 0 13px rgb(171 155 213 / 9%));
  transition: transform .65s var(--ease), filter .55s var(--ease);
}
body[data-page="home"] .reference-node:hover .portal-object,
body[data-page="home"] .reference-node:focus-visible .portal-object {
  filter: brightness(1.17) contrast(1.035)
    drop-shadow(0 20px 23px rgb(0 0 0 / 70%))
    drop-shadow(0 0 19px rgb(184 170 218 / 19%));
}
body[data-page="home"] .reference-portrait {
  transition: transform .7s var(--ease), border-color .5s var(--ease);
  border-color: rgb(232 232 240 / 24%);
}
body[data-page="home"] .reference-portrait:hover {
  border-color: rgb(232 232 240 / 37%);
}
.reference-label { letter-spacing: .015em; }
.reference-contact {
  box-shadow: inset 0 0 0 1px rgb(204 194 231 / 12%),
    0 0 21px rgb(146 105 209 / 24%), 0 12px 25px rgb(0 0 0 / 35%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.reference-contact:hover,
.reference-contact:focus-visible {
  box-shadow: inset 0 0 0 1px rgb(204 194 231 / 20%),
    0 0 28px rgb(162 122 220 / 36%), 0 14px 28px rgb(0 0 0 / 40%);
}
.reference-legal { color: rgb(255 255 255 / 46%); }
.reference-legal a { transition: color .25s var(--ease); }
@media (hover: none) {
  body[data-page="home"] .reference-node:hover .portal-object {
    filter: brightness(1.06) contrast(1.035)
      drop-shadow(0 18px 20px rgb(0 0 0 / 65%));
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .reference-node .portal-object,
  body[data-page="home"] .reference-portrait,
  .reference-contact,.reference-legal a,.reference-offer-link > span[aria-hidden] {
    transition: none;
  }
}

.figure-sound-toggle { appearance: none; border: 0; padding: 6px 0; background: transparent; color: #aaaab2; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.figure-sound-toggle:hover { color: #fff; }
.figure-sound-toggle:focus-visible { outline: 1px solid #aaa; outline-offset: 5px; }
.reference-legal { flex-wrap: wrap; }

/* Keep the link and label still; animate the artwork inside the existing tilt layer. */
body[data-page="home"] .reference-node .portal-object { display: block; }
.figure-artwork { position: relative; display: block; width: 100%; height: 100%; animation: figure-hover 2.8s ease-in-out infinite; will-change: translate; transition: scale .16s ease-out; }
.figure-artwork img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-node--about { --figure-mask: url('./glass/about-ring-v3.webp'); }
.reference-node--projects { --figure-mask: url('./glass/projects-prism-v3.webp'); }
.reference-node--services { --figure-mask: url('./glass/services-cubes-v3.webp'); }
.reference-node--calculate { --figure-mask: url('./glass/calculate-cursor-v3.webp'); }
.figure-artwork::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 37%, rgb(255 255 255 / .38) 47%, rgb(255 255 255 / .72) 50%, rgb(255 255 255 / .2) 53%, transparent 63%); background-size: 300% 100%; background-position: 100% 0; -webkit-mask-image: var(--figure-mask); mask-image: var(--figure-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
@keyframes figure-hover {
  0%, 100% { translate: 0 4px; }
  50% { translate: 0 -4px; }
}
@keyframes figure-shine { 0% { opacity: 0; background-position: 100% 0; } 18% { opacity: .7; } 80% { opacity: .7; } 100% { opacity: 0; background-position: 0% 0; } }
@media (hover: hover) {
  .reference-node:hover .figure-artwork::after { animation: figure-shine .65s ease-out both; }
}
.reference-node:focus-visible .figure-artwork::after { animation: figure-shine .65s ease-out both; }
.reference-node:active .figure-artwork { scale: .955; }
.reference-node:active .figure-artwork::after { animation: figure-shine .4s ease-out both; }
@media (max-width: 820px) { .figure-artwork { animation-duration: 2.8s; } }
@media (prefers-reduced-motion: reduce) {
  .figure-artwork { animation: none; transition: none; will-change: auto; }
  .figure-artwork::after { animation: none !important; }
}

/* Selection emphasis stays separate from tilt and the shared floating animation. */
body[data-page="home"] .reference-node .portal-object {
  transition: transform .65s var(--ease), filter .3s var(--ease), opacity .3s ease, scale .3s var(--ease);
}
body[data-page="home"] .reference-node .reference-label { transition: transform .35s var(--ease), opacity .3s ease, color .3s ease; }
.reference-label i { transition: translate .3s var(--ease); }
body[data-page="home"] .reference-stage:has(.reference-node:focus-visible,.reference-node:active) .reference-node:not(:focus-visible):not(:active) .portal-object { opacity: .72; }
body[data-page="home"] .reference-stage:has(.reference-node:focus-visible,.reference-node:active) .reference-node:not(:focus-visible):not(:active) .reference-label { opacity: .75; }
body[data-page="home"] .reference-node:is(:focus-visible,:active) .portal-object { scale: 1.045; filter: brightness(1.22) contrast(1.035) drop-shadow(0 18px 20px rgb(0 0 0 / 65%)) drop-shadow(0 0 20px rgb(184 170 218 / 24%)); }
body[data-page="home"] .reference-node:is(:focus-visible,:active) .reference-label { color: #fff; }
.reference-node:is(:focus-visible,:active) .reference-label i { translate: 3px 0; }
@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .reference-stage:has(.reference-node:hover) .reference-node:not(:hover):not(:focus-visible) .portal-object { opacity: .72; }
  body[data-page="home"] .reference-stage:has(.reference-node:hover) .reference-node:not(:hover):not(:focus-visible) .reference-label { opacity: .75; }
  body[data-page="home"] .reference-node:hover .portal-object { scale: 1.045; filter: brightness(1.22) contrast(1.035) drop-shadow(0 18px 20px rgb(0 0 0 / 65%)) drop-shadow(0 0 20px rgb(184 170 218 / 24%)); }
  .reference-node:hover .reference-label i { translate: 3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .reference-node .portal-object,
  body[data-page="home"] .reference-node .reference-label,
  .reference-label i { transition: none; }
}