/* ════════════════════════════════════════════
   PROJECT MODAL
════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:500;
  display:none;
  justify-content:center;
  align-items:center;
  padding:1.5rem;
  backdrop-filter:blur(6px);
  cursor:default;
}
.modal-overlay.open{display:flex}

@keyframes cardIn{
  0%{opacity:0;transform:scale(.93) rotate(-1deg)}
  60%{transform:scale(1.01) rotate(.3deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal-overlay.open{animation:overlayIn .25s ease both}
.modal-overlay.open .modal-card{animation:cardIn .4s cubic-bezier(.34,1.56,.64,1) both}

.modal-card{
  background:var(--paper);
  border:2px solid var(--dark);
  max-width:95vw;width:600px;
  max-height:92vh;
  overflow:hidden;
  position:relative;
  display:grid;
  grid-template-columns:1fr 52px;
  grid-template-rows:auto 1fr;
  box-shadow:0 25px 60px rgba(0,0,0,.3);
}

/* watermark */
.modal-watermark{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-20deg);
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.5rem,10vw,8rem);
  letter-spacing:.05em;
  color:rgba(26,22,18,.055);
  pointer-events:none;white-space:nowrap;
  z-index:0;user-select:none;
}

/* top bar */
.modal-topbar{
  grid-column:1;
  padding:1.1rem 1.4rem .85rem;
  border-bottom:1px solid rgba(26,22,18,.12);
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  position:relative;z-index:2;
}
.modal-logo-box{
  border:1.5px solid rgba(26,22,18,.2);
  padding:.35rem .85rem;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.1rem;letter-spacing:2px;color:var(--dark);
  background:rgba(255,255,255,.6);flex-shrink:0;
}
.modal-dock-spacer{flex:1}
.modal-dock{display:flex;gap:.4rem;align-items:center}
.dock-btn{
  display:flex;align-items:center;gap:.35rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;
  padding:.38rem .8rem;
  border:1.5px solid rgba(26,22,18,.2);
  background:rgba(255,255,255,.5);color:var(--dim);
  text-decoration:none;cursor:pointer;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.dock-btn svg{width:12px;height:12px;flex-shrink:0;position:relative;z-index:1}
.dock-btn span{position:relative;z-index:1}
.dock-btn::after{
  content:'';position:absolute;inset:0;
  transform:translateY(100%);transition:transform .18s ease;z-index:0;
}
.dock-btn:hover{color:#fff;border-color:transparent}
.dock-btn:hover::after{transform:translateY(0)}
.dock-btn.d-docs::after{background:var(--blue)}
.dock-btn.d-live::after{background:var(--green)}
.dock-btn.d-git::after{background:var(--dark)}
.modal-close-btn{
  background:none;border:1.5px solid rgba(26,22,18,.2);
  min-width:40px;height:40px;font-size:1.1rem;cursor:pointer;
  color:var(--dim);flex-shrink:0;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;justify-content:center;
  border-radius:0;line-height:1;
}
.modal-close-btn:hover{
  border-color:var(--red);color:#fff;
  background:var(--red);
}

/* modal body grid */
.modal-body{
  grid-column:1;
  padding:1.2rem 1.4rem 1.4rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  position:relative;z-index:1;
  overflow-y:auto;
  max-height:calc(92vh - 66px);
}

/* mockup */
.modal-mockup{
  grid-column:1;
  border:1.5px solid rgba(26,22,18,.15);
  background:var(--paper2);
  overflow:hidden;position:relative;
  height:280px;
}
.modal-mockup img{width:100%;height:100%;object-fit:cover;display:block}
.modal-mockup iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mockup-ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:1.5rem;text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;color:rgba(26,22,18,.3);
  text-transform:uppercase;letter-spacing:2px;
}
.mockup-ph svg{opacity:.2}

/* pill */
.modal-pill{
  align-self:end;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--dim);
  border:1px dashed rgba(26,22,18,.25);
  padding:.28rem .65rem;
  display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
}
.modal-pill::before{content:'\u25C6';color:var(--red);font-size:.75rem}

/* details */
.modal-details{
  border:1.5px solid rgba(26,22,18,.12);
  background:rgba(255,255,255,.3);
  padding:1.1rem;overflow-y:auto;
}
.modal-proj-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.9rem;letter-spacing:1px;
  color:var(--dark);margin-bottom:.45rem;line-height:1;
}
.modal-proj-desc{
  font-family:'Space Mono',monospace;
  font-size:.82rem;line-height:1.9;color:#2a2a2a;margin-bottom:.85rem;
}
.modal-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.modal-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;text-transform:uppercase;letter-spacing:1px;
  padding:.25rem .6rem;
  border:1px solid rgba(26,22,18,.2);
  color:var(--dim);background:rgba(255,255,255,.4);
}
.modal-stats{
  display:flex;gap:1.5rem;margin-top:.85rem;
  padding-top:.65rem;border-top:1px dashed rgba(26,22,18,.15);
}
.modal-stat-n{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.7rem;color:var(--red);line-height:1;
}
.modal-stat-l{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--dim);
  margin-top:.12rem;
}

/* side strip */
.modal-side{
  grid-column:2;
  grid-row:1/3;
  border-left:2px solid var(--dark);
  background:var(--dark);
  display:flex;align-items:center;justify-content:center;
}
.side-text{
  writing-mode:vertical-rl;text-orientation:mixed;
  transform:rotate(180deg);
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;text-transform:uppercase;letter-spacing:5px;
  color:rgba(255,255,255,.55);white-space:nowrap;user-select:none;
}

/* slideshow */
.slideshow{
  position:absolute;inset:0;
  overflow:hidden;
}
.slideshow-track{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.slideshow-slide{
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
}
.slideshow-slide img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* modal tape */
.modal-tape{
  position:absolute;top:-6px;left:38px;
  background:rgba(255,255,180,.55);
  border-top:1px solid rgba(200,180,0,.35);
  border-bottom:1px solid rgba(200,180,0,.35);
  height:13px;width:65px;
  transform:rotate(-2deg);pointer-events:none;z-index:10;
}

/* ════════════════════════════════════════════
   CERT MODAL — landscape
════════════════════════════════════════════ */
.cert-modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:500;
  display:none;
  justify-content:center;
  align-items:center;
  padding:1.5rem;
  backdrop-filter:blur(6px);
  cursor:default;
}
.cert-modal-overlay.open{display:flex;animation:overlayIn .25s ease both}
.cert-modal-overlay.open .cert-modal-card{animation:cardIn .4s cubic-bezier(.34,1.56,.64,1) both}

.cert-modal-card{
  background:var(--paper);
  border:2px solid var(--dark);
  max-width:860px;width:100%;
  max-height:92vh;
  overflow:hidden;
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  box-shadow:0 25px 60px rgba(0,0,0,.3);
}
.cert-modal-card .cm-watermark{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,9vw,7rem);
  letter-spacing:.05em;
  color:rgba(26,22,18,.045);
  pointer-events:none;white-space:nowrap;
  z-index:0;user-select:none;
}
.cert-modal-topbar{
  padding:1.1rem 1.4rem .85rem;
  border-bottom:1px solid rgba(26,22,18,.12);
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  position:relative;z-index:2;
}
.cert-modal-body{
  display:grid;
  grid-template-columns:1fr 260px;
  position:relative;z-index:1;
  overflow:hidden;
  max-height:calc(92vh - 66px);
}
.cert-img-area{
  border-right:1px solid rgba(26,22,18,.1);
  background:var(--paper2);
  display:flex;align-items:center;justify-content:center;
  min-height:340px;overflow:hidden;
}
.cert-img-area img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;padding:1.5rem;
}
.cert-img-ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;padding:2rem;text-align:center;width:100%;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;color:rgba(26,22,18,.28);
  text-transform:uppercase;letter-spacing:2px;
}
.cert-img-ph svg{opacity:.16}
.cert-details-panel{
  padding:1.4rem;overflow-y:auto;
  display:flex;flex-direction:column;gap:.85rem;
}
.cert-issuer-lg{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:3px;color:var(--dim);
}
.cert-name-lg{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.55rem;letter-spacing:1px;
  color:var(--dark);line-height:1.15;
}
.cert-divider{height:1px;background:rgba(26,22,18,.1)}
.cert-meta-row{display:flex;flex-direction:column;gap:.18rem}
.cert-meta-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.63rem;text-transform:uppercase;letter-spacing:2px;color:var(--dim);
}
.cert-meta-value{
  font-family:'Space Mono',monospace;
  font-size:.8rem;color:var(--dark);line-height:1.5;
}
.cert-skills{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.cert-skill-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:.67rem;text-transform:uppercase;letter-spacing:1px;
  padding:.2rem .52rem;
  border:1px solid rgba(26,22,18,.2);
  color:var(--dim);background:rgba(255,255,255,.4);
}
.cert-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:.45rem;vertical-align:middle;
}
@media(max-width:640px){
  .cert-modal-body{grid-template-columns:1fr;grid-template-rows:210px 1fr}
  .cert-img-area{border-right:none;border-bottom:1px solid rgba(26,22,18,.1);min-height:210px}
}

/* responsive modal overrides */
@media(max-width:768px){
  .modal-side{display:none}
  .modal-card{grid-template-columns:1fr}
}