/* ════════════════════════════════════════════════════════
   VYPERA — style.css
   Premium Luxury Upgrade — Full Layered System
   Production Hardened — Radial Arsenal Wheel, State-Safe
   Accessibility + Reduced Motion + Responsive Complete
════════════════════════════════════════════════════════ */

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

:root{
    --charcoal:#1A1A1A;
    --white:#FFFFFF;
    --cream:#F4EBD9;
    --gold:#C5A059;
    --surface:rgba(255,255,255,.025);
    --surface-2:rgba(255,255,255,.04);
    --border:rgba(255,255,255,.06);
    --border-gold:rgba(197,160,89,.14);
    --shadow-soft:0 12px 40px rgba(0,0,0,.25);
    --shadow-medium:0 20px 60px rgba(0,0,0,.35);
    --shadow-large:0 40px 100px rgba(0,0,0,.45);
    --radius:28px;
    --ease-silk:cubic-bezier(.16,1,.3,1);
}

/* =====================================================
   Base
===================================================== */
html{
    scroll-behavior:auto;
    font-size:16px;
    background:#000;
    color:var(--cream);
}

body{
    font-family:"Georgia","Times New Roman",serif;
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
    background:radial-gradient(circle at top,rgba(197,160,89,.05),transparent 45%),#000;
    color:var(--cream);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

::selection{
    background:rgba(197,160,89,.28);
    color:#fff;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
}

/* =====================================================
   PRELOADER
===================================================== */
.preloader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1.6rem;
    background:radial-gradient(circle,rgba(197,160,89,.05),transparent 60%),#000;
    transition:opacity .7s var(--ease-silk),visibility .7s var(--ease-silk);
}

.preloader--hidden{
    opacity:0;
    pointer-events:none;
    visibility:hidden;
}

.preloader__video{
    width:clamp(120px,30vw,220px);
    height:auto;
    object-fit:contain;
    opacity:1;
    transform:translateY(0);
    transition:opacity .6s ease,transform .6s ease;
}

.preloader__video--fade{
    opacity:0;
    transform:translateY(-10px);
}

.preloader__bar{
    width:clamp(180px,32vw,280px);
    height:3px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 10px rgba(255,255,255,.05);
}

.preloader__fill{
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#ffffff,#F4EBD9,#C5A059);
    box-shadow:0 0 14px rgba(197,160,89,.45);
    transition:width .25s linear;
}

.preloader__text{
    font-family:"Inter",sans-serif;
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
}

/* =====================================================
   HERO
===================================================== */
.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}

#hero-canvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    display:block;
    z-index:1;
}

#overlay-canvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    display:block;
    z-index:2;
    opacity:0;
    pointer-events:none;
}

.hero__bg{
    position:fixed;
    inset:0;
    z-index:0;
    opacity:0;
    pointer-events:none;
    background:radial-gradient(circle at top,rgba(197,160,89,.06),transparent 60%),#000;
}

.vypera-v{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    object-fit:cover;
    z-index:10;
    opacity:0;
    pointer-events:none;
    filter:drop-shadow(0 0 45px rgba(197,160,89,.08));
}

/* =====================================================
   LIGHT RAYS
===================================================== */
#lightrays-canvas{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display:block;
    z-index:15;
    opacity:0;
    pointer-events:none;
    transition:opacity 1.3s var(--ease-silk);
}

#lightrays-canvas.active{
    opacity:1;
}

/* =====================================================
   CONTENT
===================================================== */
.content{
    position:relative;
    z-index:10;
    background:transparent;
    padding:clamp(5rem,8vw,8rem) clamp(1.5rem,4vw,3rem);
}

/* =====================================================
   SECTION HEADINGS
===================================================== */
.section__heading{
    font-family:"Georgia",serif;
    font-weight:300;
    font-size:clamp(2rem,4vw,3rem);
    letter-spacing:.05em;
    color:var(--white);
    text-align:center;
    margin-bottom:clamp(3rem,5vw,4rem);
    text-wrap:balance;
    text-shadow:0 1px 0 rgba(255,255,255,.25),0 0 12px rgba(197,160,89,.12),0 15px 40px rgba(0,0,0,.45);
}

/* =====================================================
   ETHOS
===================================================== */
.ethos{
    max-width:900px;
    margin:0 auto clamp(7rem,10vw,10rem);
    padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4rem);
    text-align:center;
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
    border:1px solid var(--border);
    backdrop-filter:blur(14px);
    box-shadow:var(--shadow-medium);
}

.ethos::before{
    content:"";
    position:absolute;
    top:-40%;
    left:50%;
    width:500px;
    height:500px;
    transform:translateX(-50%);
    background:radial-gradient(circle,rgba(197,160,89,.07),transparent 70%);
    pointer-events:none;
}

.ethos__small{
    font-family:"Inter",sans-serif;
    font-weight:300;
    font-size:clamp(.82rem,1.3vw,1rem);
    text-transform:uppercase;
    letter-spacing:.30em;
    color:rgba(255,255,255,.42);
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(40px);
    filter:blur(8px);
    transition:opacity .9s var(--ease-silk),transform .9s var(--ease-silk),filter .9s var(--ease-silk);
}

.ethos__small.visible{
    opacity:1;
    transform:none;
    filter:blur(0);
}

.ethos__big{
    font-family:"Georgia",serif;
    font-weight:700;
    font-size:clamp(2.5rem,7vw,5.6rem);
    line-height:1.05;
    letter-spacing:.02em;
    text-wrap:balance;
    color:#fff;
    text-shadow:0 1px 0 rgba(255,255,255,.25),0 0 20px rgba(197,160,89,.12),0 25px 60px rgba(0,0,0,.45);
    opacity:0;
    transform:translateY(50px) scale(.98);
    filter:blur(10px);
    transition:opacity 1.1s var(--ease-silk),transform 1.1s var(--ease-silk),filter 1.1s var(--ease-silk);
}

.ethos__big.visible{
    opacity:1;
    transform:none;
    filter:blur(0);
}

/* =====================================================
   WHO IS VYPERA
===================================================== */
.who{
    max-width:900px;
    margin:0 auto clamp(7rem,10vw,10rem);
    padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4rem);
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
    border:1px solid var(--border-gold);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow-large);
}

.who::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top,rgba(197,160,89,.05),transparent 65%);
    pointer-events:none;
}

.who__heading{
    position:relative;
    z-index:2;
    margin-bottom:3rem;
    text-align:center;
    font-family:"Georgia",serif;
    font-weight:700;
    font-size:clamp(3rem,7vw,6rem);
    line-height:1;
    letter-spacing:.03em;
    background:linear-gradient(180deg,#ffffff 0%,#fafafa 12%,#dddddd 26%,#a5a5a5 42%,#ffffff 58%,#7d7d7d 82%,#f7f7f7 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 2px 0 rgba(255,255,255,.6)) drop-shadow(0 5px 0 rgba(150,150,150,.8)) drop-shadow(0 10px 8px rgba(0,0,0,.35)) drop-shadow(0 22px 24px rgba(0,0,0,.35)) drop-shadow(0 45px 45px rgba(0,0,0,.25));
    transform:perspective(900px) rotateX(10deg);
    opacity:0;
    transition:opacity 1.3s var(--ease-silk);
}

.who__heading.visible{
    opacity:1;
}

.who__text{
    opacity:0;
    transform:translateY(45px);
    filter:blur(8px);
    transition:opacity .9s var(--ease-silk),transform .9s var(--ease-silk),filter .9s var(--ease-silk);
}

.who__text.visible{
    opacity:1;
    transform:none;
    filter:blur(0);
}

.who__text p{
    max-width:68ch;
    margin:0 auto 1.8rem;
    font-family:"Inter",sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.4vw,1.15rem);
    line-height:2;
    color:rgba(255,255,255,.74);
    text-wrap:pretty;
}

/* =====================================================
   THE ARSENAL — GTA V Weapon Wheel (Radial Inertia)
===================================================== */
.arsenal{
    position:relative;
    max-width:1000px;
    margin:0 auto clamp(8rem,12vw,12rem);
    padding:0 1rem;
    text-align:center;
}

.arsenal__subtitle{
    font-family:"Inter",sans-serif;
    font-size:0.65rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:rgba(197,160,89,0.5);
    margin-top:-2rem;
    margin-bottom:0.5rem;
}

.arsenal__disclaimer{
    font-family:"Inter",sans-serif;
    font-size:0.6rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(197,160,89,0.35);
    margin-top:0;
    margin-bottom:2.5rem;
    font-style:italic;
}

.arsenal-wheel{
    position:relative;
    width:100%;
    height:clamp(420px,60vh,560px);
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1400px;
    perspective-origin:50% 50%;
    overflow:hidden;
    touch-action:pan-y;
    cursor:grab;
}

.arsenal-wheel.is-dragging{
    cursor:grabbing;
}

.arsenal-card{
    position:absolute;
    top:0;
    left:50%;
    width:clamp(260px,55vw,380px);
    padding:2.5rem 2rem;
    border-radius:var(--radius);
    background:rgba(26,26,26,0.75);
    border:1px solid rgba(197,160,89,0.2);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow-medium);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.2rem;
    cursor:pointer;
    user-select:none;
    transform-style:preserve-3d;
    will-change:transform,opacity;
    transform:translate(-50%,0);
    transition:box-shadow 0.4s var(--ease-silk);
}

.arsenal-card.is-active{
    border-color:rgba(197,160,89,0.5);
    box-shadow:var(--shadow-large),0 0 80px rgba(197,160,89,0.12);
    filter:drop-shadow(0 0 calc(var(--wheel-glow,1) * 40px) rgba(255,255,255,0.35));
}

.arsenal-card.is-active .arsenal-card__glow{
    opacity:1;
}

.arsenal-card.is-side{
    filter:saturate(0.7) brightness(0.8);
}

.arsenal-card.is-side .arsenal-card__desc,
.arsenal-card:not(.is-active) .arsenal-card__desc{
    opacity:0;
}

.arsenal-card.is-side .arsenal-card__btn,
.arsenal-card:not(.is-active) .arsenal-card__btn{
    opacity:0;
    pointer-events:none;
}

.arsenal-card__glow{
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:radial-gradient(circle at center,rgba(197,160,89,0.15),transparent 70%);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.5s var(--ease-silk);
}

.arsenal-card__logo{
    width:clamp(70px,12vw,100px);
    height:clamp(70px,12vw,100px);
    border-radius:50%;
    overflow:hidden;
    background:rgba(0,0,0,0.4);
    border:1px solid rgba(197,160,89,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}

.arsenal-card__logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.arsenal-card__name{
    font-family:"Georgia",serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.6rem);
    color:var(--white);
    letter-spacing:0.03em;
}

.arsenal-card__desc{
    font-family:"Inter",sans-serif;
    font-weight:300;
    font-size:clamp(0.8rem,1.1vw,0.9rem);
    color:rgba(244,235,217,0.55);
    line-height:1.7;
    max-width:34ch;
    text-align:center;
    transition:opacity 0.3s ease;
}

.arsenal-card__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.6rem 1.8rem;
    border-radius:999px;
    background:rgba(197,160,89,0.12);
    border:1px solid rgba(197,160,89,0.35);
    font-family:"Inter",sans-serif;
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
    text-decoration:none;
    transition:background 0.3s var(--ease-silk),color 0.3s var(--ease-silk),transform 0.3s var(--ease-silk),border-color 0.3s var(--ease-silk),box-shadow 0.3s var(--ease-silk);
}

.arsenal-card__btn:hover{
    background:rgba(197,160,89,0.25);
    color:var(--white);
    border-color:var(--gold);
    box-shadow:0 0 24px rgba(197,160,89,0.2);
    transform:translateY(-2px);
}

.arsenal::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:600px;
    height:600px;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    transition:background 0.6s var(--ease-silk);
}

.arsenal[data-active="tikiz"]::before{
    background:radial-gradient(circle,rgba(255,215,0,0.06),transparent 70%);
}

.arsenal[data-active="sukkly"]::before{
    background:radial-gradient(circle,rgba(244,235,217,0.05),transparent 70%);
}

.arsenal[data-active="mystery"]::before{
    background:radial-gradient(circle,rgba(197,160,89,0.07),transparent 70%);
}

/* =====================================================
   CONTACT VYPERA
===================================================== */
.contact{
    max-width:700px;
    margin:0 auto clamp(7rem,10vw,10rem);
    text-align:center;
}

.contact__ctas{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    justify-content:center;
}

.contact-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
    padding:1.1rem 2.2rem;
    border-radius:16px;
    background:rgba(26,26,26,0.75);
    border:1px solid rgba(197,160,89,0.25);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    font-family:"Inter",sans-serif;
    font-size:0.85rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gold);
    text-decoration:none;
    transition:background 0.3s var(--ease-silk),border-color 0.3s var(--ease-silk),transform 0.3s var(--ease-silk),box-shadow 0.3s var(--ease-silk);
    box-shadow:var(--shadow-soft);
}

.contact-cta:hover{
    background:rgba(26,26,26,0.92);
    border-color:var(--gold);
    transform:translateY(-2px);
    box-shadow:var(--shadow-medium),0 0 32px rgba(197,160,89,0.1);
}

.contact-cta__icon{
    width:22px;
    height:22px;
    flex-shrink:0;
}

.contact-cta--whatsapp .contact-cta__icon{
    color:#25D366;
}

.contact-cta--email .contact-cta__icon{
    stroke:var(--gold);
}

.contact-cta__label{
    color:var(--white);
    font-weight:400;
}

.contact-cta__arrow{
    width:18px;
    height:18px;
    stroke:var(--gold);
    margin-left:0.25rem;
    transition:transform 0.3s var(--ease-silk);
}

.contact-cta:hover .contact-cta__arrow{
    transform:translateX(3px);
}

/* =====================================================
   FOOTER
===================================================== */
.footer{
    position:relative;
    text-align:center;
    padding:3rem 1rem 2rem;
    border-top:1px solid rgba(197,160,89,.10);
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.02));
}

.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(197,160,89,.45),transparent);
}

.footer p{
    font-family:"Inter",sans-serif;
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(244,235,217,.35);
}

/* =====================================================
   SCROLL QUALITY + FOCUS
===================================================== */
section{
    scroll-margin-top:120px;
}

a:focus-visible{
    outline:1px solid rgba(197,160,89,.55);
    outline-offset:6px;
    border-radius:6px;
}

/* =====================================================
   3D PRESSURE TILT
===================================================== */
.tilt-wrapper{
    perspective:800px;
    transform-style:preserve-3d;
}

.tilt-target{
    transform-style:preserve-3d;
    transition:box-shadow 0.4s var(--ease-silk);
    will-change:transform;
}

.tilt-target.pressed{
    box-shadow:0 25px 60px rgba(0,0,0,0.45),0 0 40px rgba(197,160,89,0.08);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:992px){
    .ethos,.who{
        padding:3rem 2rem;
    }
}

@media (max-width:768px){
    .content{
        padding:4rem 1.25rem;
    }

    .ethos,.who{
        border-radius:22px;
        padding:2.5rem 1.5rem;
    }

    .arsenal-wheel{
        height:clamp(380px,55vh,480px);
    }

    .arsenal-card{
        width:clamp(220px,70vw,320px);
        padding:2rem 1.5rem;
    }
}

@media (max-width:480px){
    .content{
        padding:3rem 1rem;
    }

    .ethos,.who{
        border-radius:18px;
        padding:2rem 1.25rem;
    }

    .arsenal-card{
        width:clamp(200px,80vw,280px);
        padding:1.5rem 1.25rem;
    }

    .contact-cta{
        width:100%;
        justify-content:center;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }

    .hero{
        height:auto;
    }

    #hero-canvas,
    #overlay-canvas,
    #lightrays-canvas{
        position:relative !important;
        height:60vh !important;
    }

    #lightrays-canvas{
        display:none !important;
    }

    .ethos__small,
    .ethos__big,
    .who__heading,
    .who__text{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
    }

    .arsenal-card{
        transition:none !important;
    }
}