/* Shared tokens for the Style Finder explorations. Tokens stay fixed across
   variants; only concept, layout and interaction change. */
:root {
  --ink: #294239;
  --ink-soft: #405f54;
  --on-ink: #fffaf0;
  --bg: #f6f1e7;
  --bg-alt: #e5eadc;
  --surface: #fffdf7;
  --line: #d2c9b8;
  --muted: #5f675f;
  --accent: #c9683b;
  --accent-text: #9e4c26;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Libre Franklin", "Avenir Next", system-ui, sans-serif;
  --ease: cubic-bezier(.16, .72, .22, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; }

.eyebrow { display: block; margin-bottom: 8px; color: var(--accent-text); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: var(--muted); }

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  color: var(--on-ink);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 180ms var(--ease), opacity 180ms;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: default; }
.btn--ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.btn--block { width: 100%; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; animation: in 480ms var(--ease) both; }
.screen[hidden] { display: none; }
@keyframes in { from { opacity: 0; transform: translateY(14px); } }

/* Result card shared by every variant */
.result { position: absolute; inset: 0; overflow-y: auto; background: var(--surface); animation: in 600ms var(--ease) both; }
.result__hero { position: relative; height: 300px; overflow: hidden; color: #fff; }
.result__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: reveal 1100ms var(--ease) both; }
.result__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.65)); }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); transform: scale(1.12); } to { clip-path: inset(0); transform: none; } }
.result__name { position: absolute; z-index: 1; right: 20px; bottom: 18px; left: 20px; }
.result__name .eyebrow { color: rgba(255,255,255,.85); }
.result__name h2 { font-size: 44px; }
.result__name p { margin: 6px 0 0; opacity: .9; }
.result__body { padding: 20px; }
.blend { display: flex; height: 10px; overflow: hidden; border-radius: 99px; background: var(--bg-alt); }
.blend span { width: 0; transition: width 1000ms var(--ease); }
.blend span + span { border-left: 2px solid var(--surface); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 18px; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }
.legend b { color: var(--ink); }
.chips { display: flex; gap: 6px; margin: 14px 0; }
.chips i { width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,.14); animation: chip 700ms var(--spring) both; }
@keyframes chip { from { opacity: 0; transform: translateY(-14px) scale(.6); } }
.capture { margin-top: 18px; padding: 18px; background: var(--bg-alt); border-radius: 14px; }
.capture h3 { font-size: 24px; margin-bottom: 4px; }
.capture p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.field { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.field input { width: 100%; min-height: 46px; margin-top: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-weight: 400; }
.done { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--bg-alt); border-radius: 12px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}