/* DiazUX project showcase — fullscreen, manual infinite loop + pointer trail.
   Project identity is the only color exception to the monochrome studio shell.
   contract: fullscreen-infinite-showcase */

.dx-project-showcase{
  --showcase-gap:0px;
  position:relative;
  overflow:hidden;
}

.dx-project-showcase .dx-showcase-viewport{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:#000;
}
.dx-project-showcase .dx-showcase-viewport::-webkit-scrollbar{display:none}

.dx-project-showcase .dx-showcase-track{
  display:flex;
  gap:0;
  width:max-content;
  min-width:100%;
}

.dx-project-showcase .dx-showcase-card{
  --project-bg:#111;
  --project-fg:#fff;
  position:relative;
  flex:0 0 100vw;
  width:100vw;
  min-width:100vw;
  min-height:100svh;
  height:clamp(700px,100svh,980px);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--project-bg);
  color:var(--project-fg);
  isolation:isolate;
}

.dx-project-showcase .dx-showcase-link{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  height:100%;
  min-height:inherit;
  color:var(--project-fg)!important;
  text-decoration:none!important;
  outline:none;
}

.dx-project-showcase .dx-showcase-media{
  min-height:0;
  padding:clamp(18px,2.4vw,42px) clamp(18px,3.2vw,58px) 0;
  background:var(--project-bg);
  overflow:hidden;
}
.dx-project-showcase .dx-showcase-media img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:none!important;
  border-radius:clamp(14px,1.2vw,22px);
  box-shadow:0 28px 80px rgba(0,0,0,.24);
  transform:translateZ(0) scale(1)!important;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
  will-change:transform;
}

.dx-project-showcase .dx-showcase-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,70px);
  align-items:end;
  min-height:clamp(190px,24svh,270px);
  padding:clamp(24px,3vw,44px) clamp(24px,5vw,80px) clamp(30px,4vw,58px);
  background:var(--project-bg);
  color:var(--project-fg)!important;
}
.dx-project-showcase .dx-showcase-copy>div:first-child{max-width:min(920px,72vw)}
.dx-project-showcase .dx-showcase-meta,
.dx-project-showcase .dx-showcase-index{
  color:inherit!important;
  font:600 11px/1.4 "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  opacity:.88;
}
.dx-project-showcase .dx-showcase-title{
  margin:10px 0 10px!important;
  color:inherit!important;
  font:500 clamp(46px,5.5vw,88px)/.9 "Helvetica Neue",Helvetica,Arial,sans-serif!important;
  letter-spacing:-.06em!important;
}
.dx-project-showcase .dx-showcase-desc{
  max-width:760px;
  margin:0!important;
  color:inherit!important;
  font:400 clamp(15px,1.25vw,20px)/1.45 "Helvetica Neue",Helvetica,Arial,sans-serif!important;
  opacity:.96;
}
.dx-project-showcase .dx-showcase-side{
  display:grid;
  justify-items:end;
  align-content:end;
  gap:16px;
  color:inherit!important;
}
.dx-project-showcase .dx-showcase-cta{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  border:1.5px solid currentColor;
  border-radius:999px;
  color:inherit!important;
  font:600 10px/1 "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.dx-project-showcase .dx-showcase-link:is(:hover,:focus-visible) .dx-showcase-cta{
  background:var(--project-fg);
  color:var(--project-bg)!important;
  transform:translateY(-2px);
}
.dx-project-showcase .dx-showcase-link:is(:hover,:focus-visible) .dx-showcase-media img{
  transform:translateZ(0) scale(1.012)!important;
}
.dx-project-showcase .dx-showcase-link:focus-visible::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid currentColor;
  border-radius:18px;
  pointer-events:none;
  z-index:3;
}

/* Controls are injected by JS so the no-JS fallback remains a native scroll-snap rail. */
.dx-project-showcase .dx-showcase-controls{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:12;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
  padding:6px;
  border:1px solid rgba(0,0,0,.16);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#000;
  box-shadow:0 12px 38px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
}
.dx-project-showcase .dx-showcase-control{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#000;
  color:#fff;
  font:500 20px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  cursor:pointer;
}
.dx-project-showcase .dx-showcase-control:is(:hover,:focus-visible){
  outline:2px solid #000;
  outline-offset:2px;
}
.dx-project-showcase .dx-showcase-counter{
  min-width:74px;
  text-align:center;
  font:600 10px/1 "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dx-project-showcase .dx-showcase-status{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* Cursor trail: desktop/fine pointer only. It never intercepts clicks. */
.dx-project-trail-layer{
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
}
.dx-project-trail-image{
  position:fixed;
  left:0;
  top:0;
  width:clamp(88px,7.5vw,132px);
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:9px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  opacity:0;
  transform:translate3d(var(--trail-x),var(--trail-y),0) translate(-50%,-50%) scale(.72) rotate(var(--trail-r));
  will-change:transform,opacity;
  animation:dx-project-trail .62s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes dx-project-trail{
  0%{opacity:0;transform:translate3d(var(--trail-x),var(--trail-y),0) translate(-50%,-50%) scale(.72) rotate(var(--trail-r))}
  18%{opacity:.92;transform:translate3d(var(--trail-x),var(--trail-y),0) translate(-50%,-50%) scale(1) rotate(var(--trail-r))}
  72%{opacity:.72}
  100%{opacity:0;transform:translate3d(calc(var(--trail-x) + var(--trail-dx)),calc(var(--trail-y) + var(--trail-dy)),0) translate(-50%,-50%) scale(.86) rotate(var(--trail-r))}
}

/* Founder portrait is identity, not UI chrome: never desaturate it. */
body.dx-home #studio .about-photo img{filter:none!important}

/* Projects page keeps its editorial intro, then gives every project a full viewport. */
body.dx-secondary .dx-project-showcase-section{
  padding:clamp(72px,8vw,120px) 0 0!important;
  background:#fff!important;
  border-bottom:1px solid var(--dx-rule,#d8d8d8)!important;
  overflow:hidden;
}
body.dx-secondary .dx-project-showcase-section .dx-showcase-head{
  width:min(calc(100% - var(--dx-pad,24px)*2),var(--dx-max,1440px));
  margin:0 auto clamp(42px,6vw,72px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr);
  gap:clamp(30px,7vw,96px);
  align-items:end;
}
body.dx-secondary .dx-project-showcase-section .dx-showcase-head h2{
  margin:0;
  font:400 clamp(48px,6.6vw,98px)/.9 "Helvetica Neue",Helvetica,Arial,sans-serif!important;
  letter-spacing:-.055em!important;
}
body.dx-secondary .dx-project-showcase-section .dx-showcase-head p{
  margin:0;
  font:400 16px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif!important;
}

@media(max-width:980px){
  .dx-project-showcase .dx-showcase-card{
    min-height:100svh;
    height:auto;
  }
  .dx-project-showcase .dx-showcase-copy{
    grid-template-columns:1fr;
    gap:18px;
    min-height:240px;
  }
  .dx-project-showcase .dx-showcase-copy>div:first-child{max-width:none}
  .dx-project-showcase .dx-showcase-side{
    grid-template-columns:auto 1fr;
    justify-items:start;
    align-items:center;
  }
}

@media(max-width:760px){
  .dx-project-showcase .dx-showcase-card{min-height:100svh;height:auto}
  .dx-project-showcase .dx-showcase-media{
    min-height:56svh;
    padding:12px 12px 0;
  }
  .dx-project-showcase .dx-showcase-media img{border-radius:12px}
  .dx-project-showcase .dx-showcase-copy{
    min-height:44svh;
    padding:22px 20px 78px;
  }
  .dx-project-showcase .dx-showcase-title{font-size:clamp(42px,13vw,62px)!important}
  .dx-project-showcase .dx-showcase-desc{font-size:15px!important;max-width:34em}
  .dx-project-showcase .dx-showcase-side{gap:12px}
  .dx-project-showcase .dx-showcase-controls{bottom:16px}
  .dx-project-showcase .dx-showcase-control{width:40px;height:40px}
  body.dx-secondary .dx-project-showcase-section .dx-showcase-head{grid-template-columns:1fr;margin-bottom:34px}
  body.dx-secondary .dx-project-showcase-section .dx-showcase-head h2{font-size:50px!important}
}

@media(pointer:coarse),(hover:none){
  .dx-project-trail-layer{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .dx-project-showcase .dx-showcase-viewport{scroll-behavior:auto!important}
  .dx-project-showcase .dx-showcase-media img,
  .dx-project-showcase .dx-showcase-cta{transition:none!important}
  .dx-project-trail-layer{display:none!important}
}