// Project Stack. One dependency-free component; edit projects in demo.html.
(() => {
if(customElements.get('project-stack'))return;
const arrow='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 19 19 5M5 5h14v14"/></svg>';
class ProjectStack extends HTMLElement{
 connectedCallback(){
  if(this.shadowRoot)return;
  const r=this.attachShadow({mode:'open'});
  r.innerHTML=`<style>
  :host{display:block;width:min(100%,460px);color:#f3f1ed;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}*{box-sizing:border-box}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #e6ba82;outline-offset:5px}svg{width:22px;height:22px}
  .deck{position:relative;height:338px;perspective:1400px;margin:54px 0 30px}.card{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#191b20;border:1px solid #ffffff20;box-shadow:0 2px 1px #ffffff18 inset,0 24px 50px #0006;transform-origin:50% 82%;transition:transform .75s cubic-bezier(.22,.8,.18,1),opacity .45s,filter .45s;transform-style:preserve-3d}.card:nth-child(1){--accent:#d8ae79;--deep:#745744;--haze:#c19b6618}.card:nth-child(2){--accent:#93b4ff;--deep:#3d568c;--haze:#536daf24}.card:nth-child(3){--accent:#bdacf0;--deep:#655381;--haze:#8672b925}
  .card:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 24%,var(--haze),transparent 67%),linear-gradient(145deg,#ffffff06,transparent);pointer-events:none}.face{position:absolute;inset:0;padding:25px 27px;display:flex;flex-direction:column}.head{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#bcc0c8}.tag{color:var(--accent);padding:6px 9px;background:#ffffff06;border:1px solid #ffffff13;border-radius:30px}.label{font-size:42px;line-height:1.1;font-weight:520;letter-spacing:-2px;margin:14px 0 8px}.description{font-size:12px;line-height:1.6;color:#b6b9c2;width:78%;margin:0;text-wrap:pretty}.bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:17px;border-top:1px solid #ffffff14}.visit{display:flex;align-items:center;gap:9px;min-height:40px;color:#f2efea;text-decoration:none;font-size:12px}.visit svg{width:15px;height:15px;transition:transform .2s}.visit:hover svg{transform:translate(2px,-2px)}.number{font-size:10px;color:#b6b9c2;font-variant-numeric:tabular-nums}
  .art{position:relative;height:112px;flex:none;display:flex;align-items:center;justify-content:center;pointer-events:none}.orb{position:absolute;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff8eb,var(--accent) 24%,var(--deep) 53%,#11131a 81%);box-shadow:inset -7px -6px 17px #0009,0 15px 23px #0006}.orbit{width:168px;height:66px;border-radius:50%;border:5px solid var(--accent);transform:rotate(-25deg);box-shadow:0 1px 0 #fff7 inset,0 6px 14px #0005;position:absolute}.orbit.back{transform:rotate(25deg);opacity:.25;width:127px;height:76px}.art-lines .orb{width:75px;height:75px;border-radius:18px;transform:rotate(-20deg);background:linear-gradient(135deg,#eaf0ff,var(--accent) 23%,var(--deep) 66%,#101521);box-shadow:inset 0 1px 1px #fff,8px 10px 0 #26334d,14px 17px 25px #0007}.art-lines .orbit{width:131px;height:93px;border-radius:27px;border-width:1px;transform:rotate(17deg);box-shadow:none}.art-lines .orbit.back{transform:rotate(-22deg);width:160px;height:80px}.art-wave .orb{border-radius:20px;width:104px;height:60px;transform:rotate(-16deg);background:repeating-linear-gradient(90deg,#ddd2ff 0px,var(--accent) 4px,var(--deep) 9px,#171020 12px);box-shadow:6px 8px 0 #35294a,10px 14px 25px #0008}.art-wave .orbit{width:140px;height:95px;border-width:1px;transform:rotate(22deg)}
  .tabs{padding:6px;background:#15171c;border:1px solid #ffffff10;border-radius:17px;display:flex;gap:5px;position:relative;box-shadow:0 2px 0 #ffffff05 inset}.tab{position:relative;flex:1;min-width:0;min-height:48px;border:0;border-radius:12px;color:#a6aab5;background:transparent;font-size:12px;transition:background .25s,color .25s,transform .18s}.tab[aria-selected=true]{background:#303239;color:#fff;box-shadow:0 2px 4px #0004,0 1px 0 #ffffff1a inset}.tab:active{transform:scale(.96)}.tab b{font-size:10px;font-weight:400;margin-right:5px;color:#c5a476}.help{text-align:center;font-size:9px;letter-spacing:1.5px;margin-top:17px;color:#9399a8}
  .deck{height:410px}.card{transform-origin:50% 50%}.art{height:100px}:host([recording]) .help{display:none}:host([recording]) *{transition:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
  </style><div class="deck"></div><div class="tabs" role="tablist" aria-label="Projects"></div><div class="help">PICK A PROJECT. TAKE A LOOK.</div>`;
  this.items=[{title:'Orbit',tag:'BRAND & WEB',description:'A home for your next big idea.',href:'https://example.com/#orbit'},{title:'Forma',tag:'DESIGN SYSTEM',description:'A small system for making things feel consistent.',href:'https://example.com/#forma'},{title:'Echo',tag:'DIGITAL PRODUCT',description:'A quieter place for your favourite sounds.',href:'https://example.com/#echo'}];
  const supplied=this.querySelector('script[type="application/json"]');
  if(supplied){try{const data=JSON.parse(supplied.textContent);if(Array.isArray(data)&&data.length===3)this.items=data;}catch(_) {}}
  this.items.forEach((item,i)=>{
   const card=document.createElement('section');card.className='card';card.id='project-'+i;card.setAttribute('role','tabpanel');card.setAttribute('aria-labelledby','tab-'+i);
   card.innerHTML=`<div class="face"><div class="head"><span>SELECTED WORK</span><span class="tag"></span></div><div class="art ${i===1?'art-lines':i===2?'art-wave':''}"><i class="orbit back"></i><i class="orb"></i><i class="orbit"></i></div><h2 class="label"></h2><p class="description"></p><div class="bottom"><a class="visit" target="_blank" rel="noopener noreferrer">View project ${arrow}</a><span class="number">0${i+1} / 03</span></div></div>`;
   card.querySelector('.label').textContent=String(item.title||'Project');card.querySelector('.tag').textContent=String(item.tag||'PROJECT');card.querySelector('.description').textContent=String(item.description||'');
   // optional "accent": "#rrggbb" recolors this card; only plain hex gets into the style
   const ac=String(item.accent||'');if(/^#[0-9a-f]{6}$/i.test(ac)){card.style.setProperty('--accent',ac);card.style.setProperty('--deep',`color-mix(in srgb,${ac} 45%,#000)`);card.style.setProperty('--haze',ac+'24');}
   try{const u=new URL(item.href);card.querySelector('a').href=['https:','http:'].includes(u.protocol)?u.href:'https://example.com';}catch(_){card.querySelector('a').href='https://example.com';}
   r.querySelector('.deck').append(card);
   const tab=document.createElement('button');tab.type='button';tab.className='tab';tab.id='tab-'+i;tab.setAttribute('role','tab');tab.setAttribute('aria-controls',card.id);tab.innerHTML=`<b>0${i+1}</b><span></span>`;tab.querySelector('span').textContent=String(item.title||'Project');tab.addEventListener('click',()=>this.select(i));r.querySelector('.tabs').append(tab);
  });
  this.select(0);
  r.querySelector('.tabs').addEventListener('keydown',e=>{let next=this.active;if(e.key==='ArrowRight')next=(next+1)%3;else if(e.key==='ArrowLeft')next=(next+2)%3;else if(e.key==='Home')next=0;else if(e.key==='End')next=2;else return;e.preventDefault();this.select(next);r.querySelectorAll('.tab')[next].focus();});
 }
 select(index){
  this.active=index;const cards=[...this.shadowRoot.querySelectorAll('.card')];
  cards.forEach((card,i)=>{const depth=(i-index+3)%3;card.inert=depth!==0;card.setAttribute('aria-hidden',String(depth!==0));card.style.zIndex=String(3-depth);card.style.transform=depth===0?'translate(0,0) rotate(0deg) scale(1)':`translate(${depth===1?-17:19}px,${depth===1?-22:-39}px) rotate(${depth===1?-6:7}deg) scale(${depth===1?.95:.89})`;card.style.filter=depth?'brightness(.64)':'brightness(1)';});
  this.shadowRoot.querySelectorAll('.tab').forEach((tab,i)=>{tab.setAttribute('aria-selected',String(i===index));tab.tabIndex=i===index?0:-1;});
 }
}
customElements.define('project-stack',ProjectStack);
})();