/* Household page: japandi landscape behind the content (households/_scene, household_scene_helper.rb). */

.household-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Two drawings: the phone one up to tablet width, the desktop one beyond */
.household-scene__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.household-scene__svg--desktop { display: none; }
@media (min-width: 768px) {
  .household-scene__svg--phone { display: none; }
  .household-scene__svg--desktop { display: block; }
}

/* Safari tints its status bar from the page's top edge and needs a plain color there. The same color
   for every scene, so a state change never needs a full reload. Keep in sync with
   HouseholdSceneHelper::STATUS_BAR and HouseholdSnapshot::STATUS_BAR_COLOR. */
html:has(.household-scene), html:has(.household-scene) body { background: #F4ECE0; }

/* Cards: translucent paper over the landscape */
.household-card {
  background: rgba(250, 245, 239, 0.74);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 22px;
}

/* Animations: slow and small, never under the displacement filter */
.hs-breathe { transform-box: fill-box; transform-origin: center; animation: hs-breathe 8s ease-in-out infinite; }
.hs-orbit { animation: hs-orbit 14s linear infinite; }
.hs-orbit-l { animation: hs-orbit-l 14s linear infinite; }
.hs-bird { animation: hs-fly 9s ease-in-out infinite alternate; }
.hs-tuft { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-tuft 4s ease-in-out infinite alternate; }
.hs-drift { animation: hs-drift 16s ease-in-out infinite alternate; }
.hs-drift--slow { animation-duration: 22s; }
.hs-drift--slower { animation-duration: 28s; animation-direction: alternate-reverse; }
.hs-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-bob 5s ease-in-out infinite alternate; }
.hs-swell { transform-box: fill-box; transform-origin: 30% 100%; animation: hs-swell 8s ease-in-out infinite; }
.hs-float { animation: hs-float 11s ease-in-out infinite alternate; }
.hs-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-sway 9s ease-in-out infinite alternate; }
.hs-leaf { transform-box: fill-box; animation: hs-leaf 3.6s ease-in-out infinite alternate; }

@keyframes hs-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes hs-orbit {
  0% { transform: translate(7px, 0); }
  25% { transform: translate(0, 4px); }
  50% { transform: translate(-7px, 0); }
  75% { transform: translate(0, -4px); }
  100% { transform: translate(7px, 0); }
}
@keyframes hs-orbit-l {
  0% { transform: translate(13px, 0); }
  25% { transform: translate(0, 8px); }
  50% { transform: translate(-13px, 0); }
  75% { transform: translate(0, -8px); }
  100% { transform: translate(13px, 0); }
}
@keyframes hs-fly {
  0% { transform: translate(-30px, 8px); }
  50% { transform: translate(4px, -8px); }
  100% { transform: translate(38px, 4px); }
}
@keyframes hs-tuft { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2deg) translateY(-1.5px); } }
@keyframes hs-drift { from { transform: translateX(-18px); } to { transform: translateX(22px); } }
@keyframes hs-bob { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(1.5px, -2px) rotate(-1deg); } }
@keyframes hs-swell { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-1.4deg) translateY(-8px); } }
@keyframes hs-float { from { transform: translate(0, -5px); } to { transform: translate(4px, 6px); } }
@keyframes hs-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes hs-leaf { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
  .household-scene * { animation: none !important; }
}