/* Small, deliberate interactions around the larger halftone scenes. */
.hero-pointer-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #ffd669 2.6px, transparent 3.2px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle 150px at var(--glow-x, 50%) var(--glow-y, 45%), #000 4%, transparent 82%);
  mask-image: radial-gradient(circle 150px at var(--glow-x, 50%) var(--glow-y, 45%), #000 4%, transparent 82%);
  opacity: 0;
  transition: opacity .4s ease;
}
.hero[data-pointer-glow=true] .hero-pointer-light { opacity: .92; }
.hero-image { transition: transform .6s cubic-bezier(.2, .75, .2, 1); }

/* White spotlights keep the actual panel surfaces neutral gray. */
.data-panel, .brief-card { position: relative; --glow-x: 50%; --glow-y: 40%; }
.data-panel::before, .brief-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--glow-x) var(--glow-y), rgb(255 255 255 / .1), transparent 66%);
  opacity: 0;
  transition: opacity .35s ease;
}
.data-panel::after, .brief-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(310px circle at var(--glow-x) var(--glow-y), #e4e4e4, #656565 35%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
}
.data-panel[data-pointer-glow=true]::before,
.data-panel[data-pointer-glow=true]::after,
.brief-card[data-pointer-glow=true]::before,
.brief-card[data-pointer-glow=true]::after,
.data-panel:focus-visible::before, .data-panel:focus-visible::after { opacity: 1; }
.data-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.button { position: relative; isolation: isolate; overflow: hidden; }
.button::before {
  content: "";
  position: absolute;
  inset: -90% -35%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 37%, rgb(255 255 255 / .4) 49%, transparent 61%);
  transform: translateX(-110%);
}
.button::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transform: scaleX(.15);
  transition: transform .5s ease, opacity .3s ease;
}
.button:focus-visible::before { animation: sapien-button-sweep .85s ease-out both; }
.button:focus-visible::after { opacity: .6; transform: scaleX(1); }
.button:focus-visible svg { transform: translateX(4px); }
.button-gold:focus-visible { box-shadow: 0 0 28px rgb(255 195 42 / .2); }
.button svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.button-gold:focus-visible { outline-color: #fff; }

.brand-mark i { --dot-order: 0; }
.brand-mark i:nth-child(2) { --dot-order: 1; }
.brand-mark i:nth-child(3) { --dot-order: 2; }
.brand-mark i:nth-child(4) { --dot-order: 7; }
.brand-mark i:nth-child(6) { --dot-order: 3; }
.brand-mark i:nth-child(7) { --dot-order: 6; }
.brand-mark i:nth-child(8) { --dot-order: 5; }
.brand-mark i:nth-child(9) { --dot-order: 4; }
.brand:focus-visible .brand-mark i:not(:nth-child(5)) {
  animation: sapien-brand-orbit .8s ease-in-out calc(var(--dot-order) * 45ms) both;
}
.hero .status-dot { box-shadow: 0 0 0 0 rgb(255 195 42 / .35); animation: sapien-status-pulse 3.2s ease-out infinite; }

.brief-row { position: relative; overflow: hidden; }
.brief-row > span { color: var(--muted); transition: color .25s ease; }
.brief-row:focus-visible > span { color: var(--accent); }
.brief-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / .055) 50%, transparent 75%);
  transform: translateX(-120%);
}
.brief-row > svg { transition: color .25s, filter .25s; }
.brief-row:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
.brief-row:focus-visible > svg {
  animation: sapien-brief-icon .95s cubic-bezier(.2, .8, .2, 1) both;
  color: var(--accent);
  filter: drop-shadow(0 0 7px rgb(255 195 42 / .5));
}
.brief-row:focus-visible::after { animation: sapien-brief-scan 1.3s ease-out both; }

.text-link svg { transition: transform .3s ease; }
.text-link:focus-visible svg { transform: translateX(5px); }
.primary-nav a { position: relative; }
.primary-nav a::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.primary-nav a:focus-visible::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .hero-image { transform: translate(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px)) scale(1.025); }
  .button:hover::before { animation: sapien-button-sweep .85s ease-out both; }
  .button:hover::after { opacity: .6; transform: scaleX(1); }
  .button:hover svg { transform: translateX(5px); }
  .button-gold:hover { box-shadow: 0 0 28px rgb(255 195 42 / .2); }
  .brand:hover .brand-mark i:not(:nth-child(5)) { animation: sapien-brand-orbit .8s ease-in-out calc(var(--dot-order) * 45ms) both; }
  .brief-row:hover > span { color: var(--accent); }
  .brief-row:hover > svg {
    animation: sapien-brief-icon .95s cubic-bezier(.2, .8, .2, 1) both;
    color: var(--accent);
    filter: drop-shadow(0 0 7px rgb(255 195 42 / .5));
  }
  .brief-row:hover::after { animation: sapien-brief-scan 1.3s ease-out both; }
  .text-link:hover svg { transform: translateX(5px); }
  .primary-nav a:hover::after { transform: scaleX(1); }
}

@keyframes sapien-button-sweep { to { transform: translateX(110%); } }
@keyframes sapien-brand-orbit {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 transparent; }
  40% { transform: scale(1.6); box-shadow: 0 0 10px rgb(255 195 42 / .6); }
}
@keyframes sapien-status-pulse {
  0%, 10% { box-shadow: 0 0 0 0 rgb(255 195 42 / .4); }
  70%, 100% { box-shadow: 0 0 0 7px rgb(255 195 42 / 0); }
}
@keyframes sapien-brief-icon {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.18); color: var(--accent); }
  70% { transform: translateY(2px) scale(.96); }
}
@keyframes sapien-brief-scan { to { transform: translateX(120%); } }

/* Color/focus cues remain available when decorative motion is stopped. */
body[data-motion-state=paused] .hero-image,
body[data-motion-state=reduced] .hero-image { transform: none; }
body[data-motion-state=paused] .button:hover,
body[data-motion-state=paused] .button svg,
body[data-motion-state=paused] .text-link svg,
body[data-motion-state=reduced] .button:hover,
body[data-motion-state=reduced] .button svg,
body[data-motion-state=reduced] .text-link svg { transform: none; }
body[data-motion-state=paused] .hero-pointer-light,
body[data-motion-state=reduced] .hero-pointer-light { opacity: 0; }
body[data-motion-state=paused] .button::before,
body[data-motion-state=reduced] .button::before,
body[data-motion-state=paused] .brief-row::after,
body[data-motion-state=reduced] .brief-row::after { display: none; }
body[data-motion-state=paused] .button::after,
body[data-motion-state=paused] .primary-nav a::after { transition: none; }
body.interaction-page-hidden .hero .status-dot { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-image, .button:hover, .button svg, .text-link svg { transform: none !important; }
  .hero-pointer-light, .button::before, .brief-row::after { display: none; }
  .hero .status-dot, .brand-mark i, .brief-row > svg { animation: none !important; }
}