/* Original Higgsfield artwork with lightweight, local interaction. */
.brand-window.interactive-brand { perspective: 1000px; }
.brand-sculpture {
  --art-rotate-x: 0deg;
  --art-rotate-y: 0deg;
  --art-light-x: 50%;
  --art-light-y: 35%;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-edge);
  border-bottom-color: var(--glass-edge-bottom);
  border-radius: 26px;
  background: #b6aecf;
  box-shadow: var(--glass-shadow), 0 22px 38px -20px #56416a45;
  transform: rotateX(var(--art-rotate-x)) rotateY(var(--art-rotate-y));
  transition: transform .35s ease-out, box-shadow .5s;
  touch-action: pan-y pinch-zoom;
}
.brand-window.interactive-brand .brand-sculpture img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: scale(1.035);
  animation: brand-art-drift 11s ease-in-out infinite;
  animation-play-state: paused;
}
.brand-sculpture.is-in-view:not(.motion-off) img { animation-play-state: running; }
.brand-sculpture:focus-visible { outline: 3px solid #4e3869; outline-offset: 6px; }
.brand-art-light,
.brand-art-ripple {
  position: absolute;
  pointer-events: none;
}
.brand-art-light {
  inset: 0;
  background: radial-gradient(circle at var(--art-light-x) var(--art-light-y), #fff5eb6b, #fbe3ee1c 30%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .55s;
}
.brand-sculpture.is-tracking .brand-art-light,
.brand-sculpture:focus-visible .brand-art-light { opacity: .55; }
.brand-sculpture.is-lit .brand-art-light { opacity: 1; }
.brand-sculpture.is-lit { box-shadow: var(--glass-shadow), 0 15px 45px -15px #be91b775; }
.brand-art-ripple {
  inset: 28%;
  border: 1px solid #fff7eea6;
  border-radius: 50%;
  opacity: 0;
}
.brand-sculpture.is-lit:not(.motion-off) .brand-art-ripple { animation: brand-art-ripple 1.4s ease-out; }
.brand-window.interactive-brand figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  font-size: 10px;
  letter-spacing: 1.1px;
  line-height: 1.6;
  margin-top: 18px;
}
.brand-art-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #62516e; }
.brand-art-hint::before { content: 'Move or tap to explore'; }
@media (hover: none), (pointer: coarse) {
  .brand-art-hint::before { content: 'Tap to explore'; }
}
@keyframes brand-art-drift {
  0%, 100% { transform: scale(1.035) translateY(2px); }
  50% { transform: scale(1.055) translateY(-3px); }
}
@keyframes brand-art-ripple {
  0% { opacity: 0; transform: scale(.5); }
  20% { opacity: .45; }
  100% { opacity: 0; transform: scale(2.7); }
}
/* The preference stops tilt, drift and ripple; activation only changes light. */
.brand-window.interactive-brand .brand-sculpture.motion-off,
body.reduced .brand-window.interactive-brand .brand-sculpture,
.brand-window.interactive-brand .brand-sculpture.motion-off img,
body.reduced .brand-window.interactive-brand .brand-sculpture img {
  animation: none;
  transform: none;
  transition: none;
}
.brand-sculpture.motion-off .brand-art-light { transition: none; }
.brand-sculpture.motion-off .brand-art-ripple { animation: none; }
body.reduced .brand-art-hint::before { content: 'Tap to illuminate'; }
@media (prefers-reduced-motion: reduce) {
  .brand-window.interactive-brand .brand-sculpture,
  .brand-window.interactive-brand .brand-sculpture img,
  .brand-art-light,
  .brand-art-ripple { animation: none !important; transform: none !important; transition: none !important; }
  .brand-art-hint::before { content: 'Tap to illuminate'; }
}