/* Portfolio project detail pages */
@layer components {
  @keyframes projectHeroFloatIn{
    from{
      opacity:0;
      transform:translateY(24px);
    }
    to{
      opacity:1;
      transform:none;
    }
  }

  .project-hero{
    padding:clamp(3.1rem,6.5vh,4.4rem) 0;
    background:linear-gradient(140deg,
      color-mix(in srgb,var(--surface) 92%, #040910 8%) 0%,
      color-mix(in srgb,var(--surface) 80%, #040910 20%) 100%);
    border-bottom:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    box-shadow:0 22px 48px rgba(0,0,0,.32);
  }
  .project-hero .wrapper{
    max-width:min(1080px, calc(var(--container-max) + 80px));
    display:grid;
    gap:clamp(1.05rem,2.1vw,1.55rem);
  }
  .project-hero .wrapper > :is(.hero-eyebrow,h1,.project-subtitle,.project-cta,.project-tags){
    opacity:0;
    animation:projectHeroFloatIn .75s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .project-hero .wrapper > .hero-eyebrow{animation-delay:.08s;}
  .project-hero .wrapper > h1{animation-delay:.16s;}
  .project-hero .wrapper > .project-subtitle{animation-delay:.24s;}
  .project-hero .wrapper > .project-cta{animation-delay:.32s;}
  .project-hero .wrapper > .project-tags{animation-delay:.4s;}
  .project-hero h1{
    margin:0;
    font-weight:600;
    letter-spacing:.3px;
    line-height:1.12;
  }
  .project-hero h1::after{
    content:"";
    display:block;
    width:min(210px, 42vw);
    height:3px;
    margin-top:12px;
    border-radius:999px;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--primary) 92%, #ffffff 8%) 0%,
      color-mix(in srgb,var(--primary) 42%, transparent) 55%,
      transparent 100%);
    opacity:.9;
  }
  .project-subtitle{
    margin:0;
    max-width:70ch;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.7;
  }
  .project-cta{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
    color:var(--text-muted);
  }
  .project-tag{
    padding:6px 10px;
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    font-weight:600;
    color:color-mix(in srgb,var(--text-light) 92%, #ffffff 8%);
    font-size:.9rem;
    letter-spacing:.01em;
  }
  .project-body{
    padding:clamp(2.6rem,6vh,3.6rem) 0;
  }
  .project-pager{
    position:sticky;
    top:var(--nav-height, 72px);
    z-index:900;
    background:linear-gradient(120deg,
      rgba(13,17,23,.92) 0%,
      rgba(15,21,30,.86) 60%,
      rgba(18,25,36,.82) 100%);
    border-bottom:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    backdrop-filter:blur(18px);
  }
  .project-pager .wrapper{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:12px;
    padding-block:10px;
  }
  .project-pager-link,
  .project-pager-spacer{
    flex:1 1 0;
    max-width:calc(50% - 6px);
  }
  .project-pager-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 36%, transparent);
    color:color-mix(in srgb,var(--text-light) 92%, #ffffff 8%);
    font-weight:800;
    min-height:44px;
    box-sizing:border-box;
    transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .project-pager-link:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--primary) 40%, transparent);
    box-shadow:0 12px 22px rgba(0,0,0,.28);
  }
  .project-pager-link:focus-visible{
    outline:2px solid color-mix(in srgb,var(--primary) 80%, #fff 20%);
    outline-offset:3px;
  }
  .project-pager-text{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
  }
  .project-pager-label{
    font-size:.74rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .project-pager-title{
    font-size:.98rem;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .project-pager-next{
    justify-content:flex-end;
    text-align:right;
  }

  .project-demo-shell{
    position:relative;
    display:flex;
    flex-direction:column;
    margin:0 0 28px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    box-shadow:0 18px 38px rgba(0,0,0,.28);
    overflow:hidden;
    min-height:min(820px, calc(100svh - var(--nav-height)));
  }
  .project-demo-tabs{
    display:flex;
    gap:8px;
    padding:10px;
    border-bottom:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:linear-gradient(0deg,
      color-mix(in srgb,var(--surface) 92%, #000 8%),
      color-mix(in srgb,var(--surface) 86%, #000 14%));
  }
  .project-demo-tab{
    flex:1 1 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 90%, #000 10%);
    color:var(--text-light);
    font-weight:700;
    letter-spacing:.02em;
    position:relative;
    cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
  }
  .project-demo-tab:hover{
    border-color:color-mix(in srgb,var(--primary) 35%, transparent);
    transform:translateY(-1px);
  }
  .project-demo-tab:focus-visible{
    outline:2px solid color-mix(in srgb,var(--primary) 80%, #fff 20%);
    outline-offset:3px;
  }
  .project-demo-tab.is-active{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--primary) 22%, var(--surface) 78%),
      color-mix(in srgb,var(--surface) 92%, #000 8%));
    border-color:color-mix(in srgb,var(--primary) 45%, transparent);
  }
  .project-demo-tab.is-active::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:4px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--primary) 86%, #ffffff 14%) 0%,
      color-mix(in srgb,var(--primary) 28%, transparent) 60%,
      transparent 100%);
    opacity:.85;
  }

  .project-demo-panels{
    flex:1 1 auto;
    display:flex;
    min-height:0;
  }
  .project-demo-panel{
    flex:1 1 auto;
    min-height:0;
    padding:0;
    display:none;
  }
  .project-demo-panel.is-active{
    display:flex;
  }
  .project-demo-panel-inner{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:clamp(1rem,2.6vw,1.6rem);
  }
  .project-demo-lead{
    margin:0;
    max-width:75ch;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.7;
  }
  .project-demo-list{
    margin:0;
    padding-left:22px;
    display:grid;
    gap:12px;
    max-width:90ch;
  }
  .project-demo-actions{
    margin-top:16px;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
  }
  .project-demo-panel[data-demo-panel="instructions"] .project-demo-panel-inner{
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .project-demo-panel[data-demo-panel="instructions"] :is(.project-demo-lead, .project-demo-list){
    width:min(90ch, 100%);
  }
  .project-demo-panel[data-demo-panel="instructions"] .project-demo-list{
    text-align:left;
  }
  .project-demo-panel .project-media{
    margin:0;
    box-shadow:none;
    border-color:color-mix(in srgb,var(--primary) 14%, transparent);
    background:color-mix(in srgb,var(--surface) 84%, #000 16%);
    padding:12px;
  }
  .project-demo-panel .project-embed-frame{
    border-radius:12px;
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
  }
  .project-demo-shell .project-embed-frame{
    height:clamp(440px, 70vh, 820px);
  }
  .project-demo-shell .project-embed-tableau .project-embed-frame{
    height:clamp(520px, 74vh, 960px);
  }
  .project-media{
    width:100%;
    display:block;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    box-shadow:0 18px 38px rgba(0,0,0,.28);
    margin:0 0 24px;
    overflow:hidden;
  }
  img.project-media{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:clamp(360px, 70vh, 640px);
    object-fit:contain;
    margin-inline:auto;
  }
  picture.project-media{
    display:block;
  }
  .project-media img{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:clamp(360px, 70vh, 640px);
    object-fit:contain;
    display:block;
    margin-inline:auto;
  }
  .project-media video{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:clamp(360px, 70vh, 640px);
    object-fit:contain;
    display:block;
    margin-inline:auto;
  }

  .project-embed{
    background:color-mix(in srgb,var(--surface) 88%, #000 12%);
  }
  .project-embed-frame{
    width:100%;
    height:clamp(420px, 72vh, 780px);
    border:0;
    display:block;
  }
  .project-embed-tableau .project-embed-frame{
    height:clamp(520px, 75vh, 920px);
  }
  .project-star{
    margin-top:22px;
    padding:clamp(1.1rem,2.2vw,1.6rem);
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 94%, #000 6%);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .project-star:hover{
    border-color:color-mix(in srgb,var(--primary) 26%, transparent);
    box-shadow:0 16px 34px rgba(0,0,0,.26);
  }
  .project-star .section-title{
    margin:0 0 14px;
  }
  .project-star-grid{
    margin:0;
    display:grid;
    gap:14px;
  }
  .project-star-row{
    position:relative;
    display:grid;
    grid-template-columns:minmax(110px, 140px) minmax(0, 1fr);
    gap:14px;
    padding:12px 12px 12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 12%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
  }
  .project-star-row::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--primary) 70%, #ffffff 30%),
      color-mix(in srgb,var(--primary) 30%, transparent));
    opacity:.85;
  }
  .project-star-label{
    margin:0;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.82rem;
    color:color-mix(in srgb,var(--text-muted) 92%, #fff 8%);
    line-height:1.3;
  }
  .project-star-value{
    margin:0;
    color:color-mix(in srgb,var(--text-light) 88%, var(--text-muted) 12%);
    line-height:1.7;
    font-size:1.02rem;
  }
  .project-star-list{
    margin:0;
    padding-left:20px;
    display:grid;
    gap:10px;
  }
  .project-section{
    margin-top:22px;
    padding:clamp(1.1rem,2.2vw,1.6rem);
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 94%, #000 6%);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    scroll-margin-top:calc(var(--nav-height) + 18px);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .project-section:hover{
    border-color:color-mix(in srgb,var(--primary) 24%, transparent);
    box-shadow:0 16px 34px rgba(0,0,0,.22);
  }
  .project-section .section-title{
    margin:0 0 12px;
  }
  .project-section .project-lead + .project-lead{
    margin-top:12px;
  }
  .project-lead{
    margin:0;
    max-width:75ch;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.7;
  }
  .project-list{
    margin:14px 0 0;
    padding-left:22px;
    display:grid;
    gap:12px;
    max-width:90ch;
  }
  .project-links-groups{
    display:grid;
    gap:16px;
    margin-top:14px;
  }
  .project-links-group{
    display:grid;
    gap:10px;
  }
  .project-links-group + .project-links-group{
    padding-top:14px;
    border-top:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
  }
  .project-links-group-title{
    margin:0;
    font-size:.74rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .project-links{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
    margin-top:0;
    align-items:stretch;
  }
  .project-link{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid color-mix(in srgb,var(--primary) 28%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    color:var(--text-light);
    font-weight:600;
    min-height:50px;
    box-sizing:border-box;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    text-decoration:none;
  }
  .project-link-icon{
    width:18px;
    height:18px;
    padding:6px;
    flex:0 0 auto;
    opacity:.92;
    border-radius:10px;
    background:color-mix(in srgb,var(--primary) 14%, transparent);
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
  }
  .project-link-label{
    line-height:1.1;
  }
  .project-link:hover,
  .project-link:focus-visible{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--primary) 45%, transparent);
    box-shadow:0 14px 28px rgba(0,0,0,.3);
  }
  .project-link:focus-visible{
    outline:2px solid color-mix(in srgb,var(--primary) 80%, #fff 20%);
    outline-offset:3px;
  }
  .project-related-grid{
    --project-card-aspect:1 / 1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    margin-top:14px;
  }
  .project-related-grid .project-card{
    opacity:1;
  }

  @media (max-width: 768px) {
    .project-demo-shell{
      min-height:min(760px, calc(100svh - var(--nav-height)));
    }
    .project-demo-shell .project-embed-frame{
      height:clamp(380px, 68vh, 720px);
    }
    .project-demo-shell .project-embed-tableau .project-embed-frame{
      height:clamp(430px, 72vh, 820px);
    }
    .project-embed-frame{
      height:clamp(360px, 70vh, 660px);
    }
    .project-embed-tableau .project-embed-frame{
      height:clamp(420px, 75vh, 760px);
    }
  }

  @media (max-width: 960px) {
    .project-related-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .project-star-row{
      grid-template-columns:1fr;
      gap:10px;
    }
    .project-pager-title{display:none;}
    .project-related-grid{
      grid-template-columns:1fr;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .project-hero .wrapper > :is(.hero-eyebrow,h1,.project-subtitle,.project-cta,.project-tags){
      animation:none !important;
      opacity:1 !important;
      transform:none !important;
    }
  }
}