/* =========================================================
   ISFAHANWEB HOME V10.2
   CREATIVE EXPERIENCE PASS

   Frozen:
   - Content / IA
   - URLs / SEO
   - Portfolio assets
   - Domain engine
   ========================================================= */


/* =========================================================
   01 / HEADER ↔ HERO INTEGRATION
========================================================= */

/*
 * Covers common WordPress/custom header wrappers.
 * Direct-body selector prevents section <header> elements
 * inside the page from being affected.
 */

body.home > header:first-of-type,
body.home #masthead,
body.home #site-header,
body.home .site-header,
body.home .iw-header,
body.home .isfahanweb-header{
position:absolute;
z-index:1000;

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

width:100%;

background:
rgba(255,255,255,0) !important;

border-bottom:
1px solid
rgba(14,32,41,.075) !important;

box-shadow:none !important;

transition:
background .35s ease,
box-shadow .35s ease,
backdrop-filter .35s ease;
}


/* header becomes glass only after scrolling */

body.home.iw102-header-scrolled > header:first-of-type,
body.home.iw102-header-scrolled #masthead,
body.home.iw102-header-scrolled #site-header,
body.home.iw102-header-scrolled .site-header,
body.home.iw102-header-scrolled .iw-header,
body.home.iw102-header-scrolled .isfahanweb-header{
position:fixed;

background:
rgba(255,255,255,.82) !important;

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

backdrop-filter:
blur(18px);

box-shadow:
0 9px 35px
rgba(14,32,41,.065) !important;
}


/* Hero now visually begins behind navigation */

.iw10-hero{
padding-top:105px;

background:
radial-gradient(
circle at 78% 9%,
rgba(24,183,241,.24),
transparent 28%
),
radial-gradient(
circle at 9% 84%,
rgba(155,214,61,.16),
transparent 25%
),
linear-gradient(
125deg,
#fff 0%,
#f5fbfe 58%,
#f5fde8 100%
);
}


/* Hero composition becomes less "two columns" */

@media(min-width:1100px){

.iw10-hero-grid{
position:relative;

grid-template-columns:
minmax(0,.78fr)
minmax(590px,1.22fr);

gap:0;
}

.iw10-hero-copy{
z-index:12;

transform:
translateX(-1vw);
}

.iw10-hero-art{
margin-inline-start:-8vw;

transform:
translateX(2vw);
}

.iw10-browser{
width:min(91%,650px);

height:635px;

transform:
translate(-50%,-50%)
rotate(-5deg);
}


/* main heading overlaps visual territory */

.iw10-hero h1{
width:118%;

max-width:930px;

font-size:
clamp(4.45rem,7vw,7.95rem);

line-height:.92;
}

.iw10-hero h1 em{
width:max-content;

max-width:950px;

margin-inline-start:-1.8vw;
}


/* give artwork more studio depth */

.iw10-hero-art::before{
left:-60px;

width:270px;
height:355px;

transform:
rotate(8deg);
}

.iw10-hero-caption{
right:-18px;
bottom:82px;

width:285px;
}

}


/* =========================================================
   02 / SERVICES — TYPOGRAPHIC INTERACTION
========================================================= */

.iw10-services{
overflow:hidden;
}


/* stronger editorial heading relationship */

.iw10-services .iw10-heading{
margin-bottom:85px;
}


/* services are no longer passive rows */

.iw10-service{
position:relative;

min-height:185px;

grid-template-columns:
70px
minmax(300px,.72fr)
minmax(0,.68fr)
50px;

cursor:pointer;

isolation:isolate;
}


/* cursor spotlight */

.iw10-service::before{
background:
radial-gradient(
circle at
var(--iw102-x,75%)
var(--iw102-y,50%),
rgba(255,255,255,.36),
transparent 33%
),
linear-gradient(
115deg,
#d9f4ff,
#ecfaff
);
}

.iw10-service:nth-child(2)::before{
background:
radial-gradient(
circle at
var(--iw102-x,75%)
var(--iw102-y,50%),
rgba(255,255,255,.40),
transparent 33%
),
linear-gradient(
115deg,
#e4f5c4,
#f5fbe9
);
}

.iw10-service:nth-child(3)::before{
background:
radial-gradient(
circle at
var(--iw102-x,75%)
var(--iw102-y,50%),
rgba(255,255,255,.42),
transparent 33%
),
linear-gradient(
115deg,
#ffdfbe,
#fff2e5
);
}

.iw10-service:nth-child(4)::before{
background:
radial-gradient(
circle at
var(--iw102-x,75%)
var(--iw102-y,50%),
rgba(24,183,241,.18),
transparent 32%
),
linear-gradient(
115deg,
#10242e,
#173f50
);
}


/* huge typography becomes a visual layer */

.iw10-service::after{
left:auto;
right:7%;

top:50%;

transform:
translateY(-50%)
translateX(20px);

font-size:
clamp(5.2rem,10vw,10rem);

opacity:.045;

transition:
opacity .35s ease,
transform .45s cubic-bezier(.2,.75,.25,1);
}

.iw10-service:hover::after,
.iw10-service.is-active::after{
opacity:.09;

transform:
translateY(-50%)
translateX(0);
}


/* actual service title gets more visual authority */

.iw10-service h3{
font-size:
clamp(2rem,3.3vw,3.65rem);

line-height:1.04;
}


/* service description appears as editorial secondary layer */

.iw10-service p{
max-width:470px;

font-size:.88rem;

line-height:1.9;

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

.iw10-service:hover p,
.iw10-service.is-active p{
transform:
translateX(-8px);
}


/* arrow becomes interaction cue */

.iw10-service > b{
display:flex;

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

width:40px;
height:40px;

border:
1px solid
rgba(14,32,41,.18);

border-radius:50%;

transition:
transform .35s ease,
background .35s ease,
color .35s ease;
}

.iw10-service:hover > b,
.iw10-service.is-active > b{
transform:
rotate(-45deg)
scale(1.08);

background:var(--ink);

color:#fff;
}

.iw10-service:nth-child(4):hover > b,
.iw10-service:nth-child(4).is-active > b{
background:var(--green);

color:var(--ink);
}


/* =========================================================
   03 / MANIFESTO — EDITORIAL STORY
========================================================= */

.iw10-manifesto{
min-height:880px;
}


/* headline gets more space / drama */

.iw10-manifesto-title h2{
max-width:600px;

font-size:
clamp(3.5rem,5.7vw,6.3rem);
}

.iw10-manifesto-title > p{
max-width:480px;
}


/* reasons become full editorial statements */

.iw10-reasons{
border-top:
1px solid
rgba(255,255,255,.15);
}

.iw10-reasons article{
grid-template-columns:
62px 1fr;

min-height:145px;

padding:
31px 25px;
}

.iw10-reasons article b{
font-size:.58rem;
}

.iw10-reasons h3{
font-size:
clamp(1.4rem,2.1vw,1.9rem);
}

.iw10-reasons p{
font-size:.86rem;
}


/* active reason has strong visual signal */

.iw10-reasons article.is-active{
background:
linear-gradient(
90deg,
rgba(255,255,255,.065),
rgba(255,255,255,.012)
);
}

.iw10-reasons article.is-active h3{
color:var(--green);
}


/* desktop visual progress marker */

@media(min-width:1051px){

.iw10-reasons{
position:relative;
}

.iw10-reasons::after{
content:"";

position:absolute;

right:-38px;
top:0;

width:1px;
height:100%;

background:
rgba(255,255,255,.13);
}

.iw10-reasons::before{
content:"";

position:absolute;
z-index:2;

right:-41px;

top:
var(--iw102-reason-progress,0%);

width:7px;
height:54px;

border-radius:999px;

background:
linear-gradient(
var(--blue),
var(--green)
);

transition:
top .45s
cubic-bezier(.2,.75,.25,1);
}

}


/* =========================================================
   MOBILE MANIFESTO — NO DEAD SPACE
========================================================= */

@media(max-width:700px){

.iw10-manifesto{
min-height:0;

padding-top:82px;
padding-bottom:82px;
}

.iw10-manifesto-grid{
display:block;
}

.iw10-manifesto-title{
position:relative !important;
top:auto !important;

margin-bottom:38px;
}

.iw10-reasons article{
min-height:0;

padding:
20px 4px;
}

.iw10-reasons article.is-active{
background:transparent;
}

}


/* =========================================================
   04 / PORTFOLIO — CURRENT PROJECT EXPERIENCE
========================================================= */

/*
 * V10.1 sticky stacking is retained.
 * V10.2 adds stronger project state / counter / scale.
 */

@media(min-width:1051px){

.iw10-project{
overflow:hidden;

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

.iw10-project:not(.is-current){
filter:
saturate(.86)
brightness(.91);
}

.iw10-project.is-current{
filter:none;

box-shadow:
0 -18px 70px
rgba(14,32,41,.17);
}


/* project image has subtle cinematic response */

.iw10-project.is-current
.iw10-project-media img{
transform:
translateY(-5%)
scale(1.045);
}

}


/* project number rail injected by JS */

.iw102-project-rail{
position:fixed;
z-index:80;

right:25px;
top:50%;

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

gap:10px;

padding:13px 9px;

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

border-radius:999px;

color:#fff;

background:
rgba(12,28,36,.68);

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

backdrop-filter:
blur(12px);

opacity:0;

transform:
translateY(-50%)
translateX(20px);

pointer-events:none;

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

.iw102-project-rail.is-visible{
opacity:1;

transform:
translateY(-50%)
translateX(0);
}

.iw102-project-current{
font-family:var(--en);

font-size:.78rem;
font-weight:800;
}

.iw102-project-divider{
width:1px;
height:36px;

background:
linear-gradient(
var(--blue),
var(--green),
var(--orange)
);
}

.iw102-project-total{
color:
rgba(255,255,255,.54);

font-family:var(--en);

font-size:.55rem;
}


/* =========================================================
   05 / PROCESS — CONTINUOUS PATH
========================================================= */

.iw10-process-grid{
position:relative;

display:grid;

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

gap:0;

padding-top:42px;
}


/* continuous journey line */

.iw10-process-grid::before{
content:"";

position:absolute;
z-index:0;

left:4%;
right:4%;

top:104px;

height:2px;

background:
linear-gradient(
90deg,
var(--blue) 0 25%,
var(--green) 25% 50%,
var(--orange) 50% 75%,
var(--ink) 75% 100%
);
}


/* remove card feeling from V10.1 */

.iw10-process-grid article,
.iw10-process-grid article:nth-child(n){
position:relative;

z-index:2;

display:block;

min-height:355px;

padding:
0 28px 35px;

border:0;

background:transparent;

box-shadow:none;

transform:none;
}


/* step node */

.iw10-process-grid article::after{
content:"";

position:absolute;

top:54px;
right:28px;

width:18px;
height:18px;

border:5px solid var(--cream);

border-radius:50%;

background:var(--blue);

box-shadow:
0 0 0 1px
rgba(14,32,41,.09);
}

.iw10-process-grid article:nth-child(2)::after{
background:var(--green);
}

.iw10-process-grid article:nth-child(3)::after{
background:var(--orange);
}

.iw10-process-grid article:nth-child(4)::after{
background:var(--ink);
}


/* giant step numbers become typography, not cards */

.iw10-process-grid b{
margin-bottom:90px;

font-size:
clamp(5.2rem,7vw,7.8rem);

line-height:.75;

transition:
transform .38s
cubic-bezier(.2,.75,.25,1),
color .38s ease;
}

.iw10-process-grid article:hover{
transform:none;

box-shadow:none;

background:transparent;
}

.iw10-process-grid article:hover b{
transform:
translateY(-9px);

color:
rgba(14,32,41,.19);
}

.iw10-process-grid article h3{
font-size:
clamp(1.4rem,2vw,1.85rem);
}

.iw10-process-grid article p{
max-width:225px;

font-size:.86rem;
}


/* =========================================================
   PROCESS MOBILE — VERTICAL PATH
========================================================= */

@media(max-width:700px){

.iw10-process-grid{
display:block;

padding-top:5px;

padding-right:28px;
}

.iw10-process-grid::before{
left:auto;
right:8px;

top:17px;
bottom:18px;

width:2px;
height:auto;

background:
linear-gradient(
180deg,
var(--blue),
var(--green),
var(--orange),
var(--ink)
);
}

.iw10-process-grid article,
.iw10-process-grid article:nth-child(n){
display:grid;

grid-template-columns:
58px 1fr;

gap:12px;

min-height:0;

padding:
20px 0 30px;
}

.iw10-process-grid article::after{
top:24px;
right:-28px;

width:16px;
height:16px;

border-width:4px;
}

.iw10-process-grid b{
grid-row:1 / 4;

margin:0;

font-size:2.9rem;
}

.iw10-process-grid small,
.iw10-process-grid h3,
.iw10-process-grid p{
grid-column:2;
}

}


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

/* services flows into manifesto instead of hard cut */

.iw10-services{
padding-bottom:205px;
}

.iw10-manifesto{
margin-top:-72px;

clip-path:
polygon(
0 5%,
100% 0,
100% 95%,
0 100%
);

padding-top:210px;
padding-bottom:210px;
}


/* manifesto flows into work */

.iw10-work{
margin-top:-92px;

padding-top:230px;
}


/* work → process has light visual bridge */

.iw10-process{
margin-top:-1px;

padding-top:175px;
}


/* =========================================================
   INFRA / DOMAIN — LESS "UTILITY PANEL"
========================================================= */

.iw10-infra{
background:
radial-gradient(
circle at 12% 25%,
rgba(24,183,241,.13),
transparent 24%
),
linear-gradient(
180deg,
#edf5f7,
#f7faf9
);
}

.iw10-infra-grid{
border-radius:20px;

transform:
rotate(-.35deg);
}

.iw10-domain-tool{
transform:
rotate(.35deg);
}


/* =========================================================
   MOBILE SECTION TRANSITIONS
========================================================= */

@media(max-width:700px){

.iw10-services{
padding-bottom:105px;
}

.iw10-manifesto{
margin-top:-28px;

padding-top:105px;
padding-bottom:105px;

clip-path:
polygon(
0 2%,
100% 0,
100% 98%,
0 100%
);
}

.iw10-work{
margin-top:-30px;

padding-top:115px;
}

.iw10-process{
padding-top:95px;
}

.iw10-infra-grid,
.iw10-domain-tool{
transform:none;
}

.iw102-project-rail{
display:none;
}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

.iw10-service,
.iw10-service::after,
.iw10-service p,
.iw10-service > b,
.iw10-reasons article,
.iw10-project,
.iw10-process-grid b{
transition:none !important;
}

}