/* ============================================
   Widgety — "Add widget in 30s" animated sequence
   Pure CSS, 12s loop, mirrors real iOS flow
   ============================================ */

.install-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.install-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(200,168,75,0.08), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(29,106,74,0.06), transparent 50%);
  pointer-events: none;
}

.install-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
.install-text { max-width: 480px; }
.install-text h2 { margin: 16px 0 18px; line-height: 1.15; }
.install-text > .lead { margin-bottom: 36px; }

.ia-steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: step;
}
.ia-steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  transition: background .25s, border-color .25s, color .25s;
}
.ia-steps li::before {
  counter-increment: step;
  content: counter(step);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dim);
  font-family: var(--font-en);
  flex-shrink: 0;
  transition: all .25s;
}

/* Active-step highlighting driven by parent stage phase */
.ia-steps li.is-active {
  background: rgba(200,168,75,0.07);
  border-color: rgba(200,168,75,0.3);
  color: var(--text);
}
.ia-steps li.is-active::before {
  background: var(--gold-gradient);
  border-color: transparent;
  color: #1a1408;
  box-shadow: 0 0 18px rgba(200,168,75,0.5);
}
.ia-steps li.is-done {
  color: var(--text-dim);
}
.ia-steps li.is-done::before {
  background: rgba(29,106,74,0.4);
  border-color: rgba(29,106,74,0.6);
  color: #fff;
  content: "✓";
}

/* ============== Phone & stage ============== */
.install-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 700px;
}
.install-phone-wrap::before {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,0.2), transparent 65%);
  filter: blur(40px);
  z-index: 0;
}

.install-phone-wrap .iphone {
  --w: 320px;
  position: relative;
  z-index: 1;
}

.ia-stage {
  position: absolute;
  inset: 0;
  border-radius: 38px;
  overflow: hidden;
  background: #000;
  font-family: var(--font-ar);
  color: #fff;
  direction: rtl;
}

/* Wallpaper (always visible) */
.ia-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(200,168,75,0.10), transparent 55%),
    linear-gradient(180deg, #1a1410 0%, #060606 100%);
}
.ia-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23C8A84B' stroke-width='0.5' opacity='0.5'><path d='M40 4 L52 16 L64 16 L64 28 L76 40 L64 52 L64 64 L52 64 L40 76 L28 64 L16 64 L16 52 L4 40 L16 28 L16 16 L28 16 Z'/></g></svg>");
  background-size: 100px 100px;
  opacity: 0.06;
}

/* Status bar */
.ia-status {
  position: absolute;
  top: 14px;
  inset-inline: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  z-index: 8;
  font-family: var(--font-en);
}
.ia-status b { font-weight: 600; padding-inline-start: 12px; }
.ia-icon-batt {
  display: inline-block;
  width: 22px; height: 11px;
  border: 1.2px solid rgba(255,255,255,0.85);
  border-radius: 3px;
  position: relative;
  margin-inline-start: 4px;
}
.ia-icon-batt::after {
  content: "";
  position: absolute;
  inset-inline-end: -3px; top: 3px;
  width: 2px; height: 4px;
  background: rgba(255,255,255,0.6);
  border-radius: 0 1px 1px 0;
}
.ia-icon-batt::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  border-radius: 1.5px;
  width: 70%;
}

/* Apps grid */
.ia-apps {
  position: absolute;
  top: 50px;
  inset-inline: 14px;
  bottom: 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 16px 8px;
  padding: 10px 6px;
  z-index: 2;
  animation: iaApps 12s infinite;
}
.ia-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ia-app-icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: linear-gradient(150deg, #555, #2a2a2a);
  box-shadow: 0 6px 12px -4px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: rgba(255,255,255,0.7);
}
.ia-app span {
  font-size: 9px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-en);
  letter-spacing: 0.01em;
}
.ia-app-icon.green { background: linear-gradient(150deg, #25c47a, #0e7a44); }
.ia-app-icon.blue { background: linear-gradient(150deg, #2b8fff, #0c4ea8); }
.ia-app-icon.purple { background: linear-gradient(150deg, #9c64ff, #4f2099); }
.ia-app-icon.red { background: linear-gradient(150deg, #ff5a5f, #a52229); }
.ia-app-icon.orange { background: linear-gradient(150deg, #ffa54a, #cc6020); }
.ia-app-icon.pink { background: linear-gradient(150deg, #ff7eb3, #c92676); }
.ia-app-icon.teal { background: linear-gradient(150deg, #4fd4ce, #0a8a82); }
.ia-app-icon.dark { background: linear-gradient(150deg, #353535, #0a0a0a); }
.ia-app-icon.silver { background: linear-gradient(150deg, #c0c4c8, #6a7176); }
.ia-app-icon.yellow { background: linear-gradient(150deg, #ffd86c, #c89020); }

/* Wiggle during phase 2 */
.ia-app {
  transform-origin: center;
  animation: iaWiggle 12s infinite ease-in-out;
}
.ia-app:nth-child(2n) { animation-delay: -0.05s; }
.ia-app:nth-child(3n) { animation-delay: -0.1s; }
.ia-app:nth-child(5n) { animation-delay: -0.07s; }

@keyframes iaWiggle {
  0%, 5% { transform: rotate(0); }
  /* Phase 2: wiggle from 6% to 26% */
  6%, 26% {
    animation-timing-function: ease-in-out;
  }
  7%   { transform: rotate(-1.4deg) translateX(-0.5px); }
  9%   { transform: rotate(1.4deg) translateX(0.5px); }
  11%  { transform: rotate(-1.4deg) translateX(-0.5px); }
  13%  { transform: rotate(1.4deg) translateX(0.5px); }
  15%  { transform: rotate(-1.4deg) translateX(-0.5px); }
  17%  { transform: rotate(1.4deg) translateX(0.5px); }
  19%  { transform: rotate(-1.4deg) translateX(-0.5px); }
  21%  { transform: rotate(1.4deg) translateX(0.5px); }
  23%  { transform: rotate(-1.4deg) translateX(-0.5px); }
  25%  { transform: rotate(1deg); }
  26%  { transform: rotate(0); }
  27%, 100% { transform: rotate(0); }
}

/* Dim apps behind picker */
@keyframes iaApps {
  0%, 25% { filter: brightness(1); opacity: 1; transform: scale(1); }
  28%, 68% { filter: brightness(0.4) blur(2px); opacity: 0.55; transform: scale(0.96); }
  72%, 100% { filter: brightness(1); opacity: 1; transform: scale(1); }
}

/* Dock */
.ia-dock {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.05);
  z-index: 2;
  animation: iaApps 12s infinite;
}
.ia-dock .ia-app-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }

/* Plus button (top-left of screen during edit mode) */
.ia-plus {
  position: absolute;
  top: 50px;
  inset-inline-start: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold-gradient);
  display: grid;
  place-items: center;
  color: #1a1408;
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-en);
  z-index: 7;
  opacity: 0;
  transform: scale(0.4);
  box-shadow: 0 4px 16px -2px rgba(200,168,75,0.6);
  animation: iaPlus 12s infinite;
}
@keyframes iaPlus {
  0%, 8% { opacity: 0; transform: scale(0.4); }
  10% { opacity: 1; transform: scale(1.15); }
  13% { opacity: 1; transform: scale(1); }
  /* pulse */
  16% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(200,168,75,0.4); }
  19% { transform: scale(1); box-shadow: 0 4px 16px -2px rgba(200,168,75,0.6); }
  22% { transform: scale(0.92); }
  /* tap! */
  24% { transform: scale(1); opacity: 1; }
  26% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(0.4); }
}

/* Done button (top-right, gold) */
.ia-done {
  position: absolute;
  top: 50px;
  inset-inline-end: 16px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
  z-index: 7;
  opacity: 0;
  font-family: var(--font-ar);
  animation: iaDone 12s infinite;
}
@keyframes iaDone {
  0%, 8% { opacity: 0; }
  10%, 24% { opacity: 1; }
  26%, 78% { opacity: 0; }
  80%, 85% { opacity: 1; transform: scale(1); }
  86% { transform: scale(0.92); }
  88%, 100% { opacity: 0; }
}

/* Placed widget (the final result) */
.ia-placed {
  position: absolute;
  top: 90px;
  inset-inline: 18px;
  height: 116px;
  border-radius: 18px;
  background: linear-gradient(155deg, #1f1810 0%, #0d0a06 100%);
  border: 1.5px solid rgba(200,168,75,0.2);
  padding: 14px;
  z-index: 6;
  opacity: 0;
  transform: scale(0.4) translateY(-30px);
  font-family: var(--font-ar);
  animation: iaPlaced 12s infinite cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes iaPlaced {
  0%, 70% { opacity: 0; transform: scale(0.3) translateY(40px); }
  74% { opacity: 1; transform: scale(1.08) translateY(-3px); }
  77% { transform: scale(0.97) translateY(2px); }
  79% { transform: scale(1.02) translateY(0); }
  81%, 100% { opacity: 1; transform: scale(1) translateY(0); }
}
.ia-placed-glow {
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  animation: iaPlacedGlow 12s infinite;
}
@keyframes iaPlacedGlow {
  0%, 72% { opacity: 0; box-shadow: 0 0 0 0 rgba(200,168,75,0); }
  76% { opacity: 1; box-shadow: 0 0 24px 8px rgba(200,168,75,0.6); }
  82% { opacity: 0.6; box-shadow: 0 0 16px 4px rgba(200,168,75,0.4); }
  88% { opacity: 0; box-shadow: 0 0 0 0 rgba(200,168,75,0); }
  100% { opacity: 0; }
}
.ia-placed-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ia-placed-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}
.ia-placed-prayer {
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-top: 2px;
}
.ia-placed-cd {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-en);
  color: var(--gold);
}
.ia-placed-times {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ia-placed-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 0;
  border-radius: 5px;
}
.ia-placed-cell span { font-size: 8px; color: rgba(255,255,255,0.55); }
.ia-placed-cell b { font-size: 9px; font-weight: 600; font-family: var(--font-en); color: #fff; }
.ia-placed-cell.active { background: rgba(200,168,75,0.16); }
.ia-placed-cell.active b, .ia-placed-cell.active span { color: var(--gold-bright); }

/* Widget picker sheet */
.ia-picker {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 78%;
  background: linear-gradient(180deg, #1c1c1e 0%, #0c0c0d 100%);
  border-radius: 28px 28px 0 0;
  padding: 18px 16px 16px;
  z-index: 9;
  transform: translateY(110%);
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.6);
  animation: iaPicker 12s infinite cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes iaPicker {
  0%, 24% { transform: translateY(110%); }
  28%, 66% { transform: translateY(0); }
  70%, 100% { transform: translateY(110%); }
}
.ia-picker-handle {
  width: 36px; height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  margin: 0 auto 14px;
}
.ia-picker-title {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.ia-picker-title b { color: #fff; font-weight: 700; font-size: 13px; display: block; margin-top: 2px; }

/* Search bar */
.ia-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.ia-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.ia-search-text {
  position: relative;
  font-family: var(--font-ar);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  animation: iaSearchType 12s infinite steps(5);
}
@keyframes iaSearchType {
  0%, 32% { max-width: 0; }
  34% { max-width: 0.5em; }
  35% { max-width: 1em; }
  37% { max-width: 1.5em; }
  39% { max-width: 2em; }
  41% { max-width: 3em; }
  43%, 66% { max-width: 5em; }
  68%, 100% { max-width: 0; }
}
.ia-search-cursor {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: var(--gold);
  margin-inline-start: 2px;
  vertical-align: middle;
  animation: iaCursor 12s infinite, iaBlink 0.6s infinite step-end;
}
@keyframes iaCursor {
  0%, 32% { opacity: 0; }
  33%, 66% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes iaBlink {
  50% { opacity: 0; }
}

/* Result row */
.ia-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: iaResult 12s infinite ease-out;
}
@keyframes iaResult {
  0%, 38% { opacity: 0; transform: translateY(8px) scale(0.96); }
  42% { opacity: 1; transform: translateY(0) scale(1); }
  47% { background: rgba(200,168,75,0.18); }
  50%, 66% { opacity: 1; transform: translateY(0) scale(1); background: rgba(255,255,255,0.05); }
  70%, 100% { opacity: 0; transform: translateY(8px); }
}
.ia-result-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--gold-gradient);
  display: grid;
  place-items: center;
  color: #1a1408;
  font-weight: 900;
  font-size: 22px;
  font-family: var(--font-ar);
  flex-shrink: 0;
  box-shadow: 0 4px 8px -2px rgba(200,168,75,0.4);
}
.ia-result-name { font-size: 14px; font-weight: 700; color: #fff; }
.ia-result-desc { font-size: 11px; color: rgba(255,255,255,0.55); font-family: var(--font-en); margin-top: 2px; }

/* Size picker */
.ia-sizes {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  opacity: 0;
  animation: iaSizes 12s infinite;
}
@keyframes iaSizes {
  0%, 50% { opacity: 0; transform: translateY(10px); }
  53% { opacity: 1; transform: translateY(0); }
  66% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
.ia-size {
  flex: 1;
  height: 86px;
  border-radius: 14px;
  background: linear-gradient(155deg, #2a221a, #16110a);
  border: 1.5px solid rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.ia-size::after {
  content: attr(data-label);
  position: absolute;
  bottom: 6px;
  inset-inline: 0;
  text-align: center;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-ar);
}
.ia-size.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1.5px var(--gold), 0 6px 16px -4px rgba(200,168,75,0.4);
}
.ia-size .ia-mini-widget {
  width: 76%; height: 60%;
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(200,168,75,0.2), rgba(200,168,75,0.05));
  border: 1px solid rgba(200,168,75,0.18);
  padding: 4px 6px;
  font-size: 7px;
  color: var(--gold-bright);
  font-weight: 700;
  font-family: var(--font-ar);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.ia-size.large .ia-mini-widget { font-size: 9px; }

/* Size selector animation: the cursor moves between sizes */
.ia-size:nth-child(1) { animation: iaSize1 12s infinite; }
.ia-size:nth-child(2) { animation: iaSize2 12s infinite; }
.ia-size:nth-child(3) { animation: iaSize3 12s infinite; }
@keyframes iaSize1 {
  0%, 53% { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold), 0 6px 16px -4px rgba(200,168,75,0.3); }
  56%, 100% { border-color: rgba(255,255,255,0.06); box-shadow: none; }
}
@keyframes iaSize2 {
  0%, 56% { border-color: rgba(255,255,255,0.06); box-shadow: none; }
  59%, 66% { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold), 0 6px 16px -4px rgba(200,168,75,0.4); }
  70%, 100% { border-color: rgba(255,255,255,0.06); box-shadow: none; }
}
@keyframes iaSize3 {
  0%, 100% { border-color: rgba(255,255,255,0.06); box-shadow: none; }
}

/* Add button */
.ia-add-btn {
  position: absolute;
  bottom: 22px;
  inset-inline: 16px;
  height: 44px;
  border-radius: 22px;
  background: var(--gold-gradient);
  color: #1a1408;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-ar);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  animation: iaAddBtn 12s infinite;
}
@keyframes iaAddBtn {
  0%, 53% { opacity: 0; transform: translateY(10px) scale(0.96); box-shadow: 0 4px 12px -2px rgba(200,168,75,0.3); }
  56% { opacity: 1; transform: translateY(0) scale(1); }
  60% { box-shadow: 0 0 0 8px rgba(200,168,75,0.2), 0 4px 12px -2px rgba(200,168,75,0.5); }
  63% { box-shadow: 0 0 0 0 rgba(200,168,75,0), 0 4px 12px -2px rgba(200,168,75,0.5); }
  64% { transform: translateY(0) scale(0.94); }
  66% { transform: translateY(0) scale(1); }
  70%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Finger sprite */
.ia-finger {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  width: 44px; height: 60px;
  top: 50%;
  left: 50%;
  transform-origin: 22px 8px;
  opacity: 0;
  animation: iaFinger 12s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.ia-finger svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); }
.ia-finger::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,0.6), transparent 70%);
  animation: iaTouch 12s infinite;
}
@keyframes iaTouch {
  0%, 7% { opacity: 0; transform: scale(0.5); }
  8%, 15% { opacity: 1; transform: scale(1.4); }
  17% { opacity: 0; }
  20%, 23% { opacity: 1; transform: scale(1.2); }
  24% { opacity: 0; }
  44%, 47% { opacity: 1; transform: scale(1.2); }
  48% { opacity: 0; }
  60%, 63% { opacity: 1; transform: scale(1.2); }
  64% { opacity: 0; }
  80%, 83% { opacity: 1; transform: scale(1.2); }
  84%, 100% { opacity: 0; }
}

@keyframes iaFinger {
  /* Off-stage start */
  0% { opacity: 0; top: 80%; left: 50%; transform: rotate(-10deg) scale(0.95); }
  5% { opacity: 0; top: 80%; left: 50%; }
  /* Step 1: long-press center of home screen */
  7% { opacity: 1; top: 45%; left: 50%; transform: rotate(-10deg) scale(0.95); }
  10% { opacity: 1; top: 45%; left: 50%; transform: rotate(-10deg) scale(0.85); }
  16% { opacity: 1; top: 45%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  /* Step 2: move to + button (top-left) and tap */
  20% { opacity: 1; top: 12%; left: 14%; transform: rotate(-15deg) scale(0.92); }
  23% { opacity: 1; top: 12%; left: 14%; transform: rotate(-15deg) scale(0.82); }
  25% { opacity: 1; top: 12%; left: 14%; transform: rotate(-15deg) scale(0.92); }
  /* Move down with picker, hover over search */
  28% { opacity: 0; top: 60%; left: 50%; }
  /* Step 3: typing — finger hidden, keyboard would handle */
  44% { opacity: 1; top: 50%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  /* Step 3 cont: tap result */
  46% { opacity: 1; top: 50%; left: 50%; transform: rotate(-10deg) scale(0.82); }
  48% { opacity: 1; top: 50%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  /* Step 4: move down to size picker, tap medium */
  58% { opacity: 1; top: 68%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  62% { opacity: 1; top: 68%; left: 50%; transform: rotate(-10deg) scale(0.82); }
  64% { opacity: 1; top: 68%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  /* Step 5: move to add button */
  65% { opacity: 1; top: 88%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  66% { opacity: 1; top: 88%; left: 50%; transform: rotate(-10deg) scale(0.82); }
  67% { opacity: 1; top: 88%; left: 50%; transform: rotate(-10deg) scale(0.92); }
  /* Disappear off-screen as picker dismisses */
  72% { opacity: 0; top: 100%; left: 50%; }
  /* Step 6: tap "تم" (top-right) */
  80% { opacity: 1; top: 10%; left: 80%; transform: rotate(-15deg) scale(0.92); }
  83% { opacity: 1; top: 10%; left: 80%; transform: rotate(-15deg) scale(0.82); }
  85% { opacity: 0; top: 10%; left: 80%; }
  100% { opacity: 0; top: 90%; left: 50%; }
}

/* Step indicator inside phone */
.ia-step-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  background: rgba(20,20,20,0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(200,168,75,0.3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  z-index: 25;
  font-family: var(--font-ar);
  animation: iaStepPill 12s infinite;
}
.ia-step-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
@keyframes iaStepPill {
  0%, 5% { opacity: 0; }
  8%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
.ia-step-pill .ia-step-text { position: relative; min-width: 130px; text-align: center; }
.ia-step-pill .ia-step-text span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: iaStepText 12s infinite;
}
.ia-step-pill .ia-step-text span:nth-child(1) { animation-name: iaStep1; }
.ia-step-pill .ia-step-text span:nth-child(2) { animation-name: iaStep2; }
.ia-step-pill .ia-step-text span:nth-child(3) { animation-name: iaStep3; }
.ia-step-pill .ia-step-text span:nth-child(4) { animation-name: iaStep4; }
.ia-step-pill .ia-step-text span:nth-child(5) { animation-name: iaStep5; }

@keyframes iaStep1 { 0%, 16% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes iaStep2 { 0%, 17% { opacity: 0; } 19%, 25% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes iaStep3 { 0%, 26% { opacity: 0; } 28%, 51% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes iaStep4 { 0%, 52% { opacity: 0; } 54%, 67% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes iaStep5 { 0%, 68% { opacity: 0; } 70%, 100% { opacity: 1; } }

/* Tablet/mobile */
@media (max-width: 980px) {
  .install-layout { grid-template-columns: 1fr; gap: 48px; }
  .install-text { order: 2; }
  .install-phone-wrap { order: 1; min-height: 660px; }
  .install-phone-wrap .iphone { --w: 290px; }
}