/* Home try-on (home-tryon.js): desktop block 013, phone frame 009. */

/* Desktop: the carousel takes the place of the Vera still. */
.fp-block[data-stop="013"] .to-stage { left: calc(801 * var(--ux)); top: 0; width: calc(799 * var(--ux)); height: calc(1200 * var(--uy)); cursor: copy; }
.fp-block[data-stop="013"] .fp-dots { left: calc(762 * var(--ux)); }
.fp-block[data-stop="013"] .to-copy {
  position: absolute;
  right: calc((1600 - 764) * var(--ux));
  top: calc(885 * var(--uy));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(14 * var(--hd));
}
.fp-block[data-stop="013"] .to-copy .fp-hint { position: static; }

.to-hint { display: inline-flex; align-items: center; gap: 0.55em; letter-spacing: -0.05em; }
.to-ico { flex: none; width: 1.05em; height: 1.05em; }

.to-stage:focus { outline: none; }
.to-stage:focus-visible { outline: 1px solid #000; outline-offset: -1px; }

/* Overlay on the still on screen: drop target, working state, signature. */
.to-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.to-over .tc-wrap { pointer-events: auto; }

.to-drop,
.to-busy {
  position: absolute;
  margin: 0;
  font-weight: 500;
  font-size: calc(16 * var(--hd));
  letter-spacing: -0.05em;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.to-drop {
  inset: calc(18 * var(--hd));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #000;
  background: rgba(255, 255, 255, 0.55);
}
.to-drop span { padding: 0.7em 1.2em; border-radius: 999px; background: #fff; }
.to-stage.is-over .to-drop { opacity: 1; }

.to-busy {
  left: 50%;
  bottom: calc(40 * var(--hd));
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.7em 1.2em;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
  transform: translateX(-50%);
}
.to-busy i { width: 0.22em; height: 0.22em; border-radius: 50%; background: currentColor; animation: to-dot 1s infinite ease-in-out; }
.to-busy i:nth-of-type(1) { margin-left: 0.2em; }
.to-busy i:nth-of-type(2) { animation-delay: 0.15s; }
.to-busy i:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes to-dot { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

.to-stage.is-busy .to-busy { opacity: 1; }
.to-stage.is-busy img { transition: filter 0.4s linear; filter: grayscale(0.4) brightness(1.06); }
.to-stage.is-busy { cursor: progress; }

/* Under the copy: Download / Try another, or the sign-in ask. */
.to-acts {
  display: flex;
  align-items: center;
  gap: 1.4em;
  margin: 0;
  font-weight: 500;
  font-size: calc(15 * var(--hd));
  letter-spacing: -0.05em;
  color: #7c7c7c;
}
.to-acts[hidden] { display: none; }
.to-act {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: #7c7c7c;
  cursor: pointer;
  transition: color 0.2s linear;
}
.to-act svg { width: 0.8em; height: 0.95em; }
.to-act.is-ink { color: #000; }
.to-act.is-ink span,
.to-acts.is-login .to-act { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.to-act:hover { color: #000; }
.to-act:focus { outline: none; }
.to-act:focus-visible { outline: 1px solid #000; outline-offset: 3px; }

.to-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 60;
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
  transform: translateX(-50%);
}
.to-toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .to-busy i { animation: none; opacity: 0.6; }
}

/* Phone, frame 009: copy and hint on top, the swipe to the bottom. */
@media (max-width: 800px) {
  .fp-mf[data-frame="009"] .to-copy {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--m));
    margin: calc(20 * var(--m)) 0 0 calc(30 * var(--m));
  }
  .fp-mf[data-frame="009"] .to-copy .fp-mob-hint { margin: 0; }
  .fp-mf[data-frame="009"] .to-stage { margin-top: calc(28 * var(--m)); }
  .fp-mf[data-frame="009"] .to-acts { font-size: calc(13 * var(--m)); gap: calc(18 * var(--m)); }
  .fp-mf[data-frame="009"] .to-drop,
  .fp-mf[data-frame="009"] .to-busy { font-size: calc(13 * var(--m)); }
  .fp-mf[data-frame="009"] .to-busy { bottom: calc(24 * var(--m)); }
  .to-stage.fp-mob-swipe { cursor: pointer; }
}

/* Desktop: the signature sits low, clear of the header over the still. */
@media (min-width: 801px) {
  .fp-block[data-stop="013"] .to-over .tc-wrap { top: auto; bottom: 1.6em; right: 1.6em; }
}