/* DriftWall, adapted from the React Bits source supplied for this project. */
/* Keep carousel width unchanged when the popup locks page scrolling. */
html:has(.project-popup) { scrollbar-gutter: stable; }

.drift-wall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: var(--dw-perspective, 1200px);
  perspective-origin: 50% 50%;
  --dw-tile-w: 200px;
  --dw-tile-h: 132px;
  --dw-gap: 18px;
  --dw-radius: 14px;
  --dw-lift: 64px;
  --dw-dim: 0.55;
  --dw-gray: 0;
  --dw-overlay: #060010;
  --dw-edge: 40%;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite: intersect;
}

.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row;
  transform-style: flat;
  pointer-events: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform;
}

.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: flat;
  pointer-events: none;
}

.drift-wall__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-style: flat;
  pointer-events: none;
}

.drift-wall__tile {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
  outline: none;
  transform-style: flat;
  pointer-events: auto;
}

.drift-wall__inner {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  display: block;
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #0b0b12;
  opacity: var(--dw-dim);
  transform: translateZ(0);
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.drift-wall__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(var(--dw-gray)) saturate(0.92);
  transition: filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.drift-wall__overlay {
  position: absolute;
  inset: 0;
  background: var(--dw-overlay);
  opacity: 0.42;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.drift-wall__tile.is-active .drift-wall__inner,
.drift-wall__tile:focus-visible .drift-wall__inner {
  opacity: 1;
  transform: translateZ(0);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

.drift-wall__tile.is-active img,
.drift-wall__tile:focus-visible img {
  filter: grayscale(0) saturate(1.05);
}

.drift-wall__tile.is-active .drift-wall__overlay,
.drift-wall__tile:focus-visible .drift-wall__overlay {
  opacity: 0;
}

.drift-wall__tile:focus-visible .drift-wall__inner {
  box-shadow:
    0 24px 60px -18px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane,
  .drift-wall__track {
    will-change: auto;
  }
}


/* Portfolio composition and LineSidebar adaptation. */
.page-work-index { background:#090a0b; }
.portfolio-experience { padding:142px 3.5vw 0; color:#f1f0eb; overflow:clip; }
.portfolio-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-bottom:36px; border-bottom:1px solid #ffffff26; }
.portfolio-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 25px; color:#c3c3c0; font-size:11px; letter-spacing:.12em; }
.portfolio-eyebrow>span { width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 18px #ef174655; }
.portfolio-heading h1 { margin:0; font-size:clamp(48px,5.3vw,92px); font-weight:500; line-height:1; letter-spacing:-.065em; }
.portfolio-heading h1 em { font-family:"Instrument Serif",serif; font-weight:400; color:var(--signal); }
.portfolio-heading .portfolio-intro { margin:0 0 3px; font-size:14px; line-height:1.6; color:#a9aaa7; }
.portfolio-workspace { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:720px; }
.portfolio-sidebar { position:sticky; top:100px; align-self:start; padding:27px 28px 24px 0; border-right:1px solid #ffffff26; }
.portfolio-sidebar-heading { display:flex; justify-content:space-between; margin:0 0 25px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#9b9d98; }
.line-sidebar { display:flex; flex-direction:column; padding:0 0 0 30px; }
.line-sidebar__item { --effect:0; position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:43px; padding:9px 0; border:0; color:#bebfba; background:none; font:inherit; text-align:left; cursor:pointer; }
.line-sidebar__item:after { content:""; position:absolute; left:-30px; bottom:0; width:10px; height:1px; background:#ffffff25; }
.line-sidebar__marker { position:absolute; left:-30px; top:50%; width:22px; height:1px; background:color-mix(in srgb,var(--signal) calc(var(--effect)*100%),#61635f); transform-origin:left; transform:scaleX(calc(.7 + var(--effect)*.5)); transition:transform .15s ease,background .15s ease; }
.line-sidebar__label { display:flex; align-items:baseline; gap:9px; max-width:calc(100% - 35px); color:color-mix(in srgb,var(--signal) calc(var(--effect)*100%),#bebfba); transform:translateX(calc(var(--effect)*9px)); transition:transform .15s ease,color .15s ease; font-size:12px; line-height:1.35; }
.line-sidebar__index { color:#878983; font-size:9px; font-family:monospace; }
.line-sidebar__count { color:#94968f; font:10px monospace; }
.line-sidebar__item[aria-pressed="true"] .line-sidebar__count { color:var(--signal); }
.line-sidebar__item:focus-visible { outline:1px solid var(--signal); outline-offset:5px; }
.portfolio-sidebar-foot { display:flex; gap:15px; align-items:center; margin-top:35px; padding-top:22px; border-top:1px solid #ffffff26; }
.portfolio-sidebar-foot strong { font-weight:400; font-size:62px; line-height:1; letter-spacing:-.075em; }
.portfolio-sidebar-foot span { color:#a9aaa7; font-size:11px; line-height:1.5; }
.portfolio-canvas { min-width:0; position:relative; }
.portfolio-toolbar { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:15px; min-height:66px; padding:14px 0 14px 28px; }
.portfolio-toolbar>p { margin:0; font:11px monospace; color:#b6b8b1; }
.portfolio-controls { display:flex; align-items:center; gap:20px; }
.portfolio-controls button { min-height:36px; padding:8px 13px; border:0; background:transparent; color:#999c94; cursor:pointer; font:11px "Space Grotesk",sans-serif; }
.portfolio-controls button:focus-visible { outline:2px solid var(--signal); outline-offset:4px; }
.portfolio-controls button:hover { color:var(--signal); }
.portfolio-canvas .drift-wall { height:clamp(590px,66vh,820px); --dw-radius:5px; --dw-gap:18px; --dw-dim:.84; --dw-overlay:#090a0b; --dw-lift:38px; --dw-edge:65%; perspective:1400px; mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent); mask-composite:add; -webkit-mask-composite:source-over; }
.drift-wall__tile { cursor:pointer; }
.drift-wall__tile .drift-wall__overlay { opacity:.12; }
.drift-wall__tile .portfolio-project-caption { opacity:0; transform:translateY(8px); transition:opacity .25s,transform .25s; }
.drift-wall__tile.is-active .portfolio-project-caption { opacity:1; transform:none; }
.portfolio-project-caption { position:absolute; z-index:2; inset:auto 0 0; display:grid; grid-template-columns:minmax(0,1fr) auto; padding:35px 16px 16px; background:linear-gradient(transparent,#090a0bf2); color:#fff; text-align:left; }
.portfolio-project-caption small { grid-column:1; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#d0d2cb; }
.portfolio-project-caption strong { grid-column:1; font-size:18px; line-height:1.2; font-weight:500; letter-spacing:-.035em; }
.portfolio-project-caption>span { grid-column:2; grid-row:1/3; align-self:end; font-size:24px; color:var(--signal); }
.portfolio-canvas-foot { display:flex; justify-content:space-between; gap:15px; border-top:1px solid #ffffff26; padding:20px 0 22px 28px; color:#9b9e95; font-size:10px; }
.portfolio-canvas-foot>span:first-child { color:#d3d4cc; }
.portfolio-experience [hidden] { display:none!important; }
.page-work-index .work-index-cta { border-top:1px solid #ffffff26; padding:90px 0; }
.page-work-index .work-index-cta h2 { font-size:clamp(65px,8vw,130px); }
@media(min-width:1500px) {
  .portfolio-workspace { grid-template-columns:310px minmax(0,1fr); }
  .line-sidebar__label { font-size:14px; }
  .line-sidebar__item { min-height:47px; }
}
@media(max-width:1050px) {
  .portfolio-workspace { grid-template-columns:230px minmax(0,1fr); }
  .portfolio-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .portfolio-heading .portfolio-intro br { display:none; }
  .portfolio-sidebar { padding-right:18px; }
  .portfolio-controls { gap:4px; }
  .portfolio-toolbar { padding-left:18px; }
  .portfolio-canvas-foot { flex-direction:column; padding-left:18px; gap:6px; }
}
@media(max-width:760px) {
  .portfolio-experience { padding:110px 20px 0; }
  .portfolio-heading { padding-bottom:24px; }
  .portfolio-heading h1 { font-size:clamp(48px,10vw,76px); max-width:600px; }
  .portfolio-heading h1 em { display:block; }
  .portfolio-eyebrow { font-size:9px; margin-bottom:20px; }
  .portfolio-workspace { display:block; min-height:0; }
  .portfolio-sidebar { position:static; padding:20px 0 15px; border-right:0; border-bottom:1px solid #ffffff26; }
  .portfolio-sidebar-heading { margin-bottom:12px; }
  .line-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; padding-left:20px; }
  .line-sidebar__item { min-height:44px; }
  .line-sidebar__label { font-size:12px; gap:6px; transform:none; }
  .line-sidebar__marker { left:-20px; width:12px; }
  .line-sidebar__item:after { left:-20px; width:6px; }
  .line-sidebar__count { font-size:9px; }
  .portfolio-sidebar-foot { display:none; }
  .portfolio-toolbar { padding:18px 0; flex-wrap:wrap; }
  .portfolio-toolbar>p { font-size:10px; }
  .portfolio-controls { gap:8px; }
  .portfolio-controls button { min-height:40px; padding:8px 10px; }
  .portfolio-project-caption { padding:30px 10px 12px; }
  .portfolio-project-caption strong { font-size:17px; overflow-wrap:anywhere; }
  .portfolio-project-caption small { font-size:8px; }
  .portfolio-canvas .drift-wall { height:560px; }
  .portfolio-canvas-foot { padding-left:0; font-size:10px; }
  .drift-wall__tile .portfolio-project-caption { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-experience * { transition:none!important; }
}

.drift-wall__tile:focus-visible .portfolio-project-caption{opacity:1;transform:none}

/* Phone proportions: keep both moving columns entirely inside the viewport. */
@media(max-width:760px) {
  .portfolio-experience { padding:94px 16px 0; }
  .portfolio-heading { gap:12px; padding-bottom:18px; }
  .portfolio-heading .portfolio-eyebrow { font-size:9px; line-height:1.4; margin:0 0 14px; letter-spacing:.08em; }
  .portfolio-heading h1 { font-size:clamp(36px,10.5vw,58px); line-height:.98; }
  .portfolio-heading .portfolio-intro { font-size:12px; line-height:1.5; }
  .portfolio-sidebar { padding:14px 0 10px; }
  .portfolio-sidebar .portfolio-sidebar-heading { font-size:9px; margin-bottom:6px; }
  .line-sidebar { gap:0 22px; padding-left:16px; }
  .line-sidebar__label { font-size:11px; gap:5px; max-width:calc(100% - 22px); }
  .line-sidebar__index { font-size:8px; }
  .line-sidebar__marker,.line-sidebar__item:after { left:-16px; }
  .portfolio-toolbar { min-height:54px; padding:7px 0; gap:6px; }
  .portfolio-toolbar>p { font-size:10px; }
  .portfolio-controls { gap:2px; }
  .portfolio-controls button { font-size:10px; min-height:44px; padding:8px; }
  .portfolio-canvas .drift-wall { height:clamp(390px,62svh,580px); perspective:none; --dw-dim:1; --dw-lift:0px; }
  .drift-wall__plane,.drift-wall__col,.drift-wall__track,.drift-wall__tile { transform-style:flat; }
  .drift-wall__inner { transform:none; }
  .drift-wall__tile img { filter:none; }
  .drift-wall__tile .drift-wall__overlay { display:none; }
  .portfolio-project-caption { padding:26px 9px 10px; }
  .portfolio-project-caption strong { font-size:13px; line-height:1.2; }
  .portfolio-project-caption small { font-size:7px; letter-spacing:.03em; }
  .portfolio-project-caption>span { font-size:17px; }
}