/* ===== Эффект привлечения внимания к коммерческому виджету — МЕДУЗА =====
   Правка клиента 04.08: НИКАКИХ накладок поверх карточки и никакого движения
   всей фигуры. Только два приёма — шимер по кнопке и реакция на наведение.
   ⛔ Геометрию .offw-b1/.offw-b2 не трогаем: меняются лишь фон кнопки,
   яркость и тень — ни одно свойство не влияет на поток и размеры. */

/* ---- шимер: светлая полоса бежит по жёлтой плите CTA ---- */
.offw.on .offw-b1{
  background-image:linear-gradient(105deg,
    rgba(255,255,255,0)   38%,
    rgba(255,255,255,.62) 47%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.62) 53%,
    rgba(255,255,255,0)   62%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  background-position:220% 0;
  animation:medShimmer 4.6s ease-in-out infinite;
}
@keyframes medShimmer{
  0%,64% {background-position:220% 0}
  92%,100%{background-position:-120% 0}
}

/* вторая кнопка догоняет чуть позже — взгляд ведётся сверху вниз */
.offw.on .offw-b2{
  background-image:linear-gradient(105deg,
    rgba(255,255,255,0)   38%,
    rgba(255,255,255,.45) 47%,
    rgba(255,255,255,.66) 50%,
    rgba(255,255,255,.45) 53%,
    rgba(255,255,255,0)   62%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  background-position:220% 0;
  animation:medShimmer 4.6s ease-in-out .45s infinite;
}

/* ---- наведение: карточка чуть подаётся вперёд и подсвечивается изумрудом ----
   ⛔ Масштабируем КАРТОЧКУ ЦЕЛИКОМ, а не только картинку: кнопки лежат поверх
   арта абсолютно, и при масштабе одной картинки они оставались на месте —
   надписи визуально отклеивались от нарисованных плит. */
/* ⛔ Только для мыши: на тач-экранах :hover залипает после тапа, и виджет
   оставался бы увеличенным навсегда. */
@media (hover:hover) and (pointer:fine){
  .offw-card{transform-origin:100% 100%;transition:transform .28s ease-out}
  .offw-art{transition:filter .28s ease-out}
  .offw-card:hover{transform:scale(1.035)}
  .offw-card:hover .offw-art{
    filter:drop-shadow(0 8px 18px rgba(8,3,22,.6))
           drop-shadow(0 0 14px rgba(46,204,113,.5));
  }
  .offw-card:hover .offw-b1,
  .offw-card:hover .offw-b2{filter:brightness(1.12)}
  .offw.min .offw-badge{transition:transform .28s ease-out,filter .28s ease-out}
  .offw.min .offw-badge:hover{transform:scale(1.08)}
}

/* ---- мобильный значок-монета: фиолетовое свечение ПО КОНТУРУ ----
   На мобиле виджет свёрнут в монету 38px, и без подсветки она теряется на
   тёмном фоне. drop-shadow повторяет альфа-контур картинки, поэтому свечение
   идёт по краю монеты, а не прямоугольником. Дыхание медленное, чтобы
   притягивать взгляд, но не мельтешить. */
@media (max-width:1099px){
  .offw.min .offw-badge{
    position:relative;
    animation:medCoinGlow 2.8s ease-in-out infinite;
  }
}

/* ---- колесо: фиолетовый блик без конца ползёт по контуру монеты ----
   Тот же приём, что на инферно, но в палитре медузы. Кольцо — конический
   градиент, вырезанный маской в тонкую полоску по краю, поэтому светится
   линия окружности, а не пятно. Слой не перехватывает нажатия. */
.offw.min .offw-badge::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(143,123,255,0)    0deg,
    rgba(143,123,255,0)    232deg,
    rgba(143,123,255,.32) 286deg,
    rgba(176,160,255,.88) 330deg,
    rgba(226,218,255,1)   349deg,
    rgba(255,255,255,1)   355deg,
    rgba(176,160,255,.92) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  filter:drop-shadow(0 0 4px rgba(143,123,255,.9));
  animation:medRing 2.4s linear infinite;
}
@keyframes medRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes medCoinGlow{
  0%,100%{
    filter:drop-shadow(0 5px 10px rgba(8,3,22,.6))
           drop-shadow(0 0 4px rgba(143,123,255,.75))
           drop-shadow(0 0 9px rgba(143,123,255,.4));
  }
  50%{
    filter:drop-shadow(0 5px 10px rgba(8,3,22,.6))
           drop-shadow(0 0 7px rgba(160,142,255,.95))
           drop-shadow(0 0 18px rgba(143,123,255,.7))
           drop-shadow(0 0 28px rgba(143,123,255,.35));
  }
}

@media (prefers-reduced-motion:reduce){
  .offw.on .offw-b1,.offw.on .offw-b2{animation:none;background-image:none}
  .offw-art,.offw.min .offw-badge{transition:none}
  .offw-card:hover .offw-art{transform:none}
  /* свечение остаётся, но без пульсации и без вращения */
  .offw.min .offw-badge{
    animation:none;
    filter:drop-shadow(0 5px 10px rgba(8,3,22,.6))
           drop-shadow(0 0 6px rgba(143,123,255,.85))
           drop-shadow(0 0 16px rgba(143,123,255,.5));
  }
  .offw.min .offw-badge::after{
    animation:none;background:none;
    box-shadow:0 0 0 1.5px rgba(160,142,255,.8),0 0 10px rgba(143,123,255,.55);
  }
}