/* Hair try-on page. Shared styles (fonts, colours, header, footer, buttons) are in /assets/site.css. */

.tryon { max-width: 640px; margin: 0 auto; padding: 0 16px 56px; }

.tryon .hero { padding: 36px 0 12px; text-align: center; }
.tryon h1 { font-size: clamp(34px, 9vw, 52px); }
.tryon h1 em { display: block; }
.tryon .lede { margin: 14px auto 0; max-width: 30em; font-size: 16px; }

.demo-note {
  margin: 18px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--gold-soft); border: 1px dashed var(--gold); font-size: 14px; color: var(--parchment-dim);
}
.demo-note strong { color: var(--gold); }

/* Steps */
.step, .results { margin-top: 28px; scroll-margin-top: 120px; }
.tryon h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 22px/1.2 var(--serif); }
.num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 700 13px/1 var(--sans);
}
.hint { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.hint.center { text-align: center; margin: 10px 0 0; }

.photo-box {
  position: relative; aspect-ratio: 4 / 5; width: min(100%, 50vh); margin: 0 auto 14px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--navy-deep); border: 1px dashed var(--navy-line);
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); font-size: 14px; }
.face-guide { width: 96px; margin: 0 auto 12px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.8; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row .btn { padding-left: 12px; padding-right: 12px; }

/* Style cards */
.styles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.style {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px 12px; border-radius: var(--radius);
  background: var(--navy-deep); border: 1px solid var(--navy-line); color: var(--parchment);
  font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
@media (min-width: 600px) {
  .styles { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .style { padding: 12px 6px 10px; }
}
.style svg { width: 64px; height: 64px; margin-bottom: 4px; }
.style .s-name { font: 700 15px/1.2 var(--sans); }
.style .s-desc { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
@media (min-width: 600px) {
  .style .s-name { font-size: 13.5px; }
  .style .s-desc { font-size: 11.5px; }
}
.style[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.style[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%231E2B42' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.style:disabled { opacity: 0.35; cursor: not-allowed; }
.head { fill: none; stroke: var(--parchment-dim); stroke-width: 1.5; stroke-linecap: round; }
.hair, .hair-side { fill: var(--gold); }

.consent {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 14px;
  border-radius: var(--radius); background: var(--navy-deep); border: 1px solid var(--navy-line);
  font-size: 13.5px; color: var(--parchment-dim); cursor: pointer;
}
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold); }

/* Results */
.stage {
  position: relative; aspect-ratio: 4 / 5; width: min(100%, 56vh); margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; background: var(--navy-deep);
  box-shadow: 0 0 0 1px var(--gold), 0 20px 40px rgba(0, 0, 0, 0.35);
}
.frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.frame.on { opacity: 1; }
.frame.waiting { filter: blur(6px) brightness(0.6); transform: scale(1.04); }
.working {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center; font-weight: 700;
}
.working small { font-weight: 400; color: var(--parchment-dim); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(201, 161, 74, 0.25); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage-label {
  position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(23, 34, 52, 0.82); backdrop-filter: blur(6px);
  font: 700 14px/1.2 var(--sans); color: var(--parchment);
}
.stage-label:empty { display: none; }
.play {
  position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: rgba(23, 34, 52, 0.82); color: var(--parchment);
}
.play svg { width: 18px; height: 18px; fill: currentColor; }
.play .i-play { display: none; }
.play.paused .i-play { display: block; }
.play.paused .i-pause { display: none; }

.thumbs { display: flex; gap: 8px; margin: 12px 0 0; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.thumb {
  position: relative; flex: none; width: 66px; padding: 0; border: 0; background: none; color: var(--parchment-dim);
  font: 600 11px/1.25 var(--sans); text-align: center; cursor: pointer;
}
.thumb .t-img {
  display: block; width: 66px; height: 82px; margin-bottom: 5px; border-radius: 10px; overflow: hidden;
  background: var(--navy-deep); border: 2px solid var(--navy-line);
}
.thumb .t-img img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-selected="true"] { color: var(--parchment); }
.thumb[aria-selected="true"] .t-img { border-color: var(--gold); }
.thumb.loading .t-img { display: grid; place-items: center; }
.thumb.loading .t-img::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(201, 161, 74, 0.25); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
.thumb.failed .t-img { display: grid; place-items: center; color: var(--muted); font-size: 18px; }

.notice {
  margin-top: 14px; padding: 14px; border-radius: var(--radius);
  background: var(--walnut); color: var(--parchment); font-size: 14.5px;
}
.notice strong { display: block; margin-bottom: 2px; font: 700 17px/1.3 var(--serif); color: var(--gold); }

.result-actions { display: grid; gap: 10px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .spinner, .thumb.loading .t-img::after { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}