/* The moving phone (owner 2 Oct 2026: "even this pic on right should be moving pic"). Homepage hero + sign-up/log-in pages.
   Three real screens: the list → the Update sheet slides up and Done is tapped → the owner's view. assets/reel.js sets data-step. */
.reel { position: relative; overflow: hidden; }
.reel > img { display: block; width: 100%; height: auto; }
.reel .r2, .reel .r3, .reel .rsheet { position: absolute; left: 0; right: 0; }
.reel .r2 { top: 0; opacity: 0; transition: opacity .45s ease; }
.reel .rsheet { bottom: 0; height: 45.5%; background: url(home/day2.jpg) center bottom / 100% auto no-repeat; transform: translateY(100%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.reel .r3 { top: 0; transform: translateX(105%); transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.reel[data-step="2"] .r2, .reel[data-step="3"] .r2 { opacity: 1; }
.reel[data-step="2"] .rsheet, .reel[data-step="3"] .rsheet { transform: none; }
.reel[data-step="3"] .r3 { transform: none; }
.reel .rtap { position: absolute; left: 50%; top: 75.2%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(27, 142, 75, .28);
  border: 2px solid rgba(27, 142, 75, .7); opacity: 0; pointer-events: none; }
.reel .rtap.on { animation: reel-tap .9s ease; }
@keyframes reel-tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 60% { transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } }
.reel-cap { display: flex; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: #6A7A70; }
.reel-cap li { white-space: nowrap; padding: 4px 10px; border-radius: 999px; transition: background .3s, color .3s; }
.reel-cap li.on { background: #E2F2E8; color: #167A40; font-weight: 600; }
.auth-story .reel-cap { gap: 2px; font-size: 12.5px; } .auth-story .reel-cap li { padding: 4px 8px; }