/* ==========================================================================
   WIZKET — Final CTA · slide to install. Prefix: si-
   js/install.js sets --p on the track (0 → 1 as the knob slides) and
   data-phase (idle → installing → live). The phone screen is always dark;
   the knob is Wizket orange.
   ========================================================================== */
.si {
  --side: clamp(20px, 6vw, 110px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(90px, 14vh, 150px) var(--side);
  background:
    radial-gradient(60% 55% at 70% 50%, var(--petrol) 0%, transparent 70%),
    var(--bg);
}
.si__inner {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

/* copy: before (ready to launch?) and after (it's on their phone.) share one cell */
.si__copy { display: grid; }
.si__pre, .si__post { grid-area: 1 / 1; align-self: center; }
.si__title {
  margin: 0;
  font: 400 clamp(3rem, min(7.4vw, 13vh), 7.8rem)/0.88 var(--font-display);
  text-transform: uppercase;
  color: var(--text);
}
.si__line { display: block; }
.si__end { margin-top: clamp(22px, 3.6vh, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.si__cta { height: 56px; padding: 0 30px; font-size: 15px; }
.si__again { -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--muted); transition: color 0.4s var(--ease-io); }
@media (hover: hover) and (pointer: fine) { .si__again:hover { color: var(--text); } }

.si__pre > *, .si__post > * { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.si__post { visibility: hidden; }
.si__post > * { opacity: 0; transform: translateY(40px); }
.si[data-phase="live"] .si__pre { visibility: hidden; transition: visibility 0s 0.7s; }
.si[data-phase="live"] .si__pre > * { opacity: 0; transform: translateY(-40px); }
.si[data-phase="live"] .si__post { visibility: visible; }
.si[data-phase="live"] .si__post > * { opacity: 1; transform: none; }
.si[data-phase="live"] .si__post > :nth-child(2) { transition-delay: 0.15s; }
.si[data-phase="live"] .si__post > :nth-child(3) { transition-delay: 0.3s; }

/* stage: a lock screen — the home screen above, the slider below */
.si__stage {
  position: relative;
  width: min(520px, 100%);
  justify-self: center;
  display: grid;
  gap: clamp(18px, 3vh, 28px);
  padding: clamp(22px, 3vw, 34px);
  border-radius: clamp(34px, 4vw, 48px);
  background:
    radial-gradient(80% 60% at 85% 0%, rgba(253, 95, 7, calc(0.16 + var(--sp, 0) * 0.3)), transparent 65%),
    linear-gradient(170deg, #1b2a2d, #0b0e10 75%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -40px rgba(0, 0, 0, 0.55);
  transition: background 0.6s;
}
.si__home { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 22px); }
.si__ic, .si__slot { aspect-ratio: 1; }
.si__ic {
  display: grid;
  place-items: center;
  border-radius: 24%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c), #fff 16%), var(--c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  opacity: 0.32;
  filter: saturate(0.4);
  transition: opacity 0.6s var(--ease-io), filter 0.6s;
}
.si[data-phase="live"] .si__ic { opacity: 1; filter: none; }
.si__ic svg, .si__app svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.si__slot { position: relative; border-radius: 24%; box-shadow: inset 0 0 0 1.5px rgba(242, 241, 237, 0.22); }
.si__slot::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 300 28px/1 var(--font-body); color: rgba(242, 241, 237, 0.35); transition: opacity 0.3s; }
.si[data-phase="live"] .si__slot::after { opacity: 0; }
.si__app {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 24%;
  background: linear-gradient(150deg, #ff8a45, #fd5f07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 30px rgba(253, 95, 7, 0.6);
  opacity: 0;
  visibility: hidden;
}
.si__slot em { position: absolute; left: 0; right: 0; top: calc(100% + 6px); text-align: center; font: 700 12px/1 var(--font-body); font-style: normal; color: #f2f1ed; opacity: 0; transition: opacity 0.4s 0.6s; }
.si[data-phase="live"] .si__slot em { opacity: 1; }

/* the slider */
.si__track {
  --pad: 8px;
  --p: 0;
  position: relative;
  height: 88px;
  padding: var(--pad);
  border-radius: 999px;
  background: rgba(242, 241, 237, 0.08);
  box-shadow: inset 0 0 0 1px rgba(242, 241, 237, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.si__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 88px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(253, 95, 7, 0.08), rgba(253, 95, 7, calc(0.2 + var(--p) * 0.45)));
  pointer-events: none;
}
.si__shine {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  font: 600 clamp(15px, 1.6vw, 19px)/1 var(--font-body);
  letter-spacing: 0.02em;
  color: transparent;
  background: linear-gradient(100deg, rgba(242, 241, 237, 0.35) 40%, #fff 50%, rgba(242, 241, 237, 0.35) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: calc(1 - var(--p) * 1.8);
  animation: si-shine 2.6s linear infinite;
  pointer-events: none;
}
@keyframes si-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.si__knob {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #ff8a45, #fd5f07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px -8px rgba(253, 95, 7, 0.75);
  color: #fff;
  cursor: grab;
  touch-action: none;
  transition: box-shadow 0.4s;
}
.si__knob:focus-visible { outline: 2px solid #f2f1ed; outline-offset: 4px; }
.si.is-dragging .si__knob { cursor: grabbing; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 8px rgba(253, 95, 7, 0.18), 0 10px 30px -6px rgba(253, 95, 7, 0.9); }
.si__ico, .si__ok, .si__ring { grid-area: 1 / 1; }
.si__ico { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.si__ok { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: opacity 0.3s, transform 0.5s var(--ease-out); }
.si__ring { width: 84px; height: 84px; margin: -6px; transform: rotate(-90deg); opacity: 0; transition: opacity 0.3s; }
.si__ring circle { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 2.4; }
.si__ring .on { stroke: #fff; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; }
.si[data-phase="installing"] .si__ring { opacity: 1; }
.si[data-phase="installing"] .si__ring .on { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io); }
.si[data-phase="installing"] .si__ico { opacity: 0.3; transform: scale(0.8); }
.si[data-phase="live"] .si__ico { opacity: 0; transform: scale(0.5); }
.si[data-phase="live"] .si__ok { opacity: 1; transform: none; }
.si[data-phase="live"] .si__stage { --sp: 1; }
.si[data-phase="live"] .si__shine { opacity: 0; }

.si__fx { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 900px) {
  .si__inner { grid-template-columns: 1fr; text-align: center; }
  .si__stage { width: min(380px, 100%); }
  .si__home { gap: 12px; }
  .si__copy .ws-eyebrow, .si__end { justify-content: center; }
  .si__track { height: 76px; }
  .si__knob { width: 60px; height: 60px; }
  .si__ring { width: 72px; height: 72px; }
  .si__fill { width: 76px; }
}