/* React Bits — Sticker Peel (ported for Imana static site)
   Source: reactbits.dev StickerPeel — peel + lighting + drop shadow */

.sticker-peel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  align-items: center;
  justify-items: center;
  padding: 12px 4px 28px;
}

@media (max-width: 900px) {
  .sticker-peel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sticker-peel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 8px 0 20px;
  }

  .sticker-peel-slot {
    min-height: 72px;
    padding: 4px;
  }

  .sticker-image,
  .flap-image {
    width: min(var(--sticker-width, 110px), 42vw) !important;
    max-height: 56px;
  }

  /* Mobile: stickers only — no peel flap (avoids upside-down ghost logos) */
  .flap { display: none !important; }

  .sticker-main {
    clip-path: none !important;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
  }

  .sticker-lighting { filter: none; }

  .sticker-image {
    transform: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .flap { display: none !important; }
  .sticker-main {
    clip-path: none !important;
    transition: none !important;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  }
  .sticker-lighting { filter: none; }
  .sticker-image { transform: none !important; }
}

.sticker-peel-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  width: 100%;
  /* No card / box — stickers sit on the page */
  background: transparent;
  border: 0;
  padding: 8px;
}

.sticker-peel {
  position: relative;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  outline: none;
}

.sticker-peel:focus-visible .sticker-container {
  outline: 2px solid rgba(228, 197, 106, 0.65);
  outline-offset: 6px;
  border-radius: 4px;
}

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

.sticker-container * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.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 var(--sticker-peel-hover-easing, ease-out);
  filter: var(--sticker-shadow-filter);
}

.sticker-main > * {
  transform: rotate(calc(-1 * var(--peel-direction, 0deg)));
}

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

.sticker-container:hover .sticker-main,
.sticker-container.touch-active .sticker-main,
.sticker-peel:focus-visible .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)
  );
  transition-timing-function: var(--sticker-peel-easing, ease-out);
}

.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, 0deg));
  display: block;
  width: var(--sticker-width, 140px);
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.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 var(--sticker-peel-hover-easing, ease-out);
  pointer-events: none;
}

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

.sticker-container:hover .flap,
.sticker-container.touch-active .flap,
.sticker-peel:focus-visible .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);
  transition-timing-function: var(--sticker-peel-easing, ease-out);
}

.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(--sticker-light-flipped-filter);
}

.flap-image {
  transform: rotate(var(--sticker-rotate, 0deg));
  filter: var(--sticker-expand-filter);
  display: block;
  width: var(--sticker-width, 140px);
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

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

@media (hover: none) and (pointer: coarse) {
  .sticker-container {
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticker-main,
  .flap {
    transition: none !important;
  }
  .sticker-container:hover .sticker-main,
  .sticker-container.touch-active .sticker-main,
  .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-end),
      var(--sticker-start) var(--sticker-end)
    );
  }
  .sticker-container:hover .flap,
  .sticker-container.touch-active .flap {
    top: calc(-100% - var(--sticker-p) - var(--sticker-p));
  }
}