/* ==========================================================================
   AUZ Dynamics — Deployment Archive (portfolio shortcode)
   Scoped entirely under #auz-portfolio so it never leaks into the theme.
   ========================================================================== */

#auz-portfolio{
  

  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  padding:120px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
@media (max-width:700px){ #auz-portfolio{ padding:72px 0; } }

#auz-portfolio *{ box-sizing:border-box; }
#auz-portfolio a{ color:inherit; text-decoration:none; }
#auz-portfolio img{ max-width:100%; display:block; }
#auz-portfolio :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

#auz-portfolio .auz-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:700px){ #auz-portfolio .auz-inner{ padding:0 20px; } }

/* ---------- header ---------- */
#auz-portfolio .auz-header{ max-width:640px; margin-bottom:56px; }

#auz-portfolio .auz-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:16px;
}
#auz-portfolio .auz-eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:auz-pulse 2s ease-in-out infinite;
}
@keyframes auz-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

#auz-portfolio .auz-header h2{
  font-family:var(--display); font-weight:700; font-size:clamp(26px,3.6vw,40px);
  letter-spacing:-0.01em; margin-bottom:14px;
}
#auz-portfolio .auz-header p{ color:var(--text-mute); font-size:15.5px; }

/* ---------- filters ---------- */
#auz-portfolio .auz-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
#auz-portfolio .auz-filter{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); background:transparent; color:var(--text-mute);
  cursor:pointer; transition:all .2s ease;
}
#auz-portfolio .auz-filter:hover{ color:var(--text); border-color:var(--line-cyan); }
#auz-portfolio .auz-filter.active{ color:#05070A; background:var(--cyan); border-color:var(--cyan); }

/* ---------- grid ---------- */
#auz-portfolio .auz-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width:960px){ #auz-portfolio .auz-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ #auz-portfolio .auz-grid{ grid-template-columns:1fr; } }

#auz-portfolio .auz-card{
  position:relative;
  border:1px solid var(--line); background:var(--bg-panel);
  display:flex; flex-direction:column; padding-bottom:22px;
  cursor:pointer;
  transition:opacity .3s ease, transform .3s ease, border-color .3s ease;
}
#auz-portfolio .auz-card.auz-hide{ display:none; }
#auz-portfolio .auz-card:hover,
#auz-portfolio .auz-card:focus-visible{ border-color:var(--line-cyan); transform:translateY(-3px); }

#auz-portfolio .auz-corner-tr,
#auz-portfolio .auz-corner-bl{
  position:absolute; width:14px; height:14px; opacity:0; transition:opacity .3s ease; z-index:2; pointer-events:none;
}
#auz-portfolio .auz-corner-tr{ top:10px; right:10px; border-top:1px solid var(--cyan); border-right:1px solid var(--cyan); }
#auz-portfolio .auz-corner-bl{ bottom:10px; left:10px; border-bottom:1px solid var(--cyan); border-left:1px solid var(--cyan); }
#auz-portfolio .auz-card:hover .auz-corner-tr,
#auz-portfolio .auz-card:hover .auz-corner-bl{ opacity:1; }

#auz-portfolio .auz-visual{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(77,216,196,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #151B24, #0C1015);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
#auz-portfolio .auz-visual img{ width:100%; height:100%; object-fit:cover; }
#auz-portfolio .auz-visual svg{ width:44px; height:44px; }

#auz-portfolio .auz-meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 20px 0; margin-bottom:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--text-dim); text-transform:uppercase;
}
#auz-portfolio .auz-status{ display:inline-flex; align-items:center; gap:6px; }
#auz-portfolio .auz-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-dim); }
#auz-portfolio .auz-status.live{ color:var(--cyan); }
#auz-portfolio .auz-status.live .dot{ background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
#auz-portfolio .auz-status.beta{ color:var(--gold); }
#auz-portfolio .auz-status.beta .dot{ background:var(--gold); box-shadow:0 0 6px var(--gold); }
#auz-portfolio .auz-status.internal{ color:var(--text-dim); }

#auz-portfolio .auz-card h3{
  font-family:var(--display); font-weight:600; font-size:17px;
  padding:0 20px; margin-bottom:8px;
}
#auz-portfolio .auz-card p.desc{
  color:var(--text-mute); font-size:13.5px; padding:0 20px; margin-bottom:16px; flex:1;
}

#auz-portfolio .auz-stack{ display:flex; flex-wrap:wrap; gap:6px; padding:0 20px; margin-bottom:16px; }
#auz-portfolio .auz-stack span{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--text-dim);
  border:1px solid var(--line); padding:4px 8px;
}

#auz-portfolio .auz-link{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--gold);
  display:inline-flex; align-items:center; gap:6px; padding:0 20px;
}
#auz-portfolio .auz-link svg{ width:12px; height:12px; transition:transform .2s ease; }
#auz-portfolio .auz-card:hover .auz-link svg{ transform:translate(2px,-2px); }

/* ---------- CTA band ---------- */
#auz-portfolio .auz-cta{
  margin-top:56px; padding:40px 44px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(196,41,43,0.06), rgba(77,216,196,0.04));
}
#auz-portfolio .auz-cta p{ font-family:var(--display); font-weight:600; font-size:20px; max-width:440px; }
#auz-portfolio .auz-cta a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 22px; background:linear-gradient(135deg,var(--red-bright),var(--red)); color:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
#auz-portfolio .auz-cta a:hover{ transform:translateY(-1px); box-shadow:0 8px 30px -6px var(--red-glow); }

/* ---------- reveal on scroll ---------- */
#auz-portfolio .auz-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
}
#auz-portfolio .auz-reveal.auz-in{ opacity:1; transform:translateY(0); }

/* ---------- empty state ---------- */
#auz-portfolio p.auz-empty{ color:var(--text-mute); font-family:var(--mono); font-size:13px; }

/* ==========================================================================
   Modal
   ========================================================================== */
.auz-modal-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:rgba(5,7,10,0.86);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  font-family:var(--body, 'Inter', sans-serif);
}
.auz-modal-backdrop.open{ opacity:1; visibility:visible; }

.auz-modal{
  --bg-panel:#10151C; --line: rgba(148,163,184,0.14); --line-cyan: rgba(77,216,196,0.22);
  --cyan:#4DD8C4; --gold:#E3A542; --red:#C4292B; --red-bright:#E3383B; --red-glow: rgba(196,41,43,0.45);
  --text:#EAEDF1; --text-mute:#8A93A0; --text-dim:#545C68;
  --display:'Space Grotesk', sans-serif; --mono:'JetBrains Mono', monospace;

  position:relative;
  width:min(640px, 100%);
  max-height:88vh; overflow-y:auto;
  background:var(--bg-panel); border:1px solid var(--line); color:var(--text);
  padding:0 0 32px;
  transform:translateY(16px) scale(.98); opacity:0;
  transition:transform .3s cubic-bezier(.16,.8,.3,1), opacity .3s ease;
}
.auz-modal-backdrop.open .auz-modal{ transform:translateY(0) scale(1); opacity:1; }

.auz-modal-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,10,0.7); border:1px solid var(--line); color:var(--text-mute);
  transition:color .2s ease, border-color .2s ease;
}
.auz-modal-close:hover{ color:var(--cyan); border-color:var(--line-cyan); }
.auz-modal-close svg{ width:15px; height:15px; }

#auz-modal-visual{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(77,216,196,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #151B24, #0C1015);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
#auz-modal-visual img{ width:100%; height:100%; object-fit:cover; }
#auz-modal-visual svg{ width:56px; height:56px; }

.auz-modal .auz-meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 32px; margin-bottom:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--text-dim); text-transform:uppercase;
}
.auz-modal .auz-status{ display:inline-flex; align-items:center; gap:6px; }
.auz-modal .auz-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-dim); }
.auz-modal .auz-status.live{ color:var(--cyan); }
.auz-modal .auz-status.live .dot{ background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.auz-modal .auz-status.beta{ color:var(--gold); }
.auz-modal .auz-status.beta .dot{ background:var(--gold); box-shadow:0 0 6px var(--gold); }
.auz-modal .auz-status.internal{ color:var(--text-dim); }

.auz-modal h3{
  font-family:var(--display); font-weight:700; font-size:24px;
  padding:0 32px; margin-bottom:20px;
}

.auz-modal-section{ padding:0 32px; margin-bottom:18px; }
.auz-modal-section .label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--gold);
  text-transform:uppercase; margin-bottom:6px;
}
.auz-modal-section p{ color:var(--text-mute); font-size:14px; line-height:1.6; }

.auz-modal .auz-stack{ display:flex; flex-wrap:wrap; gap:6px; padding:0 32px; margin-bottom:24px; }
.auz-modal .auz-stack span{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--text-dim);
  border:1px solid var(--line); padding:4px 8px;
}

.auz-modal-visit{
  margin:0 32px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 22px; background:linear-gradient(135deg,var(--red-bright),var(--red)); color:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.auz-modal-visit:hover{ transform:translateY(-1px); box-shadow:0 8px 30px -6px var(--red-glow); }
.auz-modal-visit svg{ width:13px; height:13px; }

@media (max-width:560px){
  .auz-modal .auz-meta-row, .auz-modal h3, .auz-modal-section, .auz-modal .auz-stack, .auz-modal-visit{ padding-left:22px; padding-right:22px; }
  .auz-modal-visit{ margin-left:22px; margin-right:22px; }
}

@media (prefers-reduced-motion: reduce){
  #auz-portfolio *, .auz-modal-backdrop, .auz-modal{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}