/* Clickable project affordances for the hero constellation */
.hero-visual.constellation-ready .project-chip{
  cursor:pointer;
  pointer-events:auto;
  text-decoration:none;
  outline:none;
  transition:border-color .22s var(--ease),background-color .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease);
}

.hero-visual.constellation-ready .project-chip::after{
  content:"View ↗";
  display:inline-block;
  max-width:0;
  margin-left:0;
  overflow:hidden;
  opacity:0;
  color:#fff;
  white-space:nowrap;
  vertical-align:middle;
  transform:translateX(-5px);
  transition:max-width .28s var(--ease),margin-left .28s var(--ease),opacity .22s var(--ease),transform .28s var(--ease);
}

.hero-visual.constellation-ready .project-chip.click-ready{
  border-color:rgba(255,255,255,.28);
  background:rgba(17,20,24,.86);
  box-shadow:0 22px 60px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.035),0 0 28px rgba(255,255,255,.035),inset 0 1px rgba(255,255,255,.07);
  color:#dce1e6;
  animation:chipInvite 2.2s ease-in-out infinite;
}

.hero-visual.constellation-ready .project-chip.click-ready::before{
  animation:chipSignal 1.45s ease-in-out infinite;
}

.hero-visual.constellation-ready .project-chip.click-ready::after,
.hero-visual.constellation-ready .project-chip:hover::after,
.hero-visual.constellation-ready .project-chip:focus-visible::after{
  max-width:58px;
  margin-left:9px;
  opacity:.95;
  transform:translateX(0);
}

.hero-visual.constellation-ready .project-chip:hover,
.hero-visual.constellation-ready .project-chip:focus-visible{
  border-color:rgba(255,255,255,.38);
  background:rgba(20,23,28,.94);
  box-shadow:0 24px 66px rgba(0,0,0,.5),0 0 34px rgba(255,255,255,.055),inset 0 1px rgba(255,255,255,.09);
  color:#f0f2f4;
}

.hero-visual.constellation-ready .project-chip:focus-visible{
  outline:1px solid rgba(255,255,255,.45);
  outline-offset:4px;
}

@keyframes chipSignal{
  0%,100%{box-shadow:0 0 10px rgba(255,255,255,.34);opacity:.82}
  50%{box-shadow:0 0 18px rgba(255,255,255,.62);opacity:1}
}

@keyframes chipInvite{
  0%,100%{box-shadow:0 22px 60px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.025),0 0 24px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.06)}
  50%{box-shadow:0 22px 60px rgba(0,0,0,.46),0 0 0 3px rgba(255,255,255,.025),0 0 34px rgba(255,255,255,.045),inset 0 1px rgba(255,255,255,.08)}
}

@media(max-width:650px){
  .hero-visual.constellation-ready .project-chip::after{content:"↗"}
  .hero-visual.constellation-ready .project-chip.click-ready::after,
  .hero-visual.constellation-ready .project-chip:hover::after,
  .hero-visual.constellation-ready .project-chip:focus-visible::after{
    max-width:14px;
    margin-left:6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-visual.constellation-ready .project-chip.click-ready,
  .hero-visual.constellation-ready .project-chip.click-ready::before{animation:none}
}

/* --------------------------------------------------------------
   SELECTED WORK — cinematic stacking case-study chapters
   Replaces the conventional split-card portfolio treatment.
   -------------------------------------------------------------- */
#work.section{
  position:relative;
  overflow:visible;
  padding:138px 0 190px;
  background:
    radial-gradient(850px 480px at 12% 4%,rgba(255,255,255,.035),transparent 66%),
    linear-gradient(180deg,#08090b 0%,#090a0d 52%,#08090b 100%);
}

#work .section-head{
  position:relative;
  grid-template-columns:.56fr 1.44fr;
  margin-bottom:88px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

#work .section-head::after{
  content:"SCROLL TO EXPLORE  ↓";
  position:absolute;
  right:0;
  bottom:-32px;
  font-size:9px;
  letter-spacing:.22em;
  color:#5f6670;
}

#work .section-title{
  max-width:780px;
  font-size:clamp(52px,6.3vw,88px);
  letter-spacing:-.06em;
}

#work .section-subtitle{
  max-width:640px;
  color:#8f969f;
}

#work .work-list{
  position:relative;
  display:block;
  padding-bottom:4vh;
}

#work .work-card{
  position:sticky;
  top:96px;
  isolation:isolate;
  display:block;
  width:100%;
  min-height:min(760px,78vh);
  height:min(760px,78vh);
  margin:0 0 15vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:34px;
  background:#0a0c10;
  box-shadow:0 34px 100px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.035) inset;
  transform-origin:50% 0;
}

#work .work-card:nth-child(2){top:108px}
#work .work-card:nth-child(3){top:120px}
#work .work-card:nth-child(4){top:132px}
#work .work-card:nth-child(5){top:144px;margin-bottom:0}

#work .work-card::before{
  position:absolute;
  z-index:1;
  bottom:-.14em;
  left:3%;
  max-width:94%;
  overflow:hidden;
  font-size:clamp(104px,13vw,196px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:800;
  white-space:nowrap;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  user-select:none;
}
#work .work-card:nth-child(1)::before{content:"ARTHIVOX"}
#work .work-card:nth-child(2)::before{content:"DINESTACK";left:auto;right:3%}
#work .work-card:nth-child(3)::before{content:"DRIVO"}
#work .work-card:nth-child(4)::before{content:"YAPSTER";left:auto;right:3%}
#work .work-card:nth-child(5)::before{content:"FITCLUB"}

#work .work-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,11,.98) 0%,rgba(8,9,11,.91) 26%,rgba(8,9,11,.42) 52%,rgba(8,9,11,.04) 76%),
    linear-gradient(0deg,rgba(6,7,9,.72),transparent 38%);
}

#work .work-card:nth-child(even)::after{
  background:
    linear-gradient(270deg,rgba(8,9,11,.98) 0%,rgba(8,9,11,.91) 26%,rgba(8,9,11,.42) 52%,rgba(8,9,11,.04) 76%),
    linear-gradient(0deg,rgba(6,7,9,.72),transparent 38%);
}

#work .work-info{
  position:relative;
  z-index:3;
  width:46%;
  min-height:100%;
  padding:48px 52px 46px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:38px;
}

#work .work-card:nth-child(even) .work-info{
  margin-left:auto;
  align-items:flex-end;
  text-align:right;
}

#work .work-card:nth-child(even) .work-info>div{display:flex;flex-direction:column;align-items:flex-end}

#work .work-num{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#838b95;
  font-size:9px;
  letter-spacing:.21em;
  text-transform:uppercase;
}

#work .work-num::before{
  content:"";
  width:26px;
  height:1px;
  background:rgba(255,255,255,.28);
}

#work .work-info h3{
  margin:25px 0 18px;
  font-size:clamp(58px,6vw,92px);
  line-height:.86;
  letter-spacing:-.065em;
  font-weight:620;
}

#work .work-info p{
  max-width:455px;
  margin:0;
  color:#aab0b8;
  font-size:14px;
  line-height:1.72;
}

#work .tags{
  margin-top:25px;
  gap:7px;
}

#work .tag{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  padding:6px 9px;
  color:#9fa6ae;
  font-size:9px;
}

#work .work-card:nth-child(even) .tags{justify-content:flex-end}

#work .text-link{
  position:relative;
  width:max-content;
  min-width:154px;
  min-height:46px;
  padding:0 15px 0 18px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  justify-content:space-between;
  color:#eef0f2;
  font-size:9px;
  letter-spacing:.14em;
  transition:background .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
}

#work .text-link .arrow{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  margin-left:8px;
  border-radius:50%;
  background:#fff;
  color:#07080a;
  font-size:13px;
}

#work .text-link:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

#work .text-link:hover .arrow{transform:rotate(45deg)}

#work .work-media{
  position:absolute;
  inset:0;
  z-index:0;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 36%,var(--glow,rgba(255,255,255,.10)),transparent 42%),
    linear-gradient(135deg,#11141a 0%,#08090c 72%);
}

#work .work-media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,transparent 12%,#000 62%);
  -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 62%);
  opacity:.5;
}

#work .work-card:nth-child(even) .work-media::before{
  mask-image:linear-gradient(270deg,transparent 12%,#000 62%);
  -webkit-mask-image:linear-gradient(270deg,transparent 12%,#000 62%);
}

#work .work-media::after{
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.035) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform 1s var(--ease);
}

#work .work-card:hover .work-media::after{transform:translateX(120%)}

#work .browser{
  position:absolute;
  right:-4%;
  bottom:8%;
  width:64%;
  max-width:none;
  border-radius:18px;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 44px 90px rgba(0,0,0,.58);
  transform:perspective(1200px) rotateY(-7deg) rotateX(2deg) translateY(8px);
  transform-origin:100% 50%;
  transition:transform .75s var(--ease),box-shadow .75s var(--ease);
}

#work .work-card:nth-child(even) .browser{
  left:-4%;
  right:auto;
  transform:perspective(1200px) rotateY(7deg) rotateX(2deg) translateY(8px);
  transform-origin:0 50%;
}

#work .work-card:hover .browser,
#work .work-card:nth-child(even):hover .browser{
  transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-4px) scale(1.012);
  box-shadow:0 52px 105px rgba(0,0,0,.64);
}

#work .browser-bar{height:30px;background:rgba(10,12,15,.92)}
#work .browser img{aspect-ratio:16/10;object-fit:cover;object-position:top}

#work .phone-shot{
  position:absolute;
  right:13%;
  bottom:-4%;
  width:min(31%,330px);
  max-height:86%;
  border:8px solid #171a20;
  border-radius:32px;
  box-shadow:0 46px 100px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.055);
  transform:rotate(5deg) translateY(16px);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}

#work .accent-cyan .work-media::before{
  background-image:
    radial-gradient(circle at 72% 36%,rgba(255,255,255,.05) 0 1px,transparent 1.6px);
  background-size:22px 22px;
}

#work .accent-cyan:hover .phone-shot{
  transform:rotate(1deg) translateY(0) scale(1.025);
  box-shadow:0 56px 116px rgba(0,0,0,.68),0 0 48px rgba(34,211,238,.07);
}

#work .fit-shot{
  position:absolute;
  right:-3%;
  bottom:-2%;
  width:64%;
  height:84%;
  max-height:none;
  border-radius:26px 0 0 0;
  object-fit:cover;
  object-position:center;
  filter:saturate(.76) contrast(1.08) brightness(.82);
  box-shadow:-34px 38px 90px rgba(0,0,0,.5);
  transform:translateY(14px) scale(1.01);
  transition:transform .75s var(--ease),filter .75s var(--ease);
}

#work .accent-lime:hover .fit-shot{
  transform:translateY(0) scale(1.025);
  filter:saturate(.88) contrast(1.09) brightness(.88);
}

@media(max-width:980px){
  #work.section{padding:110px 0 145px}
  #work .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:68px}
  #work .section-head::after{display:none}
  #work .work-card,
  #work .work-card:nth-child(2),
  #work .work-card:nth-child(3),
  #work .work-card:nth-child(4),
  #work .work-card:nth-child(5){top:82px;height:680px;min-height:680px;margin-bottom:11vh}
  #work .work-card:nth-child(5){margin-bottom:0}
  #work .work-info{width:50%;padding:42px 38px}
  #work .work-info h3{font-size:clamp(52px,8vw,76px)}
  #work .browser{width:66%;right:-12%}
  #work .work-card:nth-child(even) .browser{left:-12%}
  #work .phone-shot{right:10%;width:34%}
  #work .fit-shot{width:67%}
}

@media(max-width:650px){
  #work.section{padding:88px 0 100px;overflow:hidden}
  #work .section-head{margin-bottom:42px;padding-bottom:24px}
  #work .section-title{font-size:47px}
  #work .work-list{display:grid;gap:18px;padding-bottom:0}
  #work .work-card,
  #work .work-card:nth-child(2),
  #work .work-card:nth-child(3),
  #work .work-card:nth-child(4),
  #work .work-card:nth-child(5){
    position:relative;
    top:auto;
    height:610px;
    min-height:610px;
    margin:0;
    border-radius:25px;
  }
  #work .work-card::before{font-size:82px;bottom:-.05em;opacity:.8}
  #work .work-card::after,
  #work .work-card:nth-child(even)::after{
    background:
      linear-gradient(0deg,rgba(8,9,11,.99) 0%,rgba(8,9,11,.94) 33%,rgba(8,9,11,.30) 66%,rgba(8,9,11,.05) 100%);
  }
  #work .work-info,
  #work .work-card:nth-child(even) .work-info{
    width:100%;
    min-height:100%;
    margin:0;
    padding:28px 26px 26px;
    align-items:flex-start;
    text-align:left;
    justify-content:flex-end;
  }
  #work .work-info>div,
  #work .work-card:nth-child(even) .work-info>div{align-items:flex-start}
  #work .work-num{position:absolute;top:26px;left:26px}
  #work .work-info h3{font-size:55px;margin:0 0 13px}
  #work .work-info p{font-size:12px;line-height:1.62;max-width:96%}
  #work .tags,#work .work-card:nth-child(even) .tags{justify-content:flex-start;margin-top:16px}
  #work .tag{font-size:8px;padding:5px 7px}
  #work .text-link{margin-top:20px;min-height:42px;min-width:145px}
  #work .work-media{inset:0}
  #work .work-media::before,#work .work-card:nth-child(even) .work-media::before{
    mask-image:linear-gradient(0deg,transparent 28%,#000 100%);
    -webkit-mask-image:linear-gradient(0deg,transparent 28%,#000 100%);
  }
  #work .browser,
  #work .work-card:nth-child(even) .browser{
    top:42px;
    bottom:auto;
    left:50%;
    right:auto;
    width:92%;
    transform:translateX(-50%) perspective(900px) rotateX(2deg);
    transform-origin:center;
  }
  #work .work-card:hover .browser,
  #work .work-card:nth-child(even):hover .browser{
    transform:translateX(-50%) perspective(900px) rotateX(0) translateY(-2px);
  }
  #work .phone-shot{
    top:36px;
    right:50%;
    bottom:auto;
    width:47%;
    max-height:56%;
    transform:translateX(50%) rotate(3deg);
  }
  #work .accent-cyan:hover .phone-shot{transform:translateX(50%) rotate(0) scale(1.015)}
  #work .fit-shot{
    top:0;
    right:0;
    bottom:auto;
    width:100%;
    height:58%;
    border-radius:0;
    box-shadow:none;
    transform:none;
  }
  #work .accent-lime:hover .fit-shot{transform:scale(1.015)}
}

@media(prefers-reduced-motion:reduce){
  #work .browser,#work .phone-shot,#work .fit-shot,#work .work-media::after,#work .text-link{transition:none}
}