/* ============================================================
   mod-ring.css — колесо інших варіантів ПОЗАДУ «Об'єкта дня».
   Усі правила з margin/padding мають ≥2 класи в селекторі,
   щоб пробити `.ev2 *{margin:0;padding:0}` з home-v2.css.

   Геометрія: картка «Об'єкта дня» на повну ширину й непрозора
   (1905×360 на 1920px), тож збоку від неї нічого не видно —
   колесо живе окремою СМУГОЮ НАД нею, а низ кожної картки
   заходить під її верхній край. Саме це перекриття і є ефект.
   ============================================================ */

.ev2 .em-ootd-stage {
  position: relative;
  padding: 190px 0 0;   /* лифт: висота смуги, не закрита карткою дня */
  isolation: isolate;
}

/* Картка дня стоїть попереду і кидає тінь угору на колесо —
   без неї стик читався б як наклейка, а не як глибина. */
.ev2 .em-ootd-stage .em-ootd {
  position: relative;
  z-index: 1;
  box-shadow: 0 -26px 46px -26px rgba(61, 58, 44, .42);
}

.ev2 .em-ring {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 300px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* по горизонталі краї розчиняються, а не зрізаються */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  /* Перший кадр колеса не спалахує, а проявляється: клас ставить mod-ring.js
     після того, як плитки вже розставлені по циліндру. */
  opacity: 0;
  transition: opacity 1s cubic-bezier(.22, .7, .25, 1);
}
.ev2 .em-ring.em-ring--in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ev2 .em-ring { transition: none; }
}

/* Верх смуги: замість жорсткого обрізу overflow — розчинення у фон сторінки.
   Градієнт кольором самої сторінки працює скрізь, на відміну від подвійної
   маски (mask-composite ламає 3D-контекст у частині браузерів). */
.ev2 .em-ring::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg, #F5F0E7) 0%,
    color-mix(in srgb, var(--bg, #F5F0E7) 42%, transparent) 46%,
    transparent 100%);
}

/* Точка сходу НИЖЧЕ смуги — картки розкриваються віялом угору. */
.ev2 .em-ring__wheel {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 1120px;
  perspective-origin: 50% 430px;
  transform-style: preserve-3d;
}

.ev2 .em-ring__card {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 168px;
  height: 236px;
  margin: 0 0 0 -84px;
  border-radius: 16px;
  overflow: hidden;
  visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  background: linear-gradient(155deg, #E8E0D0, #DCD4C2);
  box-shadow: 0 22px 44px -18px rgba(61, 58, 44, .34);
}

.ev2 .em-ring__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Скляна грань: тонкий кант + коса блискітка, як відблиск на склі. */
.ev2 .em-ring__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .10) 26%,
    rgba(255, 255, 255, 0) 46%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 0 0 1px rgba(61, 58, 44, .07);
}

/* Цінник — «рідке скло»: розмиває фото під собою, світиться по верхній грані.
   Угорі картки, бо низ кожної плитки ховається за карткою «Об'єкта дня». */
.ev2 .em-ring__cap {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #2E2B20;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .28));
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 6px 16px -9px rgba(61, 58, 44, .6);
}

/* Без backdrop-filter скло перетворилось би на ледь помітний серпанок —
   у такому разі робимо плашку щільною, щоб цифра лишалась читабельною. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ev2 .em-ring__cap {
    background: rgba(251, 248, 242, .92);
    border-color: rgba(220, 212, 194, .9);
  }
}

.ev2 .em-ring__card--broken .em-ring__img { display: none; }

@media (max-width: 900px) {
  .ev2 .em-ootd-stage { padding: 150px 0 0; }
  .ev2 .em-ring { height: 226px; }
  .ev2 .em-ring::before { height: 50px; }
  .ev2 .em-ring__wheel { perspective-origin: 50% 330px; }
  .ev2 .em-ring__card { top: 28px; width: 132px; height: 186px; margin: 0 0 0 -66px; border-radius: 14px; }
}

@media (max-width: 640px) {
  .ev2 .em-ootd-stage { padding: 132px 0 0; }
  .ev2 .em-ring { height: 190px; }
  .ev2 .em-ring::before { height: 42px; }
  .ev2 .em-ring__wheel { perspective-origin: 50% 275px; }
  .ev2 .em-ring__card { top: 22px; width: 104px; height: 146px; margin: 0 0 0 -52px; border-radius: 12px; }
  .ev2 .em-ring__cap { top: 8px; left: 8px; padding: 4px 9px; font-size: 10px; }
}