css shadow

<div class="demo">
  <div class="text-3d">Shadow</div>
</div>

<div class="demo">
  <div class="wave-container">
    <span style="--i:0">F</span>
    <span style="--i:1">L</span>
    <span style="--i:2">O</span>
    <span style="--i:3">A</span>
    <span style="--i:4">T</span>
    <span style="--i:5">I</span>
    <span style="--i:6">N</span>
    <span style="--i:7">G</span>
  </div>
</div>

    /* ════════════════════════════════
       DEMO 1 — Static 3D lift shadow
       (이미지 상단 span 스타일)
    ════════════════════════════════ */
    .text-3d {
      font-size: clamp(100px, 20vw, 150px);
      color: #ffffff;
      letter-spacing: 0.05em;
      text-transform: uppercase;


      text-shadow:
        0  1px 0 #7aaac8,
        0  2px 0 #7aaac8,
        0  3px 0 #7aaac8,
        0  4px 0 #7aaac8,
        0  5px 0 #7aaac8,
        0  6px 0 transparent,
        0  7px 0 transparent,
        0  8px 0 transparent,
        0  9px 0 transparent,
        0 10px 10px rgba(30, 80, 130, 0.35);

      /* animation: move .4s ease-in-out infinite alternate; */
    }

    /* ════════════════════════════════
       DEMO 2 — Staggered wave animation
       (이미지 하단 span + keyframes)
    ════════════════════════════════ */
    .wave-container {
      display: flex;
      gap: 0;
    }

    .wave-container span {
      font-size: clamp(100px, 20vw, 150px);
      color: #ffffff;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      display: inline-block;
      
      text-shadow:
        0  2px 0 #7aaac8,
        0  3px 0 #7aaac8,
        0  4px 0 #7aaac8,
        0  5px 0 #7aaac8,
        0  6px 0 transparent,
        0  7px 0 transparent,
        0  8px 0 transparent,
        0  9px 0 transparent,
        0 10px 10px rgba(30, 80, 130, 0.35);

      animation: move .9s ease-in-out infinite alternate;
      animation-delay: calc(var(--i) * .1s);
    }

  

    /* ═══════════════════
       @keyframes move
    ═══════════════════ */
    @keyframes move {
      to {
        top: -5px;
        position: relative;

        text-shadow:
          0  1px 0 #9bbdd6,
          0  2px 0 #9bbdd6,
          0  3px 0 #9bbdd6,
          0  4px 0 #9bbdd6,
          0  5px 0 #9bbdd6,
          0  6px 0 #9bbdd6,
          0  7px 0 #9bbdd6,
          0  8px 0 #9bbdd6,
          0  9px 0 #9bbdd6,
          0 30px 20px rgba(20, 60, 110, 0.25);
      }
    }