/**
 * ENWRAP - reusable Peel Corner effect for Elementor.
 *
 * Atomic only assigns the classes below. The complete visual effect lives in
 * this file so it can be reused without rebuilding its geometry in Elementor.
 * Apply it only to a semantic link or a clickable box/container with one clear
 * destination. Non-clickable panels, standalone buttons and static heroes must
 * not receive this class.
 */
.enw-effect-peel {
  --peel-surface: var(--enw-peel-default-surface, #1c1d1f);
  --peel-reveal: var(--enw-peel-default-reveal, #0d0e0f);
  --peel-back: var(--enw-peel-default-back, #f4f4f1);
  --peel-rest: 0px;
  --peel-reach: var(--enw-peel-feature-reach, 104px);
  --peel-duration: var(--enw-peel-default-duration, 300ms);
  --peel-ease: var(--enw-peel-default-ease, ease);
  --peel-radius: var(--enw-peel-radius, 8px);
  --peel-arrow-color: var(--enw-peel-default-arrow, #080808);
  isolation: isolate;
}

/* Size modifiers selectable as additional Atomic Global Classes. */
.enw-peel-size-feature {
  --peel-reach: var(--enw-peel-feature-reach, 104px);
}

.enw-peel-size-compact {
  --peel-reach: var(--enw-peel-compact-reach, 52px);
}

/* Colour modifiers selectable as additional Atomic Global Classes. */
.enw-peel-skin-dark {
  --peel-surface: var(--enw-peel-dark-surface, #17191a);
  --peel-reveal: var(--enw-peel-dark-reveal, #080808);
  --peel-back: var(--enw-peel-dark-back, #f4f4f1);
  --peel-arrow-color: var(--enw-peel-dark-arrow, #080808);
}

.enw-peel-skin-signal {
  --peel-surface: var(--enw-peel-signal-surface, #c8ff24);
  --peel-reveal: var(--enw-peel-signal-reveal, #ffffff);
  --peel-back: var(--enw-peel-signal-back, #a2cb24);
  --peel-arrow-color: var(--enw-peel-signal-arrow, #080808);
  --peel-duration: var(--enw-peel-signal-duration, 200ms);
  --peel-ease: var(--enw-peel-signal-ease, ease-in-out);
}

.enw-peel-skin-paper {
  --peel-surface: var(--enw-peel-paper-surface, #f4f4f1);
  --peel-reveal: var(--enw-peel-paper-reveal, #080808);
  --peel-back: var(--enw-peel-paper-back, #f4f4f1);
  --peel-arrow-color: var(--enw-peel-paper-arrow, #080808);
}

.enw-effect-peel::before {
  position: absolute;
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
  z-index: 30;
  width: var(--peel-rest);
  height: var(--peel-rest);
  content: "";
  pointer-events: none;
  background: linear-gradient(
    315deg,
    var(--peel-reveal) 0%,
    var(--peel-reveal) 50%,
    var(--peel-back) 50%,
    var(--peel-surface) 60%
  );
  border-radius: var(--peel-radius) 0 0 0;
  box-shadow: -0.15em -0.15em 0.2em rgba(0, 0, 0, 0.34);
  transition:
    width var(--peel-duration) var(--peel-ease),
    height var(--peel-duration) var(--peel-ease);
}

@media (hover: hover) and (pointer: fine) {
  .enw-effect-peel:hover::before {
    width: var(--peel-reach);
    height: var(--peel-reach);
  }
}

.enw-effect-peel:focus-visible::before,
.enw-effect-peel:focus-within::before {
  width: var(--peel-reach);
  height: var(--peel-reach);
}

/*
 * Optional Elementor Icon widget placed inside a Peel-enabled card.
 * The icon itself remains editable in Elementor (icon and colour controls).
 */
.enw-effect-peel > .enw-peel-arrow,
.enw-effect-peel .enw-peel-arrow {
  --peel-arrow-size: var(--enw-peel-compact-arrow-size, 24px);
  position: absolute;
  right: var(--enw-peel-compact-arrow-right, 14px);
  bottom: var(--enw-peel-compact-arrow-bottom, 12px);
  z-index: 40;
  width: var(--peel-arrow-size);
  height: var(--peel-arrow-size);
  display: grid;
  place-items: center;
  margin: 0;
  opacity: 0;
  transform: translate(6px, 6px);
  pointer-events: none;
  transition:
    opacity 140ms ease 90ms,
    transform var(--peel-duration) var(--peel-ease);
}

.enw-effect-peel .enw-peel-arrow .elementor-icon {
  color: var(--peel-arrow-color) !important;
  font-size: var(--peel-arrow-size) !important;
  line-height: 1 !important;
}

/* Elementor may render an icon as a font glyph or as an SVG. */
.enw-effect-peel .enw-peel-arrow .elementor-icon i,
.enw-effect-peel .enw-peel-arrow .elementor-icon i::before {
  color: var(--peel-arrow-color) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.enw-effect-peel .enw-peel-arrow .elementor-icon svg,
.enw-effect-peel .enw-peel-arrow .elementor-icon svg path {
  color: var(--peel-arrow-color) !important;
  fill: var(--peel-arrow-color) !important;
}

.enw-effect-peel .enw-peel-arrow .elementor-icon svg {
  width: 1em !important;
  height: 1em !important;
}

/* Explicit Compact values also serve as the safe base for cards without a size modifier. */
.enw-effect-peel.enw-peel-size-compact .enw-peel-arrow {
  --peel-arrow-size: var(--enw-peel-compact-arrow-size, 24px);
  right: var(--enw-peel-compact-arrow-right, 14px);
  bottom: var(--enw-peel-compact-arrow-bottom, 12px);
}

/* Feature has an independent icon size and position. */
.enw-effect-peel.enw-peel-size-feature .enw-peel-arrow {
  --peel-arrow-size: var(--enw-peel-feature-arrow-size, 24px);
  right: var(--enw-peel-feature-arrow-right, 8px);
  bottom: var(--enw-peel-feature-arrow-bottom, 8px);
}

@media (hover: hover) and (pointer: fine) {
  .enw-effect-peel:hover .enw-peel-arrow,
  .enw-effect-peel:focus-within .enw-peel-arrow {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.enw-effect-peel:focus-visible .enw-peel-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* Touch stays visually neutral; tap performs the link action. */
@media (hover: none), (pointer: coarse) {
  .enw-effect-peel::before,
  .enw-effect-peel:focus-visible::before,
  .enw-effect-peel:focus-within::before {
    width: 0;
    height: 0;
  }

  .enw-effect-peel .enw-peel-arrow {
    opacity: 0;
    transform: translate(6px, 6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enw-effect-peel::before {
    transition-duration: 1ms;
  }

  .enw-effect-peel .enw-peel-arrow {
    transition-duration: 1ms;
  }
}