@extends('User.layout')
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    background: linear-gradient(135deg, #8a9ab5, #c9d9ea, #8a9ab5) !important;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* prevent horizontal scroll */
}
  .bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    animation: drift linear infinite;
  }

  .blob-1 {
    width: 480px; height: 480px;
    background: linear-gradient(135deg, #0a1a2f, #112d4e, #1b3c73);
    top: -15%; left: -8%;
    animation-duration: 22s;
  }
  .blob-2 {
    width: 420px; height: 420px;
    background: linear-gradient(135deg, #0a1a2f, #112d4e, #1b3c73);
    bottom: -12%; right: 0%;
    animation-duration: 28s;
    animation-direction: reverse;
  }
  .blob-3 {
    width: 360px; height: 360px;
    background: linear-gradient(135deg, #0a1a2f, #112d4e, #1b3c73);
    top: 55%; left: 45%;
    animation-duration: 34s;
    animation-delay: -10s;
  }

  @keyframes drift {
    0%   { transform: translate(0px,   0px)  scale(1);    }
    33%  { transform: translate(40px, -40px) scale(1.06); }
    66%  { transform: translate(-30px, 25px) scale(0.94); }
    100% { transform: translate(0px,   0px)  scale(1);    }
  }

  .card {
    position: relative;
    z-index: 1;
    /* width: 310px; */
    padding: 2rem 1.75rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(41, 86, 164, 0.947);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.18);
    transform-style: preserve-3d;
    transition: transform 0.08s ease-out;
    will-change: transform;
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.14) 0%,
      transparent 65%
    );
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
  }
  .card:hover::before { opacity: 1; }

  .card::after {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    pointer-events: none;
  }

  .content { position: relative; z-index: 1; }

  .vip-avatar {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    margin-bottom: 1.1rem;
    border: 1.5px solid rgba(255,255,255,0.22);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }

  h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
  }

  .role {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
  }

  p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    margin-bottom: 1.4rem;
  }

  .tags {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .tag {
    font-size: 0.68rem;
    padding: 4px 11px;
    border-radius: 100px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.04em;
  }
.card {
    border-color: rgba(59, 130, 246, 0.5) !important;
    background: linear-gradient(135deg, #0a1a2f, #112d4e, #1b3c73) !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6), 0 0 18px rgba(59, 130, 246, 0.5), 0 0 28px rgba(59, 130, 246, 0.4) !important;
}
  .stats {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }

  .stat {
    flex: 1;
    padding: 0.7rem 0;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  .stat:last-child { border-right: none; }

  .stat-num {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
  }

  .stat-lbl {
    display: block;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .btn-vip {
    display: block;
    width: 100%;
    padding: 0.72rem;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.15); /* soft blue fill */
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(170, 141, 36, 0.8);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.14);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
        box-shadow:
        0 0 8px rgba(59, 130, 246, 0.6),
        0 0 18px rgba(59, 130, 246, 0.5),
        0 0 28px rgba(59, 130, 246, 0.4);
        font-weight: bold;

  }
.btn-vi {
    display: block;
    width: 100%;
    padding: 0.72rem;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.15); /* soft blue fill */
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.14);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
        box-shadow:
        0 0 8px rgba(59, 130, 246, 0.6),
        0 0 18px rgba(59, 130, 246, 0.5),
        0 0 28px rgba(59, 130, 246, 0.4);
        font-weight: bold;

  }
   .btn-vi:hover {
    background: rgba(59, 130, 246, 0.15); /* soft blue fill */
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd; /* light blue text */

    transform: scale(1.08); /* zoom effect */
}
.justified-center {
    max-width: 420px;   /* controls line width */
    margin: 0 auto;     /* centers block */
    text-align: justify;
    text-align-last: center; /* center last line */
    line-height: 1.8;
}
 .btn-vip:hover {
    background: rgba(59, 130, 246, 0.15); /* soft blue fill */
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd; /* light blue text */

    transform: scale(1.08); /* zoom effect */
}
  .card::before {
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(30,144,255,0.25),
        transparent 70%
    );
       box-shadow:
        0 0 8px rgba(59, 130, 246, 0.6),
        0 0 18px rgba(59, 130, 246, 0.5),
        0 0 28px rgba(59, 130, 246, 0.4);
}

.hand-indicator {
    text-align: center;
    margin-bottom: 6px;
}

/* Hand icon */
.hand {
    font-size: 22px;
    display: inline-block;
    animation: handTap 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(59,130,246,0.6));
}
.hand-indicator-right {
    text-align: center;
    margin-bottom: 6px;
}

/* Right pointing hand */
.hand-right {
    font-size: 22px;
    display: inline-block;
    animation: handRight 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(59,130,246,0.6));
}

/* Right movement animation */
@keyframes handRight {
    0% {
        transform: translateX(0) scale(1);
        opacity: 0.7;
    }
    40% {
        transform: translateX(8px) scale(0.95);
        opacity: 1;
    }
    60% {
        transform: translateX(10px) scale(0.9);
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 0.7;
    }
}

/* Tap animation */
@keyframes handTap {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    40% {
        transform: translateY(6px) scale(0.95);
        opacity: 1;
    }
    60% {
        transform: translateY(6px) scale(0.9);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
}
/* Modal Background */
.custom-modal {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    border: none;
    border-radius: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(13, 110, 253, 0.4);
    animation: modalFade 0.4s ease;
}


/* Title */
.modal-title {
    font-weight: 600;
    font-size: 26px;
}

/* Text */
.modal-text {
    font-size: 15px;
    opacity: 0.9;
    line-height: 1.6;
}

/* Button */
.custom-modal .btn-light {
    border-radius: 30px;
    font-weight: 500;
    transition: 0.3s;
}

.custom-modal .btn-light:hover {
    background: #e2e6ea;
    transform: translateY(-2px);
}

/* Animation */
@keyframes modalFade {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Optional Glow Effect */
.custom-modal::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    top: -50px;
    left: -50px;
}

/* Responsive */
@media (max-width: 576px) {
    .modal-body {
        padding: 30px 20px;
    }

    .modal-title {
        font-size: 22px;
    }
}
</style>
@section('content')

<div class="container-fluid">

    <div class="row justify-content-center mt-5">
        <div class="col-md-4">

            <!-- <div class="bg">
                <div class="blob blob-1"></div>
                <div class="blob blob-2"></div>
                <div class="blob blob-3"></div>
            </div> -->

            <div class="card" id="card">
                <div class="content">
                    <div class="d-flex justify-content-between">
                        <div class="vip-avatar"><img
                                src="https://omigaipl.com/home_shoppy/assets/images/coin.png"
                                height="55px" width="55px"></div>
                        <div> <h2 class="text-center"
                                style="color: #2196f3 !important;">✨ Welcome to
                                Omiga 24 ✨
                            </h2>
                            <div class="role text-center">Innovation That Moves
                                You Forward</div></div>
                    </div>
                    <!-- <h2>Welcome to our New Platform</h2>
                    <div class="role">Innovation That Moves You Forward”</div> -->
                    <h6 class="text-center text-white fw-bold mb-1">Next-Level
                        Starts Here</h6>
                    <p class="justified-center mb-3">Step into your premium gold
                        investment platform. Designed for modern
                        investors, our platform offers real-time gold rates,
                        seamless transactions, and secure asset management—all
                        within a refined, user-friendly experience.
                    </p>
                    <!-- <div class="tags">
                        <span class="tag">Lorem Dummy</span>
                        <span class="tag"> Dummy</span>
                        <span class="tag"> Dummy</span>
                    </div> -->
                    <!-- <div class="stats">
                        <div class="stat">
                            <span class="stat-num">48</span>
                            <span class="stat-lbl">Data</span>
                        </div>
                        <div class="stat">
                            <span class="stat-num">12k</span>
                            <span class="stat-lbl">Followers</span>
                        </div>
                        <div class="stat">
                            <span class="stat-num">4.9</span>
                            <span class="stat-lbl">Users</span>
                        </div>
                    </div> -->
                    <div class="d-flex gap-2">



                        <div class="text-center w-100">
                            <div class="hand-indicator">
                                <div class="hand">👇</div>
                            </div>
                            <a href="#" data-bs-toggle="modal"
                                data-bs-target="#blueModal" class="btn-vip">Go
                                to OG24</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="modal fade" id="blueModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content custom-modal">
            <!-- <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-semibold mb-0"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div> -->


            <div class="modal-body text-center p-5">

                <h3 class="text-white mb-3">Access Your Premium Account</h3>
                <p class="modal-text justified-center">
                    Access to our premium platform is exclusively available to
                    users who have successfully activated a Green Package.
                </p>

                <div class="d-flex justify-content-between mt-3">
                   <div class="hand-indicator-right">
                                <div class="hand-right me-4">👉🏻</div>
                            </div>
                             <!--<a href="#" class="btn-vi me-2">Purchase</a>-->
                     <a href="https://og24plus.com/" class="btn-vi">Go to
                        OG24</a>

                </div>

            </div>

        </div>
    </div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function closeModal() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('blueModal'));
    modal.hide();
}
</script>

<script>
              const card = document.getElementById('card');

  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top)  / r.height;

    card.style.setProperty('--mx', (x * 100) + '%');
    card.style.setProperty('--my', (y * 100) + '%');

    const tiltX = (y - 0.5) * -14;
    const tiltY = (x - 0.5) *  14;
    card.style.transform = `perspective(900px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(1.02)`;
  });

  card.addEventListener('mouseleave', () => {
    card.style.transform = 'perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)';
  });
        </script>
@endsection