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

html,
body {
    width: 100%;
    height: 100%;
     background: #d0c4be;
     position: relative;
    font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 9999;

    opacity: 0.012;
    background-size: 10px 10px;

    background-size: 8px 8px;
}

/* ===========================
   Hero Section
=========================== */

.section-1 {
    position: relative;
    width: 100%;
    height:clamp(960px,85vh,860px);


    overflow: hidden;

    background-image: url("../image/art3.png");
    background-size: 120%;
    background-position: calc(50% + 29px) 58%;
    background-repeat: no-repeat;
    background-color: #d0c4be; /* Базовый холст */
}



.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2; /* Поднимаем выше контента для мягкого растворения краев */
    pointer-events: none;
    
    /* Двойная маска: мягко гасит низ картинки и убирает контраст на стыке */
    background: 
        linear-gradient(to bottom,
            transparent 0%,
            transparent 60%,
            rgba(208, 196, 190, 0.3) 75%,
            rgba(208, 196, 190, 0.85) 92%,
            #d0c4be 100%
        );
}

.hero-content {
    position: absolute;

    top: 50%;
    left: 50%;

    width:min(90%,1100px);

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

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    z-index: 5;

    color: white;

    -webkit-user-select: none; /* Для Safari */
    user-select: none;

}

.hero-content h1 {
    font-size: clamp(3.4rem, 6.5vw, 8.2rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: -30px;
    margin-bottom: 24px;
    color: #ffffff;

    text-shadow: 0 0 40px rgba(0, 0, 0, 0.571), 0 4px 12px rgba(0, 0, 0, 0.347);
    transition: font-size 0.3s ease;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.3),  /* Смягченный ближний ореол */
        0 0 35px rgba(255, 255, 255, 0.2),  /* Нежное промежуточное сияние */
        0 0 65px rgba(255, 255, 255, 0.12), /* Широкое воздушное облако */
        0 20px 50px rgba(0, 0, 0, 0.15);    /* Глубокий, незаметный задний план */

        
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.075);
}

.hero-content p {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95); 
    z-index: 3;
    

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.2);

    /* Корректируем тень параграфа для деликатного размытия границ */
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.15), 
        0 0 20px rgba(255, 255, 255, 0.08),  
        0 8px 25px rgba(0, 0, 0, 0.25); /* Задняя темная вуаль усилена для читаемости */
}




.gallery-background{
    position: relative;

    background-image: url("../image/art4.png");
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;

    background-attachment: scroll;
}

/* ===========================
   Section 2
=========================== */

.section-2 {
    position: relative;
    overflow: hidden;

    margin-top: -2px;
     z-index: 10; 

    width: 100%;
    min-height:auto;
    height:auto;


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

    padding:10px clamp(20px,4vw,40px);

    background-image: 
        
        /* Оставляем только мягкий верхний отсвет, который тебе нравился */
        linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.4) 0%,    
            transparent 8vh                  
        ),
        url("../image/art4.png");
    background-size: cover;
    background-position: calc(50% - 0px) 35%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-attachment: scroll; /* Рисунок застывает на месте, стирая границы скролла */
}


.section-2::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:220px;

    pointer-events:none;
    z-index:3;

    background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(208,196,190,.04) 20%,
    rgba(208,196,190,.16) 45%,
    rgba(208,196,190,.48) 75%,
    #d0c4be 100%
);
}

.section-2 .intro-content{
    margin-top:clamp(90px,12vw,170px);
    margin-bottom:clamp(40px,6vw,70px);

    max-width:900px;
    justify-self:center;
    text-align:center;
}



.intro-content {
    max-width: 1000px;

    text-align: center;
    grid-area:dance;
}

.intro-content h2 {
    font-size: clamp(3.1rem, 5.2vw, 5.2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    z-index: 5;

    color: #1f1f1f;

    margin-bottom: 18px;
}

.intro-year {
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    font-style: italic;
    letter-spacing: 0.15em;

    color: #7a7a7a;

    margin-bottom: 38px;
}

.intro-subtitle {
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 500;

    color: #303030;

    margin-bottom: 22px;
}

.intro-description {
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    line-height: 1.9;
    font-weight: 300;

    color: #555;
}


.intro-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;



    /* Мягкий туманный уход в цвет фона на самом старте Section 2 */
    
    background: 
        linear-gradient(to bottom,
            #d0c4be 0%,
            rgba(208, 196, 190, 0.7) 12%,
            transparent 40%
        );


    /* Многослойное размытие краев + выравнивание тона 
    background: 
        
        linear-gradient(to bottom,
            #d0c4be 0%,
            rgba(208, 196, 190, 0.98) 2%,
            rgba(208, 196, 190, 0.6) 8%,
            transparent 35%
        ),
       
        linear-gradient(to right, #d0c4be 0%, rgba(208, 196, 190, 0) 12%),
        linear-gradient(to left, #d0c4be 0%, rgba(208, 196, 190, 0) 12%);
    */
}

.intro-overlay::before { content: ""; 
    position: absolute; 
    inset: 0; 
    z-index: 2; 
    opacity: 0.015; 
    /* Едва заметный дорогой премиум-эффект */ 
    pointer-events: none; 
    /* Текстура шума */ 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); 
    /* Шум работает только там, где картинки соединяются */ 
    mask-image: linear-gradient(to bottom, #fff 0%, transparent 25%); 
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, transparent 25%); 
}





.section-3 {
    position: relative;
    overflow: hidden;
    width: 100%;

    min-height:100svh;
    min-height:100vh;
    height:auto;


    display: flex;
    align-items: center;
    padding:clamp(80px,10vw,160px) 0;

    z-index: 3;

    /* Полное дублирование параметров фона Section 2 для 100% совпадения */
    background-image: 
        
        /* Оставляем только мягкий верхний отсвет, который тебе нравился */
        linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.4) 0%,    
            transparent 8vh                  
        ),
        url("../image/art4.png");
    background-size: cover;
    /*background-position: calc(50% - 0px) 35%;*/
    background-position: center 35%; 
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-attachment: scroll; /* Рисунок застывает на месте, стирая границы скролла */
}

/* Умный оверлей: защищает читаемость текста, не создавая швов по краям */
.section-3-overlay { 
    position: absolute; 
    inset: 0; 
    z-index: 1; 
    pointer-events: none; 
    /* Затемняем только левую сторону под текст, плавно растворяясь к правому краю */ 
    background: linear-gradient(
    to bottom,
    #d0c4be 0%,
    rgba(208,196,190,.65) 25%,
    rgba(208,196,190,.22) 55%,
    transparent 100%
),

linear-gradient(
    to bottom,
    rgba(210,198,194,0) 0%,
    rgba(210,198,194,.09) 35%,
    rgba(210,198,194,.20) 60%,
    rgba(210,198,194,.38) 80%,
    rgba(210,196,194,.99) 100%
);
}



.section-3::after{
    content:"";
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:320px;

    pointer-events:none;
    z-index:3;

    background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(208,196,190,.015) 12%,
    rgba(208,196,190,.06) 32%,
    rgba(208,196,190,.18) 60%,
    rgba(208,196,190,.45) 88%,
    #d0c4be 100%
);
}


.section-3::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;
    z-index:1;

    background:linear-gradient(
        to bottom,
        rgba(208,196,190,.92) 0%,
        rgba(208,196,190,.72) 8%,
        rgba(208,196,190,.42) 20%,
        rgba(208,196,190,.20) 36%,
        rgba(208,196,190,.08) 52%,
        rgba(208,196,190,.02) 68%,
        transparent 82%
    );
}

.section-2 .section-3-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding:0 clamp(20px,4vw,40px);

    display: grid;
    grid-template-columns: 1.1fr 0.9fr; 
    gap:
    clamp(40px,6vw,80px)
    clamp(30px,6vw,100px);

    align-items: center;

    grid-template-areas:
        "text image"
        "dance dance";
}

/* --- Текстовый блок (Слева) --- */
.section-3-content {
    display: flex;
    flex-direction: column;

    grid-area:text;
}

.section-3-content h3 {
    font-size: clamp(1.5rem, 4.5vw, 4.5rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #1f1f1f;
    line-height: 1.1;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.about-text-wrapper {
    display: flex;
    flex-direction: column;
    gap:clamp(15px,2vw,22px);
}

.content-tag {
    font-size: 0.85rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #4a4a4a;
    margin-bottom: 20px;
    font-weight: 500;
    z-index: 5;
}

.content-lead {
    font-size: clamp(1.2rem, 1.25vw, 1.3rem);
    line-height: 1.7;
    font-weight: 400;
    color: #1d1d1d;
    z-index: 5;
}

.content-text {
    font-size: clamp(0.95rem, 1.05vw, 2.1rem);
    line-height: 1.9;
    font-weight: 300;
    color: #383838;
    z-index: 5;
}

/* --- Фотография photo.png (Справа) --- */
.section-3-image-wrapper {
    position: relative;
    width:min(75%, 540px);
    margin: 0 auto;
    aspect-ratio: 941 / 1476;
    overflow: hidden; 

    z-index: 1; 
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15); 

    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.section-3-img {
    width: 100%;
    display: block;
    object-fit: cover;
    height:100%;

    border-radius: 5px;
     transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); 
     will-change: transform;
    transform: translateZ(0);
}


.section-3-image-wrapper:hover {
    /* Очень-очень легкое увеличение всей рамки (всего на 1.5%) */
    transform: scale(1.008); 
    
    /* Тень становится чуть-чуть глубже и сильнее смещается вниз, создавая эффект отрыва от стены */
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.28); 
}

.section-3-image-wrapper:hover .section-3-img {
     transform: scale(1.002);
}

/* --- Философия (Снизу на всю ширину) --- */
.artist-philosophy-footer {
    grid-column: 1 / -1; 
    text-align: center;
    margin-top: 40px;
    padding-top:clamp(35px,5vw,60px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.philosophy-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #555555;
    margin-bottom: 6px;
    font-weight: 500;
}

.philosophy-quote {
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 400;
    font-style: italic;
    line-height: 2.2;
    color: #1f1f1f;
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: 0.01em;
    white-space: normal; 
}

/* --- Правая сторона: Фото + Подпись под ней --- */
.section-3-right-column {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Отступ между фото и цитатой */

    justify-content: center; 
    grid-area:image;
}

.artist-philosophy-under-photo {
    text-align: center;
    padding: 0;
    width: 100%;
    z-index: 2; 
}

.section-3 .container{
    position: relative;
    z-index: 5;

    width:100%;
    max-width:1200px;
    margin:0 auto;

    min-height:auto;

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

.section-3 .intro-content{
    width:100%;
    max-width:900px;
    margin:0 auto;
    text-align:center;

    margin-top:clamp(60px,9vw,105px);
}


/* ===========================
   Section 4
=========================== */

.section-4{
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: auto;

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

    padding: clamp(80px, 8vw, 120px) clamp(20px, 4vw, 40px);

    background-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.4) 0%,
            transparent 8vh
        ),
        url("../image/davinci.png");

    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.section-4::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;
    z-index:1;

    


background: linear-gradient(
    to bottom,
    #d0c4be 5%,
    rgba(208,197,191,.24) 18%,
    rgba(208,197,191,.11) 35%,
    rgba(208,197,191,.03) 55%,
    transparent 72%
);
}

.section-4-container{
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 1500px;

    display: flex;
    justify-content: center;
}

.artwork-display{
    display:flex;
    flex-direction:column;
    align-items:center;

    width:100%;

    gap:clamp(24px,3vw,36px);

    margin-top:clamp(180px,18vw,350px);
}

.artwork-caption{
    text-align:center;

    color:#3f3f3f;

    font-size:clamp(.82rem,.9vw,.92rem);

    line-height:1.7em;

    letter-spacing:.08em;

    margin-top:clamp(50px,8vw,120px);
}


.section-4::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:clamp(180px,22vw,360px);
    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(210,197,191,.01) 0%,
        rgba(210,197,191,.05) 12%,
        rgba(210,197,191,.14) 30%,
        rgba(210,197,191,.30) 55%,
        rgba(210,197,191,.58) 82%,
        #d0c4be 100%
    );
}

.section-5 {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: auto;
    height: auto;
    margin-top:-2px;


    display: flex;
    align-items: center;
    padding:
    clamp(80px,8vw,120px)
    0
    clamp(50px,6vw,80px);

    z-index: 3;

    /* Полное дублирование параметров фона Section 2 для 100% совпадения */
    background-image: 
        
        /* Оставляем только мягкий верхний отсвет, который тебе нравился */
        linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.4) 0%,    
            transparent 8vh                  
        ),
        url("../image/art4.png");
    background-size: cover;
    /*background-position: calc(50% - 0px) 35%;*/
    background-position: center 35%; 
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-attachment: scroll; /* Рисунок застывает на месте, стирая границы скролла */
}

.section-5::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;
    z-index:1;

    background:linear-gradient(
        to bottom,
        rgba(208,197,191,.92) 0%,
        rgba(208,197,191,.72) 8%,
        rgba(208,197,191,.42) 20%,
        rgba(208,197,191,.20) 36%,
        rgba(208,197,191,.08) 52%,
        rgba(208,197,191,.02) 68%,
        transparent 82%
    );
}

.section-5::after{
    content:"";
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:clamp(180px,20vw,320px);

    pointer-events:none;
    z-index:2;

    background:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(208, 197, 191,0.2) 18%,
        rgba(208,197,191,.08) 40%,
        rgba(208,197,191,.20) 65%,
        rgba(208,197,191,.48) 88%,
        #d0c4be 100%
    );
}


.section-5-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;

    background:
    linear-gradient(
        to bottom,
        rgba(208,197,191,.55) 0%,
        rgba(208,197,191,.20) 22%,
        rgba(208,197,191,.08) 42%,
        rgba(208,197,191,.12) 70%,
        rgba(208,197,191,.28) 100%
    );
}

/* ==========================
   SECTION 5 ARTIST STATEMENT
========================== */


.section-5-container{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1350px;

    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
}


.statement{
    width:100%;
    max-width: 1000px;
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* маленький заголовок */

.statement-tag{
    font-size:.75rem;
    letter-spacing:.45em;
    text-transform:uppercase;
    color:#555;
    margin-bottom:clamp(20px,4vw,35px);

    font-weight:500;
}


/* Dance Code */

.statement-title{
    font-size:clamp(3rem,5vw,5rem);
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#1d1d1d;
    margin-bottom:clamp(35px,6vw,65px);

    position:relative;
    white-space: nowrap;
}



.statement-title::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:clamp(-20px,-3vw,-32px);

    transform:translateX(-50%);
    width:90px;
    height:1px;
    background:rgba(0,0,0,.18);
}

/* Основной текст */

.statement-text{
    max-width:1200px;
    font-size:clamp(1.05rem,1.15vw,1.2rem);
    line-height:2.05;
    font-weight:300;
    color:#2f2f2f;
    text-align:left;
    padding:0 clamp(20px,3vw,30px);
}



.statement-text p{
    margin-bottom:clamp(18px,3vw,30px);
}

/* финальная фраза */
.statement-ending{
    margin-top:clamp(30px,5vw,50px);

    text-align:center;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.8;
    font-style:italic;
    letter-spacing:.04em;
    color:#333;
}

.statement-line{
    width:1px;
    height:clamp(45px,7vw,80px);

    background:rgba(0,0,0,.15);
    margin-bottom:clamp(30px,6vw,55px);
}





.statement-text p:nth-child(1),
.statement-text p:nth-child(2){
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.statement-text p:nth-child(4),
.statement-text p:nth-child(5),
.statement-text p:nth-child(6){
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
}



.concept-subtitle{
    max-width:760px;

    margin:0 auto clamp(30px,5vw,48px);

    font-size:1.45rem;
    line-height:1.8;

    font-weight:400;
    letter-spacing:.02em;

    color:#252525;

     text-align:center;
}

.concept-text{
    text-align:left;
    line-height:2;
    font-size:1.08rem;
    color:#353535;
}


.concept-block{
    margin-top:clamp(50px,8vw,90px);

    padding-top:clamp(40px,6vw,70px);
    border-top:1px solid rgba(0,0,0,.12);
    max-width:1050px;
}

.concept-label{
    display:block;
    font-size:1.2rem;
    letter-spacing:.5em;
    text-transform:uppercase;
    color:#333;
    margin-bottom:clamp(20px,4vw,35px);

    position:relative;
}



.concept-block p{
    font-size:clamp(1.05rem,1.15vw,1.2rem);
    line-height:2;
    font-weight:300;
    color:#333;
}

.interaction-block{
    margin:clamp(40px,7vw,70px) auto;
    padding:
    clamp(30px,5vw,45px)
    clamp(20px,5vw,60px);

    max-width:760px;
    border-left:1px solid rgba(0,0,0,.18);
    text-align:left;
}

.interaction-block p{
    margin-bottom:20px;
    font-style:italic;
    font-size:clamp(1.05rem,1.2vw,1.25rem);
    line-height:1.9;
    font-weight:300;
    color:#3b3b3b;
}



/* =====================================================
   SECTION 6
===================================================== */

.section-6{
    position:relative;
    overflow:hidden;

    width:100%;
    min-height:auto;

    display:flex;
    align-items:center;
    flex-direction:column;
    z-index: 12;
    

    padding:
    25px
    0
    clamp(60px,8vw,100px);
    

    background-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.40) 0%,
            transparent 8vh
        ),
        url("../image/art4.png");

    background-size:cover;
    background-position:center 35%;
    background-repeat:no-repeat;
    background-blend-mode:multiply;
}

/* Верхний переход */

.section-6::before{

    content:"";
    position:absolute;

    left:0;
    right:0;
    top:0;

    height:clamp(180px,20vw,320px);
    pointer-events:none;
    z-index:1;

    background:linear-gradient(
        to bottom,
        #d0c4be 0%,
        rgba(208,197,191,.55) 16%,
        rgba(208,197,191,.22) 35%,
        rgba(208,197,191,.08) 55%,
        transparent 78%
    );
}

/* Нижний переход */

.section-6::after{
    content:"";
    position:absolute;

    left:0;
    right:0;
    bottom:0;
    height:clamp(320px,45vw,700px);

    pointer-events:none;
    z-index:1;

    
    background:linear-gradient(

        to bottom,

        rgba(255,255,255,0) 0%,

        rgba(255,255,255,.05) 18%,

        rgba(255,255,255,.12) 35%,

        rgba(255,255,255,.25) 55%,

        rgba(255,255,255,.50) 78%,

        rgba(255,255,255,.82) 92%,

        #ffffff 100%

    );
}

.section-6-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    background:
        linear-gradient(
            to bottom,
            rgba(208,197,191,.20),
            rgba(208,197,191,.08)

        );
}

/* ===================== */

.section-6-container{
    position:relative;
    z-index:5;
    

    width:100%;
    max-width:1750px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,60px);

    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(40px,8vw,120px);

    align-items:center;
}

/* ================================================= */

.painting-wrapper{

    width:100%;

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

.painting-image{
    width:100%;
    display:block;

    filter:
        drop-shadow(0 6px 8px rgba(0,0,0,.06))
        drop-shadow(0 18px 25px rgba(0,0,0,.08))
        drop-shadow(0 40px 65px rgba(0,0,0,.10))
        drop-shadow(0 70px 120px rgba(0,0,0,.08));

    transition:
        transform .9s cubic-bezier(.22,1,.36,1),
        filter .9s cubic-bezier(.22,1,.36,1);

    will-change:transform;
}


.painting-image:hover{

    transform:scale(1.012);

    filter:
        drop-shadow(0 8px 10px rgba(0,0,0,.08))
        drop-shadow(0 25px 40px rgba(0,0,0,.10))
        drop-shadow(0 55px 85px rgba(0,0,0,.13))
        drop-shadow(0 95px 150px rgba(0,0,0,.10));
}

.painting-wrapper{

    position:relative;
}

.painting-wrapper::after{

    content:"";

    position:absolute;

    inset:-18px;

    pointer-events:none;

    background:radial-gradient(
        ellipse,
        rgba(255,255,255,.18),
        transparent 72%
    );

    filter:blur(30px);

    z-index:-1;
}

/* ================================================= */

.painting-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.painting-number{
    font-size:1.35rem;
    letter-spacing:.2em;
    color:#666;
    text-transform:uppercase;
    margin-bottom:22px;
}

.painting-title{
    font-size:clamp(2.9rem,4vw,4.7rem);
    font-weight:500;
    letter-spacing:.12em;
    color:#1d1d1d;
    margin-bottom:28px;
}

.painting-line{
    width:90px;
    height:1px;
    background:rgba(0,0,0,.18);
    margin-bottom:42px;
}

.painting-description{
    font-size:clamp(1rem,1.4vw,1.28rem);

    line-height:2;
    font-weight:300;
    color:#333;
    margin-bottom:20px;
    max-width:520px;
}

/* ================================================= */

.qr-block{
    margin-top: 20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
}

.qr-image{
    width:clamp(110px,10vw,145px);
    height:clamp(110px,10vw,145px);

    border-radius:18px;
    padding:10px;
    box-shadow:
        0 12px 30px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.05);
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.qr-image:hover{
    transform:translateY(-3px);
    box-shadow:
        0 20px 40px rgba(0,0,0,.12),
        0 5px 12px rgba(0,0,0,.06);
}

.qr-text{
    font-size:.54rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#555;
}


/* =====================================================
   SECOND PAINTING
===================================================== */

.section-6-container.reverse{

    position: relative;
    z-index: 5;

    width:100%;
    max-width:1750px;

    margin:
    clamp(20px,15vw,60px)
    auto
    0;

    padding:0 clamp(40px,8vw,140px);

    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:120px;
    align-items:center;
}


/* ---------- Левая колонка (текст) ---------- */

.section-6-container.reverse .painting-info{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: flex-start;
    

    text-align:left;
    padding-left:clamp(20px,5vw,70px);
}


/* II */

.section-6-container.reverse .painting-number{

    font-size:1.35rem;
    letter-spacing:.2em;
    color:#666;
    margin-bottom:22px;
}


/* DIALOGUE */

.section-6-container.reverse .painting-title{

    font-size:clamp(2.8rem,4vw,4.6rem);
    font-weight:500;
    letter-spacing:.12em;

    margin-bottom:30px;
}


/* линия */

.section-6-container.reverse .painting-line{

    width:90px;
    height:1px;

    background:rgba(0,0,0,.18);

    margin-bottom:42px;
}


/* текст */

.section-6-container.reverse .painting-description{

    max-width:520px;

    font-size:clamp(1rem,1.4vw,1.28rem);
    line-height:2;
    font-weight: 300;

    color:#333;

    margin-bottom:20px;
}


/* QR */





/* ---------- Правая колонка (картина) ---------- */

.section-6-container.reverse .painting-column{

    display:flex;
    justify-content:flex-end;
}


.section-6-container.reverse .painting-wrapper{

    width:100%;
    display:flex;
    justify-content:flex-end;
}


.section-6-container.reverse .painting-image{

    width:100%;
    max-width:640px;

    display:block;

    filter:
        drop-shadow(0 8px 10px rgba(0,0,0,.06))
        drop-shadow(0 22px 34px rgba(0,0,0,.09))
        drop-shadow(0 48px 80px rgba(0,0,0,.12))
        drop-shadow(0 90px 140px rgba(0,0,0,.10));

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .8s cubic-bezier(.22,1,.36,1);
}


.section-6-container.reverse .painting-image:hover{

    transform:scale(1.012);

    filter:
        drop-shadow(0 12px 15px rgba(0,0,0,.08))
        drop-shadow(0 28px 42px rgba(0,0,0,.12))
        drop-shadow(0 60px 95px rgba(0,0,0,.16))
        drop-shadow(0 110px 170px rgba(0,0,0,.12));
}


/* свет вокруг картины */

.section-6-container.reverse .painting-wrapper::after{

    content:"";

    position:absolute;
    inset:-18px;

    pointer-events:none;

    background:radial-gradient(
        ellipse,
        rgba(255,255,255,.18),
        transparent 72%
    );

    filter:blur(30px);

    z-index:-1;
}

.section-6-container.reverse .qr-block{
    width:min(570px,100%);          /* такая же ширина, как у текста */
    margin-top: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-end; /* прижимает QR и подпись вправо */
}

/* ==========================================
   THIRD PAINTING
========================================== */

.section-6-container:not(:first-child){
    margin-top:clamp(60px,8vw,120px);
}


.section-6-container:nth-child(2) .painting-image{
    max-width:690px;
}

.section-6-container:nth-child(4) .painting-image{
    max-width:690px;
}


/* ==========================================
   PROJECT FOOTER
========================================== */

.project-footer{

    width:100%;
    max-width:1520px;
    margin-top:clamp(100px,12vw,220px);

    padding:
    clamp(80px,8vw,140px)
    clamp(20px,5vw,70px)
    clamp(40px,5vw,70px);

    display:grid;
    grid-template-columns:1fr 1fr .8fr;
    gap:clamp(35px,6vw,90px);

    position:relative;
    z-index:5;
    border-top:1px solid rgba(0,0,0,.08);

}

.footer-label{
    display:block;
    margin-bottom:clamp(20px,4vw,42px);

    font-size:.72rem;
    letter-spacing:.45em;
    text-transform:uppercase;
    color:#666;
}


.footer-space{
    margin-top:clamp(35px,6vw,70px);
}

.footer-item{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:clamp(20px,4vw,40px);
}

.footer-year{
    min-width:55px;
    font-size:.8rem;
    letter-spacing:.22em;
    color:#888;
}

.footer-item h4{
    font-size:1rem;
    font-weight:500;
    margin-bottom:8px;
    color:#2f2f2f;
    margin:0;
}

.footer-item p{
    line-height:1.8;
    color:#565656;
    font-weight:300;
    margin:0;
}

.practice-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap: 16px;
}

.practice-list li{
    color:#565656;
    font-weight:300;
    letter-spacing:.04em;
}

.contact-list{
    display:flex;
    flex-direction:column;
    gap: clamp(4px, 8vw, 22px);
}

.contact-list a{
    color:#565656;
    text-decoration:none;
    font-weight:300;
    transition:.35s;
}

.contact-list a:hover{
    opacity:.55;
}



.site-ending{
    width:100%;
    padding:
    clamp(60px,8vw,100px)
    0
    5px;

    text-align:center;
    color:#6f6f6f;
    font-size:.8rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    position:relative;
    z-index:5;
}

.contact-label{
    margin-top:18px;
    margin-bottom:8px;

    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;

    color:#777;
}


.site-footer{
    position: relative;

    margin-top:clamp(80px,10vw,160px);
    padding:
    clamp(70px,8vw,120px)
    0
    0;
}

.statement-subtitle{
    max-width:760px;

    margin:0 auto clamp(25px,5vw,48px);

    font-size:1.45rem;
    line-height:1.8;

    font-weight:400;
    letter-spacing:.02em;

    color:#252525;

     text-align:center;
}

.video-link{
    margin-top:2px;
    font-size:.60rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    color:#666;
    text-decoration:none;
}

.video-link:hover{
    opacity:.55;
}


/* =========================
   BACK TO TOP
========================= */

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 50%;

    background: rgba(208, 196, 190, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color: #444;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s ease,
        background 0.3s ease;

    z-index: 9000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(208, 196, 190, 0.95);
}




/* Базовое скрытое состояние полноэкранного режима */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* ИЗМЕНЕНИЕ 1: Светлый фон (белый цвет на 65% прозрачности) */
    background-color: rgba(255, 255, 255, 0.65); 
    
    /* ИЗМЕНЕНИЕ 2: Магия матового стекла и легкого размытия сайта на фоне */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Поддержка для Safari */
    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    
    /* ИЗМЕНЕНИЕ 3: Плавное появление и фона, и размытия */
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease; 
}

/* Стили для самой большой картины */
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* Чтобы картина не искажалась и полностью влезала */
    border-radius: 4px;
    
}

/* Класс, который будет добавлять JS при клике */
.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}