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

<style>

/* Dark particles */
.redirect-card::before{
    content:"";
    position:fixed;
    inset:0;
    width:200%;
    height:200%;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:40px 40px;
    animation:bgMove 20s linear infinite;
    z-index:0;
    pointer-events:none;
}

/* GOLD FLOATING PARTICLES */
.gold-particles,
.gold-particles::before,
.gold-particles::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.gold-particles{
    background:
        radial-gradient(circle, rgba(255,215,0,.9) 0 2px, transparent 3px) 10% 100% / 120px 120px,
        radial-gradient(circle, rgba(255,200,0,.7) 0 1.5px, transparent 3px) 40% 100% / 180px 180px,
        radial-gradient(circle, rgba(255,230,120,.8) 0 2px, transparent 3px) 75% 100% / 140px 140px;
    animation:goldRise1 12s linear infinite;
}

.gold-particles::before{
    background:
        radial-gradient(circle, rgba(255,215,0,.8) 0 2px, transparent 3px) 20% 100% / 160px 160px,
        radial-gradient(circle, rgba(255,240,160,.8) 0 1.5px, transparent 3px) 60% 100% / 130px 130px,
        radial-gradient(circle, rgba(255,190,0,.7) 0 2px, transparent 3px) 90% 100% / 170px 170px;
    animation:goldRise2 16s linear infinite;
}

.gold-particles::after{
    background:
        radial-gradient(circle, rgba(255,215,0,.7) 0 2px, transparent 3px) 15% 100% / 150px 150px,
        radial-gradient(circle, rgba(255,225,80,.9) 0 2px, transparent 3px) 55% 100% / 190px 190px,
        radial-gradient(circle, rgba(255,245,180,.8) 0 1.5px, transparent 3px) 85% 100% / 140px 140px;
    animation:goldRise3 20s linear infinite;
}

/* Section */
.redirect-section{
    min-height:85vh;
    display:flex;
    align-items:center;
    position:relative;
    z-index:3;
}

/* Card */
.redirect-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:radial-gradient(
        ellipse at top,
        hsl(18 35% 10%) 0%,
        hsl(0 0% 4%) 60%
    );
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 35px rgba(255,215,0,.08);
    animation:floatCard 3s ease-in-out infinite;
}

/* Shine */
.redirect-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
    transform:skewX(-25deg);
    animation:shineMove 3s linear infinite;
}

/* Badge */
.new-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    color:#111;
    background:linear-gradient(
        135deg,
        hsl(38 60% 38%) 0%,
        hsl(43 75% 55%) 35%,
        hsl(48 95% 70%) 50%,
        hsl(43 75% 55%) 65%,
        hsl(38 60% 38%) 100%
    );
    animation:pulseGlow 1.8s infinite;
}

.redirect-title{
    color:#fff;
    font-size:2rem;
    font-weight:800;
}

.redirect-text{
    color:rgba(255,255,255,.75);
    max-width:620px;
    margin:auto;
}

.redirect-btn{
    display:inline-block;
    text-decoration:none;
    padding:14px 30px;
    border-radius:60px;
    font-weight:800;
    color:#111;
    background:linear-gradient(
        135deg,
        hsl(38 60% 38%) 0%,
        hsl(43 75% 55%) 35%,
        hsl(48 95% 70%) 50%,
        hsl(43 75% 55%) 65%,
        hsl(38 60% 38%) 100%
    );
    box-shadow:0 10px 25px rgba(255,215,0,.25);
    animation:bounceBtn 1.8s infinite;
    transition:.3s;
}

.redirect-btn:hover{
    transform:translateY(-3px) scale(1.03);
    color:#111;
}

/* Animations */
@keyframes bgMove{
    from{transform:translate(0,0);}
    to{transform:translate(-200px,-200px);}
}

@keyframes goldRise1{
    from{transform:translateY(100vh);}
    to{transform:translateY(-100vh);}
}

@keyframes goldRise2{
    from{transform:translateY(100vh);}
    to{transform:translateY(-100vh);}
}

@keyframes goldRise3{
    from{transform:translateY(100vh);}
    to{transform:translateY(-100vh);}
}

@keyframes floatCard{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}

@keyframes shineMove{
    0%{left:-120%;}
    100%{left:140%;}
}

@keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 rgba(255,215,0,0);}
    50%{box-shadow:0 0 20px rgba(255,215,0,.45);}
}

@keyframes bounceBtn{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}

/* Mobile */
@media(max-width:768px){
    .redirect-title{font-size:1.45rem;}
    .redirect-btn{
        width:100%;
        padding:14px 20px;
    }
    .redirect-card{
        padding:30px 20px !important;
    }
}
</style>
@section('content')

<!-- Gold particles -->
<div class="gold-particles"></div>

<div class="container redirect-section">
    <div class="row justify-content-center w-100">
        <div class="col-lg-6 col-md-10 col-12">

            <div class="redirect-card text-center p-4 p-md-5">

                <div class="new-badge mb-3">
                    🚀 NEW WEBSITE LIVE
                </div>

                <h2 class="redirect-title mb-3">
                    Experience Our Brand New Website
                </h2>

                <p class="redirect-text mb-4">
                    Faster performance, premium design, better user experience,
                    and exciting new features are waiting for you.
                </p>

                <a href="https://og3plus.com/" target="_blank" class="redirect-btn">
                    Visit New Website →
                </a>

            </div>

        </div>
    </div>
</div>
@endsection