/* 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; }
  /* Capped and centred, so a very wide screen does not blow the drawing up (and push the sea below the
     cards): the flat shapes continue beyond the box (HouseholdSceneHelper::PAD) and fill the sides */
  .household-scene__svg--desktop { display: block; max-width: 1800px; margin: 0 auto; overflow: visible; }
}

/* The landing shows a scene inside a phone frame: it fills the frame instead of the viewport */
.household-scene--framed {
  position: absolute;
}
.household-scene--framed .household-scene__svg--phone { display: block; }
.household-scene--framed .household-scene__svg--desktop { display: none; }
/* The number block in the frame is taller than the drawing expects: the land moves down as
   household_scene_controller.js does on the real page */
.household-scene--framed [data-household-scene-target="land"] { transform: translateY(70px); }
.household-scene--framed [data-household-scene-target="fade"] { height: 300px; }
/* The onboarding result: the number block is as tall as the drawing expects, the land stays put so the
   whole wave shows before the card */
.household-scene--unshifted [data-household-scene-target="land"] { transform: none; }
.household-scene--unshifted [data-household-scene-target="fade"] { height: 230px; }

/* The today page (expenses/_page): the landscape sits at the top and scrolls with the page, the lists
   below rest on plain beige, a short gradient joins the two */
.household-scene--page {
  position: absolute;
  bottom: auto;
  height: 980px;
}
.household-scene--page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(rgba(244, 236, 224, 0), #F4ECE0);
}
/* Wider screens: the drawing is 1440 × 1000 and scales with the width, so its height must follow
   (69.5vw), or the sea is cut off on a large screen; a band of sea under the number, then beige */
@media (min-width: 768px) {
  .household-scene--page { height: min(max(800px, 69.5vw), 1250px); }
  .household-scene--page::after { height: 160px; }
}

/* 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:not(.household-scene--framed)), html:has(.household-scene:not(.household-scene--framed)) 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; }
}