/* "Rumah Regashi" hero: wide kitchen + dining room scene (preview ?hero=rumah). Uses the bubble,
   sound-button and reaction styles from hero-family.css. */
.rh {
  position: relative; max-width: calc(var(--container) + 40px); margin-inline: auto;
  padding: calc(var(--header-h) + 28px) clamp(20px, 3.5vw, 44px) 20px;
  border-radius: var(--r-xl); border: 1px solid #F0E5D2;
  background: linear-gradient(180deg, #FFF9EE 0%, #FDF3E2 100%);
}
.rh-copy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: 12px 40px; margin-bottom: 18px; }
.rh h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 600; line-height: 1.04; margin: 0; animation: fh-fade .5s .05s var(--ease-out) both; }
.rh h1 .script { color: var(--yellow-600); font-weight: 400; }
.rh .fh-sub { margin: 0; font-size: 16px; max-width: 520px; }
.rh .fh-ctas { margin-top: 16px; }

/* ---------- Scene ---------- */
.rh-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid #EFE2CC; }
.rh-scene { position: relative; height: auto; display: block; aspect-ratio: 1200 / 440; width: 100%; }
.rh-svg { display: block; width: 100%; height: 100%; }
.rh-cast { position: absolute; }
.rh-scene .fh-member { cursor: pointer; outline: none; }
/* No CSS filters on SVG images here: some browsers stop drawing them. */
.rh-scene .fh-fig { transform-box: fill-box; transform-origin: 50% 100%; animation: rh-in .55s calc(.3s + var(--d, 0) * .09s) cubic-bezier(.34,1.56,.64,1) both; }
.rh-scene.is-kb .fh-member:focus-visible .fh-fig { outline: 3px solid var(--yellow-500); } /* keyboard only: some browsers flag a tap as focus-visible */
.rh-scene .fh-mimin .fh-fig { animation: rh-in .55s .3s both, fh-float 4s 1s ease-in-out infinite; }
.rh-scene .fh-member.is-noticed .fh-fig { animation: rh-notice .5s ease-in-out; }
/* After the entrance the figures rest (no replay of the entrance when a reaction ends). */
.rh-scene.is-ready .fh-fig { animation: none; opacity: 1; }
.rh-scene.is-ready .fh-mimin .fh-fig { animation: fh-float 4s ease-in-out infinite; }
/* Gentle reactions, one per personality — small moves, always visible. */
.rh-scene .fh-member.r-mimin .fh-fig { animation: rh-bulb .8s ease-in-out; }
.rh-scene .fh-member.r-nenek .fh-fig { animation: rh-tilt .9s ease-in-out; }
.rh-scene .fh-member.r-papa .fh-fig { animation: rh-nod .7s ease-in-out; }
.rh-scene .fh-member.r-mama .fh-fig { animation: rh-sway .8s ease-in-out; }
.rh-scene .fh-member.r-kakak .fh-fig { animation: rh-pose .8s ease-in-out; }
.rh-scene .fh-member.r-adik .fh-fig { animation: rh-hop .7s ease-in-out; }
.rh-scene .fh-member.r-bayi .fh-fig { animation: rh-wiggle .8s ease-in-out; }
@keyframes rh-notice { 50% { transform: translateY(-4px); } }
@keyframes rh-bulb { 40% { transform: scale(1.07); } 70% { transform: scale(.98); } }
@keyframes rh-tilt { 30% { transform: rotate(-2.5deg); } 65% { transform: rotate(1.5deg); } }
@keyframes rh-nod { 35% { transform: translateY(3px); } 70% { transform: translateY(-2px); } }
@keyframes rh-sway { 30% { transform: rotate(1.8deg); } 65% { transform: rotate(-1.2deg); } }
@keyframes rh-pose { 40% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes rh-hop { 40% { transform: translateY(-8px); } 70% { transform: translateY(0) rotate(1.5deg); } }
@keyframes rh-wiggle { 25%, 75% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes rh-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.rh-pop { position: absolute; z-index: 7; left: 0; top: 0; transform: translate(-50%, -100%) scale(0); font-size: 24px; line-height: 1; pointer-events: none; }
.rh-pop.is-on { animation: rh-pop 1.1s var(--ease-out); }
@keyframes rh-pop { 0% { transform: translate(-50%, -80%) scale(0); opacity: 0; } 25% { transform: translate(-50%, -140%) scale(1.15); opacity: 1; } 75% { transform: translate(-50%, -170%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -210%) scale(.9); opacity: 0; } }
.rh-scene .fh-sound { top: 10px; bottom: auto; right: 10px; }

/* Props follow the time of day. */
.rh-props > g[class^="p-"], .rh-scene .deco { display: none; }
.rh-scene[data-time="pagi"] .p-pagi, .rh-scene[data-time="siang"] .p-siang, .rh-scene[data-time="malam"] .p-malam { display: inline; }
.rh-steam path { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: .85; animation: rh-steam 2.6s ease-in-out infinite; }
.rh-steam path:nth-child(2) { animation-delay: .7s; }
@keyframes rh-steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }

/* Light: morning, day, evening. */
.rh-scene[data-time="pagi"] { --sky: #E4F1F6; }
.rh-scene[data-time="siang"] { --sky: #D8ECF6; }
.rh-scene[data-time="malam"] { --sky: #3D4A76; }
.rh-glow, .rh-sky-night { opacity: 0; transition: opacity .6s; }
.rh-scene[data-time="malam"] .rh-glow, .rh-scene[data-time="malam"] .rh-sky-night { opacity: 1; }
.rh-scene[data-time="malam"] .rh-room > rect:first-child { fill: #F4E6CF; }
.rh-scene[data-time="malam"] .rh-room > rect:nth-child(2) { fill: #F7EAD6; }

/* Calendar moments. */
.rh-scene.m-batik .rh-cloth { fill: url(#rhBatik); }
.rh-scene.m-hujan .deco-hujan, .rh-scene.m-agustusan .deco-agustusan, .rh-scene.m-imlek .deco-imlek, .rh-scene.m-lebaran .deco-lebaran,
.rh-scene.m-natal .deco-natal, .rh-scene.m-tahun_baru .deco-tahun_baru, .rh-scene.m-hari_ibu .deco-hari_ibu, .rh-scene.m-pangan .deco-pangan,
.rh-scene.m-ramadan .deco-ramadan, .rh-scene.m-sekolah .deco-sekolah { display: inline; }
.rh-scene.m-tahun_baru .deco-tahun_baru { opacity: 0; }
.rh-scene.m-tahun_baru[data-time="malam"] .deco-tahun_baru { opacity: 1; animation: rh-spark 1.6s ease-in-out infinite; }
.rh-rain path { stroke: #A9C4DA; stroke-width: 2; stroke-linecap: round; animation: rh-rain .9s linear infinite; }
.rh-rain path:nth-child(3n) { animation-delay: .3s; } .rh-rain path:nth-child(3n+1) { animation-delay: .6s; }
@keyframes rh-rain { from { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes rh-spark { 50% { opacity: .3; } }

.rh-hint { margin: 10px 2px 0; opacity: 1; animation: fh-fade .6s 1.4s var(--ease-out) both; }
.rh-framewrap { position: relative; }
/* Phones: a hand swiping left and right tells visitors the house can be scrolled; it leaves after the first swipe. */
.rh-swipehint { display: none; position: absolute; left: 50%; bottom: 14px; z-index: 8; transform: translateX(-50%); align-items: center; justify-content: center; width: 86px; height: 44px; border-radius: 999px; background: rgba(42,27,16,.72); pointer-events: none; transition: opacity .4s; }
.rh-swipehint svg { width: 64px; height: 32px; }
.rh-swipehint .a { fill: rgba(255,255,255,.75); }
.rh-swipehint .hand { fill: #fff; animation: rh-swipe 1.6s ease-in-out infinite; }
.rh-swipehint .l { animation: rh-arrow 1.6s ease-in-out infinite; }
.rh-swipehint .r { animation: rh-arrow 1.6s .8s ease-in-out infinite; }
.rh-swipehint.is-gone { opacity: 0; }
@keyframes rh-swipe { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
@keyframes rh-arrow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* This week's trend prop (from the approved weekly trend, or ?prop= in previews). */
.rh-trend .tp { display: none; }
.rh-scene.tp-es_kopi .tp-es_kopi, .rh-scene.tp-matcha_latte .tp-matcha_latte, .rh-scene.tp-boba .tp-boba, .rh-scene.tp-es_teh .tp-es_teh,
.rh-scene.tp-kue .tp-kue, .rh-scene.tp-cookies .tp-cookies, .rh-scene.tp-dessert_box .tp-dessert_box, .rh-scene.tp-mie .tp-mie,
.rh-scene.tp-bakso .tp-bakso, .rh-scene.tp-roti .tp-roti, .rh-scene.tp-buah .tp-buah, .rh-scene.tp-kue_tradisional .tp-kue_tradisional,
.rh-scene.tp-sambal .tp-sambal { display: inline; }

/* ---------- Phones: swipe through the house ---------- */
@media (max-width: 900px) {
  .rh-copy { grid-template-columns: 1fr; }
  .rh { padding-top: calc(var(--header-h) + 18px); }
}
@media (max-width: 700px) {
  /* Phone order: greeting + headline, the house, then the text and buttons. */
  .rh { display: flex; flex-direction: column; padding-inline: 14px; }
  .rh-copy { display: contents; }
  .rh-copy > div:first-child { order: 1; margin-bottom: 10px; }
  .rh-framewrap { order: 2; }
  .rh-hint { order: 3; }
  .rh-side { order: 4; margin-top: 14px; }
  .rh h1 { font-size: 32px; }
  .rh .fh-greet { font-size: 13px; margin-bottom: 8px; }
  .rh .fh-sub { font-size: 14.5px; }
  .rh-frame { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-inline: -4px; }
  .rh-frame::-webkit-scrollbar { display: none; }
  /* Extra wall above the room on phones, so speech bubbles have their own space. */
  .rh-scene { width: 760px; aspect-ratio: auto; height: calc(760px * 440 / 1200 + 78px); padding-top: 78px; box-sizing: border-box; background: linear-gradient(90deg, #FBF1E1 0 50%, #FCF5EA 50% 100%); }
  .rh-scene[data-time="malam"] { background: linear-gradient(90deg, #F4E6CF 0 50%, #F7EAD6 50% 100%); }
  .rh-swipehint { display: flex; }
  .rh .fh-ctas .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-scene .fh-fig, .rh-steam path, .rh-rain path, .rh-pop { animation: none !important; }
}