/* ==========================
   PROJECT HERO OLF
========================== */

.project-hero{

    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
   
}

.project-hero::after{
    
    content:"";
    
    position:absolute;
    
    left:0;
    bottom:0;
    width:100%;
    height:340px;
    background:linear-gradient(
         
        180deg,

        rgba(17,17,17,0) 0%,

        rgba(17,17,17,.15) 30%,

        rgba(17,17,17,.72) 70%,

        #090909 100%
    );

     pointer-events:none;
}

.project-hero img{

    width:100%;
    height:100%;
    object-fit:cover;
    
    opacity:0;

    animation:heroFade 1.2s ease forwards;


}

.project-overlay{

    position:absolute;
    inset:0;
    background:
        radial-gradient(
            ellipse 700px 420px
            at 18% 78%,

            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.35) 40%,
            rgba(0,0,0,.12) 70%,
            transparent 100%
        );
    
    z-index:1;

}

.project-hero-content{

    position:absolute;
    left:80px;
    bottom:80px;
    color:white;
    z-index:5;
    max-width:700px;

}

.project-hero-content p{

    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;

}


.project-hero-content h1{

    font-size:72px;
    line-height:1;
    font-weight:600;
    letter-spacing:-2px;
    text-shadow:0 4px 20px rgba(0,0,0,.45);
    color:rgb(255, 238, 0);
    text-wrap:balance;

}

.visually-hidden{

    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;

}

.project-logo{

    width:550px;
    max-width:100%;
    height:auto;

    display:block;

    margin-top:12px;
    margin-left:-16px;

    opacity:0;
    transform:translateY(15px);

    filter:drop-shadow(0 4px 30px rgba(0,0,0,.45));

    animation:titleReveal .9s ease forwards;
    animation-delay:.35s;

}

.project-meta{

    opacity:0;
    transform:translateY(40px);
    animation:metaReveal .9s ease forwards;
    animation-delay:1.0s;
    margin-bottom:30px;
    

}

/* ==========================
   PROJECT INFO
========================== */

.project-info{

    padding:100px 0;
    background:#090909;

}

.project-info .container{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px;

}

.info-item h3{

    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.6;
    margin-bottom:12px;
}

.info-item p{

    font-size:20px;
    line-height:1.6;
    font-weight:500;

}

/* ==========================
   SYNOPSIS
========================== */

.synopsis{

    padding:80px 0;
    background:#090909;
    color:white;


}

.synopsis h2{

    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:50px;

}

.synopsis p{

    max-width:720px;
    font-size:22px;
    line-height:1.8;
    opacity:.9;

}
/* ==========================
   PROJECT VIDEO
========================== */

.project-video{

    padding:40px 0;

    background:#090909;

}

.video-thumbnail{

    position:relative;

    cursor:pointer;

    overflow:hidden;

    border-radius:8px;

}

.video-thumbnail img{

    width:100%;

    display:block;

    transition:

        transform .7s ease,

        filter .7s ease;

}

.video-thumbnail:hover img{

    transform:scale(1.02);

    filter:brightness(.75);

}

.play-button{

    position:absolute;

    top:50%;
    left:50%;

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

    width:96px;
    height:96px;

    border-radius:50%;

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

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

    backdrop-filter:blur(16px);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.video-thumbnail:hover .play-button{

    transform:

        translate(-50%,-50%)

        scale(1.08);

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

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

    box-shadow:

        0 0 30px rgba(255,255,255,.12);

}

.video-description{

    margin-top:32px;

    max-width:720px;

}

.video-description h2{

    font-size:24px;

    font-weight:600;

    margin-bottom:16px;

}

.video-description p{

    font-size:18px;

    line-height:1.8;

    opacity:.8;

}

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

.gallery{

    padding:80px 0;

    background:#090909;

}

.gallery h2{

    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:80px;  

}

.gallery-grid{

    display:grid;

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

    gap:20px;

    margin-top:80px;

}

.gallery-grid .still{

    margin-bottom:0;

}

.gallery-grid img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

}

.gallery:hover .still{

    opacity:.45;

}

.gallery .still:hover{

    opacity:1;

    transform:translateY(-8px);

}

.still{

    margin-bottom:120px;
    overflow:hidden;
    transition:transform .4s ease;
    cursor:pointer;

}

.still.still-narrow{

    max-width:900px;
    margin-left:auto;
    margin-right:auto;

}

.still img{

    width:100%;
    display:block;
    border-radius:4px;
    transition:
        transform .6s ease,
        box-shadow .6s ease;


}

.still-caption{

    margin-top:12px;
    max-width:520px;

}

.still-caption h3{

    font-size:13px;
    text-transform:uppercase;
    margin-bottom:12px;
    margin-top:36px;
    opacity:.65;

}

.still-caption p{

    font-size:18px;
    line-height:1.8;
    max-width:980px;
    letter-spacing: 3px;

}

.still:hover{

    transition:
        transform .5s ease,
        opacity .5s ease;
}

.still:hover img{

    transform:scale(1.02);
    box-shadow:0 40px 90px rgba(0,0,0,.5);

}

/* ==========================
   PROJECT NAV
========================== */

.project-nav{

    position:fixed;
    top:32px;
    left:40px;
    z-index:100;

}

.project-nav a{

    color:white;
    text-decoration:none;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.8;
    transition:opacity .3s ease;

}

.project-nav a:hover{

    opacity:0.5;

}

.next-project a{

    display:inline-flex;

    align-items:center;

    gap:14px;

}

.next-project a::after{

    content:"→";

    transition:transform .3s ease;

}

.next-project a:hover::after{

    transform:translateX(10px);

}

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

.reveal{

    opacity:0;
    transform:translateY(60px);
    transition:
    opacity .8s ease,
    transform .8s ease;

}

.reveal.active{

    opacity:1;
    transform:translateY(0);

}

.reveal-delay{

    transition-delay:.25s;

}

/* ==========================
   NEXT PROJECT
========================== */

.next-project{

    padding:140px 0;

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

    background:#090909;

}

.next-project p{

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.6;

    margin-bottom:18px;

}

.next-project a{

    color:white;

    text-decoration:none;

    font-size:56px;

    font-weight:600;

    transition:opacity .3s ease;

}

.next-project a:hover{

    opacity:.6;

}

/* ==========================
   LIGHTBOX
========================== */

.lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:92%;
    max-height:92%;
    object-fit:contain;
    border-radius:6px;
   
    transition:
        opacity .35s ease,
        transform .35s ease;

    opacity:1;

}

.lightbox img.slide-out{

    opacity:0;

    transform:translateX(-30px);

}

.lightbox img.slide-in{

    opacity:0;

    transform:translateX(30px);

}

.lightbox img.changing{

    opacity:0;

    transform:scale(.98);

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:white;

    font-size:48px;

    cursor:pointer;

    opacity:.6;

    transition:.3s;

    padding:24px;

}

.lightbox button:hover{

    opacity:1;

}

.lightbox-prev{

    left:24px;

}

.lightbox-next{

    right:24px;

}

.lightbox-close{

    position:absolute;

    top:24px;

    right:24px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

    transform:none;

    z-index:1002;


}

.lightbox-close:hover{

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

}

/* ==========================
   USED TOOLS [SAME AS HOME PAGE]
========================== */

.used-tools{

    padding:100px 0;
    background:#090909;
    border-top:1px solid rgba(255,255,255,.05);

}

.used-tools h2{

    font-size:14px;
    letter-spacing:2px;
    margin-top:24px;
    margin-bottom:48px;
    text-align:center;
    opacity:.7;

}

.used-tools h3{

    font-size:14px;
    letter-spacing:0px;
    margin-top:24px;
    margin-bottom:48px;
    text-align:center;
    opacity:.7;

}

.used-tools-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:72px;

    flex-wrap:wrap;

}

.used-tools-grid img{

    height:42px;

    opacity:.55;

    transition:.3s ease;

}

.used-tools-grid img:hover{

    opacity:1;

    transform:translateY(-4px);

}

.used-tools-subtitle{

    margin-top:80px;

}

/* ==========================
   VIDEO LIGHTBOX
========================== */

.video-lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.video-lightbox.active{

    opacity:1;

    visibility:visible;

}

.video-lightbox-content{

    position:relative;

    width:min(1200px,90vw);

}

.video-lightbox iframe,
.video-lightbox video{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:8px;

    background:black;

}

.video-lightbox video{

    display:none;

}

.video-lightbox iframe{

    display:none;

}

.video-lightbox video.active{

    display:block;

}

.video-lightbox iframe.active{

    display:block;

}

.video-close{

    position:absolute;

    top:-50px;

    right:0;

    background:none;

    border:none;

    color:white;

    font-size:32px;

    cursor:pointer;

}

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

.footer{

    padding:30px 0;

    background:#090909;

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

}

.footer .container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;

    position:relative;

}

.footer-left h2{

    font-size:28px;

    margin-bottom:12px;

    letter-spacing:2px;

}

.footer-left p{

    opacity:.65;

    line-height:1.8;

}

.footer-social{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:18px;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:.6;

    transition:
        opacity .3s ease,
        transform .3s ease;



}

.footer-social a:hover{

    opacity:1;

    transform:translateY(-3px);

}

.footer-social img{

    width:22px;
    height:22px;

    opacity:.55;

    filter:brightness(0) invert(1);

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.footer-social a:hover img{

    opacity:1;

    transform:translateY(-3px);

}

.footer-right{

    text-align:right;

}

.footer-right a{

    color:white;

    text-decoration:none;

    display:block;

    margin-bottom:16px;

    transition:opacity .3s ease;

}

.footer-right a:hover{

    opacity:.6;

}

.footer-right p{

    opacity:.55;

}

.footer-phone{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

}

.footer-phone img{

    width:18px;

    height:18px;

    opacity:.7;

    filter:brightness(0) invert(1);

}

.footer-phone span{

    color:white;

}

.footer-copyright{

    position:absolute;

    left:50%;

    bottom:2;

    transform:translateX(-50%);

    font-size:15px;
}


.footer-copyright p{

    opacity:.65;

    font-size:14px;
    
    line-height:0.4;

    white-space:nowrap;
    

}

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

.editing-hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.editing-hero video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.editing-overlay{

    position:absolute;

    inset:0;

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

}

.editing-hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:320px;

    background:linear-gradient(

        transparent,

        #090909

    );

}

.editing-hero-content{

    position:absolute;

    left:80px;

    bottom:90px;

    z-index:5;

    color:white;

}

.editing-hero-content p{

    font-size:15px;

    letter-spacing:2px;

    margin-bottom:20px;

    text-transform:uppercase;

    opacity:.8;

}

.editing-hero-content h1{

    font-size:78px;

    line-height:1;

    letter-spacing:-2px;

    font-weight:600;

    color:rgb(255, 238, 0);

}

/* ==========================
   EDITING SECTION
========================== */

.editing-section{

    padding:80px 0;

    background:#090909;

}

.editing-header{

    margin-bottom:80px;

}

.editing-header h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.editing-header p{

    max-width:720px;

    font-size:22px;

    line-height:1.8;

    opacity:.85;

}

.editing-intro{

    padding:120px 0 40px;

    background:#090909;

}

.editing-intro p{

    max-width:760px;

    font-size:24px;

    line-height:1.9;

    opacity:.85;

    text-align:center;

    margin:0 auto;


}

.editing-grid{

    display:grid;

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

    gap:28px;

}

.editing-card{

    cursor:pointer;
    
    transition:
        transform .35s ease;

}

.editing-thumbnail{

    position:relative;

    overflow:hidden;

    border-radius:8px;

}

.editing-play{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    color:white;

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

    backdrop-filter:blur(2px);

    opacity:0;

    transition:.3s;

}

.editing-thumbnail:hover .editing-play{

    opacity:1;

}

.editing-thumbnail video{

    transition:

        transform .45s ease,

        filter .45s ease;

}

.editing-thumbnail:hover video{

    transform:scale(1.03);

    filter:brightness(.75);

}

.editing-card:hover{

    transform:translateY(-8px);

}

.editing-card video{

    width:100%;

    display:block;

    border-radius:6px;

    background:#111;

}

.vertical video{

    aspect-ratio:9/16;

    object-fit:cover;

}

.horizontal{

    grid-column:1 / -1;

}

.horizontal .editing-thumbnail{

    width:900px;

    max-width:100%;

    margin:0 auto;

}

.horizontal .editing-info{

    width:900px;

    max-width:100%;

    margin:24px auto 0;

}

.horizontal video{

    aspect-ratio:16/9;

    object-fit:cover;

}

.editing-info{

    margin-top:24px;

}

.editing-info h3{

    font-size:22px;

    font-weight:500;

    letter-spacing:-0.3px;

    margin-bottom:10px;

}

.editing-info span{

    display:block;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    opacity:.5;

}

.editing-divider{

    width:100%;

    height:1px;

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

    margin:120px 0;

}

.workflow-intro{

    padding:80px 0;

    background:#090909;


}

.workflow-intro .container{

    max-width:1100px;

}

.workflow-intro h2{

    font-size:56px;

    margin-bottom:50px;

    font-weight:500;

}


.workflow-intro p{

    max-width:860px;

    font-size:24px;

    line-height:1.9;

    opacity:.82;

    

}

/* ==========================
   COLOR PIPELINE
========================== */

.color-pipeline{

    padding:0px 0;

    background:#090909;

}

.color-pipeline h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:70px;

}

.pipeline-flow{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;

    flex-wrap:wrap;

}

.pipeline-stage{

    min-width:220px;

    padding:38px;

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

    border-radius:12px;

    text-align:center;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;


}

.pipeline-stage:hover{

    transform:translateY(-5px);

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

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

}

.pipeline-stage span{

    font-size:22px;

    letter-spacing:2px;

}

.pipeline-arrow{

    opacity:.18;

    font-size:22px;

    transition:.35s;


}

.pipeline-flow:hover .pipeline-arrow{

    opacity:.45;

}

.pipeline-description{

    max-width:760px;

    margin:80px auto 0;

    text-align:center;

    font-size:20px;

    line-height:1.9;

    opacity:.75;

}

/* ==========================
   COLOR BREAKDOWN
========================== */

.color-breakdown{

    padding:40px 0;

    background:#090909;

}

.color-breakdown h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.color-breakdown p{

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:24px;

}

.color-grid{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}

.color-arrow{

    position:relative;
    
    top:-20px;
    
    font-size:20px;

    opacity:.35;

}

.color-card img{

    width:100%;

    display:block;

    border-radius:8px;

    transition:.45s ease;

}

.color-card:hover img{

    transform:translateY(-8px);

}

.color-card h3{

    margin-top:24px;

    text-align:center;

    font-size:15px;

    letter-spacing:2px;

}

/* ==========================
   POST-PRODUCTION WORKFLOW
========================== */

.workflow-process{

    padding:80px 0;

    background:#090909;

}

.workflow-process h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:26px;

}

.workflow-intro-text{

    max-width:640px;

    line-height:1.9;

    font-size:18px;

    opacity:.72;

    margin-bottom:90px;

}

.workflow-timeline{

    display:flex;

    flex-direction:column;

    gap:42px;

}

.workflow-card{

    position:relative;

    padding-bottom:42px;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:
        transform .35s ease,
        border-color .35s ease;

}

.workflow-card:hover{

    transform:translateX(10px);

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

}

.workflow-card span{

    display:block;

    font-size:72px;

    font-weight:700;

    color:rgba(255,255,255,.08);

    line-height:1;

    margin-bottom:12px;

}

.workflow-card h3{

    font-size:24px;

    letter-spacing:3px;

    margin-bottom:18px;

}

.workflow-card p{

    max-width:520px;

    line-height:1.9;

    font-size:18px;

    opacity:.72;

}

/* ==========================
   CREATIVE PROCESS
========================== */

.creative-process{

    
    padding:80px 0;

    background:#090909;


}

.creative-process h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.creative-intro{

    max-width:720px;

    font-size:18px;

    line-height:1.9;

    opacity:.72;

    text-align: left;
    

}

.creative-grid{

    display:grid;

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

    gap:28px;

}

.creative-card{

    padding:34px;

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

    transition:

        transform .35s ease,

        border-color .35s ease,

        background .35s ease;

}

.creative-card:hover{

    transform:translateY(-8px);

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

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

}

.creative-card span{

    display:block;

    font-size:42px;

    color:rgba(255,255,255,.08);

    margin-bottom:18px;

}

.creative-card h3{

    font-size:20px;

    margin-bottom:18px;

}

.creative-card p{

    font-size:16px;

    line-height:1.9;

    opacity:.72;

}

/* ==========================
   PRODUCTION JOURNAL
========================== */

.production-journal{

    padding:60px 0 50px;

    background:#090909;

}

.production-journal h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.journal-intro{

    max-width:720px;

    font-size:20px;

    line-height:1.9;

    opacity:.72;

    letter-spacing: 2px;

}

/* ==========================
   EDITING ENVIRONMENT
========================== */

.editing-environment{

    padding:160px 0;

    background:#090909;

}

.editing-environment h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.environment-intro{

    max-width:620px;

    font-size:18px;

    line-height:1.9;

    opacity:.72;

    margin-bottom:80px;

}

.environment-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:36px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:

        padding-left .35s ease,

        border-color .35s ease;

}

.environment-item:hover{

    padding-left:12px;

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

}

.environment-item h3{

    font-size:24px;

    font-weight:500;

}

.environment-item p{

    max-width:420px;

    text-align:right;

    opacity:.65;

    line-height:1.8;

}

/* ==========================
   COLOR COMPARISON
========================== */

.color-compare{

    padding:40px 0;
    background:#090909;

}

.color-compare h2{
    
    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.color-compare p{
    
    font-size:18px;

    letter-spacing:2px;

    margin-bottom:24px;

}

.color-palette{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:24px 0 70px;

}

.color-palette img{

    width:650px;    

    max-width: 60%;

    height:auto;

    display:block;
    

}

.color-palette h4{
    
    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom: 12px;

}

.compare{

    position:relative;

    width:100%;

    max-width:1200px;

    margin:auto;

    overflow:hidden;

    border-radius:8px;

    cursor:ew-resize;

    user-select:none;

    touch-action:none;

}

.compare-img{

    display:block;

    width:100%;

    height:auto;

}

.compare>img{

    display:block;

}

.compare-overlay{

    position:absolute;

    inset:0;

    clip-path:inset(0 50% 0 0);

    will-change:clip-path;

}

.compare-overlay img{

    display:block;

    width:100%;

    height:100%;

}

.compare-divider{

    position:absolute;

    inset:0 auto 0 50%;

    width:1px;

    background:white;

    transform:translateX(-.5px);

    pointer-events:none;

    z-index:20;

    box-shadow:0 0 10px rgba(255,255,255,.35);


}

.compare-handle{

    position:absolute;

    top:50%;

    left:50%;

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

    width:46px;

    height:46px;

    border-radius:50%;

    border:2px solid white;

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

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    animation:handleGlow 2.4s ease-in-out infinite;

    position:absolute;
    overflow:visible;


    box-shadow:

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

     transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}

.compare-handle::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.25);

    opacity:0;

    animation:hintPulse 2.8s ease-out infinite;

}

.compare.dragging .compare-handle{

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

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

    box-shadow:
        0 0 24px rgba(255,255,255,.35);

}

.compare-handle::before{

    content:"◄ ►";

    color:white;

    font-size:12px;

    letter-spacing:2px;

}

.compare-labels{

    position:absolute;

    top:22px;

    left:22px;

    right:22px;

    display:flex;

    justify-content:space-between;

    pointer-events:none;

    z-index:30;
}

.compare-labels span{

    padding:10px 18px;

    border-radius:12px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    color:white;

    font-size:14px;

    letter-spacing:3px;

    font-weight:500;

    text-transform:uppercase;

    box-shadow:

        0 10px 30px rgba(0,0,0,.25);

}

.compare,
.compare *{

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;

}

.compare img{

    pointer-events:none;

    user-select:none;

    -webkit-user-drag:none;


}

/* ==========================
   WORKFLOW DETAIL
========================== */

.workflow-detail{

    padding:80px 0 40px;

    background:#090909;

}

.workflow-detail h2{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:30px;

}

.workflow-detail-text{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

    font-size:21px;

    line-height:1.9;

    color:rgba(255,255,255,.75);

}

/* ==========================================
   ACCORDION
========================================== */

.accordion-toggle{
    cursor:pointer;
}

.workflow-card{
    position:relative;
}

.accordion-arrow{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);

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

    width:40px;
    height:40px;

    font-size:22px;
    font-weight:600;
    color:#ffffff;

    border-radius:50%;
    transition:
        transform .35s ease,
        color .25s ease,
        background-color .25s ease;
}

.accordion-toggle:hover .accordion-arrow{
    background:rgba(255,255,255,.08);
}

.accordion-toggle.active .accordion-arrow{
    background:rgba(255,255,255,.12);
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .35s ease,
        opacity .2s ease;
}

.accordion-content.active{
    opacity:1;
}

.accordion-toggle.active .accordion-arrow{
    transform:translateY(-50%) rotate(180deg);
}

/* ==========================
   FOLDER CARD
========================== */

.folder-card{

    width:700px;

    max-width:100%;

    margin:auto;

    background:#0d0d0d;

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

    border-radius:14px;

    padding:55px;

    transition:.35s ease;

}

.folder-card:hover{

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

    transform:translateY(-4px);

}

.folder-card h3{

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:30px;

    opacity:.55;

}

/* ==========================
   PROJECT TREE
========================== */

.tree,
.tree ul{
    list-style:none;
    margin:0;
    padding:0;
}

.tree{

    margin-top:36px;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

}

.tree ul{

    margin-left:28px;

}

.tree li{

    position:relative;

    padding:10px 0 10px 30px;

    border-left:1px solid rgba(255,255,255,.18);

}

/* เส้นแนวนอน */

.tree li::before{

    content:"";

    position:absolute;

    left:0;

    top:24px;

    width:18px;

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

}

/* ตัดเส้นของรายการสุดท้าย */

.tree li:last-child{

    border-left:none;

}

.tree li:last-child::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:50%;

    border-left:1px solid rgba(255,255,255,.18);

}

/* Root */

.tree>li{

    margin-left:10px;

}

/* ตัวหนังสือ */

.tree span{

    display:inline-block;

    font-size:18px;

    color:rgba(255,255,255,.9);

    transition:.25s;

}

.tree ul li{

    color:rgba(255,255,255,.62);

    font-size:16px;

    transition:.25s;

}

/* Hover */

.tree li:hover>span{

    color:#fff;

}

.tree li:hover{

    border-left-color:rgba(255,255,255,.45);

}

.tree li:hover::before{

    border-top-color:rgba(255,255,255,.45);

}

.tree li:hover::after{

    border-left-color:rgba(255,255,255,.45);

}

.tree ul li:hover{

    color:#fff;

}

/* ==========================
CRITERIA
========================== */

.criteria-grid{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}

.criteria-card{

    padding:28px;

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

    border-radius:12px;

    text-align:center;

    transition:.3s;

    position:relative;

    overflow:hidden;    

}

.criteria-card:hover{

    transform:translateY(-3px);

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

}

/* ==========================
SELECT PROCESS
========================== */

.selection-process{

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

    margin:70px auto 0;

}

.selection-step{

    padding:34px;

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

    border-radius:14px;

    background:#101010;

    text-align:center;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.selection-step:hover{

    transform:translateY(-4px) scale(1.03);

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

    color:#ffffff;

}

.selection-number{

    display:block;

    margin-bottom:12px;

    font-size:42px;

    font-weight:300;

    letter-spacing:2px;
    
    transition:.35s ease;

    color:#ffffff;


}

.selection-step h3{

    margin-bottom:10px;

}

.selection-step p{

    opacity:.7;

    line-height:1.7;

}

.selection-arrow{

    text-align:center;

    font-size:28px;

    padding:18px 0;

    opacity:.45;

}

.selection-step.final{

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

}

/* ==========================
EDIT WORKFLOW
========================== */

.edit-flow{

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

    margin:70px auto 0;

}

.edit-stage{

    padding:36px;

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

    border-radius:14px;

    background:#101010;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.edit-stage:hover{

    transform:translateY(-4px);

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

}

.edit-stage span{

    display:inline-block;

    margin-bottom:18px;

    font-size:42px;

    font-weight:300;

    opacity:.35;

}

.edit-stage h3{

    margin-bottom:14px;

}

.edit-stage p{

    line-height:1.8;

    opacity:.72;

}

.edit-line{

    width:2px;

    height:48px;

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

    margin:18px auto;

}

.edit-stage.final{

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

}

/* ==========================
EDIT PRINCIPLES
========================== */

.principle-grid{

    display:grid;

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

    gap:24px;

    margin-top:60px;

}

.principle-card{

    padding:32px;

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

    border-radius:14px;

    transition:.3s;

    position:relative;

    overflow:hidden;

}

.principle-card:hover{

    transform:translateY(-3px);

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

}

.principle-card h3{

    margin-bottom:12px;

}

.principle-card p{

    opacity:.72;

    line-height:1.7;

}

/* ==========================
TIMELINE PREVIEW
========================== */

.timeline-ui{

    margin-top:60px;

    padding:40px;

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

    border-radius:16px;

    background:#0d0d0d;

}

.timeline-track{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}

.timeline-track:last-child{

    margin-bottom:0;

}

.timeline-track span{

    width:38px;

    opacity:.45;

    font-size:13px;

    letter-spacing:1px;

}

.clip{

    height:34px;

    border-radius:8px;

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

    transition:
        transform .35s ease,
        opacity .35s ease,
        width .35s ease;


}

.timeline-ui:hover .long{

    width:350px;

}

.timeline-ui:hover .medium{

    width:205px;

}

.timeline-ui:hover .short{

    width:120px;

}

.long{

    width:320px;
    background:rgba(201, 25, 255, 0.12);

}

.medium{

    width:180px;
    background:rgba(0, 103, 129, 0.12);

}

.short{

    width:100px;
    background:rgba(1, 131, 87, 0.12);

}

.wave{

    width:100%;

    height:28px;

    border-radius:6px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.18) 0 2px,
            transparent 2px 6px
        );

}

.wave.small{

    opacity:.6;

}

/* ==========================
SOUND MIXER
========================== */

.audio-mixer{

    max-width:820px;

    margin:70px auto 0;

    padding:42px;

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

    border-radius:16px;

    background:#0d0d0d;

}

.audio-row{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:28px;

    align-items:center;

    margin-bottom:26px;

}

.audio-row:last-child{

    margin-bottom:0;

}

.audio-row span{

    font-size:15px;

    letter-spacing:1px;

    opacity:.75;

}

.audio-bar{

    height:14px;

    border-radius:999px;

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

    position:relative;

    overflow:hidden;

}

.audio-bar::before{

    content:"";

    position:absolute;

    inset:0 auto 0 0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.55),
        rgba(255,255,255,.18)
    );

    transition:width .55s ease;

    

}

.audio-row:hover .level-100::before{

    width:100%;

}

.audio-row:hover .level-75::before{

    width:88%;

}

.audio-row:hover .level-60::before{

    width:74%;

}

.audio-row:hover .level-40::before{

    width:55%;

}

.level-100::before{width:100%;}
.level-75::before{width:75%;}
.level-60::before{width:60%;}
.level-40::before{width:40%;}

/* ==========================
DELIVERY
========================== */

.delivery-checklist{

    max-width:860px;

    margin:70px auto 0;

}

.delivery-item{

    display:flex;

    gap:28px;

    align-items:flex-start;

    padding:30px;

    margin-bottom:18px;

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

    border-radius:14px;

    background:#101010;

    transition:.35s;

}

.delivery-item:hover{

    transform:translateX(8px);

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

    color:#ffffff;

}

.delivery-item span{

    font-size:26px;

    opacity:.55;

    transition:.35s ease;
}

.delivery-item:hover span{

    opacity:1;

    transform:scale(1.15);

}

.delivery-item h3{

    margin-bottom:10px;

}

.delivery-item p{

    opacity:.72;

    line-height:1.8;

}

.delivery-title{

    margin-top:40px;

    margin-bottom:40px;

    text-align: center;

}

.deliver-arrow{

    display:flex;

    justify-content:center;

    margin:30px 0 50px;

    margin-top: 40px;

}

.deliver-arrow svg{

    width:90px;

    height:90px;

    fill:#ffffff;

    transition:transform .35s ease;

}

.deliver-arrow:hover svg{

    transform:translateY(6px);

}

.deliver-grid{

    display:grid;

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

    gap:22px;

    max-width:820px;

    margin:60px auto 0;

}

.deliver-box{

    padding:22px 18px;

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

    border-radius:12px;

    text-align:center;

    font-size:20px;

    letter-spacing:1px;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;

}

.deliver-box:hover{

    transform:translateY(-5px);

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

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

}

.bts-caption h3{

    font-size:13px;
    text-transform:uppercase;
    margin-bottom:12px;
    margin-top:36px;
    opacity:.65;
}

.bts-caption p{

    font-size:18px;
    line-height:1.8;
    max-width:880px;
    letter-spacing: 2px;
    margin-top: 60px;
    margin-bottom: 20px;
}

/* ==========================
SECTION DIVIDER
========================== */

.section-divider{

    width:120px;

    height:1px;

    margin:100px auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    opacity:.7;

}

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

.experience-hero{

    position:relative;

}

.experience-hero-content{

    position:absolute;

    left:80px;
    bottom:90px;

    z-index:5;

    max-width:700px;

    color:white;

}

.experience-meta{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.75;

    margin-bottom:28px;

}

.experience-hero h1{

    font-size:78px;

    line-height:1;

    font-weight:600;

    letter-spacing:-2px;

    color:rgb(255,238,0);

}

.experience-intro{

    margin-top:36px;

    max-width:520px;

    font-size:22px;

    line-height:1.8;

    opacity:.82;

    letter-spacing:1px;

}

.experience-opening{

    padding:180px 0;

    background:#090909;

}

.experience-opening .container{

    max-width:1000px;

}

.experience-opening h2{

    max-width:800px;

    font-size:30px;

    line-height:1.3;

    font-weight:500;

    letter-spacing:2px;

    opacity:.62;
    

}

.experience-opening p{

    margin-top:60px;

    max-width:800px;

    font-size:22px;

    line-height:1.9;

    opacity:.72;

}

/* ==========================================
   EXPERIENCE SECTION
========================================== */

.experience-section{

    padding:180px 0;

    background:#090909;

}

.experience-label{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:120px;

    border-bottom:1px solid rgba(255,255,255,.08);

    padding-bottom:28px;

}

.experience-label span{

    font-size:90px;

    font-weight:700;

    color:rgba(255,255,255,.06);

    line-height:1;

}

.experience-label h2{

    font-size:18px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:500;

}

.experience-list{

    display:flex;

    flex-direction:column;

}

.experience-item{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:80px;

    padding:80px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.45s ease;

}

.experience-item:hover{

    transform:translateX(14px);

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

}

.experience-year{

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.45;

}

.experience-content h3{

    font-size:42px;

    font-weight:500;

    margin-bottom:14px;

    letter-spacing:-1px;

}

.experience-content h4{

    font-size:16px;

    font-weight:400;

    opacity:.45;

    letter-spacing:1px;

    margin-bottom:32px;

}

.experience-content p{

    max-width:720px;

    font-size:21px;

    line-height:1.95;

    opacity:.78;

}

/* ==========================================
   INTERNSHIP
========================================== */

.internship-section{

    padding:180px 0;

    background:#0b0b0b;

}

.internship-grid{

    display:grid;

    grid-template-columns:1fr 1.4fr;

    gap:120px;

}

.internship-meta{

    letter-spacing:2px;

    font-size:14px;

    opacity:.45;

    margin-bottom:26px;

}

.internship-left h3{

    font-size:56px;

    line-height:1.05;

    font-weight:500;

    letter-spacing:-1px;

}

.internship-right{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.internship-right p{

    font-size:21px;

    line-height:1.9;

    opacity:.78;

}

/* ==========================================
   NETFLIX
========================================== */

.netflix-section{

    padding:160px 0;

    background:#090909;

}

.netflix-header{

    margin-bottom:90px;

}

.netflix-header p{

    font-size:14px;

    letter-spacing:2px;

    opacity:.45;

    text-transform:uppercase;

    margin-bottom:18px;

}

.netflix-header h2{

    font-size:62px;

    font-weight:500;

    letter-spacing:-2px;

}

.production-list{

    display:flex;

    flex-direction:column;

}

.production-item{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:40px;

    padding:48px 0;

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

    transition:.35s;

}

.production-item:last-child{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.production-item:hover{

    transform:translateX(12px);

}

.production-item span{

    font-size:18px;

    opacity:.28;

}

.production-item h3{

    font-size:38px;

    font-weight:500;

    margin-bottom:12px;

}

.production-item p{

    font-size:18px;

    opacity:.55;

}

/* ==========================================
   INDUSTRY WORKSHOP
========================================== */

.workshop-section{

    padding:90px 0;

    background:#090909;

}

.workshop-intro{

    max-width:760px;

}

.workshop-tag{

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.45;

    margin-bottom:26px;

}

.workshop-intro h3{

    font-size:68px;

    font-weight:500;

    letter-spacing:-2px;

    margin-bottom:40px;

    line-height:1;

}

.workshop-description{

    font-size:22px;

    line-height:1.9;

    opacity:.8;

}

/* ==========================================
   WORKSHOP HIGHLIGHT
========================================== */

.workshop-highlight{

    padding:140px 0;

    background:#0b0b0b;

}

.highlight-grid{

    display:grid;

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

    gap:60px;
}

.highlight-grid div{

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

    padding-top:36px;

}

.highlight-grid span{

    display:block;

    font-size:72px;

    font-weight:600;

    letter-spacing:-2px;

    margin-bottom:20px;

    color:rgb(255,238,0);

}

.highlight-grid p{

    line-height:1.8;

    opacity:.72;

    font-size:17px;

}

/* ==========================================
   CERTIFICATES
========================================== */

.certificate-section{

    padding:180px 0;

    background:#090909;

}

.certificate-list{

    display:flex;

    flex-direction:column;

}

.certificate-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:46px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    text-decoration:none;

    color:white;

    transition:.35s ease;

}

.certificate-item:first-child{

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

}

.certificate-item:hover{

    transform:translateX(12px);

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

}

.certificate-item h3{

    font-size:34px;

    font-weight:500;

    margin-bottom:12px;

    letter-spacing:-1px;

}

.certificate-item p{

    opacity:.55;

    font-size:16px;

}

.certificate-item span{

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.45;

}

/* ==========================================
   REFLECTION
========================================== */

.reflection-section{

    padding:220px 0 260px;

    background:#0b0b0b;

    text-align:center;

}

.reflection-label{

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:14px;

    opacity:.45;

    margin-bottom:70px;

}

.reflection-section blockquote{

    max-width:700px;

    margin:auto;

    font-size:24px;

    line-height:1.4;

    font-weight:400;

    letter-spacing:2px;

    opacity:.45;


}

.reflection-end{

    margin-top:140px;

    font-size:15px;

    letter-spacing:10px;

    opacity:.25;

}

/* ==========================
   Title Reveal Animation
========================== */


@keyframes titleReveal{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }



}

@keyframes metaReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0px);

    }

}

@keyframes heroFade{

    from{

        opacity:0;
        transform:scale(1.03);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes handleGlow{

    0%,100%{

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

    }

    50%{

        box-shadow:
            0 0 18px rgba(0,0,0,.45),
            0 0 18px rgba(255,255,255,.35);

    }

}

@keyframes hintPulse{

    0%{

        transform:scale(.9);

        opacity:0;

    }

    15%{

        opacity:.45;

    }

    100%{

        transform:scale(1.45);

        opacity:0;

    }

}