/* ===================================================
   OPEL BRASIL
   Premium Landing Page
   Parte 2A
=================================================== */

:root{

    --black:#040404;
    --graphite:#121212;
    --dark:#1d1d1d;
    --silver:#d9d9d9;
    --white:#ffffff;
    --gold:#FFD400;

    --transition:.45s cubic-bezier(.2,.8,.2,1);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    width:100%;
    height:100vh;

    overflow:hidden;

    background:#000;

    color:#fff;

    font-family:'Montserrat',sans-serif;

}

/* Canvas */

#particles{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

}

/* ===================================================
   BACKGROUND
=================================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    background:
    radial-gradient(circle at center,#1b1b1b 0%,#070707 70%,#000 100%);

}

/* aço escovado */

.metal{

    position:absolute;

    inset:-25%;

    background:

    repeating-linear-gradient(

    110deg,

    rgba(255,255,255,.02) 0px,

    rgba(255,255,255,.02) 2px,

    transparent 3px,

    transparent 12px

    );

    opacity:.30;

    animation:metalMove 30s linear infinite;

}

@keyframes metalMove{

from{

transform:translateX(-3%);

}

to{

transform:translateX(3%);

}

}

/* gradiente principal */

.gradient{

position:absolute;

inset:0;

background:

radial-gradient(circle at top,

rgba(255,255,255,.08),

transparent 40%),

radial-gradient(circle at bottom,

rgba(255,212,0,.08),

transparent 55%);

}

/* halo dourado */

.goldGlow{

position:absolute;

width:900px;

height:900px;

left:50%;

top:45%;

transform:translate(-50%,-50%);

background:

radial-gradient(circle,

rgba(255,212,0,.10),

transparent 70%);

filter:blur(40px);

animation:goldPulse 6s ease-in-out infinite;

}

@keyframes goldPulse{

50%{

transform:

translate(-50%,-50%)

scale(1.08);

opacity:.9;

}

}

/* luz superior */

.topLight{

position:absolute;

top:-250px;

left:50%;

transform:translateX(-50%);

width:1000px;

height:600px;

background:

radial-gradient(circle,

rgba(255,255,255,.18),

transparent 70%);

filter:blur(60px);

}

/* luz esquerda */

.leftLight{

position:absolute;

left:-250px;

top:0;

width:600px;

height:100%;

background:

linear-gradient(

90deg,

rgba(255,255,255,.05),

transparent);

transform:rotate(-10deg);

}

/* luz direita */

.rightLight{

position:absolute;

right:-250px;

top:0;

width:600px;

height:100%;

background:

linear-gradient(

270deg,

rgba(255,212,0,.06),

transparent);

transform:rotate(10deg);

}

/* ruído */

.noise{

position:absolute;

inset:0;

opacity:.03;

background-image:

radial-gradient(#ffffff 1px,transparent 1px);

background-size:5px 5px;

}

/* ===================================================
   CONTAINER
=================================================== */

.wrapper{

position:relative;

z-index:20;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

text-align:center;

padding:30px;

}

.logoBox{

position:relative;

display:flex;

justify-content:center;

align-items:center;

width:min(900px,90vw);

height:380px;

}

/* ===================================================
   LOGO PREMIUM
=================================================== */

.logo{

    width:min(650px,85vw);

    position:relative;

    z-index:5;

    user-select:none;
    pointer-events:none;

    animation:logoFloat 8s ease-in-out infinite;

    filter:
    drop-shadow(0 0 25px rgba(255,212,0,.18))
    drop-shadow(0 0 45px rgba(255,255,255,.08))
    drop-shadow(0 35px 45px rgba(0,0,0,.65));

    transition:all .5s ease;

}

.logo:hover{

    transform:scale(1.02);

}

/* ===================================================
   ANEL LUMINOSO
=================================================== */

.ring{

position:absolute;

width:560px;
height:560px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,212,0,.20),

rgba(255,212,0,.08),

transparent 72%);

filter:blur(45px);

animation:ringPulse 6s ease-in-out infinite;

}

@keyframes ringPulse{

50%{

transform:scale(1.08);

opacity:.9;

}

}

/* ===================================================
   BRILHO CROMADO
=================================================== */

.shine{

position:absolute;

width:180px;
height:700px;

left:-300px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.92),

transparent);

transform:rotate(25deg);

filter:blur(12px);

mix-blend-mode:screen;

animation:shineMove 7s infinite;

}

@keyframes shineMove{

0%{

left:-320px;

opacity:0;

}

8%{

opacity:1;

}

35%{

left:900px;

opacity:.9;

}

100%{

left:900px;

opacity:0;

}

}

/* ===================================================
   REFLEXO
=================================================== */

.reflection{

position:absolute;

top:103%;

left:50%;

transform:

translateX(-50%)

scaleY(-1);

opacity:.10;

filter:blur(10px);

mask-image:

linear-gradient(

to bottom,

rgba(0,0,0,.8),

transparent);

-webkit-mask-image:

linear-gradient(

to bottom,

rgba(0,0,0,.8),

transparent);

}

.reflection img{

width:min(650px,85vw);

}

/* ===================================================
   TÍTULOS
=================================================== */

h1{

margin-top:30px;

font-size:clamp(34px,5vw,62px);

font-weight:700;

letter-spacing:12px;

color:#ffffff;

text-transform:uppercase;

text-shadow:

0 0 18px rgba(255,255,255,.18);

animation:fadeUp 1.8s;

}

p{

margin-top:18px;

font-size:18px;

font-weight:300;

letter-spacing:3px;

color:#bbbbbb;

animation:fadeUp 2.3s;

}

/* ===================================================
   ANIMAÇÕES
=================================================== */

@keyframes logoFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(35px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/* ===================================================
   VINHETA
=================================================== */

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle,

transparent 45%,

rgba(0,0,0,.55) 100%);

z-index:8;

}

/* ===================================================
   RESPONSIVO
=================================================== */

@media(max-width:900px){

.logo{

width:92vw;

}

.ring{

width:90vw;
height:90vw;

}

.shine{

display:none;

}

h1{

font-size:38px;

letter-spacing:6px;

}

p{

font-size:15px;

letter-spacing:2px;

}

.logoBox{

height:270px;

}

}

@media(max-width:500px){

h1{

font-size:28px;

letter-spacing:4px;

}

p{

font-size:13px;

}

.logoBox{

height:220px;

}

}