/* 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 (the reading and the amount per day) is taller than the drawing
   expects, the land moves down so the wave shows under the numbers and not behind them (Damien, 2026-10-29) */
.household-scene--unshifted [data-household-scene-target="land"] { transform: translateY(130px); }
.household-scene--unshifted [data-household-scene-target="fade"] { height: 360px; }
/* The ink foreground at the foot of the drawing is for tall phones: in the onboarding frame it would show as a dark
   band between the card and the frame's rounded bottom (Damien, 2026-09-23) */
.household-scene--unshifted [data-household-scene-foot] { display: none; }

/* 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;
}

/* A light bar under the cards of the today page (Damien, 2026-09-24): a folded list, the trend, the 12 months.
   Lighter than the cards by its height, its text and its corners, not by transparency: the wave showed through
   a paler fill. Open, it becomes a paper card like the ones above it. */
.household-bar {
  background: rgba(250, 245, 239, 0.68);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 16px;
}
.household-bar[open] {
  background: rgba(250, 245, 239, 0.74);
  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); } }

/* The dot before "Avec un solde de 3 jours" (households/_freshness): a slow breath, not a blink */
.freshness-dot--old { animation: hs-breathe 2.6s ease-in-out infinite; }
@keyframes hs-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

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

/* The rain of the rainy scene (household_scene_helper.rb, household_scene): a layer under the drawings in the sky
   color, tiled with thin oblique strokes (36 × 120), sliding down by one tile and looping. Composited, so it
   falls without repainting the drawing: inside the SVG it stuttered on a phone (Damien, 2026-09-26). */
.household-rain {
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  bottom: 0;
  /* Under the SVGs, which are in flow: .household-scene has a z-index, so it is the stacking context.
     Without this the opaque layer paints over the drawing and only the rain shows (Damien, 2026-09-26). */
  z-index: -1;
  pointer-events: none;
  background-color: #EFE9DF;
  background-size: 36px 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='120'%3E%3Cg fill='none' stroke='%231C4E4A' stroke-opacity='0.16' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M30 0l-8.3 52'/%3E%3Cpath d='M12 30l-6.4 40'/%3E%3Cpath d='M22 60l-9 56'/%3E%3Cpath d='M4 84l-5.4 34'/%3E%3C/g%3E%3C/svg%3E");
  will-change: transform;
  animation: household-rain 2.8s linear infinite;
}
@keyframes household-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 120px, 0); } }