/* Selected Home artwork. The original cutout remains visible without JavaScript. */
.hero .hero__visual { min-height: 540px; }
.hero-concept { position: relative; left: -24px; width: 100%; height: 540px; isolation: isolate; display: grid; place-items: center; }
.hero-concept__tilt { position: relative; z-index: 2; width: min(100%, 550px); transform: perspective(1000px) translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg)); transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.hero-concept__float { animation: hero-object-float 6.2s ease-in-out infinite both paused; }
.hero-concept__image { width: 100%; height: auto; aspect-ratio: 1; max-width: none; user-select: none; -webkit-user-drag: none; }
.hero-concept__shadow { position: absolute; z-index: -1; left: 24%; right: 24%; bottom: -8px; height: 30px; border-radius: 50%; background: var(--dark); opacity: .14; filter: blur(14px); transform: scaleX(.9); animation: hero-shadow-breathe 6.2s ease-in-out infinite both paused; }
html[data-hero-motion='playing'] .hero-concept__float,
html[data-hero-motion='playing'] .hero-concept__shadow { animation-play-state: running; }
@keyframes hero-object-float {
  0%, 100% { transform: translate3d(0, 7px, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -13px, 0) rotate(1deg); }
}
@keyframes hero-shadow-breathe {
  0%, 100% { opacity: .16; transform: scaleX(.96); }
  50% { opacity: .10; transform: scaleX(.8); }
}
@media (max-width: 1100px) {
  .hero .hero__visual, .hero-concept { min-height: 480px; height: 480px; }
  .hero-concept { left: -12px; }
  .hero-concept__shadow { bottom: 14px; }
}
@media (max-width: 900px) {
  .hero .hero__visual, .hero-concept { min-height: 460px; height: 460px; }
  .hero-concept { left: 0; }
  .hero .hero__inner { gap: 18px; }
  .hero-concept__tilt { width: min(80%, 440px); }
  .hero-concept__shadow { left: 34%; right: 34%; bottom: 6px; }
}
@media (max-width: 640px) {
  .hero .hero__visual, .hero-concept { min-height: 0; height: clamp(300px, 98vw, 430px); }
  .hero-concept__tilt { width: min(94%, 390px); }
  .hero-concept__shadow { left: 27%; right: 27%; bottom: 5px; height: 22px; filter: blur(11px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-concept__float, .hero-concept__shadow { animation: none; }
  .hero-concept__tilt { transform: none; transition: none; }
}
@media print {
  .hero-concept__float, .hero-concept__shadow { animation: none; }
}