/* ==========================================================================
   OMONYMA — "Made for Your Movement" (AI Movement Recommender)
   Approved concept #3: split image + copy, slow continuous zoom.
   ========================================================================== */

.omh-move { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.omh-move-visual { position: relative; overflow: hidden; }
.omh-move-visual img,
.omh-move-visual-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: omh-move-kenburns 16s ease-in-out infinite alternate;
}
.omh-move-visual-placeholder { background: linear-gradient(135deg, #8a7c6a, #4a3f34); }
@keyframes omh-move-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

.omh-move-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 4vw, 4.5rem); }
.omh-move-copy .eyebrow { font-size: 0.7rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 1rem; }
.omh-move-copy h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); line-height: 1.2; margin-bottom: 1.2rem; }
.omh-move-copy .sub { color: var(--color-ink-soft); line-height: 1.7; margin-bottom: 1.8rem; font-size: 0.92rem; max-width: 400px; }
.omh-move-cta { display: inline-block; width: fit-content; border-bottom: 1px solid var(--color-ink); padding-bottom: 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: none; border-top: none; border-left: none; border-right: none; color: var(--color-ink); cursor: pointer; font-family: var(--font-ui); }

@media (prefers-reduced-motion: reduce) {
  .omh-move-visual img, .omh-move-visual-placeholder { animation: none; }
}
@media (max-width: 700px) {
  .omh-move { grid-template-columns: 1fr; min-height: 0; }
  .omh-move-visual { height: 340px; }
  .omh-move-copy { padding: 2.2rem 1.4rem; }
}

/* ---------- Popup: practice → compression → recommendation ---------- */
.omh-move-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(20, 19, 17, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 2.5rem;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.omh-move-overlay.is-open { opacity: 1; }
.omh-move-panel {
  background: var(--color-bg); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  transform: translateY(16px); transition: transform 0.4s var(--ease); padding: 3rem 2.6rem;
}
.omh-move-overlay.is-open .omh-move-panel { transform: translateY(0); }
.omh-move-close { position: absolute; top: 1.1rem; right: 1.2rem; font-size: 1.5rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-ink); cursor: pointer; }

@media (max-width: 640px) {
  .omh-move-overlay { padding: 0; align-items: stretch; }
  .omh-move-panel { max-width: none; max-height: none; height: 100%; overflow-y: visible; transform: translateY(100%); display: flex; flex-direction: column; padding: 1.6rem 1.3rem 6.5rem; }
  .omh-move-overlay.is-open .omh-move-panel { transform: translateY(0); }
  .omh-move-flow-content { flex: 1; overflow-y: auto; }
  .omh-move-close { top: 0.9rem; right: 0.9rem; }
  .omh-move-eyebrow, .omh-move-title { padding-inline: 2.2rem; }
}

.omh-move-eyebrow { font-size: 0.68rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 0.6rem; text-align: center; }
.omh-move-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; text-align: center; margin-bottom: 1.6rem; }
.omh-move-progress { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 2rem; }
.omh-move-progress span { width: 28px; height: 2px; background: var(--color-line); }
.omh-move-progress span.done, .omh-move-progress span.now { background: var(--color-ink); }

.omh-move-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.omh-move-options.cols-3 { grid-template-columns: repeat(3, 1fr); }
.omh-move-option { border: 1px solid var(--color-line); padding: 1.3rem 1rem; text-align: center; font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s var(--ease); }
.omh-move-option:hover { border-color: var(--color-ink); }

.omh-move-btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }
@media (max-width: 640px) {
  .omh-move-btn-row { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--color-bg); border-top: 1px solid var(--color-line); padding: 1rem 1.3rem calc(1rem + env(safe-area-inset-bottom)); margin-top: 0; box-shadow: 0 -8px 24px rgba(20,19,17,0.08); }
  .omh-move-options, .omh-move-options.cols-3 { display: flex !important; flex-direction: column; gap: 0.7rem; }
  .omh-move-option { width: 100%; }
}
.omh-move-btn-ghost { color: var(--color-ink-soft); text-decoration: underline; background: none; border: none; cursor: pointer; font-size: 0.78rem; font-family: var(--font-ui); }

.omh-move-loader { display: flex; flex-direction: column; align-items: center; padding: 3rem 1rem; }
.omh-move-loader-rings { position: relative; width: 100px; height: 100px; margin-bottom: 1.4rem; }
.omh-move-loader-rings .r { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--color-line); }
.omh-move-loader-rings .r1 { border-top-color: var(--color-ink); animation: omh-ring-spin 1.6s linear infinite; }
.omh-move-loader-rings .r2 { inset: 14px; border-right-color: var(--color-ink-soft); border-top-color: transparent; animation: omh-ring-spin 2.2s linear infinite reverse; }
.omh-move-loader p { font-size: 0.85rem; color: var(--color-ink-soft); }

.omh-move-result { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.4rem; align-items: center; }
.omh-move-result img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.omh-move-result h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.omh-move-result .price { font-size: 0.95rem; margin-bottom: 0.8rem; }
.omh-move-result .reason { color: var(--color-ink-soft); font-size: 0.85rem; line-height: 1.65; }
.omh-move-result .view-link { display: inline-block; margin-top: 1rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--color-ink); padding-bottom: 2px; }
.omh-move-empty { text-align: center; color: var(--color-ink-soft); font-size: 0.88rem; padding: 2rem 0; }

/* ---------- Editorial Capsule result (approved concept #5) ---------- */
.omh-move-capsule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1.4rem; }
.omh-move-capsule-item { position: relative; }
.omh-move-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.omh-move-chip {
  font-size: 0.64rem; border: 1px solid var(--color-line); background: var(--color-bg);
  padding: 0.28rem 0.5rem; cursor: pointer; color: var(--color-ink); font-family: var(--font-ui);
}
.omh-move-soldout { font-size: 0.66rem; color: #A32C2C; margin-top: 0.4rem; }
.omh-move-chip-options {
  position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 0.3rem;
  background: var(--color-bg); border: 1px solid var(--color-line); box-shadow: 0 8px 20px rgba(20,19,17,0.12);
  display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem; min-width: 140px;
}
.omh-move-chip-opt {
  font-size: 0.66rem; border: 1px solid var(--color-line); background: var(--color-bg);
  padding: 0.3rem 0.5rem; cursor: pointer; font-family: var(--font-ui); color: var(--color-ink);
}
.omh-move-chip-opt.sel { border-color: var(--color-ink); background: var(--color-bg-alt); }
.omh-move-chip-opt.oos {
  color: var(--color-ink-soft); cursor: not-allowed;
  background: var(--color-bg-alt); opacity: 0.5; filter: blur(1.5px);
}
.omh-move-capsule-item img,
.omh-move-capsule-noimg { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 0.4rem; background: var(--color-bg-alt); }
.omh-move-capsule-item .name { font-size: 0.76rem; color: var(--color-ink); }
.omh-move-capsule-item .price { font-size: 0.7rem; color: var(--color-ink-soft); }
.omh-move-capsule-total { display: flex; justify-content: space-between; font-size: 0.95rem; padding: 1rem 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-bottom: 1.2rem; }
.omh-move-capsule-cta { display: block; width: 100%; background: var(--color-ink); color: var(--color-bg); border: none; padding: 1rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; font-family: var(--font-ui); }
.omh-move-capsule-cta:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 480px) { .omh-move-capsule-grid { grid-template-columns: repeat(2, 1fr); } }