/* ==========================================================================
   tryon-demo.css — the shop's animated AI Try-On example (Tryon_demo, tryon-demo.js)

   One player, used in two places: the home page's AI Try-On section
   (partials/tryon_promo.php) and the Virtual Try-On window on a product page
   (shop/product.php). A framed player: a still first, then the animation when
   it scrolls into view, with a pause control. Colours are the theme's (--violet
   is Settings -> Theme colour, --on-violet the text that reads on it).
   ========================================================================== */


/* A soft mount in the theme's tint around the frame, as a print has: it ties
   the player to the section and the shop's colour, and gives the strip body
   beside the taller copy. */
.tp-demo {
  padding: clamp(.4rem, 1.2vw, .75rem);
  border-radius: calc(var(--tp-img-radius, .9rem) + .75rem);
  background: var(--gradient-soft, rgba(91, 63, 160, .09));
}

/* The frame has the animation's own shape from the first paint, so nothing
   moves when it starts. --tp-h is the height after the strip cropped from the
   top (the file carries a mock site header); the media sit bottom-aligned. */
.tp-demo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--tp-w, 640) / var(--tp-h, 300);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--tp-img-radius, .9rem);
  background:
    radial-gradient(120% 90% at 18% 0%, #fffaf0 0%, rgba(255, 250, 240, 0) 62%),
    linear-gradient(135deg, #f6efe0, #eee2c8);
  box-shadow: 0 18px 40px rgba(31, 27, 46, .14), 0 0 0 1px rgba(31, 27, 46, .07);
}
@supports not (aspect-ratio: 1 / 1) {
  .tp-demo-frame::before { content: ""; display: block; padding-top: calc(var(--tp-h, 300) / var(--tp-w, 640) * 100%); }
}

.tp-demo-still,
.tp-demo-media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.tp-demo-media { opacity: 0; transition: opacity .35s ease; }
.tp-demo.is-playing .tp-demo-media,
.tp-demo.is-paused .tp-demo-media { opacity: 1; }

.tp-demo-badge {
  position: absolute;
  top: .65rem; left: .65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tp-demo-badge i { color: var(--violet); }

/* One control. Idle: a labelled pill in the middle. Playing or paused: a round
   pause / play button in the corner, placed over the round chat button that is
   drawn into the animation's own corner (it floats about a little, so this is
   the middle of where it goes: 95.3 % / 91.3 % of the frame) and big enough to
   cover all of it, at any size of the frame. */
.tp-demo-btn {
  position: absolute;
  z-index: 3;
  left: 95.3%; top: 91.3%;
  transform: translate(-50%, -50%);
  width: max(2.8rem, 7.5%);
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 27, 46, .86);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.tp-demo-btn:hover { background: var(--violet); color: var(--on-violet, #fff); }
.tp-demo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--violet); }
.tp-demo-btn i { font-size: 1.2rem; }
.tp-demo-btn-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tp-demo.is-idle .tp-demo-btn {
  left: 50%; top: 50%;
  width: auto;
  aspect-ratio: auto;
  padding: .72rem 1.2rem .72rem .95rem;
  border-radius: 999px;
  background: var(--violet);
  color: var(--on-violet, #fff);
  box-shadow: 0 12px 30px rgba(31, 27, 46, .28);
}
.tp-demo.is-idle .tp-demo-btn:hover { background: var(--violet-dark, var(--violet)); }
.tp-demo.is-idle .tp-demo-btn-text {
  position: static;
  width: auto; height: auto;
  clip: auto;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.tp-demo-spin {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  width: 2.2rem; height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border: 3px solid rgba(31, 27, 46, .14);
  border-top-color: var(--violet);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.tp-demo.is-loading .tp-demo-spin { opacity: 1; animation: tp-demo-spin .8s linear infinite; }
.tp-demo.is-loading .tp-demo-btn { visibility: hidden; }
@keyframes tp-demo-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tp-demo-media { transition: none; }
  .tp-demo.is-loading .tp-demo-spin { animation: none; border-top-color: rgba(31, 27, 46, .14); }
}

/* Phones: the frame is full width, a little more compact. */
@media (max-width: 575.98px) {
  .tp-demo-badge { top: .5rem; left: .5rem; font-size: .62rem; padding: .18rem .5rem; }
  .tp-demo.is-idle .tp-demo-btn { padding: .6rem 1rem .6rem .8rem; }
  .tp-demo.is-idle .tp-demo-btn-text { font-size: .82rem; }
}

/* A player that could not load anything steps aside (tryon-demo.js adds
   .is-failed; a class, because the Virtual Try-On window toggles [hidden] on
   its own parts and would undo that). */
.tp-demo.is-failed,
.tryon-demo-wrap.is-failed { display: none !important; }


/* --------------------------------------------------------------------------
   In the Virtual Try-On window (shop/product.php)

   Above the steps while someone is logging in or choosing a photo: a narrower
   frame than on the home page (the window is a working space, the example is
   its guide), a lighter shadow, and a small caption in the style of the
   window's own "Your photo" / "Selected garment" labels.
   -------------------------------------------------------------------------- */
.tryon-demo-wrap {
  max-width: 420px;
  margin: 0 auto 1rem;
}
/* Once a photo is chosen the example has done its job and makes way, so that
   "Try It On" stays in reach (the two photo tiles are tall). virtual-tryon.js
   puts .has-photo on the window; it is gone again with the photo. */
.tryon-modal.has-photo .tryon-demo-wrap { display: none; }
.tryon-demo-wrap .tp-demo { padding: .4rem; }
.tryon-demo-wrap .tp-demo-frame {
  box-shadow: 0 8px 22px rgba(31, 27, 46, .12), 0 0 0 1px rgba(31, 27, 46, .07);
}
.tryon-demo-wrap figcaption {
  margin-top: .5rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #6b6880);
}