/* The photographic framing stays fixed; only the typography and cards move. */
.hero h1 .title-word{display:inline-block;transform-origin:50% 85%}
.hero h1{perspective:900px}
.house-card{position:relative;isolation:isolate}
.house-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,35%),rgba(200,165,100,.12),transparent 65%);opacity:0;transition:opacity .45s}
.house-card .text-link span{transition:transform .35s}
.house-card:focus-within{border-color:var(--gold)}
@media(prefers-reduced-motion:no-preference){
  .hero.has-motion h1{transform:translate3d(var(--title-x,0px),var(--title-y,0px),0);transition:transform .65s cubic-bezier(.22,1,.36,1)}
  .hero.has-motion h1 em{animation:gold-light 2.2s .4s both}
  .hero.has-motion .hero-scroll span{animation:scroll-invitation 1.5s 1.3s 2}
  .houses .section-heading .rule{transform-origin:left}
  .house-card{transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .5s}
  .house-card:hover .text-link span,.house-card:focus-within .text-link span{transform:translateX(5px)}
  @media(hover:hover) and (pointer:fine){
    .house-card.depth-active{transform:perspective(1100px) translateY(-5px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:var(--gold);box-shadow:0 22px 38px -22px #000b}
    .house-card.depth-active::after{opacity:1}
  }
}
@supports(background-clip:text){
  @media(prefers-reduced-motion:no-preference){
    .hero.has-motion h1 em{background-image:linear-gradient(110deg,var(--gold) 34%,#f3dfaf 47%,var(--gold) 60%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
  }
}
@keyframes gold-light{from{background-position:100% 50%}to{background-position:0% 50%}}
@keyframes scroll-invitation{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:760px){.hero h1 .title-florian{display:block}}
@media(hover:none){.house-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero h1 .title-word,.house-card,.house-card:hover,.house-card .text-link span{transform:none!important}
  .house-card::after{display:none}
}