/* Perspective container */
    .perspective-wrapper {
      perspective: 1000px;
    }

    /* The animated text - Tilt on Self (roll from bottom with diagonal tilt like /) */
    .flip-box {

      /*padding: 30px 50px;*/
      text-align: center;
      
      /* Roll up from bottom with diagonal tilt - top-right back, bottom-left forward */
      transform: rotateX(-90deg) rotateZ(15deg);
      transform-origin: center bottom;
      opacity: 0;
      
      /* Animation */
      animation: tiltOnSelf 0.6s ease-out forwards;
      animation-play-state: paused;

    }

    .flip-box.animate {
      animation-play-state: running;
    }

    .flip-box p {
      font-size: 91.6328px;
      color: #333;
      font-weight: 300;
    }

    @keyframes tiltOnSelf {
      0% {
        transform: rotateX(-90deg) rotateZ(15deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
      }
    }

    /* Button to replay */
    .replay-btn {
      padding: 14px 32px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      background: #1a73e8;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .replay-btn:hover {
      background: #1557b0;
      transform: translateY(-2px);
    }

    .replay-btn:active {
      transform: translateY(0);
    }

    /* Variations */
    .variations {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
      width: 100%;
      max-width: 1000px;
      margin-top: 40px;
    }

    .variation-card {
      background: #f5f5f5;
      padding: 24px;
      border-radius: 12px;
      text-align: center;
      perspective: 800px;
    }

    .variation-card h3 {
      color: #333;
      font-size: 14px;
      margin-bottom: 20px;
      opacity: 0.7;
    }

    .variation-box {
      background: transparent;
      padding: 20px;
      border-radius: 8px;
      font-size: 16px;
      color: #333;
      font-weight: 300;
      text-align: center;
    }

    /* Tilt - roll from bottom with diagonal / tilt (roll on right) */
    .flip-down {
      transform: rotateX(-90deg) rotateZ(15deg);
      transform-origin: center bottom;
      opacity: 0;
      animation: tiltBottomForward 0.6s ease-out forwards;
      animation-play-state: paused;
    }

    .flip-down.animate {
      animation-play-state: running;
    }

    @keyframes tiltBottomForward {
      0% {
        transform: rotateX(-90deg) rotateZ(15deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
      }
    }

    /* Tilt - roll from bottom with diagonal \ tilt (roll on left) */
    .flip-up {
      transform: rotateX(-90deg) rotateZ(-15deg);
      transform-origin: center bottom;
      opacity: 0;
      animation: tiltTopForward 0.6s ease-out forwards;
      animation-play-state: paused;
    }

    .flip-up.animate {
      animation-play-state: running;
    }

    @keyframes tiltTopForward {
      0% {
        transform: rotateX(-90deg) rotateZ(-15deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
      }
    }

    /* Tilt - subtle diagonal tilt (right side roll) */
    .flip-left {
      transform: rotateX(-90deg) rotateZ(5deg);
      transform-origin: center bottom;
      opacity: 0;
      animation: tiltExtreme 0.6s ease-out forwards;
      animation-play-state: paused;
    }

    .flip-left.animate {
      animation-play-state: running;
    }

    @keyframes tiltExtreme {
      0% {
        transform: rotateX(-90deg) rotateZ(5deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
      }
    }

    /* Tilt - more extreme diagonal tilt (right side roll) */
    .flip-right {
      transform: rotateX(-90deg) rotateZ(30deg);
      transform-origin: center bottom;
      opacity: 0;
      animation: tiltSubtle 0.6s ease-out forwards;
      animation-play-state: paused;
    }

    .flip-right.animate {
      animation-play-state: running;
    }

    @keyframes tiltSubtle {
      0% {
        transform: rotateX(-90deg) rotateZ(30deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
      }
    }

    /* Tilt - roll only (no diagonal) */
    .flip-card {
      transform: rotateX(-90deg);
      transform-origin: center bottom;
      opacity: 0;
      animation: tiltCombined 0.6s ease-out forwards;
      animation-play-state: paused;
    }

    .flip-card.animate {
      animation-play-state: running;
    }

    @keyframes tiltCombined {
      0% {
        transform: rotateX(-90deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg);
        opacity: 1;
      }
    }

    /* Tilt - roll with diagonal and overshoot (right side roll) */
    .flip-bounce {
      transform: rotateX(-90deg) rotateZ(15deg);
      transform-origin: center bottom;
      opacity: 0;
      animation: tiltOvershoot 0.8s ease-out forwards;
      animation-play-state: paused;
    }

    .flip-bounce.animate {
      animation-play-state: running;
    }

    @keyframes tiltOvershoot {
      0% {
        transform: rotateX(-90deg) rotateZ(15deg);
        opacity: 0;
      }
      70% {
        transform: rotateX(8deg) rotateZ(-2deg);
        opacity: 1;
      }
      85% {
        transform: rotateX(-3deg) rotateZ(1deg);
      }
      100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
      }
    }