/* =========================================================
   Ecozen — İnteraktiv effektlər
   (js/effects.js ilə birlikdə işləyir; JS olmadan sayt normal görünür)
   ========================================================= */

/* 1. Scroll ilə görünmə ---------------------------------- */
.js-fx .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.js-fx .reveal.in { opacity: 1; transform: none; }

/* 2. Xidmət plitələri: işıq ləkəsi + 3D əyilmə --------- */
.svc-tile[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: border-color .2s, box-shadow .3s, transform .15s ease-out; }
.svc-tile[data-tilt]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tc) 16%, transparent), transparent 60%);
}
.svc-tile[data-tilt]:hover::before { opacity: 1; }
.svc-tile[data-tilt] .svc-tile__icon { transition: transform .3s; }
.svc-tile[data-tilt]:hover .svc-tile__icon { transform: translateZ(30px) scale(1.08); }
.svc-tile[data-tilt]:hover h3 { transform: translateZ(18px); }
.svc-tile h3 { transition: transform .3s; }

/* 3. İkon mikro-animasiyaları (mövzuya uyğun) ----------- */
[data-anim] svg { transform-origin: 50% 50%; }
a:hover [data-anim="snow"] svg, a:focus-visible [data-anim="snow"] svg { animation: fx-spin 3s linear infinite; }
a:hover [data-anim="fan"] svg, a:focus-visible [data-anim="fan"] svg { animation: fx-spin .8s linear infinite; }
a:hover [data-anim="wind"] svg, a:focus-visible [data-anim="wind"] svg { animation: fx-wind 1s ease-in-out infinite; }
a:hover [data-anim="ac"] svg, a:focus-visible [data-anim="ac"] svg { animation: fx-blow 1.2s ease-in-out infinite; }
a:hover [data-anim="flame"] svg, a:focus-visible [data-anim="flame"] svg { animation: fx-flicker .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-wind { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes fx-blow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes fx-flicker { from { transform: scale(1, 1) skewX(0); } to { transform: scale(.92, 1.1) skewX(-3deg); } }

/* Xidmətlər səhifəsi: sətirdə sürüşən vurğu */
.service-row { position: relative; overflow: hidden; }
.service-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--leaf);
  transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.service-row:hover::before { transform: scaleY(1); }
.service-row h3, .service-row p { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.service-row:hover h3, .service-row:hover p { transform: translateX(8px); }

/* 4. Layihə kartları ----------------------------------- */
.project { cursor: pointer; }
.project__open { all: unset; cursor: pointer; }
.project__open:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 4px; }
.project__hover {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  background: linear-gradient(to top, rgba(28,38,28,.55), rgba(28,38,28,.05) 60%);
  opacity: 0; transition: opacity .35s;
}
.project__hover span {
  padding: .6rem 1.1rem; border-radius: 999px; background: var(--white); color: var(--ink);
  font-family: var(--font-head); font-weight: 500; font-size: .9rem;
  transform: translateY(12px) scale(.95); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.project:hover .project__hover, .project:focus-within .project__hover { opacity: 1; }
.project:hover .project__hover span, .project:focus-within .project__hover span { transform: none; }
.project h3 { transition: color .2s; }
.project:hover h3 { color: var(--leaf-deep); }

/* Filtr sayğacı */
.filter__count { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-left: .4rem; padding: 0 .35em; border-radius: 999px; background: var(--mist); color: var(--steel); font-size: .75rem; }
.filter[aria-pressed="true"] .filter__count { background: rgba(255,255,255,.18); color: var(--white); }

/* 5. Karusel (ana səhifə layihələri) -------------------- */
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82%); gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: .25rem .25rem 1.25rem; margin: 0 -.25rem; scrollbar-width: none; cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel__track.dragging .project { pointer-events: none; }
.carousel__track:focus-visible { outline: 3px solid var(--leaf); outline-offset: 4px; border-radius: var(--radius-m); }
.project--slide { scroll-snap-align: start; }
.project--slide .project__img { aspect-ratio: 4 / 3.2; }
.carousel__controls { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.carousel__progress { flex: 1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.carousel__progress span { display: block; height: 100%; width: 20%; background: var(--ink); border-radius: 3px; transition: transform .15s linear; transform-origin: left; }
.carousel__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__btn:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.carousel__btn:disabled { opacity: .35; cursor: default; }

/* 6. Layihə modalı ------------------------------------- */
.pmodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; visibility: hidden; }
.pmodal.open { visibility: visible; }
.pmodal__backdrop { position: absolute; inset: 0; background: rgba(20,28,20,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.pmodal.open .pmodal__backdrop { opacity: 1; }
.pmodal__dialog {
  position: relative; width: min(960px, 100%); max-height: calc(100dvh - 2rem); overflow: auto;
  background: var(--white); border-radius: var(--radius-l); box-shadow: 0 40px 80px -20px rgba(0,0,0,.4);
  display: grid; grid-template-columns: 1.05fr 1fr;
  opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.pmodal.open .pmodal__dialog { opacity: 1; transform: none; }
.pmodal__media { position: relative; min-height: 320px; background: var(--mist); }
.pmodal__media .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmodal__body { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.pmodal__body h2 { font-size: var(--fs-xl); margin: .5rem 0 .5rem; }
.pmodal__desc { color: var(--steel); }
.pmodal__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1rem 0 1.25rem; padding: 0; }
.pmodal__facts div { background: var(--mist); border-radius: var(--radius-s); padding: .7rem .8rem; }
.pmodal__facts dt { font-size: .75rem; color: var(--steel); }
.pmodal__facts dd { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: .95rem; }
.pmodal__body h3 { font-size: var(--fs-base); margin: .25rem 0 .6rem; }
.pmodal__scope { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .45rem; }
.pmodal__scope li { position: relative; padding-left: 1.6rem; font-size: .95rem; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; transition-delay: calc(var(--i) * 60ms + 150ms); }
.pmodal.open .pmodal__scope li { opacity: 1; transform: none; }
.pmodal__scope li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(-45deg); }
.pmodal__result { background: var(--leaf-soft); border-radius: var(--radius-s); padding: .9rem 1rem; font-size: .95rem; color: var(--ink-2); margin-bottom: 1.5rem; }
.pmodal__nav { display: flex; gap: .5rem; align-items: center; margin-top: auto; }
.pmodal__nav .btn { margin-right: auto; }
.pmodal__counter { font-size: var(--fs-sm); color: var(--steel); font-variant-numeric: tabular-nums; }
.pmodal__close { position: absolute; top: .9rem; right: .9rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-float); }
.pmodal__close:hover { background: var(--ink); color: var(--white); }
.pmodal__close svg { width: 20px; height: 20px; }
.pmodal__swap { animation: fx-swap .35s cubic-bezier(.2,.7,.2,1); }
@keyframes fx-swap { from { opacity: 0; transform: translateX(var(--dir, 16px)); } to { opacity: 1; transform: none; } }
body.modal-open { overflow: hidden; }

/* 7. Hero sxemi: ipucu kartı ---------------------------- */
.hotspot-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)) scale(.96);
  background: var(--ink); color: var(--white); border-radius: var(--radius-s); padding: .55rem .8rem;
  font-size: .85rem; white-space: nowrap; opacity: 0; transition: opacity .18s, transform .18s;
}
.hotspot-tip strong { display: block; font-family: var(--font-head); font-weight: 500; }
.hotspot-tip span { color: #B9C4BB; }
.hotspot-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.hotspot-tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
/* Bir sistem seçiləndə digərləri solur */
.building svg.has-focus .hotspot:not(.is-active) { opacity: .35; transition: opacity .25s; }
.building svg .hotspot { transition: opacity .25s; }

/* 8. Maqnit düymə --------------------------------------- */
.magnetic { transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, border-color .2s; }

@media (max-width: 760px) {
  .pmodal { align-items: end; padding: 0; }
  .pmodal__dialog { grid-template-columns: 1fr; border-radius: var(--radius-l) var(--radius-l) 0 0; max-height: 92dvh; }
  .pmodal__media { min-height: 200px; }
  .pmodal__facts { grid-template-columns: 1fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .js-fx .reveal { opacity: 1; transform: none; }
}

/* Karusel ekranın sağ kənarına qədər uzanır */
html, body { overflow-x: clip; }
.carousel__track { margin-right: calc(50% - 50vw); padding-right: var(--gutter); }

/* Kart əyilməsi yeni xidmət kartlarında */
.svc-card[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.svc-card[data-tilt]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%);
}
.svc-card[data-tilt]:hover::before { opacity: 1; }