/* Try-on moments: a calm fitting-room wait and a reveal once the picture loads.
   Motion is slow and low-contrast so waiting stays easy on the eyes. */
.tm-wait { --tm-ink: #14110e; --tm-tape: #f4c430; --tm-accent: #3a584a; --tm-muted: #6d665c; text-align: center; padding: 6px 0 4px; }
.tm-scene { position: relative; width: 168px; height: 226px; margin: 2px auto 20px; }
.tm-mirror { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 84px 84px 16px 16px; border: 1.5px solid #14110e29; background: linear-gradient(160deg, #f4efe5, #e8e1d3); box-shadow: 0 18px 34px -22px #14110e8c; }
.tm-hanger { position: absolute; top: 9%; left: 50%; width: 46px; height: 15px; border: 2px solid #14110e59; border-bottom: 0; border-radius: 24px 24px 0 0; transform: translateX(-50%); }
.tm-hanger::before { content: ""; position: absolute; left: 50%; top: -9px; width: 8px; height: 8px; border: 2px solid #14110e59; border-bottom: 0; border-left: 0; border-radius: 0 6px 0 0; transform: translateX(-30%); }
.tm-garment { position: absolute; inset: 18% 15% 10%; width: 70%; height: 72%; object-fit: contain; mix-blend-mode: multiply; transform-origin: 50% 0; animation: tm-sway 6s ease-in-out infinite; }
.tm-silhouette { position: absolute; inset: 22% 26% 0; border-radius: 40% 40% 10% 10%; background: #d9d0bf; }
.tm-scan { position: absolute; inset-inline: 0; top: -45%; height: 42%; background: linear-gradient(to bottom, transparent, #ffffff8c 55%, transparent); animation: tm-scan 5.2s ease-in-out infinite; }
.tm-tape { position: absolute; inset-inline: 13%; top: 42%; height: 11px; border-radius: 3px; background: var(--tm-tape) repeating-linear-gradient(90deg, var(--tm-ink) 0 1px, transparent 1px 7px) 0 0 / 100% 45% no-repeat; box-shadow: 0 2px 6px #14110e33; transform-origin: left center; animation: tm-measure 6.5s ease-in-out infinite; }
[dir="rtl"] .tm-tape { transform-origin: right center; }
.tm-tape > i { position: absolute; inset-inline-end: -3px; top: -3px; width: 4px; height: 17px; border-radius: 1px; background: var(--tm-ink); }
.tm-pieces { position: absolute; inset-inline-end: -34px; top: 16px; display: grid; gap: 8px; }
.tm-piece { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; background: #fff; border: 1px solid #14110e1a; border-radius: 12px; box-shadow: 0 8px 18px -12px #14110e80; animation: tm-float 5.5s ease-in-out infinite; animation-delay: calc(var(--tm-i, 0) * -1.3s); }
.tm-piece img { width: 82%; height: 82%; object-fit: contain; }
.tm-title { margin: 0 0 12px; }
h3.tm-title { font-size: 21px; line-height: 1.4; }
.tm-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; margin: 0 auto 10px; padding: 0; list-style: none; }
.tm-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; line-height: 1.6; color: var(--tm-muted); background: #14110e0a; border-radius: 99px; transition: color .5s ease, background-color .5s ease; }
.tm-steps li > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; }
.tm-steps li.is-done { color: var(--tm-accent); background: #3a584a14; }
.tm-steps li.is-done > span { opacity: 1; }
.tm-steps li.is-now { color: var(--tm-ink); background: #f4c43038; }
.tm-steps li.is-now > span { opacity: 1; animation: tm-pulse 1.8s ease-in-out infinite; }
.tm-stage { margin: 6px 0 10px; font-size: 14px; font-weight: 600; color: var(--tm-ink); }
.tm-bar { width: min(280px, 100%); height: 6px; margin: 0 auto 16px; overflow: hidden; background: #14110e14; border-radius: 99px; }
.tm-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--tm-accent), #8fb39d); border-radius: inherit; transition: width 1s linear; }
.tm-line { display: grid; place-items: center; min-height: 3.2em; max-width: 330px; margin: 0 auto 8px; font-size: 15px; line-height: 1.6; color: #3d3832; }
.tm-line > span { display: inline-block; transition: opacity .32s ease, transform .32s ease; }
.tm-line > span.is-leaving { opacity: 0; transform: translateY(-6px); }
.tm-note { max-width: 330px; margin: 0 auto; font-size: 12px; line-height: 1.7; color: var(--tm-muted); }
.pt-progress.is-moment { padding: 18px 12px 28px; }

/* The reveal: a fitting-room curtain opens, the picture sharpens, light passes once. */
.tm-reveal { position: relative; margin: 12px 0 0; }
.tm-frame { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; background: #f1f0e8; }
.tm-image { display: block; width: 100%; height: auto; opacity: 0; filter: blur(18px) saturate(.5) brightness(1.15); transform: scale(1.06); transition: opacity .7s ease, filter 1.4s cubic-bezier(.2, .7, .2, 1) .15s, transform 1.7s cubic-bezier(.2, .7, .2, 1); }
.tm-reveal.is-shown .tm-image { opacity: 1; filter: none; transform: none; }
.tm-curtain { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tm-curtain::before, .tm-curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #efe7d8 0 13px, #e3d8c5 13px 26px); box-shadow: 0 0 22px #14110e33; transition: transform 1.05s cubic-bezier(.7, 0, .2, 1) .05s; }
.tm-curtain::before { left: 0; }
.tm-curtain::after { right: 0; }
.tm-reveal.is-shown .tm-curtain::before { transform: translateX(-102%); }
.tm-reveal.is-shown .tm-curtain::after { transform: translateX(102%); }
.tm-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 35%, #ffffff8f 50%, transparent 65%); background-size: 260% 100%; background-position: 140% 0; }
.tm-reveal.is-shown .tm-sheen { animation: tm-sheen 1.3s .95s ease-out both; }
.tm-sparkles i { position: absolute; z-index: 4; width: 14px; height: 14px; opacity: 0; background: #f4c430; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); transform: scale(0); }
.tm-sparkles i:nth-child(1) { top: 9%; left: 11%; }
.tm-sparkles i:nth-child(2) { top: 16%; right: 10%; width: 10px; height: 10px; }
.tm-sparkles i:nth-child(3) { bottom: 22%; left: 7%; width: 11px; height: 11px; }
.tm-sparkles i:nth-child(4) { bottom: 12%; right: 15%; }
.tm-sparkles i:nth-child(5) { top: 47%; right: 6%; width: 8px; height: 8px; background: #fff; }
.tm-reveal.is-shown .tm-sparkles i { animation: tm-twinkle 1.2s ease-out both; }
.tm-reveal.is-shown .tm-sparkles i:nth-child(1) { animation-delay: 1.1s; }
.tm-reveal.is-shown .tm-sparkles i:nth-child(2) { animation-delay: 1.3s; }
.tm-reveal.is-shown .tm-sparkles i:nth-child(3) { animation-delay: 1.45s; }
.tm-reveal.is-shown .tm-sparkles i:nth-child(4) { animation-delay: 1.25s; }
.tm-reveal.is-shown .tm-sparkles i:nth-child(5) { animation-delay: 1.55s; }
.tm-compliment { display: grid; justify-items: center; gap: 2px; margin: 16px 0 0; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .6s ease 1.25s, transform .6s ease 1.25s; }
.tm-compliment > span { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #6d665c; }
.tm-compliment > strong { font-size: 21px; line-height: 1.45; font-weight: 700; color: #14110e; }
.tm-compliment > strong::after { content: ""; display: block; width: 58px; height: 7px; margin: 8px auto 0; border-radius: 2px; background: #f4c430 repeating-linear-gradient(90deg, #14110e 0 1px, transparent 1px 6px) 0 0 / 100% 45% no-repeat; }
.tm-reveal.is-shown .tm-compliment { opacity: 1; transform: none; }
/* Failsafe: if the reveal script never runs, the picture still appears. */
.tm-reveal:not(.is-shown) .tm-image { animation: tm-failsafe-show .5s ease 3s forwards; }
.tm-reveal:not(.is-shown) .tm-curtain, .tm-reveal:not(.is-shown) ~ .tm-suggest { animation: tm-failsafe-hide .5s ease 3s forwards; }
.tm-reveal:not(.is-shown) ~ .tm-suggest { animation-name: tm-failsafe-show; }
.tm-reveal.is-static .tm-image, .tm-reveal.is-static .tm-compliment { transition: none; }
.tm-reveal.is-static .tm-curtain, .tm-reveal.is-static .tm-sheen, .tm-reveal.is-static .tm-sparkles { display: none; }
.pt-result .tm-image { max-height: 65dvh; object-fit: contain; }
.pt-result .tm-frame { border-radius: 8px; background: var(--c-surface, #f1f0e8); }

/* A colour worth trying next. */
.tm-suggest { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px 12px; margin: 16px 0 0; padding: 14px; text-align: start; background: #faf6ef; border: 1px solid #14110e1a; border-radius: 14px; }
.tm-swatch { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #14110e26; box-shadow: inset 0 0 0 3px #ffffffb3; }
.tm-swatch.is-unknown { background: conic-gradient(#1d1c1a, #6b4a33, #d8c4a2, #f7f6f1, #2f5fa8, #1d1c1a); }
.tm-suggest p { margin: 0; }
.tm-suggest strong { display: block; font-size: 15px; line-height: 1.5; }
.tm-suggest small { display: block; font-size: 12px; line-height: 1.6; color: #6d665c; }
.tm-suggest .pt-button { grid-column: 1 / -1; width: 100%; }
.tm-reveal:not(.is-shown) ~ .tm-suggest { opacity: 0; }
.tm-reveal.is-shown:not(.is-static) ~ .tm-suggest { animation: tm-rise .6s ease-out 1.6s both; }

@keyframes tm-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes tm-scan { 0% { top: -45%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes tm-measure { 0%, 100% { transform: scaleX(.18); } 45%, 60% { transform: scaleX(1); } }
@keyframes tm-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes tm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
@keyframes tm-sheen { 0% { opacity: 0; background-position: 140% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } }
@keyframes tm-twinkle { 0% { opacity: 0; transform: scale(0) rotate(0); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes tm-failsafe-show { to { opacity: 1; filter: none; transform: none; } }
@keyframes tm-failsafe-hide { to { opacity: 0; } }
@keyframes tm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 380px) {
  .tm-scene { width: 146px; height: 196px; }
  .tm-pieces { inset-inline-end: -30px; }
  .tm-piece { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-garment, .tm-scan, .tm-tape, .tm-piece, .tm-steps li.is-now > span { animation: none !important; }
  .tm-scan { display: none; }
  .tm-tape { transform: none; }
  .tm-image { filter: none; transform: none; transition: opacity .3s ease; }
  .tm-curtain, .tm-sheen, .tm-sparkles { display: none; }
  .tm-compliment { transform: none; transition: opacity .3s ease; }
  .tm-reveal.is-shown:not(.is-static) ~ .tm-suggest { animation: none; }
}