/* A continuous scene: sky → building → traced logo → moving building inside logo.
   Both building instances always share geometry, so masking never changes the shot. */
.hero-scroll {
  height: 420svh;
  background: #c6deed;
  --logo-width: min(74vw, 1100px);
  --logo-height: calc(min(74vw, 1100px) * 161 / 532);
  --logo-center: 45%;
  --camera-y: 0px;
  --house-scale: 1;
  --copy-opacity: 1;
  --house-mask-opacity: 0;
  --brand-final-opacity: 0;
  --photo-brightness: 1;
  --house-full-opacity: 1;
  --outline-opacity: 0;
  --cloud-x: 0vw;
  --cloud-y: 0vh;
  --foreground-y: 22vh;
  --caption-opacity: 0;
  --mist-opacity: 0;
  --world-opacity: 1;
}
.hero-stage { min-height: 730px; isolation: isolate; }
.hero-world { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: var(--world-opacity); }
.hero-sky {
  position: absolute; inset: -8%;
  background:
    radial-gradient(ellipse at 4% 72%, #fbd0a4 0%, #f5dcc9 14%, transparent 42%),
    radial-gradient(ellipse at 96% 50%, #d7ebf3 0%, transparent 47%),
    linear-gradient(165deg, #b0d0e6 3%, #d0e4ef 48%, #f3e2d7 100%);
  transform: translate3d(0, var(--sky-y, 0px), 0) scale(1.05);
}
.house-full, .house-logo-mask { position: absolute; inset: 0; }
.house-full { z-index: 2; opacity: var(--house-full-opacity); }
.house-logo-mask {
  z-index: 3; opacity: var(--house-mask-opacity);
  mask: url('/assets/brand/homify-logo.svg') center var(--logo-center) / var(--logo-width) var(--logo-height) no-repeat;
  -webkit-mask: url('/assets/brand/homify-logo.svg') center var(--logo-center) / var(--logo-width) var(--logo-height) no-repeat;
}
.house-plane {
  position: absolute;
  top: calc(62svh - 18.1vw);
  left: 50%; width: 110vw; max-width: none; height: auto;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, calc(-1 * var(--camera-y)), 0) scale(var(--house-scale));
  will-change: transform;
}
.house-logo-mask .house-plane { filter: brightness(var(--photo-brightness)); }
.hero-brand-final {
  position: absolute; z-index: 8;
  width: var(--logo-width); height: var(--logo-height); max-width: none;
  left: 50%; top: calc(45% - var(--logo-height) * .45);
  transform: translateX(-50%);
  opacity: var(--brand-final-opacity);
  pointer-events: none;
}
.logo-outline {
  position: absolute; z-index: 4;
  width: var(--logo-width); height: var(--logo-height);
  left: 50%; top: var(--logo-center);
  transform: translate(-50%, -45%);
  opacity: var(--outline-opacity);
}
/* CSS mask-position percentages refer to remaining space, not the viewport center. */
.logo-outline { top: calc(45% - var(--logo-height) * .45); transform: translateX(-50%); }
.logo-outline svg { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-outline path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cloud-plane {
  position: absolute;
  background: url('/assets/images/cloud-bank.png') center / contain no-repeat;
  width: 85vw; height: 58vw;
  pointer-events: none;
  will-change: transform;
}
.cloud-distant {
  z-index: 1; width: 130vw; height: 82vw; top: -40vw; left: -30vw;
  opacity: .30; filter: blur(3px);
  transform: translate3d(calc(var(--cloud-x) * .12), calc(var(--cloud-y) * .1), 0);
}
.cloud-left {
  z-index: 5; left: -49vw; top: 0; opacity: .91;
  transform: translate3d(calc(-1 * var(--cloud-x)), var(--cloud-y), 0) rotate(14deg);
}
.cloud-right {
  z-index: 5; right: -50vw; top: -12vh; opacity: .8;
  transform: translate3d(var(--cloud-x), calc(var(--cloud-y) * -.6), 0) rotate(-16deg) scaleX(-1);
}
.cloud-foreground {
  z-index: 6; width: 150vw; height: 80vw; left: -25vw; bottom: -37vw;
  opacity: .96;
  transform: translate3d(0, var(--foreground-y), 0);
}
.hero-exit-mist {
  position: absolute; z-index: 7; inset: 0;
  background: linear-gradient(0deg, var(--paper) 0%, rgba(248,248,244,.95) 12%, rgba(248,248,244,.3) 33%, transparent 52%);
  opacity: var(--mist-opacity);
}
.hero-content {
  z-index: 10;
  opacity: var(--copy-opacity);
  transform: translate3d(0, var(--copy-y, 0px), 0) scale(var(--copy-scale, 1));
  transform-origin: 50% 60%;
  animation: none;
}
.hero-bottom { z-index: 11; opacity: max(0, calc(1 - var(--scroll-progress) * 9)); }
.hero-final-caption {
  position: absolute; left: 20px; right: 20px; top: 73%; z-index: 9;
  text-align: center; font-size: clamp(23px, 2.5vw, 40px); line-height: 1.1; letter-spacing: -.045em;
  opacity: var(--caption-opacity); pointer-events: none;
}
.hero-final-caption span { color: #707c7b; }
@media (max-width: 767px) {
  .hero-scroll { height: 340svh; --logo-width: 88vw; --logo-height: calc(88vw * 161 / 532); }
  .hero-stage { min-height: 690px; }
  .house-plane { width: 220vw; top: calc(63svh - 36.2vw); }
  .cloud-plane { width: 180vw; height: 120vw; }
  .cloud-distant { width: 220vw; height: 140vw; top: -50vw; left: -100vw; opacity: .28; }
  .cloud-left { left: -145vw; top: 10vh; }
  .cloud-right { right: -144vw; top: -4vh; }
  .cloud-foreground { width: 250vw; height: 166vw; bottom: -70vw; left: -75vw; }
  .hero-final-caption { top: 66%; font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: 100svh; min-height: 690px; }
  .hero-stage { position: relative; }
  .hero-world, .house-full { opacity: 1; }
  .house-logo-mask, .logo-outline, .hero-brand-final, .hero-final-caption, .hero-exit-mist { display: none; }
  .house-plane { transform: translateX(-50%); }
  .hero-content { opacity: 1; transform: none; }
}