/* DiazUX Studio — Industrial 3D Projects Carousel / 2026-08-15 */
:root{
  --ic-bg:#17181a;
  --ic-panel:#202226;
  --ic-panel-2:#2d2f34;
  --ic-bone:#e9e6df;
  --ic-body:#d7d3ca;
  --ic-muted:#a7a49e;
  --ic-rust:#b4461f;
  --ic-rust-aa:#f0a07f;
  --ic-line:rgba(233,230,223,.16);
}

.projects-industrial{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(720px,86vh,980px);
  padding:clamp(72px,8vw,110px) 0 clamp(78px,9vw,120px);
  border-block:1px solid rgba(233,230,223,.09);
  background:
    radial-gradient(62% 60% at 50% 70%,rgba(180,70,31,.13),transparent 72%),
    linear-gradient(180deg,#17181a 0%,#1d1f22 48%,#151618 100%);
}
.projects-industrial::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(233,230,223,.028) 8% 8.08%,transparent 8.08% 91.92%,rgba(233,230,223,.028) 91.92% 92%,transparent 92%),
    linear-gradient(180deg,transparent 0 18%,rgba(233,230,223,.025) 18% 18.08%,transparent 18.08% 82%,rgba(233,230,223,.025) 82% 82.08%,transparent 82%);
}
.projects-industrial::after{
  content:"";
  position:absolute;
  left:4%;right:4%;bottom:4.2%;height:24%;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 12%,rgba(240,160,127,.15),rgba(0,0,0,.48) 40%,transparent 72%);
  filter:blur(8px);
}

.ic-shell{width:min(100%,1500px);margin-inline:auto;padding-inline:clamp(18px,3vw,44px)}
.ic-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:clamp(42px,5vw,68px)}
.ic-kicker{display:flex;align-items:center;gap:12px;color:var(--ic-rust-aa);font:500 11px/1.4 "DM Mono",ui-monospace,monospace;letter-spacing:.17em;text-transform:uppercase}
.ic-kicker::before{content:"";width:32px;height:1px;background:var(--ic-rust-aa)}
.ic-heading{margin:.45rem 0 0;color:var(--ic-bone);font-family:"Inter Tight","DM Sans",system-ui,sans-serif;font-size:clamp(54px,7.4vw,112px);font-weight:720;line-height:.9;letter-spacing:-.028em}
.ic-note{max-width:410px;color:var(--ic-muted);font:500 13px/1.65 "DM Mono",ui-monospace,monospace;text-align:right;letter-spacing:.02em}

.ic-stage{
  position:relative;
  height:clamp(490px,53vw,670px);
  perspective:1500px;
  perspective-origin:50% 46%;
  touch-action:pan-y;
  user-select:none;
}
.ic-track{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.ic-card{
  --i:0;
  --abs:0;
  --dir:0;
  position:absolute;
  left:50%;top:50%;
  width:clamp(310px,42vw,640px);
  height:clamp(430px,48vw,610px);
  transform-style:preserve-3d;
  transform-origin:center center;
  transform:
    translate3d(calc(-50% + var(--dir) * clamp(225px,31vw,475px)), -50%, calc(var(--abs) * -170px))
    rotateY(calc(var(--dir) * -31deg))
    scale(calc(1 - var(--abs) * .16));
  opacity:calc(1 - var(--abs) * .24);
  z-index:calc(20 - var(--abs));
  transition:transform .72s cubic-bezier(.2,.75,.12,1),opacity .52s ease,filter .52s ease;
  filter:saturate(calc(1 - var(--abs) * .18)) brightness(calc(1 - var(--abs) * .09));
  pointer-events:none;
}
.ic-card[data-active="true"]{pointer-events:auto;filter:none}
.ic-card[data-distance="2"],.ic-card[data-distance="3"],.ic-card[data-distance="4"]{opacity:.18}
.ic-card[data-distance="3"],.ic-card[data-distance="4"]{visibility:hidden}

.ic-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(233,230,223,.22);
  border-radius:18px;
  background:linear-gradient(180deg,#242629,#1b1c1f 62%,#191a1c);
  box-shadow:0 36px 86px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.035);
}
.ic-card[data-active="true"] .ic-panel{border-color:rgba(240,160,127,.72);box-shadow:0 44px 100px rgba(0,0,0,.52),0 0 0 1px rgba(180,70,31,.22),0 0 58px rgba(180,70,31,.12)}
.ic-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(108deg,rgba(255,255,255,.075),transparent 17% 73%,rgba(255,255,255,.02));
  mix-blend-mode:screen;
}
.ic-media{position:relative;flex:1;min-height:0;overflow:hidden;background:#111214}
.ic-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.ic-card[data-active="true"]:hover .ic-media img{transform:scale(1.025)}
.ic-media::after{content:"";position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(transparent,rgba(16,17,18,.78));pointer-events:none}
.ic-copy{position:relative;z-index:5;min-height:156px;padding:20px 24px 22px;background:linear-gradient(180deg,#232528,#1d1f21)}
.ic-meta{color:var(--ic-rust-aa);font:500 10px/1.4 "DM Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase}
.ic-title{margin:9px 0 7px;color:var(--ic-bone);font:700 clamp(28px,3vw,46px)/.98 "Inter Tight","DM Sans",system-ui,sans-serif;letter-spacing:-.025em}
.ic-desc{max-width:90%;color:var(--ic-body);font:450 13px/1.52 "Inter Tight","DM Sans",system-ui,sans-serif}
.ic-link{position:absolute;right:22px;bottom:18px;color:var(--ic-rust-aa);font:600 11px/1.2 "DM Mono",ui-monospace,monospace;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.ic-link::after{content:" ↗"}

.ic-floor{
  position:absolute;
  left:9%;right:9%;bottom:-2%;height:16%;
  transform:rotateX(70deg) translateZ(-170px);
  transform-origin:center top;
  border-top:1px solid rgba(240,160,127,.2);
  background:linear-gradient(180deg,rgba(240,160,127,.06),rgba(0,0,0,.32));
  filter:blur(.1px);
  pointer-events:none;
}

.ic-btn{
  position:absolute;
  top:50%;z-index:50;
  width:58px;height:58px;
  display:grid;place-items:center;
  border:1px solid rgba(233,230,223,.34);
  border-radius:50%;
  background:rgba(23,24,26,.78);
  color:var(--ic-bone);
  backdrop-filter:blur(10px);
  font:500 26px/1 sans-serif;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .2s,border-color .2s,transform .2s;
}
.ic-btn:hover{background:#2d2f34;border-color:var(--ic-rust-aa);transform:translateY(-50%) scale(1.05)}
.ic-prev{left:clamp(2px,1vw,16px)}
.ic-next{right:clamp(2px,1vw,16px)}

.ic-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px}
.ic-dots{display:flex;align-items:center;gap:12px}
.ic-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#777269;cursor:pointer;transition:transform .2s,background .2s}
.ic-dot[aria-current="true"]{background:var(--ic-rust-aa);transform:scale(1.45)}
.ic-toggle{min-height:44px;padding:0 14px;border:1px solid rgba(233,230,223,.2);border-radius:999px;background:#202226;color:var(--ic-bone);font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ic-help{text-align:center;margin-top:14px;color:var(--ic-muted);font:500 11px/1.5 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}

.ic-card:focus-visible .ic-panel,.ic-btn:focus-visible,.ic-dot:focus-visible,.ic-toggle:focus-visible{outline:3px solid var(--ic-rust-aa);outline-offset:4px}

@media(max-width:900px){
  .projects-industrial{min-height:auto;padding-top:64px}
  .ic-head{display:block;text-align:center;margin-bottom:34px}
  .ic-kicker{justify-content:center}
  .ic-note{margin:18px auto 0;text-align:center}
  .ic-stage{height:clamp(500px,112vw,630px)}
  .ic-card{width:min(76vw,520px);height:clamp(430px,102vw,570px);transform:translate3d(calc(-50% + var(--dir) * 66vw),-50%,calc(var(--abs) * -120px)) rotateY(calc(var(--dir) * -25deg)) scale(calc(1 - var(--abs) * .19))}
  .ic-btn{width:52px;height:52px}
}

@media(max-width:620px){
  .projects-industrial{padding:56px 0 72px}
  .ic-shell{padding-inline:14px}
  .ic-heading{font-size:clamp(48px,17vw,72px)}
  .ic-note{font-size:11px;max-width:320px}
  .ic-stage{height:clamp(470px,132vw,560px)}
  .ic-card{width:min(82vw,410px);height:clamp(410px,119vw,530px);transform:translate3d(calc(-50% + var(--dir) * 76vw),-50%,calc(var(--abs) * -90px)) rotateY(calc(var(--dir) * -22deg)) scale(calc(1 - var(--abs) * .22))}
  .ic-copy{min-height:150px;padding:18px 18px 20px}
  .ic-desc{font-size:12px;max-width:100%;padding-right:0;margin-bottom:22px}
  .ic-link{position:static;display:inline-block;margin-top:13px}
  .ic-btn{top:auto;bottom:-6px;width:48px;height:48px;background:#202226}
  .ic-prev{left:18px}.ic-next{right:18px}
  .ic-controls{margin-top:10px}
}

@media(prefers-reduced-motion:reduce){
  .ic-card,.ic-media img,.ic-btn,.ic-dot{transition:none!important}
}