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

PRODUCT SHOWCASE

KAIZEN

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

.showcase{

padding:180px 8%;

background:#050505;

position:relative;

overflow:hidden;

}

.showcase-title{

text-align:center;

margin-bottom:90px;

}

.showcase-title span{

color:var(--red);

letter-spacing:6px;

font-size:13px;

display:block;

margin-bottom:15px;

}

.showcase-title h2{

font-size:72px;

margin-bottom:25px;

}

.showcase-title p{

max-width:650px;

margin:auto;

color:#999;

line-height:2;

}



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

.showcase-grid{

display:grid;

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

gap:70px;

align-items:center;

}



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

.product-box{

position:relative;

overflow:hidden;

border-radius:32px;

background:#0b0b0b;

transition:.45s;

cursor:pointer;

}



/* Image */

.product-image{

overflow:hidden;

height:760px;

}

.product-image img,
.product-image video{

width:100%;

height:100%;

object-fit:cover;

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

}

/* Video: fit inside the box fully without distortion (aspect preserved) */
.product-image video{

object-fit:contain;

background:#0b0b0b;

}



/* Overlay */

.product-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:45px;

background:linear-gradient(

180deg,

transparent,

rgba(0,0,0,.92)

);

transform:translateY(80px);

opacity:0;

transition:.45s;

}



/* Category */

.product-category{

font-size:13px;

letter-spacing:5px;

color:var(--red);

margin-bottom:15px;

}



/* Title */

.product-name{

font-size:42px;

margin-bottom:15px;

}



/* Description */

.product-desc{

color:#aaa;

line-height:1.8;

margin-bottom:25px;

}



/* Button */

.product-link{

display:inline-flex;

align-items:center;

gap:10px;

letter-spacing:4px;

font-size:13px;

text-transform:uppercase;

color:white;

}

.product-link:hover{

color:var(--red);

}



/* Hover */

.product-box:hover img{

transform:scale(1.08);

filter:brightness(.6);

}



.product-box:hover .product-overlay{

transform:translateY(0);

opacity:1;

}



.product-box:hover{

transform:translateY(-18px);

box-shadow:

0 35px 80px rgba(0,0,0,.55);

}



/* Red Border */

.product-box::before{

content:"";

position:absolute;

inset:0;

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

border-radius:32px;

transition:.45s;

z-index:5;

pointer-events:none;

}



.product-box:hover::before{

border-color:rgba(193,18,31,.5);

}



/* Shine */

.product-box::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:skewX(-20deg);

transition:.9s;

}



.product-box:hover::after{

left:150%;

}



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

/* INFO PANEL */

.showcase-info{

padding-left:50px;

}

.showcase-info h3{

font-size:60px;

margin-bottom:25px;

}

.showcase-info p{

font-size:18px;

line-height:2;

color:#999;

margin-bottom:35px;

}

.showcase-info ul{

display:flex;

flex-direction:column;

gap:18px;

}

.showcase-info li{

color:#ddd;

letter-spacing:2px;

padding-left:18px;

position:relative;

}

.showcase-info li::before{

content:"";

position:absolute;

left:0;

top:11px;

width:6px;

height:6px;

border-radius:50%;

background:var(--red);

}



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

@media(max-width:992px){

.showcase-grid{

grid-template-columns:1fr;

}

.showcase-info{

padding-left:0;

}

.product-image{

height:620px;

}

}



@media(max-width:768px){

.showcase{

padding:120px 6%;

}

.showcase-title h2{

font-size:46px;

}

.showcase-info h3{

font-size:40px;

}

.product-image{

height:500px;

}

.product-name{

font-size:30px;

}

}