/* ==========================================
   GEGEN HAST©
   Design by ChatGPT
========================================== */

:root{
    --bg:#06111F;
    --bg2:#0b1d34;
    --white:#ffffff;
    --text:#d8e4f2;
    --line:rgba(255,255,255,.08);
    --accent:#9fd5ff;
}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Montserrat",sans-serif;
    background:var(--bg);
    color:var(--white);
    overflow-x:hidden;
    line-height:1.8;
}

/* --------------------------
Hintergrund
--------------------------- */

.background{

    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at 15% 20%, rgba(66,150,255,.15), transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.05), transparent 30%),
    linear-gradient(180deg,var(--bg),#040b15);

    animation:moveBackground 18s ease-in-out infinite alternate;

    z-index:-3;

}

@keyframes moveBackground{

0%{

transform:scale(1);

}

100%{

transform:scale(1.15);

}

}

/* Film Grain */

.noise{

position:fixed;
inset:0;

background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

opacity:.08;

pointer-events:none;

z-index:-2;

}

/* --------------------------
Hero
--------------------------- */

.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:40px;

}

.hero-content{

max-width:900px;

}

#logo{

font-size:clamp(3rem,9vw,7rem);

font-weight:900;

letter-spacing:10px;

margin-bottom:40px;

min-height:120px;

}

.claim{

font-size:1.35rem;

color:var(--text);

max-width:760px;

margin:auto;

}

.claim strong{

color:white;

}

/* --------------------------
Button
--------------------------- */

.button{

display:inline-block;

margin-top:50px;

padding:18px 45px;

border:1px solid rgba(255,255,255,.3);

border-radius:60px;

color:white;

text-decoration:none;

font-weight:700;

transition:.35s;

backdrop-filter:blur(5px);

}

.button:hover{

background:white;

color:#06111F;

transform:translateY(-4px);

box-shadow:0 15px 45px rgba(255,255,255,.2);

}

/* --------------------------
Sections
--------------------------- */

.section{

padding:140px 10%;

max-width:1100px;

margin:auto;

}

.section h2{

font-size:3rem;

margin-bottom:35px;

}

.section p{

font-size:1.25rem;

color:var(--text);

}

/* --------------------------
Quote
--------------------------- */

.quote{

height:55vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

font-size:4vw;

font-weight:800;

letter-spacing:5px;

}

/* --------------------------
Shirts
--------------------------- */

.shirts{

padding:140px 8%;

}

.shirts h2{

text-align:center;

font-size:3rem;

margin-bottom:70px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:45px;

}

.card{

background:rgba(255,255,255,.03);

border:1px solid var(--line);

border-radius:20px;

padding:30px;

transition:.45s;

backdrop-filter:blur(12px);

}

.card:hover{

transform:translateY(-12px);

border-color:rgba(255,255,255,.2);

box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.shirt{

height:380px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

font-size:2.2rem;

font-weight:900;

letter-spacing:4px;

border-radius:16px;

background:linear-gradient(180deg,#ffffff,#dddddd);

color:#111;

transition:.5s;

}

.card:hover .shirt{

transform:scale(1.03) rotate(-1deg);

}

.card h3{

margin-top:30px;

font-size:1.4rem;

}

.card p{

margin-top:15px;

color:var(--text);

}

/* --------------------------
Final
--------------------------- */

.final{

padding:180px 30px;

text-align:center;

}

.final h2{

font-size:4rem;

margin-bottom:30px;

}

.final p{

font-size:1.3rem;

color:var(--text);

}

/* --------------------------
Footer
--------------------------- */

footer{

padding:60px;

text-align:center;

color:#8ea3b7;

border-top:1px solid rgba(255,255,255,.06);

}

/* --------------------------
Animation
--------------------------- */

.section,
.quote,
.card,
.final{

opacity:0;

transform:translateY(60px);

transition:1.1s;

}

.show{

opacity:1;

transform:translateY(0);

}

/* --------------------------
Responsive
--------------------------- */

@media(max-width:768px){

#logo{

letter-spacing:4px;

}

.section h2,
.shirts h2,
.final h2{

font-size:2.2rem;

}

.claim{

font-size:1.1rem;

}

.section p{

font-size:1.1rem;

}

.quote{

font-size:10vw;

}

}