body {
  margin: 0;
  background-color: #222;
  min-height: 100vh;
}

.feather-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

.feather {
  width: 150px;
  height: 300px;
  background: linear-gradient(45deg, #0000ff, #add8e6, #ffd700, #f5deb3);
  background-size: 400% 400%;
  /* Using a SVG path to define a smooth, curved feather shape:
     M75,0           = Move to top-center
     C120,40,130,160,75,300  = Right-side smooth curve from tip to base
     C20,160,30,40,75,0       = Mirror left curve back to tip
     Z              = Close path  */
  clip-path: path('M75,0 C120,40,130,160,75,275 C20,160,30,40,75,0 Z');
   animation: gradient-animation 5s ease-in-out infinite;
  transform-origin: bottom center;
}

/* The shaft: a skinny, curved element starting from near the nib */
.shaft {
  position: absolute;
  /* Adjust bottom so the shaft “starts” a bit above the nib */
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;         /* Skinny width for the shaft */
  height: 200px;      /* Extend upward—adjust as needed */
  background: #daa520;/* A warm golden/brown tone for a natural look */
  /* The clip-path below gives it a slight curved, organic shape.
     The coordinate system here is based on a 6px by 150px box:
       • M3,0            : Start at the top-center.
       • C5,50,5,100,3,150: Curve outward to the right and back to center at the bottom.
       • C1,100,1,50,3,0  : Mirror the curve on the left side back up to the top.
       • Z               : Close the shape.
  */
  clip-path: path("M3,0 C5,50,5,100,3,250 C1,100,1,50,3,0 Z");
  z-index: 2;
}

.nib {
  position: absolute;
  bottom: -15px;   /* Slightly overlapping to simulate contact */
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 35px;
  background: gold;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Gradient Animation */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Feather Sway Animation */
@keyframes sway {
  0%, 100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(30deg);
  }
}