/* Animated iPhone "Add to Home Screen" demo on /install (no personal content — drawn UI only).
   5 scenes × 3s loop; each scene and caption fades in on its own slot of the cycle. */
.ios-demo { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 640px) { .ios-demo { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

.iphone {
  position: relative; width: 240px; aspect-ratio: 9 / 19.5; border-radius: 38px; padding: 10px;
  background: #1b1d22; box-shadow: 0 18px 40px rgba(0, 0, 0, .25), inset 0 0 0 2px #3a3d44;
}
.iphone .island { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 76px; height: 22px; border-radius: 12px; background: #000; z-index: 5; }
.iphone .screen { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: #f2f3f5; font-size: 11px; color: #0e1525; direction: ltr; }
.iphone .scene { position: absolute; inset: 0; opacity: 0; animation: iosScene 15s infinite; }
.iphone .scene:nth-child(1) { animation-delay: 0s; }
.iphone .scene:nth-child(2) { animation-delay: 3s; }
.iphone .scene:nth-child(3) { animation-delay: 6s; }
.iphone .scene:nth-child(4) { animation-delay: 9s; }
.iphone .scene:nth-child(5) { animation-delay: 12s; }
@keyframes iosScene { 0% { opacity: 0; } 3% { opacity: 1; } 19% { opacity: 1; } 21% { opacity: 0; } 100% { opacity: 0; } }

/* shared bits */
.ios-status { height: 46px; }
.ios-site { padding: 0 12px; }
.ios-site .bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ios-site .logo { width: 22px; height: 22px; border-radius: 6px; background: #1747d6; }
.ios-site .line { height: 8px; border-radius: 4px; background: #d9dce2; margin: 7px 0; }
.ios-site .line.w70 { width: 70%; } .ios-site .line.w50 { width: 50%; }
.ios-site .card { height: 70px; border-radius: 10px; background: #fff; margin-top: 12px; border: 1px solid #e3e6eb; }
.ios-toolbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: rgba(250, 250, 252, .96);
  border-top: 1px solid #e3e6eb; display: flex; justify-content: space-around; align-items: center; padding-bottom: 10px; font-size: 16px; color: #1747d6;
}
.ios-url { position: absolute; left: 12px; right: 12px; bottom: 66px; height: 30px; border-radius: 10px; background: #e6e8ec; display: grid; place-items: center; font-size: 10px; color: #333; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 12px; box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); }
.sheet .apps { display: flex; justify-content: space-between; margin: 10px 0; }
.sheet .apps span { width: 34px; height: 34px; border-radius: 9px; background: #d9dce2; }
.sheet .row { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 8px; background: #f3f4f6; margin-top: 6px; }
.sheet .acts { display: flex; justify-content: space-between; margin-top: 6px; }
.sheet .acts div { width: 46px; text-align: center; font-size: 8px; color: #555; }
.sheet .acts div b { display: block; width: 34px; height: 34px; margin: 0 auto 3px; border-radius: 50%; background: #eef0f3; line-height: 34px; font-size: 14px; color: #333; }
.hl { position: relative; outline: 2px solid #12a150; outline-offset: 2px; border-radius: 10px; }
.tap::after {
  content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(23, 71, 214, .35);
  border: 2px solid #1747d6; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: tapPulse 1s infinite;
}
@keyframes tapPulse { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.addbar { display: flex; justify-content: space-between; align-items: center; padding: 52px 12px 14px; font-weight: 700; border-bottom: 1px solid #e3e6eb; background: #fff; }
.addbar .add { background: #1747d6; color: #fff; padding: 4px 12px; border-radius: 999px; }
.toggle { width: 34px; height: 20px; border-radius: 10px; background: #12a150; position: relative; }
.toggle::after { content: ''; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.home { position: absolute; inset: 0; background: linear-gradient(160deg, #c9d6ff, #e2e2e2); padding: 56px 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; align-content: start; }
.home span { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .55); }
.home .eng { background: #1747d6 url('/icons/logo.svg') center / 100% no-repeat; animation: popIn 3s infinite; animation-delay: 12s; }
@keyframes popIn { 0% { transform: scale(.4); } 10% { transform: scale(1.1); } 14%, 100% { transform: scale(1); } }

/* captions in sync */
.ios-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ios-steps li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); animation: stepOn 15s infinite; }
.ios-steps li > b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.ios-steps li:nth-child(1) { animation-delay: 0s; } .ios-steps li:nth-child(2) { animation-delay: 3s; }
.ios-steps li:nth-child(3) { animation-delay: 6s; } .ios-steps li:nth-child(4) { animation-delay: 9s; }
.ios-steps li:nth-child(5) { animation-delay: 12s; }
@keyframes stepOn { 0%, 20% { background: var(--brand-soft); border-color: var(--brand); } 21%, 100% { background: transparent; border-color: var(--line); } }

@media (prefers-reduced-motion: reduce) {
  .iphone .scene, .ios-steps li, .home .eng, .tap::after { animation: none; }
  .iphone .scene:nth-child(3) { opacity: 1; }
}
.ios-steps li span { line-height: 1.7; }