/* Circle: mask to circular shape */
.circle-clip {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: circle(50%);
  /* Circle at center, 50% radius */
}

/* Circle with offset position */
.circle-positioned {
  clip-path: circle(50px at 100px 100px);
  /* 50px radius at coordinates (100px, 100px) */
}

/* Ellipse: oval shape */
.ellipse-clip {
  width: 300px;
  height: 200px;
  background: #e74c3c;
  clip-path: ellipse(50% 40%);
  /* 50% width, 40% height */
}

/* Polygon: custom shape with vertices */
.triangle {
  width: 200px;
  height: 200px;
  background: #2ecc71;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  /* Triangle pointing up */
}

/* Square cut to hexagon */
.hexagon {
  width: 200px;
  height: 200px;
  background: #f39c12;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

/* Pentagon */
.pentagon {
  clip-path: polygon(
    50% 0%,
    100% 38%,
    82% 100%,
    18% 100%,
    0% 38%
  );
}

/* Inset: rectangular crop */
.inset-crop {
  clip-path: inset(20px 30px 40px 10px);
  /* Top Right Bottom Left, like padding/margin */
}

/* Inset with rounded corners */
.inset-rounded {
  clip-path: inset(20px round 10px);
  /* 20px crop, 10px border radius */
}

/* Circular image (profile picture) */
.profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* OR */
  clip-path: circle(50%);
}

/* Image with custom shape */
.shaped-image {
  width: 300px;
  height: 300px;
  background-image: url('image.jpg');
  background-size: cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
  /* Diagonal bottom edge */
}

/* Spotlight effect */
@keyframes spotlight {
  from {
    clip-path: circle(0px at 50% 50%);
  }
  to {
    clip-path: circle(300px at 50% 50%);
  }
}

.spotlight-reveal {
  animation: spotlight 2s ease forwards;
  /* Expands circular reveal */
}

/* Diagonal text reveal */
.diagonal-reveal {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  /* Triangle hides upper right */
}

/* Diamond shape */
.diamond {
  width: 200px;
  height: 200px;
  background: #9b59b6;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Star shape */
.star {
  width: 200px;
  height: 200px;
  background: #f39c12;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

/* Banner with bottom wave */
.wavy-banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 85%,
    50% 95%,
    0% 85%
  );
}

/* Rounded corners alternative */
.rounded-clip {
  clip-path: inset(0px round 20px);
  /* Same as border-radius: 20px */
}

/* Visible only in center (vignette-like) */
.center-visible {
  clip-path: ellipse(50% 50% at 50% 50%);
  /* Ellipse covering center area */
}

/* Animated reveal (circle expands) */
@keyframes reveal-circle {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(100% at 50% 50%); }
}

.reveal {
  animation: reveal-circle 1.5s ease forwards;
}

/* Animated clip-path transition */
.shape-transition {
  clip-path: circle(50%);
  transition: clip-path 0.6s ease;
}

.shape-transition:hover {
  clip-path: ellipse(100% 50% at 50% 50%);
  /* Morphs from circle to ellipse */
}

/* Polygon animation (rotate) */
@keyframes rotate-clip {
  from { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
  to { clip-path: polygon(100% 0%, 50% 50%, 100% 100%, 50% 50%); }
}

.rotating-shape {
  animation: rotate-clip 2s ease infinite;
}

/* Drawer slide animation */
@keyframes drawer-open {
  from { clip-path: inset(0% 100% 0% 0%); }
  to { clip-path: inset(0% 0% 0% 0%); }
}

.drawer {
  animation: drawer-open 0.4s ease forwards;
  /* Reveals from right to left */
}

/* Image focus zoom */
@keyframes focus-zoom {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}

.zoom-focus {
  animation: focus-zoom 2s ease forwards;
}

/* Using SVG clipPath element */
.masked-with-svg {
  clip-path: url(#custom-clip);
  /* References SVG clipPath with id="custom-clip" */
}

/* In HTML (SVG definition) */
/*
<svg style="display: none;">
  <defs>
    <clipPath id="custom-clip">
      <polygon points="50,0 100,25 100,75 50,100 0,75 0,25" />
    </clipPath>
  </defs>
</svg>
*/

/* SVG path clip */
.path-clip {
  clip-path: path('M 0,0 L 100,0 L 50,100 Z');
  /* SVG path string defines the clip shape */
}

/* More complex SVG path */
.curved-clip {
  clip-path: url(#curved-shape);
  /* SVG can define bezier curves for smooth shapes */
}

/* Clip-path is performant and GPU-accelerated */
.performant {
  clip-path: circle(50%);
  /* Hardware accelerated */
}

/* Use will-change if animating */
.animated-clip {
  will-change: clip-path;
  animation: reveal 2s ease forwards;
}

/* Browser support is good (all modern browsers) */
.supported {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  /* Works in Chrome, Firefox, Safari, Edge */
}

/* No vendor prefixes needed */

/* Complex shapes may have slight performance impact */
.complex {
  /* Many polygon points = slightly slower */
  clip-path: polygon(...many points...);
}

.simple {
  /* Simple shapes are fastest */
  clip-path: circle(50%);
}

/* Combine with other effects */
.layered {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  filter: brightness(1.1);
  /* Clip-path works well with shadows and filters */
}