/* 3D Animated Flag Replacement for .fi */
.fi {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 1em;
  background-size: cover;
  border-radius: 4px;
  box-shadow:
    0 0 6px rgba(255,255,255,.1),
    inset 0 0 8px rgba(0,0,0,.3);
  animation: flagWave 2s ease-in-out infinite;
  transform-style: preserve-3d;
  perspective: 800px;
}

/* Wave animation for all flags */
@keyframes flagWave {
  0%,100% { transform: rotateY(0deg) rotateX(0deg); }
  25% { transform: rotateY(3deg) rotateX(2deg); }
  50% { transform: rotateY(-3deg) rotateX(-2deg); }
  75% { transform: rotateY(3deg) rotateX(1deg); }
}

/* Example flags using 3D texture (replace URLs with your CDN if needed) */
.fi-id { background-image: url('https://flagcdn.com/w320/id.png'); } /* Indonesia */
.fi-jp { background-image: url('https://flagcdn.com/w320/jp.png'); } /* Japan */
.fi-sg { background-image: url('https://flagcdn.com/w320/sg.png'); } /* Singapore */
.fi-cn { background-image: url('https://flagcdn.com/w320/cn.png'); } /* China */
.fi-my { background-image: url('https://flagcdn.com/w320/my.png'); } /* Malaysia */
.fi-us { background-image: url('https://flagcdn.com/w320/us.png'); } /* USA */
.fi-au { background-image: url('https://flagcdn.com/w320/au.png'); } /* Australia */

/* Optional subtle glossy overlay */
.fi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(0,0,0,.1));
  mix-blend-mode: overlay;
  border-radius: inherit;
}