/**
 * Haika Damirchian-Azar — Factory & Equipment Gallery Page
 *
 * Design Language: "Inspection Sheet" (extension of Steel & Spark)
 *   • Real photography framed like CAD viewports — corner brackets, tag chips
 *   • Blueprint ruler ticks along the hero edges
 *   • Segmented filter control, lightbox with keyboard/swipe nav
 *
 * Scope: roots on `.daz-factory` — never leaks into other pages.
 */

/* ═══════════════════════════════════════════════════════════════
   TOKENS — همان پالت Steel & Spark صفحه‌ی درباره ما
   ═══════════════════════════════════════════════════════════════ */
.daz-factory{
	--dfy-steel-deep:  #0a1929;
	--dfy-steel-mid:   #11243a;
	--dfy-chrome-soft: #e6e9ed;
	--dfy-spark-1:     #ff6b1a;
	--dfy-spark-2:     #ffb547;
	--dfy-spark-glow:  rgba(255,107,26,.35);
	--dfy-bp-line:     rgba(197,202,209,.07);
	--dfy-bp-line-2:   rgba(197,202,209,.13);
	--dfy-surface:     #0e2030;
	--dfy-surface-2:   #14283d;
	--dfy-border:      rgba(197,202,209,.08);
	--dfy-border-hot:  rgba(255,107,26,.18);
	--dfy-text:        #e2e8f0;
	--dfy-text-mute:   #94a3b8;
	--dfy-text-dim:    #64748b;
	--dfy-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	background: var(--dfy-steel-deep);
	color: var(--dfy-text);
	overflow-x: hidden;
	line-height: 1.65;
}
.daz-factory *{ box-sizing: border-box; }
.daz-factory :focus-visible{ outline: 2px solid var(--dfy-spark-1); outline-offset: 3px; border-radius: 4px; }

html[data-cb-theme="light"] .daz-factory{
	--dfy-steel-deep:  #f1f5f9;
	--dfy-steel-mid:   #e2e8f0;
	--dfy-bp-line:     rgba(30,58,95,.10);
	--dfy-bp-line-2:   rgba(30,58,95,.18);
	--dfy-surface:     #ffffff;
	--dfy-surface-2:   #f8fafc;
	--dfy-border:      rgba(30,58,95,.10);
	--dfy-text:        #0f172a;
	--dfy-text-mute:   #475569;
	--dfy-text-dim:    #64748b;
}

.dfy-wrap{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.daz-factory [data-dfy-reveal]{
	opacity: 0;
	transform: translateY(26px);
	filter: blur(6px);
	transition: opacity .8s var(--dfy-ease-out), transform .8s var(--dfy-ease-out), filter .8s var(--dfy-ease-out);
	transition-delay: var(--dfy-delay, 0ms);
}
.daz-factory [data-dfy-reveal].is-in{ opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce){
	.daz-factory [data-dfy-reveal]{ opacity: 1; transform: none; filter: none; transition: none; }
	.daz-factory *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   1) HERO — عکس واقعی + overlay بلوپرینت + خط‌کش CAD
   ═══════════════════════════════════════════════════════════════ */
.dfy-hero{
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	padding: 130px 0 90px;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--dfy-steel-deep);
}
.dfy-hero::before{
	content: "";
	position: absolute; inset: 0;
	background-image: var(--dfy-hero-img);
	background-size: cover;
	background-position: center 35%;
	filter: saturate(.75) brightness(.55);
	z-index: -3;
}
.dfy-hero::after{
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(10,25,41,.55) 0%, rgba(10,25,41,.72) 55%, var(--dfy-steel-deep) 100%),
		radial-gradient(circle at 18% 30%, rgba(255,107,26,.20), transparent 55%);
	z-index: -2;
}
/* Blueprint grid روی عکس */
.dfy-hero{
	background-image:
		linear-gradient(var(--dfy-bp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--dfy-bp-line) 1px, transparent 1px);
	background-size: 42px 42px;
}

/* Ruler ticks — لبه‌ی بالا و پایین، مثل خط‌کش CAD */
.dfy-hero__ruler{
	position: absolute; left: 0; right: 0;
	height: 22px;
	background-image: repeating-linear-gradient(90deg, var(--dfy-spark-1) 0 1px, transparent 1px 42px);
	opacity: .45;
	z-index: 1;
	pointer-events: none;
}
.dfy-hero__ruler--top{ top: 0; }
.dfy-hero__ruler--bottom{ bottom: 0; }

/* Crosshairs — چهار گوشه */
.dfy-crosshair{ position: absolute; width: 24px; height: 24px; opacity: .5; pointer-events: none; z-index: 1; }
.dfy-crosshair::before, .dfy-crosshair::after{ content: ""; position: absolute; background: var(--dfy-spark-1); }
.dfy-crosshair::before{ top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.dfy-crosshair::after{ left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.dfy-crosshair--tl{ top: 34px; left: 30px; }
.dfy-crosshair--tr{ top: 34px; right: 30px; }
.dfy-crosshair--bl{ bottom: 34px; left: 30px; }
.dfy-crosshair--br{ bottom: 34px; right: 30px; }

.dfy-hero__inner{ position: relative; z-index: 2; max-width: 760px; }

.dfy-hero__plate{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 18px;
	background: rgba(255,107,26,.10);
	border: 1px solid var(--dfy-border-hot);
	border-radius: 100px;
	font-size: 13px;
	color: var(--dfy-spark-2);
	margin-bottom: 28px;
	backdrop-filter: blur(6px);
}
.dfy-dot{
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--dfy-spark-1);
	box-shadow: 0 0 12px var(--dfy-spark-1);
	animation: dfyPulse 1.8s ease-in-out infinite;
}
@keyframes dfyPulse{ 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.4); opacity: .6; } }

.dfy-hero__title{
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	font-weight: 800;
	line-height: 1.18;
	margin: 0 0 22px;
	letter-spacing: -0.02em;
	text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.dfy-hero__lede{
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	color: var(--dfy-chrome-soft);
	line-height: 1.9;
	margin: 0 0 34px;
	max-width: 620px;
	text-align: justify;
	text-align-last: start;
}
.dfy-hero__coords{ display: flex; flex-wrap: wrap; gap: 12px; }
.dfy-hero__coords-item{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px;
	background: rgba(14,32,48,.6);
	border: 1px solid var(--dfy-border);
	border-radius: 10px;
	font-size: 12.5px;
	color: var(--dfy-text-mute);
	backdrop-filter: blur(6px);
}
.dfy-hero__coords-item svg{ color: var(--dfy-spark-1); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ═══════════════════════════════════════════════════════════════ */
.dfy-section{ position: relative; padding: 100px 0; }
.dfy-section + .dfy-section{ border-top: 1px solid var(--dfy-border); }
.dfy-section__head{ max-width: 680px; margin: 0 0 52px; }
.dfy-section__tag{
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--dfy-spark-1); font-weight: 600; margin-bottom: 16px;
}
.dfy-section__tag::before{ content: ""; width: 30px; height: 1.5px; background: var(--dfy-spark-1); }
.dfy-section__title{
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 700; line-height: 1.22; margin: 0 0 16px; letter-spacing: -0.01em;
}
.dfy-section__lede{ font-size: 1rem; color: var(--dfy-text-mute); line-height: 1.85; margin: 0; text-align: justify; text-align-last: start; }

/* ═══════════════════════════════════════════════════════════════
   2) FACILITY — bento grid با یک آیتم بزرگ
   ═══════════════════════════════════════════════════════════════ */
.dfy-facility{ background: var(--dfy-steel-mid); }
.dfy-facility__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 260px;
	gap: 16px;
}
.dfy-facility__item{
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	cursor: zoom-in;
	border: 1px solid var(--dfy-border);
	isolation: isolate;
}
.dfy-facility__item--big{ grid-row: span 2; grid-column: span 2; }
.dfy-facility__item img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--dfy-ease-out), filter .6s;
	filter: saturate(.92);
}
.dfy-facility__item:hover img{ transform: scale(1.06); filter: saturate(1.05); }
.dfy-facility__frame{
	position: absolute; inset: 10px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 10px;
	z-index: 2;
	opacity: 0;
	transition: opacity .35s;
	pointer-events: none;
}
.dfy-facility__item:hover .dfy-facility__frame{ opacity: 1; }
.dfy-facility__item::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(6,14,22,.88) 100%);
	z-index: 1;
}
.dfy-facility__item figcaption{
	position: absolute; right: 20px; bottom: 16px; left: 20px;
	z-index: 3;
	display: flex; flex-direction: column; gap: 3px;
}
.dfy-facility__label{ font-size: 1.02rem; font-weight: 700; color: #fff; }
.dfy-facility__sub{ font-size: .8rem; color: rgba(255,255,255,.7); }
.dfy-zoom-hint{
	position: absolute; top: 14px; left: 14px; z-index: 3;
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(6,14,22,.65);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;
	color: #fff;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .3s, transform .3s;
	backdrop-filter: blur(4px);
}
.dfy-facility__item:hover .dfy-zoom-hint,
.dfy-card:hover .dfy-zoom-hint{ opacity: 1; transform: scale(1); }

/* ═══════════════════════════════════════════════════════════════
   3) EQUIPMENT — ورقه‌ی بازرسی
   ═══════════════════════════════════════════════════════════════ */
.dfy-equip{ background: var(--dfy-steel-deep); position: relative; }
.dfy-equip::before{
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at 1px 1px, var(--dfy-bp-line-2) 1px, transparent 0);
	background-size: 28px 28px;
	opacity: .5;
	pointer-events: none;
}

/* Filter tabs — سگمنت کنترل صنعتی */
.dfy-filters{
	position: relative;
	display: inline-flex;
	gap: 4px;
	padding: 5px;
	background: var(--dfy-surface);
	border: 1px solid var(--dfy-border);
	border-radius: 100px;
	margin-bottom: 40px;
}
.dfy-filter{
	appearance: none;
	border: none;
	background: transparent;
	color: var(--dfy-text-mute);
	font-size: .86rem;
	font-weight: 600;
	padding: 9px 20px;
	border-radius: 100px;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.dfy-filter:hover{ color: var(--dfy-text); }
.dfy-filter.is-active{
	background: linear-gradient(135deg, var(--dfy-spark-1), #e85a0c);
	color: #fff;
}

.dfy-equip__grid{
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
}
.dfy-card{ margin: 0; transition: opacity .4s, transform .4s; }
.dfy-card.is-hidden{ display: none; }

.dfy-card__viewport{
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
	border: 1px solid var(--dfy-border);
	background: var(--dfy-surface);
	isolation: isolate;
}
.dfy-card__viewport img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--dfy-ease-out), filter .6s;
	filter: saturate(.9);
}
.dfy-card:hover .dfy-card__viewport img{ transform: scale(1.07); filter: saturate(1.05); }

/* Corner brackets — مثل crosshair حاشیه‌ی viewport */
.dfy-card__corner{ position: absolute; width: 16px; height: 16px; z-index: 3; opacity: 0; transition: opacity .3s; }
.dfy-card:hover .dfy-card__corner{ opacity: 1; }
.dfy-card__corner::before, .dfy-card__corner::after{ content: ""; position: absolute; background: var(--dfy-spark-2); }
.dfy-card__corner--tl{ top: 10px; left: 10px; }
.dfy-card__corner--tr{ top: 10px; right: 10px; }
.dfy-card__corner--bl{ bottom: 10px; left: 10px; }
.dfy-card__corner--br{ bottom: 10px; right: 10px; }
.dfy-card__corner--tl::before, .dfy-card__corner--bl::before{ top: 0; bottom: 0; left: 0; width: 2px; }
.dfy-card__corner--tr::before, .dfy-card__corner--br::before{ top: 0; bottom: 0; right: 0; width: 2px; }
.dfy-card__corner--tl::after, .dfy-card__corner--tr::after{ top: 0; left: 0; right: 0; height: 2px; }
.dfy-card__corner--bl::after, .dfy-card__corner--br::after{ bottom: 0; left: 0; right: 0; height: 2px; }

.dfy-card__tag{
	position: absolute; top: 12px; right: 12px; z-index: 3;
	font-size: 11px; font-weight: 800;
	letter-spacing: .05em;
	color: #fff;
	background: linear-gradient(135deg, var(--dfy-spark-1), #e85a0c);
	padding: 4px 10px;
	border-radius: 6px;
	box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
	font-variant-numeric: tabular-nums;
}
.dfy-card__viewport::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(6,14,22,.85) 100%);
	z-index: 1;
	pointer-events: none;
}

.dfy-card__plate{
	padding: 16px 4px 0;
	display: flex; flex-direction: column; gap: 4px;
}
.dfy-card__name{ font-size: .96rem; font-weight: 700; color: var(--dfy-text); }
.dfy-card__desc{ font-size: .82rem; color: var(--dfy-text-mute); line-height: 1.6; }

.dfy-equip__note{
	margin-top: 36px;
	padding: 16px 20px;
	background: rgba(255,107,26,.05);
	border-right: 3px solid var(--dfy-spark-1);
	border-radius: 4px 0 0 4px;
	font-size: .9rem;
	color: var(--dfy-text-mute);
	line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   4) CTA
   ═══════════════════════════════════════════════════════════════ */
.dfy-cta{
	padding: 100px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 50% 100%, rgba(255,107,26,.16), transparent 60%), var(--dfy-steel-mid);
}
.dfy-cta__title{ font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; margin: 0 0 16px; }
.dfy-cta__lede{ max-width: 560px; margin: 0 auto 32px; color: var(--dfy-text-mute); font-size: 1rem; line-height: 1.8; }
.dfy-cta__btns{ display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.dfy-btn{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 28px;
	border-radius: 100px;
	font-weight: 700; font-size: .95rem;
	text-decoration: none;
	transition: transform .25s var(--dfy-ease-out), box-shadow .25s, color .25s, border-color .25s;
	border: 1.5px solid transparent;
	cursor: pointer;
}
.dfy-btn--primary{
	background: linear-gradient(135deg, var(--dfy-spark-1), #e85a0c);
	color: #fff;
	box-shadow: 0 10px 28px -10px var(--dfy-spark-glow);
}
.dfy-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px -10px var(--dfy-spark-glow); }
.dfy-btn--ghost{ background: transparent; border-color: var(--dfy-border); color: var(--dfy-text); }
.dfy-btn--ghost:hover{ border-color: var(--dfy-spark-1); color: var(--dfy-spark-2); }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.dfy-lightbox{
	position: fixed; inset: 0;
	z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(5,10,16,.94);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
	padding: 40px;
}
.dfy-lightbox.is-open{ opacity: 1; visibility: visible; }
.dfy-lightbox__stage{ margin: 0; max-width: min(1100px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dfy-lightbox__stage img{
	max-width: 100%; max-height: 76vh;
	border-radius: 10px;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
	transform: scale(.96);
	transition: transform .35s var(--dfy-ease-out);
}
.dfy-lightbox.is-open .dfy-lightbox__stage img{ transform: scale(1); }
.dfy-lightbox__stage figcaption{ color: var(--dfy-chrome-soft); font-size: .92rem; text-align: center; }
.dfy-lightbox__close, .dfy-lightbox__nav{
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background .25s, transform .25s;
}
.dfy-lightbox__close:hover, .dfy-lightbox__nav:hover{ background: rgba(255,107,26,.25); transform: scale(1.06); }
.dfy-lightbox__close{ top: 26px; left: 26px; }
.dfy-lightbox__nav--prev{ right: 26px; top: 50%; transform: translateY(-50%); }
.dfy-lightbox__nav--next{ left: 26px; top: 50%; transform: translateY(-50%); }
.dfy-lightbox__nav--prev:hover{ transform: translateY(-50%) scale(1.06); }
.dfy-lightbox__nav--next:hover{ transform: translateY(-50%) scale(1.06); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px){
	.dfy-hero{ padding: 100px 0 60px; min-height: auto; }
	.dfy-section{ padding: 68px 0; }
	.dfy-facility__grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
	.dfy-facility__item--big{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; height: auto; }
	.dfy-equip__grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 620px){
	.dfy-wrap{ padding: 0 18px; }
	.dfy-hero__title{ font-size: 1.9rem; }
	.dfy-facility__grid{ grid-template-columns: 1fr; grid-auto-rows: 220px; }
	.dfy-facility__item--big{ grid-column: span 1; }
	.dfy-lightbox{ padding: 18px; }
	.dfy-lightbox__close{ top: 12px; left: 12px; width: 40px; height: 40px; }
	.dfy-lightbox__nav{ width: 40px; height: 40px; }
	.dfy-lightbox__nav--prev{ right: 8px; }
	.dfy-lightbox__nav--next{ left: 8px; }
}