/*==================================================
ROOT
==================================================*/

:root{

    --bg:#050505;
    --bg2:#101010;

    --card:#181818;
    --card2:#0d0d0d;

    --accent:#d8a14c;
    --accent-light:rgba(216,161,76,.18);
    --accent-border:rgba(216,161,76,.15);

    --white:#FFF;
    --text:rgba(255,255,255,.78);

    --radius:30px;

    --container:min(1450px,90%);
    --section-space:140px;

    --shadow:
    0 20px 60px rgba(0,0,0,.35);

    --shadow-hover:
    0 35px 80px rgba(0,0,0,.5),
    0 0 45px rgba(216,161,76,.12);

}

/*==================================================
RESET
==================================================*/

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--white);

    font-family:"Poppins",sans-serif;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

/*==================================================
PAGE
==================================================*/

.drawing-page{

    position:relative;

    overflow:hidden;

}

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

.background{

    position:fixed;

    inset:0;

    z-index:-3;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(216,161,76,.10),
    transparent 35%),

    radial-gradient(circle at 80% 10%,
    rgba(255,255,255,.04),
    transparent 45%),

    linear-gradient(
    180deg,
    var(--bg2),
    var(--bg));

}

.noise{

    position:fixed;

    inset:0;

    opacity:.04;

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

    z-index:-2;

}

/*==================================================
PARTICULES
==================================================*/

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.particles span{

    position:absolute;

    bottom:-80px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--accent);

    opacity:0;

    box-shadow:

    0 0 15px var(--accent),

    0 0 35px rgba(216,161,76,.25);

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    0%{

        transform:
        translateY(120vh)
        translateX(0)
        scale(.2);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        transform:
        translateY(-20vh)
        translateX(var(--x))
        scale(1.4);

        opacity:0;

    }

}

/*==================================================
SECTION TITLE
==================================================*/

.section-title{

    width:min(850px,90%);

    margin:0 auto 70px;

    text-align:center;

}

.section-title span{

    display:block;

    color:var(--accent);

    letter-spacing:5px;

    margin-bottom:20px;

    font-size:14px;

}

.section-title h2{

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

    margin-bottom:25px;

}

.section-title p{

    color:var(--text);

    line-height:1.9;

    font-size:18px;

}

/*==================================================
HERO
==================================================*/

.drawing-hero{

    width:var(--container);

    min-height:100vh;

    margin:auto;

    padding:80px 0;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:90px;

}

/*==================================================
LEFT
==================================================*/

.hero-left{

    max-width:650px;

}

.small{

    display:inline-block;

    margin-bottom:22px;

    color:var(--accent);

    font-size:15px;

    font-weight:600;

    letter-spacing:6px;

    text-transform:uppercase;

}

.hero-left h1{

    font-size:clamp(54px,6vw,84px);

    line-height:.95;

    margin-bottom:35px;

    font-weight:800;

}

.description{

    color:var(--text);

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

/*==================================================
BUTTONS
==================================================*/

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.buttons a{

    display:flex;
    justify-content:center;
    align-items:center;

    min-width:220px;
    height:60px;

    border-radius:999px;

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

    color:var(--accent);

    text-decoration:none !important;

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

    backdrop-filter:blur(14px);

    transition:.35s;

}

.buttons a:hover{

    text-decoration:none !important;

}

/*==================================================
RIGHT
==================================================*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
DRAWING SCENE
==================================================*/

.drawing-scene{

    position:relative;

    width:620px;

    height:620px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
ARTIST
==================================================*/

.hero-artist{

    position:relative;

    width:auto;

    height:400px !important;

    transform:scale(1.3);

    transform-origin:center;

    z-index:30;

    object-fit:contain;

    filter:
        drop-shadow(0 35px 45px rgba(0,0,0,.45))
        drop-shadow(0 0 45px rgba(216,161,76,.15));

    animation:artistFloat 5s ease-in-out infinite;

}

@keyframes artistFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

/*==================================================
ENERGY
==================================================*/

.energy-circle{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(216,161,76,.18);

    animation:rotateCircle linear infinite;

}

.energy-circle:nth-child(1){

    width:320px;
    height:320px;

    animation-duration:18s;

}

.circle2{

    width:450px;
    height:450px;

    animation-duration:28s;

    animation-direction:reverse;

}

.circle3{

    width:580px;
    height:580px;

    animation-duration:36s;

}

@keyframes rotateCircle{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

.drawing-scene::before{

    content:"";

    position:absolute;

    width:230px;

    height:230px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(216,161,76,.18),
    transparent 70%);

    filter:blur(35px);

}

/*==================================================
DRAWING ITEMS
==================================================*/

.drawing-item{

    position:absolute;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    filter:

    drop-shadow(0 0 20px rgba(216,161,76,.15));

    animation:itemFloat 5s ease-in-out infinite;

}

@keyframes itemFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/*==================================================
PENCIL
==================================================*/

.pencil{

    width:240px;

    height:240px;

    top:-4%;

    left:48%;

    transform:translateX(-50%);

}

/*==================================================
SKETCH
==================================================*/

.sketch{

    width:220px;

    height:220px;

    left:-5%;

    top:28%;

    animation-delay:.4s;

}

/*==================================================
PALETTE
==================================================*/

.palette{

    width:200px;

    height:200px;

    right:-4%;

    bottom:4%;

    animation-delay:.8s;

}

/*==================================================
PORTRAIT
==================================================*/

.portrait{

    width:230px;

    height:230px;

    right:-8%;

    top:10%;

    animation-delay:1.2s;

}

/*==================================================
LIGHTS
==================================================*/

.light{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--accent);

    box-shadow:

    0 0 18px var(--accent),

    0 0 45px var(--accent);

    animation:blink 2s infinite alternate;

}

.light1{

    top:10%;

    left:25%;

}

.light2{

    top:22%;

    right:18%;

}

.light3{

    bottom:18%;

    left:18%;

}

.light4{

    bottom:10%;

    right:30%;

}

@keyframes blink{

    from{

        opacity:.35;

        transform:scale(.6);

    }

    to{

        opacity:1;

        transform:scale(1.45);

    }

}

/*==================================================
STATS
==================================================*/

.drawing-stats{

    width:var(--container);

    margin:0 auto var(--section-space);

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:26px;

}

.stat-card{

    padding:42px 24px;

    text-align:center;

    border-radius:var(--radius);

    background:

    linear-gradient(
    145deg,
    rgba(28,28,28,.96),
    rgba(10,10,10,.96));

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

    backdrop-filter:blur(18px);

    transition:.35s;

    box-shadow:var(--shadow);

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(216,161,76,.35);

    box-shadow:var(--shadow-hover);

}

.stat-card span{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-bottom:14px;

    font-size:56px;

    font-weight:800;

    color:var(--accent);

}

.stat-card small{

    color:var(--text);

    font-size:17px;

    line-height:1.7;

}

/*==================================================
JOURNEY
==================================================*/

.journey-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

.journey-placeholder{

    min-height:500px;

}

/*==================================================
GALLERY
==================================================*/

.gallery-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:260px;

    gap:24px;

}

/*==================================================
DRAWING CARD
==================================================*/

.drawing-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    cursor:pointer;

    background:#111;

    box-shadow:var(--shadow);

    transition:

    transform .45s,

    box-shadow .45s;

}

.drawing-card.large{

    grid-column:span 2;

    grid-row:span 2;

}

.drawing-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);

}

/*==================================================
IMAGE
==================================================*/

.drawing-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .8s,

    filter .5s;

}

.drawing-card:hover img{

    transform:scale(1.08);

    filter:brightness(.92);

}

/*==================================================
SHINE
==================================================*/

.drawing-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    120deg,

    transparent,

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

    transparent);

    transform:translateX(-130%);

    transition:1s;

    z-index:2;

}

.drawing-card:hover::before{

    transform:translateX(130%);

}

/*==================================================
BORDER
==================================================*/

.drawing-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid transparent;

    border-radius:inherit;

    transition:.4s;

}

.drawing-card:hover::after{

    border-color:rgba(216,161,76,.35);

}

/*==================================================
STYLE
==================================================*/

.style-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

.style-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:30px;

}

/*==================================================
STYLE CARD
==================================================*/

.style-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:32px;

    background:

    linear-gradient(
    145deg,
    rgba(26,26,26,.96),
    rgba(10,10,10,.96));

    border:1px solid rgba(216,161,76,.10);

    transition:
    transform .4s,
    border-color .4s,
    box-shadow .4s;

    box-shadow:var(--shadow);

}

.style-card:hover{

    transform:translateY(-12px);

    border-color:rgba(216,161,76,.35);

    box-shadow:var(--shadow-hover);

}

/*==================================================
TOP LINE
==================================================*/

.style-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent);

    transform:scaleX(0);

    transition:.45s;

}

.style-card:hover::before{

    transform:scaleX(1);

}

/*==================================================
NUMBER
==================================================*/

.style-card::after{

    content:"✎";

    position:absolute;

    top:26px;

    right:28px;

    font-size:28px;

    color:rgba(216,161,76,.18);

}

/*==================================================
TEXT
==================================================*/

.style-card h3{

    margin-bottom:18px;

    font-size:30px;

    color:var(--accent);

    font-weight:700;

}

.style-card p{

    color:var(--text);

    font-size:16px;

    line-height:1.9;

}

/*==================================================
HOVER LIGHT
==================================================*/

.style-card:hover{

    background:

    linear-gradient(
    145deg,
    rgba(30,30,30,.98),
    rgba(12,12,12,.98));

}

/*==================================================
QUOTE
==================================================*/

.quote-section{

    position:relative;

    margin:var(--section-space) 0;

    padding:180px 20px;

    overflow:hidden;

}

.quote-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
    circle,
    rgba(216,161,76,.12),
    transparent 70%);

}

.quote-section blockquote{

    position:relative;

    width:min(950px,90%);

    margin:auto;

    text-align:center;

    font-size:clamp(30px,4vw,56px);

    line-height:1.55;

    font-weight:700;

    color:#FFF;

}

.quote-section blockquote::before{

    content:"“";

    display:block;

    margin-bottom:25px;

    color:var(--accent);

    font-size:90px;

    line-height:1;

    opacity:.7;

}

.quote-section blockquote::after{

    content:"”";

    display:block;

    margin-top:25px;

    color:var(--accent);

    font-size:90px;

    line-height:1;

    opacity:.7;

}

/*==================================================
ENDING
==================================================*/

.ending-section{

    position:relative;

    margin:var(--section-space) 0;

    padding:180px 20px;

    overflow:hidden;

}

.ending-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
    circle,
    rgba(216,161,76,.10),
    transparent 72%);

}

.ending-content{

    position:relative;

    width:min(900px,90%);

    margin:auto;

    text-align:center;

    z-index:2;

}

.ending-small{

    display:block;

    margin-bottom:22px;

    color:var(--accent);

    letter-spacing:6px;

    font-size:14px;

    text-transform:uppercase;

}

.ending-content h2{

    font-size:clamp(38px,5vw,66px);

    margin-bottom:30px;

    line-height:1.1;

}

.ending-content p{

    color:var(--text);

    font-size:20px;

    line-height:2;

}

/*==================================================
COMMON EFFECTS
==================================================*/

.stat-card,
.style-card,
.drawing-card{

    will-change:transform;

}

/*==================================================
FADE
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.fade-up.visible{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
FLOAT
==================================================*/

.float{

    animation:floatAnimation 5s ease-in-out infinite;

}

@keyframes floatAnimation{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*==================================================
TITLE LINE
==================================================*/

.section-title::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:28px auto 0;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent);

}

/*==================================================
SCROLL
==================================================*/

.journey-section,
.gallery-section,
.style-section,
.quote-section,
.ending-section{

    scroll-margin-top:120px;

}

/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--accent);

    color:#050505;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:rgba(216,161,76,.35);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}

/*==================================================
IMAGES
==================================================*/

.hero-artist,
.drawing-item,
.drawing-card img{

    image-rendering:auto;

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/*==================================================
TRANSITIONS
==================================================*/

a,
img,
.stat-card,
.style-card,
.drawing-card{

    transition-duration:.35s;

    transition-timing-function:ease;

}

/*==================================================
RESPONSIVE
1400px
==================================================*/

@media (max-width:1400px){

:root{

    --section-space:120px;

}

.drawing-hero{

    gap:60px;

}

.drawing-scene{

    width:520px;
    height:520px;

}

.hero-artist{

    width:320px;

}

.pencil{

    width:210px;
    height:210px;

}

.sketch{

    width:190px;
    height:190px;

}

.palette{

    width:180px;
    height:180px;

}

.portrait{

    width:200px;
    height:200px;

}

.section-title h2{

    font-size:52px;

}

}

/*==================================================
RESPONSIVE
1100px
==================================================*/

@media (max-width:1100px){

:root{

    --section-space:110px;

}

.drawing-hero{

    grid-template-columns:1fr;

    gap:70px;

    text-align:center;

    padding:100px 0 40px;

    min-height:auto;

}

.hero-left{

    max-width:850px;

    margin:auto;

}

.description{

    margin-inline:auto;

}

.buttons{

    justify-content:center;

}

.hero-right{

    order:-1;

}

.drawing-stats{

    grid-template-columns:repeat(2,1fr);

}

.style-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

}

.drawing-card.large{

    grid-column:span 2;

}

.drawing-scene{

    width:450px;

    height:450px;

}

.hero-artist{

    width:290px;

}

.energy-circle:nth-child(1){

    width:270px;
    height:270px;

}

.circle2{

    width:360px;
    height:360px;

}

.circle3{

    width:450px;
    height:450px;

}

}

/*==================================================
RESPONSIVE
768px
==================================================*/

@media (max-width:768px){

:root{

    --section-space:90px;

}

/*=========================
GLOBAL
=========================*/

section{

    padding-inline:22px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    font-size:16px;

    line-height:1.8;

}

/*=========================
HERO
=========================*/

.drawing-hero{

    padding:60px 22px 20px;

    gap:45px;

}

.hero-left h1{

    font-size:44px;

    line-height:1.05;

    margin-bottom:20px;

}

.description{

    font-size:16px;

    margin-bottom:35px;

}

/*=========================
BUTTONS
=========================*/

.buttons{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

    width:100%;

}

.buttons a{

    width:100%;

    min-width:0;

    height:56px;

}

/*=========================
SCENE
=========================*/

.drawing-scene{

    width:300px;

    height:300px;

}

.hero-artist{

    width:200px;

}

.energy-circle:nth-child(1){

    width:180px;
    height:180px;

}

.circle2{

    width:240px;
    height:240px;

}

.circle3{

    width:300px;
    height:300px;

}

/*=========================
ITEMS
=========================*/

.pencil{

    width:140px;
    height:140px;

    top:-8%;

}

.sketch{

    width:120px;
    height:120px;

    left:-8%;

    top:40%;

}

.palette{

    width:120px;
    height:120px;

    right:-5%;

    bottom:-4%;

}

.portrait{

    width:130px;
    height:130px;

    right:-8%;

    top:6%;

}

/*=========================
STATS
=========================*/

.drawing-stats{

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.stat-card{

    padding:26px 16px;

}

.stat-card span{

    font-size:36px;

}

.stat-card small{

    font-size:14px;

}

/*=========================
GALLERY
=========================*/

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

    grid-auto-rows:180px;

    gap:14px;

}

.drawing-card.large{

    grid-column:auto;

    grid-row:auto;

}

/*=========================
STYLE
=========================*/

.style-grid{

    grid-template-columns:1fr;

}

.style-card{

    padding:30px;

}

.style-card h3{

    font-size:24px;

}

.style-card p{

    font-size:15px;

}

/*=========================
QUOTE
=========================*/

.quote-section{

    padding:120px 22px;

}

.quote-section blockquote{

    font-size:30px;

}

}

/*==================================================
RESPONSIVE
480px
==================================================*/

@media (max-width:480px){

:root{

    --section-space:70px;

}

/*=========================
GLOBAL
=========================*/

section{

    padding-inline:18px;

}

.section-title{

    margin-bottom:35px;

}

.section-title span{

    font-size:12px;

    letter-spacing:3px;

}

.section-title h2{

    font-size:30px;

    line-height:1.1;

}

.section-title p{

    font-size:15px;

}

/*=========================
HERO
=========================*/

.hero-left h1{

    font-size:36px;

}

.description{

    font-size:15px;

    line-height:1.8;

}

.buttons{

    gap:12px;

}

.buttons a{

    height:52px;

    font-size:15px;

}

/*=========================
SCENE
=========================*/

.drawing-scene{

    width:250px;

    height:250px;

}

.hero-artist{

    width:170px;

}

.energy-circle:nth-child(1){

    width:150px;
    height:150px;

}

.circle2{

    width:200px;
    height:200px;

}

.circle3{

    width:250px;
    height:250px;

}

/*=========================
DRAWING ITEMS
=========================*/

.pencil{

    width:115px;
    height:115px;

}

.sketch{

    width:95px;
    height:95px;

}

.palette{

    width:95px;
    height:95px;

}

.portrait{

    width:105px;
    height:105px;

}

/*=========================
STATS
=========================*/

.drawing-stats{

    grid-template-columns:1fr;

    gap:15px;

}

.stat-card{

    padding:22px 15px;

}

.stat-card span{

    font-size:32px;

}

.stat-card small{

    font-size:13px;

}

/*=========================
GALLERY
=========================*/

.gallery-grid{

    grid-template-columns:1fr;

    grid-auto-rows:240px;

}

.drawing-card{

    border-radius:24px;

}

/*=========================
STYLE
=========================*/

.style-card{

    padding:24px;

}

.style-card h3{

    font-size:22px;

}

.style-card p{

    font-size:15px;

    line-height:1.8;

}

/*=========================
QUOTE
=========================*/

.quote-section{

    padding:90px 18px;

}

.quote-section blockquote{

    font-size:24px;

    line-height:1.6;

}

.quote-section blockquote::before,
.quote-section blockquote::after{

    font-size:60px;

}

/*=========================
ENDING
=========================*/

.ending-section{

    padding:110px 18px;

}

.ending-content h2{

    font-size:34px;

}

.ending-content p{

    font-size:16px;

    line-height:1.9;

}

}

/*==================================================
PERFORMANCES
==================================================*/

.hero-artist,
.drawing-item,
.energy-circle{

    will-change:transform;

}

.drawing-card,
.style-card,
.stat-card{

    contain:layout paint;

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

}