/* ==========================================================================
   Hidžama: place glass cups on a back; lift them and the round marks fade
   ========================================================================== */

.hz-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-m); padding-bottom: var(--space-xl); }
.hz-hero__copy { display: grid; justify-items: start; }
.hz-hero__ctrl { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.hz-hero__count { margin-top: 1rem; min-height: 1.6em; font-size: var(--fs-small); color: var(--muted); }
.hz-hero__stage { position: relative; display: grid; justify-items: center; }
.hz-hero__stage::before { content: ''; position: absolute; inset: 0 5%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(229, 137, 59, 0.16), transparent); }

.cups { width: min(100%, 460px); height: auto; overflow: visible; cursor: copy; touch-action: manipulation; }
.cups__back { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.cups__line { fill: none; stroke: rgba(120, 70, 45, 0.28); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.cups__point { fill: rgba(255, 255, 255, 0.35); pointer-events: none; animation: pointPulse 10s var(--ease-calm) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pointPulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 0.7; transform: scale(1.3); } }
.cups.has-cups .cups__point { opacity: 0; animation: none; transition: opacity 400ms; }

.cup { pointer-events: none; }
.cup__mark { transform-box: fill-box; transform-origin: center; transform: scale(0.2); opacity: 0; transition: transform 1600ms var(--ease-out) 350ms, opacity 900ms ease 350ms; }
.cup__lift { transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: transform 1400ms var(--ease-out) 300ms; }
.cup__glass { transform-box: fill-box; transform-origin: center; animation: cupDrop 600ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
@keyframes cupDrop { from { transform: translateY(-46px) scale(1.15); opacity: 0; } to { transform: none; opacity: 1; } }
.cup.is-set .cup__mark { transform: none; opacity: 1; }
.cup.is-set .cup__lift { transform: scale(1); }
/* Lifted: the glass rises away, the mark stays and slowly fades */
.cup.is-lifted .cup__glass { animation: cupLift 700ms var(--ease-out) forwards; }
@keyframes cupLift { to { transform: translateY(-60px) scale(1.1); opacity: 0; } }
.cup.is-lifted .cup__lift { transform: scale(0.7); transition-delay: 0ms; }
.cup.is-lifted .cup__mark { opacity: 0; transition: opacity 3200ms ease 1200ms; }

@media (max-width: 860px) { .hz-hero { grid-template-columns: 1fr; } .hz-hero__stage { order: -1; } .cups { width: min(84%, 360px); } }

/* ---------- Info ---------- */
.hzinfo { padding: var(--space-xl) 0; }
.hzinfo__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-m) clamp(2rem, 6vw, 7rem); align-items: start; }
.hzinfo__list { display: grid; border-top: 1px solid var(--line); }
.hzinfo__list > div { display: grid; grid-template-columns: minmax(7rem, 0.5fr) 1fr; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.hzinfo__list dt { font-weight: 400; font-size: 1.25rem; letter-spacing: -0.02em; font-variation-settings: 'opsz' 48, 'wdth' 86; }
.hzinfo__list dd { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .hzinfo__grid { grid-template-columns: 1fr; } .hzinfo__list > div { grid-template-columns: 1fr; gap: 0.2rem; } }