/* =====================================================
   ISFAHANWEB HOME V10.2-A
   HERO EXPERIENCE PASS
===================================================== */


.iw10-hero{
overflow:hidden;
position:relative;
}


/* ambient creative background */

.iw10-hero::before{

content:"";

position:absolute;

inset:-20%;

z-index:0;

background:
radial-gradient(
circle at 75% 35%,
rgba(24,183,241,.22),
transparent 22%
),
radial-gradient(
circle at 15% 70%,
rgba(155,214,61,.18),
transparent 20%
);

pointer-events:none;

}


/* keep content above atmosphere */

.iw10-hero .iw-shell{
position:relative;
z-index:2;
}


/* HERO ART */

@media(min-width:1100px){


.iw10-hero-art{

perspective:1200px;

transform-style:preserve-3d;

}


/* main browser */

.iw10-browser{

transition:
transform .35s cubic-bezier(.2,.75,.25,1),
box-shadow .35s ease;

will-change:transform;

}


/* floating project card */

.iw10-hero-art::before{

content:"";

position:absolute;

z-index:3;

left:-40px;

top:90px;

width:250px;

height:310px;


background:

url("/wp-content/themes/isfahanweb-v1/assets/starter-media/2026/08/portfolio-webp/14.webp")

center top / cover no-repeat;


border:

8px solid #fff;


box-shadow:

0 45px 100px rgba(10,25,35,.25);


transform:

rotate(8deg)
translateZ(80px);


transition:

transform .5s ease;

}


/* small floating badge */

.iw10-hero-art::after{

content:"CREATIVE WEB";

position:absolute;

z-index:5;


right:60px;

top:80px;


padding:

12px 18px;


font-family:var(--en);

font-size:12px;

letter-spacing:.12em;


background:#0d2733;

color:white;


border-radius:999px;


box-shadow:

0 20px 50px rgba(0,0,0,.18);


transform:

translateZ(120px)
rotate(4deg);

}


/* hero heading */

.iw10-hero h1{

position:relative;

z-index:4;

}


.iw10-hero h1::after{

content:"";

position:absolute;

right:-30px;

bottom:10px;

width:120px;

height:8px;


background:

linear-gradient(
90deg,
var(--orange),
var(--green)
);


border-radius:10px;


}


/* CTA more agency-like */

.iw10-hero .iw-btn{

position:relative;

overflow:hidden;

}


.iw10-hero .iw-btn::after{

content:"";

position:absolute;

inset:0;


background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);


transform:
translateX(-120%);

transition:
transform .6s ease;

}


.iw10-hero .iw-btn:hover::after{

transform:
translateX(120%);

}


}


/* mobile cleanup */

@media(max-width:700px){

.iw10-hero-art::before{

width:150px;

height:190px;

left:0;

top:30px;

}


.iw10-hero-art::after{

right:10px;

top:20px;

font-size:9px;

padding:8px 12px;

}

.iw10-hero h1::after{

width:70px;

height:5px;

}

}