@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak]{display:none!important}

.text-metal{
    background-image: linear-gradient(90deg,#6b5200 0%,#ffd700 18%,#fff1a8 34%,#ffd700 52%,#b8860b 70%,#ffd700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-ninja-lines{
    background-image:
        radial-gradient(800px 340px at 10% 10%, rgba(255,215,0,0.09), transparent 55%),
        radial-gradient(820px 360px at 90% 20%, rgba(128,0,0,0.10), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(25deg, rgba(255,215,0,0.05) 0px, rgba(255,215,0,0.05) 1px, transparent 1px, transparent 22px);
}

.ninja-logo{
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,215,0,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 50px -40px rgba(255,215,0,0.45),
        0 20px 60px -45px rgba(0,0,0,0.95);
    position: relative;
    overflow: hidden;
}

.ninja-logo::before{
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 180deg, rgba(255,215,0,0.0), rgba(255,215,0,0.22), rgba(255,215,0,0.0));
    animation: ninjaSpin 8s linear infinite;
    filter: blur(0.2px);
}

.ninja-logo > *{
    position: relative;
    z-index: 1;
}

@keyframes ninjaSpin{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

@keyframes ninjaEnter{
    0%{opacity:0; transform: translate3d(0,10px,0) scale(0.995); filter: blur(2px);}
    100%{opacity:1; transform: translate3d(0,0,0) scale(1); filter: blur(0);}
}

.ninja-page{
    animation: ninjaEnter 280ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.ninja-btn{
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    position: relative;
    overflow: hidden;
}

.ninja-btn::before{
    content: "";
    position: absolute;
    inset: -80% -40%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg);
    opacity: 0.0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

.ninja-btn:hover::before{
    opacity: 1;
    animation: ninjaSwipe 380ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes ninjaSwipe{
    0%{transform: translate3d(-25%,0,0) rotate(18deg); opacity: 0.0;}
    25%{opacity: 0.6;}
    100%{transform: translate3d(25%,0,0) rotate(18deg); opacity: 0.0;}
}

.ninja-card{
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 24px 90px -60px rgba(255,215,0,0.22),
        0 30px 100px -80px rgba(0,0,0,0.95);
}

.ninja-divider{
    height: 1px;
    background-image: linear-gradient(90deg, rgba(255,215,0,0.0), rgba(255,215,0,0.22), rgba(255,215,0,0.0));
}

.ninja-tip{
    position: relative;
}

.ninja-tip::after{
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translate3d(0,-50%,0);
    background: rgba(26,26,26,0.86);
    border: 1px solid rgba(255,215,0,0.14);
    color: rgba(255,255,255,0.92);
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 22px 70px -50px rgba(0,0,0,0.95);
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
}

.ninja-tip::before{
    content: "";
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    width: 10px;
    height: 10px;
    background: rgba(26,26,26,0.86);
    border-left: 1px solid rgba(255,215,0,0.14);
    border-top: 1px solid rgba(255,215,0,0.14);
    transform: translate3d(0,-50%,0) rotate(-45deg);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}

.ninja-tip:hover::after,
.ninja-tip:hover::before{
    opacity: 1;
    animation: ninjaSmoke 260ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes ninjaSmoke{
    0%{opacity:0; transform: translate3d(0,-50%,0) scale(0.98); filter: blur(14px);}
    100%{opacity:1; transform: translate3d(0,-50%,0) scale(1); filter: blur(0);}
}

@keyframes kvFloat{
    0%{transform: translate3d(0,0,0);}
    50%{transform: translate3d(0,-10px,0);}
    100%{transform: translate3d(0,0,0);}
}

.kv-float{
    animation: kvFloat 6.5s ease-in-out infinite;
}

.kv-glow-card{
    position: relative;
}

.kv-glow-card::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(99,102,241,0.55), rgba(217,70,239,0.35), rgba(34,211,238,0.22));
    opacity: 0.55;
    filter: blur(0.2px);
    pointer-events: none;
}

.kv-glow-card::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: rgba(0,0,0,0.25);
    pointer-events: none;
}

.kv-glow-card > *{
    position: relative;
    z-index: 1;
}