/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  kiosk-gesture.css
   Gesture explorer screen (kiosk-gesture.js). Needs tracking.css.
   ========================================================== */
.gx-wrap { height: 100%; display: grid; grid-template-columns: 1fr 30rem; grid-template-rows: auto 1fr auto; gap: 1.25rem 3rem; padding: 1.5rem 3.5rem 1.5rem; }
.gx-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.gx-head h1 { font-size: 3.2rem; }
.gx-sub { color: var(--smoke); max-width: 60ch; }
.gx-status { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }

/* the vitrine */
.gx-stage { position: relative; min-height: 0; border-radius: var(--r-m); overflow: hidden; background: var(--tray); }
.gx-tilt { position: absolute; inset: 0; transform-origin: 50% 55%; will-change: transform; }
.gx-view { position: absolute; inset: 0; }
.gx-view .pv { pointer-events: none; }
.gx-stage.is-cal .gx-tilt { filter: blur(8px); opacity: .22; }
.gx-hand { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem; border-radius: 50%; border: 1.5px solid rgba(150, 120, 60, .85); pointer-events: none; z-index: 5; transition: left .1s linear, top .1s linear, border-color var(--t-med); }
.gx-hand span { position: absolute; inset: 1.6rem; border-radius: 50%; background: rgba(150, 120, 60, .85); transition: transform var(--t-med) var(--ease); }
.gx-hand.is-paused { border-style: dashed; }
.gx-hand.is-paused span { transform: scale(.5); }
.gx-hand.is-hold { border-width: 3px; }
.gx-state { position: absolute; bottom: 1.5rem; inset-inline-start: 50%; transform: translateX(-50%); z-index: 6; color: #5a4630; font-family: var(--display); font-size: 2rem; pointer-events: none; }
html[dir="rtl"] .gx-state { transform: translateX(50%); }
.gx-hint { position: absolute; top: 1.25rem; inset-inline-start: 1.5rem; z-index: 6; color: #5a4630; }
.gx-cal { position: absolute; inset: 0; z-index: 20; }

/* side panel */
.gx-side { display: flex; flex-direction: column; justify-content: center; gap: .9rem; min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; }
.gx-name { font-size: 2.7rem; }
.gx-side > * { flex: none; }
.gx-details { border-top: 1px solid var(--gold-faint); padding-top: 1rem; animation: fadeIn .5s var(--ease); }
.gx-details h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.gx-spec { margin: 0 0 .5rem; padding-inline-start: 1.2rem; color: var(--smoke); font-size: 1rem; line-height: 1.5; }
.gx-touch { display: grid; grid-template-columns: repeat(4, var(--touch)); gap: .6rem; margin-top: .6rem; flex: none; }
.gx-touch .icon-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.gx-acts { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* bottom: guide + rail */
.gx-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.gx-guide { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.5rem; }
.gx-guide li { display: flex; align-items: center; gap: .8rem; color: var(--smoke); font-size: 1rem; }
.gx-guide svg { width: 3.6rem; height: 3.6rem; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .85; }
.gi-arrow, .gi-pause, .gi-ring { opacity: .55; }
.gi-hand { transform-origin: 32px 40px; animation: giTurn 6s var(--ease) infinite; }
.gi-grow { animation: giGrow 6s ease-in-out infinite; }
.gi-slide { animation: giSlide 6s var(--ease) infinite; }
[data-gi="palm"] .gi-hand { animation: none; }
@keyframes giTurn { 0%, 100% { transform: translateX(-3px) } 50% { transform: translateX(3px) } }
@keyframes giGrow { 0%, 100% { transform: scale(.92) } 50% { transform: scale(1.06) } }
@keyframes giSlide { 0%, 55%, 100% { transform: translateX(-4px); opacity: 1 } 70% { transform: translateX(10px); opacity: .5 } 72% { opacity: 0 } 74% { transform: translateX(-4px); opacity: 0 } 90% { opacity: 1 } }
.gx-rail { display: flex; gap: .8rem; }
.gx-thumb { width: 6.5rem; height: 6.5rem; border: 2px solid transparent; flex: none; transition: border-color var(--t-fast); }
.gx-thumb img { padding: 8%; }
.gx-thumb.is-on { border-color: var(--gold); }

@media (max-width: 1100px) {
  .gx-wrap { grid-template-columns: 1fr; height: auto; }
  .gx-stage { height: 56vh; }
  .gx-head { flex-direction: column; align-items: flex-start; }
  .gx-foot { flex-direction: column; align-items: flex-start; }
  .gx-guide { flex-wrap: wrap; gap: 1.2rem; }
  .gx-rail { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .gi-hand, .gi-grow, .gi-slide { animation: none; } }