/* ОБЪЕКТ — общие подсказки для любых блоков: swipe-hint («листайте»), tap-pulse («нажмите здесь»)
   и ring — кольцо-пульс вокруг круглой кнопки (Play у видео и т.п.).
   Разметка и поведение — assets/js/objekt-hints.js. Подсказка лежит поверх элемента (родитель — position:relative),
   не перехватывает клики, появляется один раз при попадании в зону видимости и плавно исчезает. */

.objekt-hint{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
.objekt-hint.is-playing{opacity:1;visibility:visible;transition:opacity .4s ease;}
.objekt-hint.is-hiding{opacity:0;}
.objekt-hint.is-done{display:none;}

.objekt-hint__box{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  border-radius:14px;
  background:rgba(20,18,18,0.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--objekt-color-cream, #F5F2ED);
  font-family:var(--objekt-font-body, 'Manrope', sans-serif);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
}
.objekt-hint__text{
  font-size:13px;
  line-height:1.3;
  letter-spacing:0.02em;
  white-space:nowrap;
  color:var(--objekt-color-cream, #F5F2ED);
}

/* --- swipe: рука качается влево-вправо, стрелки мигают по очереди --- */
.objekt-hint__row{display:flex;align-items:center;gap:10px;}
.objekt-hint__hand{display:flex;width:30px;height:30px;color:var(--objekt-color-accent, #A9967D);}
.objekt-hint__arrow{display:flex;width:18px;height:18px;color:var(--objekt-color-text-light, rgba(245,242,237,0.72));}
.objekt-hint__hand svg,
.objekt-hint__arrow svg{width:100%;height:100%;display:block;}
.objekt-hint.is-playing .objekt-hint__hand{animation:objektHintSwipe 1.4s ease-in-out infinite;}
.objekt-hint.is-playing .objekt-hint__arrow:first-child{animation:objektHintBlink 1.4s ease-in-out infinite;}
.objekt-hint.is-playing .objekt-hint__arrow:last-child{animation:objektHintBlink 1.4s ease-in-out .7s infinite;}
@keyframes objektHintSwipe{
  0%,100%{transform:translateX(-10px) rotate(-6deg);}
  50%{transform:translateX(10px) rotate(6deg);}
}
@keyframes objektHintBlink{
  0%,100%{opacity:.35;}
  50%{opacity:1;}
}

/* --- tap: расходящиеся кольца --- */
.objekt-hint--tap .objekt-hint__box{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;}
.objekt-hint--tap .objekt-hint__text{padding:6px 12px;border-radius:999px;background:rgba(20,18,18,0.72);}
.objekt-hint__pulse{position:relative;display:block;width:56px;height:56px;}
.objekt-hint__pulse i{
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--objekt-color-accent, #A9967D);
  opacity:0;
}
.objekt-hint__pulse i:first-child{inset:20px;background:var(--objekt-color-accent, #A9967D);opacity:.9;border:0;}
.objekt-hint.is-playing .objekt-hint__pulse i:nth-child(2){animation:objektHintRipple 1.6s ease-out infinite;}
.objekt-hint.is-playing .objekt-hint__pulse i:nth-child(3){animation:objektHintRipple 1.6s ease-out .8s infinite;}
@keyframes objektHintRipple{
  0%{transform:scale(.35);opacity:.9;}
  100%{transform:scale(1.4);opacity:0;}
}

/* --- ring: тонкое кольцо вокруг круглой кнопки (data-objekt-pulse-ring), два цикла при первом появлении --- */
.objekt-pulse-ring{
  position:absolute;inset:-1px;
  border-radius:inherit;
  border:1px solid var(--objekt-color-accent, #A9967D);
  opacity:0;
  pointer-events:none;
}
.objekt-pulse-ring.is-pulsing{animation:objektPulseRing 3s ease-out 2;}
@keyframes objektPulseRing{
  0%{transform:scale(1);opacity:.35;}
  100%{transform:scale(1.12);opacity:0;}
}

/* --- inline: «палец + текст» обычной строкой (data-objekt-hint-inline), виден всегда, после показа приглушается --- */
.objekt-hint.objekt-hint--inline{
  position:static;inset:auto;z-index:auto;
  display:inline-flex;justify-content:flex-start;
  opacity:1;visibility:visible;
  transition:opacity .6s ease;
}
.objekt-hint--inline.is-done{display:inline-flex;opacity:.6;}
.objekt-hint--inline.is-hiding{opacity:.6;}
.objekt-hint--inline .objekt-hint__box{
  flex-direction:row;gap:12px;
  padding:0;border-radius:0;
  background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.objekt-hint--inline .objekt-hint__hand{width:26px;height:26px;flex-shrink:0;}
.objekt-hint--inline .objekt-hint__text{font-size:15px;letter-spacing:0;color:var(--objekt-color-text-light, rgba(245,242,237,0.72));}
.objekt-hint--inline.is-playing .objekt-hint__hand{animation:objektHintLead 1.4s ease-in-out 2;}
@keyframes objektHintLead{
  0%,100%{transform:translateX(6px) rotate(0);}
  55%{transform:translateX(-12px) rotate(-8deg);}
}

/* --- swipe-v: палец плавно ведёт вверх («листайте вниз») --- */
.objekt-hint--swipe-v .objekt-hint__box{flex-direction:row;gap:10px;padding:10px 16px;border-radius:999px;}
.objekt-hint--swipe-v .objekt-hint__hand{display:flex;width:26px;height:26px;color:var(--objekt-color-accent, #A9967D);}
.objekt-hint--swipe-v .objekt-hint__hand svg{width:100%;height:100%;display:block;}
.objekt-hint--swipe-v.is-playing .objekt-hint__hand{animation:objektHintUp 1.3s ease-in-out infinite;}
@keyframes objektHintUp{
  0%{transform:translateY(8px);opacity:.4;}
  50%{opacity:1;}
  100%{transform:translateY(-10px);opacity:.4;}
}

/* --- tap с пальцем: палец «нажимает» в центр кольца --- */
.objekt-hint--tap .objekt-hint__pulse .objekt-hint__hand{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-2px 0 0 -6px;color:var(--objekt-color-cream, #F5F2ED);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.objekt-hint--tap .objekt-hint__pulse .objekt-hint__hand svg{display:block;width:100%;height:100%;}
.objekt-hint--tap.is-playing .objekt-hint__pulse .objekt-hint__hand{animation:objektHintPress 1.6s ease-in-out infinite;}
@keyframes objektHintPress{
  0%,100%{transform:translate(6px, 6px) scale(1);}
  45%{transform:translate(0, 0) scale(.92);}
}

@media (prefers-reduced-motion: reduce){
  .objekt-hint--swipe-v.is-playing .objekt-hint__hand,
  .objekt-hint--tap.is-playing .objekt-hint__pulse .objekt-hint__hand{animation:none;}
  .objekt-hint--inline.is-playing .objekt-hint__hand{animation:none;}
  .objekt-pulse-ring.is-pulsing{animation:none;}
  .objekt-hint.is-playing .objekt-hint__hand,
  .objekt-hint.is-playing .objekt-hint__arrow,
  .objekt-hint.is-playing .objekt-hint__pulse i{animation:none;}
  .objekt-hint__pulse i:nth-child(2){opacity:.6;transform:scale(1);}
}