/* Home page banner: Buddha-heads collage with a soft halo, gentle float and 3D tilt */
.hero-art {
  position: relative;
  isolation: isolate;
  perspective: 1000px;
  animation: heroIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}
/* warm halo behind the collage */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 222, 160, .95) 0%,
              rgba(248, 190, 100, .55) 38%,
              rgba(244, 182, 92, 0) 70%);
  filter: blur(6px);
  animation: halo 7s ease-in-out infinite;
}
/* thin aureole ring, a nod to the Buddha's halo */
.hero-art::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 112%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  border: 1.5px solid rgba(138, 75, 8, .22);
  box-shadow: 0 0 0 10px rgba(138, 75, 8, .05);
  animation: ring 7s ease-in-out infinite;
}
.hero-art img {
  transform: rotateY(-10deg) rotateX(2deg);
  transform-origin: 60% 50%;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s;
  filter: drop-shadow(0 18px 22px rgba(90, 50, 0, .28)) saturate(1.05);
  animation: float 8s ease-in-out infinite;
}
.hero-art:hover img {
  transform: rotateY(0deg) rotateX(0deg) scale(1.03);
  filter: drop-shadow(0 24px 30px rgba(90, 50, 0, .32)) saturate(1.12);
}
.hero-art figcaption {
  margin-top: 10px;
  text-align: center;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .8;
}

@keyframes heroIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes halo   { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes ring   { 0%, 100% { opacity: .7; scale: 1; } 50% { opacity: 1; scale: 1.03; } }

/* phones: flatter tilt, smaller ring so it never crowds the edges */
@media (max-width: 759px) {
  .hero-art { margin-top: 14px; margin-bottom: 18px; }
  .hero-art img { transform: rotateY(-6deg); }
  .hero-art::after { width: 104%; }
}

@media (prefers-color-scheme: dark) {
  .hero-art::before { background: radial-gradient(circle, rgba(240,180,94,.35) 0%, rgba(240,180,94,.12) 40%, transparent 70%); }
  .hero-art::after { border-color: rgba(240,180,94,.25); box-shadow: 0 0 0 10px rgba(240,180,94,.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-art::before, .hero-art::after, .hero-art img { animation: none; }
  .hero-art img { transition: none; }
}