/* ═══════════════════════════════════════════════════════════════
   ULTIMA maszk-widget — 3D render a rajzolt ikon helyett

   Ez a blokk a „Egyetlen maszk. Négyféle bőrprobléma." widgethez
   (_build/_shell.py → mask_popup) tartozik. KÉZZEL ÍRT forrás, nem
   generált kimenet: a widget markupja linkeli, a merge.css UTÁN, hogy
   az itteni értékek nyerjenek a .maskpop__* szabályokkal szemben.

   Használat: a widget rajzolt maszk-grafikáját cseréld le erre:

     <div class="ultima-mask-3d">
       <img src="assets/images/mask-front-3d.png"
            srcset="assets/images/mask-front-3d.png 1x,
                    assets/images/mask-front-3d@2x.png 2x"
            alt="ULTIMA LED Beauty Mask" width="112" height="130">
       <span class="ultima-wl ultima-wl--415"></span>
       <span class="ultima-wl ultima-wl--590"></span>
       <span class="ultima-wl ultima-wl--630"></span>
       <span class="ultima-wl ultima-wl--850"></span>
     </div>

   A méretek 112 px-es maszkra és 18 px-es pöttyökre vannak
   hangolva. Más méretnél minden értéket ugyanazzal az aránnyal
   kell szorozni.
   ═══════════════════════════════════════════════════════════════ */

.ultima-mask-3d {
  position: relative;
  width: 112px;
  /* A kép 275x320, vagyis álló. Ha a konténer négyzet lenne, az
     object-fit: contain oldalt üres sávot hagyna, és a pöttyök
     elszakadnának a maszktól. Ezért a doboz a kép arányát követi. */
  height: 130px;
}

/* Lágy elefántcsont derengés a maszk mögött.
   Világos szekción gyakorlatilag láthatatlan; sötét kártya fölött
   elválasztja a fekete maszkot a háttértől. A gradiens középpontja
   szándékosan 56%-nál van, nem 50%-nál: így az áll is fedve marad. */
.ultima-mask-3d::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  filter: blur(11px);
  background: radial-gradient(ellipse 58% 62% at 50% 56%,
    rgba(253, 250, 246, 0.92)  0%,
    rgba(253, 250, 246, 0.70) 34%,
    rgba(253, 250, 246, 0.34) 56%,
    rgba(253, 250, 246, 0.10) 72%,
    transparent               86%);
}

.ultima-mask-3d img {
  position: relative;          /* a derengés fölé kerüljön */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Az első drop-shadow a peremfény: hajszálvékony világos kontúr a
     rácsok körül. Ez tartja olvashatóan a maszkot akkor is, ha a
     derengés alá mégis sötét kerül. */
  filter:
    drop-shadow(0 0 1.3px rgba(253, 250, 246, 0.90))
    drop-shadow(0 7px 11px rgba(40, 30, 18, 0.34));
}

/* ── A négy validált hullámhossz, ívben a bal oldalon ───────────── */
.ultima-wl {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.ultima-wl--415 { top: -16px; left:   5px; background: #3B5BF5; }  /* kék */
.ultima-wl--590 { top:  21px; left: -13px; background: #F0A61E; }  /* sárga */
.ultima-wl--630 { top:  66px; left: -20px; background: #E8402C; }  /* vörös */
.ultima-wl--850 { top: 104px; left: -11px; background: #8E1620; }  /* közeli infravörös */

/* ── Illesztés a meglévő widgethez (_shell.py mask_popup) ──────────
   A pöttyök a régi .maskpop__sw gombok maradnak (data-light + kattintás-
   logika), csak megkapják az .ultima-wl osztályokat. A régi ív-pozicionálás
   (transform: rotate…translateX, negatív margin) itt kikapcsol, különben a
   fenti top/left értékekre rácsúszna. */
.ultima-mask-3d .maskpop__sw { margin: 0; transform: none; }
.ultima-mask-3d .maskpop__sw:hover,
.ultima-mask-3d .maskpop__sw.is-on { width: 22px; height: 22px; margin: -2px 0 0 -2px; }

/* A kép a régi .maskpop__svg osztályt is viseli (lebegés, egérre dőlés).
   Választás után a régi szabály a teljes filtert lecserélné a színes
   derengésre — itt a peremfényt is megtartjuk mellette. */
.maskpop[data-lit="1"] .ultima-mask-3d img {
  filter:
    drop-shadow(0 0 1.3px rgba(253, 250, 246, 0.90))
    drop-shadow(0 7px 11px rgba(40, 30, 18, 0.34))
    drop-shadow(0 0 13px var(--pick));
}

@media (prefers-reduced-motion: reduce) {
  .ultima-mask-3d,
  .ultima-mask-3d img { animation: none; transition: none; }
}