:root {
    --sticker-rotate: 0deg;
    --sticker-p: 10px;
    --sticker-peelback-hover: 30%;
    --sticker-peelback-active: 40%;
    --sticker-peel-easing: power3.out;
    --sticker-peel-hover-easing: power2.out;
    --sticker-start: calc(-1 * var(--sticker-p));
    --sticker-end: calc(100% + var(--sticker-p));
    --sticker-shadow-opacity: 0.6;
    --sticker-lighting-constant: 0.1;
    --peel-direction: 0deg;
    /* Резервные значения для фильтров, если JS не сработает */
    --filter-url-main: url(#pointLight);
    --filter-url-flipped: url(#pointLightFlipped);
    --filter-url-shadow: url(#dropShadow);
    --filter-url-fill: url(#expandAndFill);
  }

  .sticker-peels-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .sticker-peel-container {
    position: absolute !important;
    top: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
  }

  /* Prevent selection/touch highlights for elements inside */
  .sticker-container * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sticker-container {
    position: relative;
    transform: rotate(var(--peel-direction));
    transform-origin: center;
  }

  /* The main visible sticker area */
  .sticker-main {
    clip-path: polygon(var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end));
    transition: clip-path 0.6s ease-out;
    filter: var(--filter-url-shadow);
  }

  /* rotate inner contents opposite of peel direction so image visually stays rotated by var(--sticker-rotate) only */
  .sticker-main>* {
    transform: rotate(calc(-1 * var(--peel-direction)));
  }

  .sticker-lighting {
    filter: var(--filter-url-main);
  }

  /* hover / touch hover effect for peel */
  .sticker-container:hover .sticker-main,
  .sticker-container.touch-active .sticker-main {
    clip-path: polygon(var(--sticker-start) var(--sticker-peelback-hover),
        var(--sticker-end) var(--sticker-peelback-hover),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end));
  }

  .sticker-container:active .sticker-main {
    clip-path: polygon(var(--sticker-start) var(--sticker-peelback-active),
        var(--sticker-end) var(--sticker-peelback-active),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end));
  }

  .sticker-image {
    transform: rotate(var(--sticker-rotate));
  }

  /* flap (the peeled back piece) */
  .flap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: calc(-100% - var(--sticker-p) - var(--sticker-p));
    clip-path: polygon(var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-start) var(--sticker-start));
    transform: scaleY(-1);
    transition: all 0.6s ease-out;
  }

  .flap>* {
    transform: rotate(calc(-1 * var(--peel-direction)));
  }

  .sticker-container:hover .flap,
  .sticker-container.touch-active .flap {
    clip-path: polygon(var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-peelback-hover),
        var(--sticker-start) var(--sticker-peelback-hover));
    top: calc(-100% + 2 * var(--sticker-peelback-hover) - 1px);
  }

  .sticker-container:active .flap {
    clip-path: polygon(var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-peelback-active),
        var(--sticker-start) var(--sticker-peelback-active));
    top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px);
  }

  .flap-lighting {
    filter: var(--filter-url-flipped);
  }

  .flap-image {
    transform: rotate(var(--sticker-rotate));
    filter: var(--filter-url-fill);
  }

  /* For Mozilla Firefox  -------- */
  .sticker-container.sticker-active .sticker-main {
    clip-path: polygon(var(--sticker-start) var(--sticker-peelback-active),
        var(--sticker-end) var(--sticker-peelback-active),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end));
  }

  .sticker-container.sticker-active .flap {
    clip-path: polygon(var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-peelback-active),
        var(--sticker-start) var(--sticker-peelback-active));
    top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px);
  }

  /* -------- */

  /* Draggable wrapper */
  .draggable {
    position: absolute;
    cursor: grab;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .draggable:active {
    cursor: grabbing;
  }

  /* Mobile-specific optimizations */
  @media (hover: none) and (pointer: coarse) {
    .draggable {
      cursor: default;
    }

    .sticker-container {
      touch-action: none;
    }
  }

  /* sizing */
  .sticker-image,
  .flap-image {
    width: var(--sticker-width, 200px);
  }

  .sticker-main,
  .flap {
    will-change: clip-path, transform;
  }

  /* ripple placeholder (if you want to add effects) */
  .sticker-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 10;
  }