/* MENSAGEM STUDIO — PROJECTS HOLOGRAM GRID / PREVIEW ONLY
   Transparent overlay: preserves the existing Cyber Angel/global hero background. */
#projects{
  isolation:isolate;
  background:transparent!important;
}
#projects>.wrap{
  position:relative;
  z-index:2;
}
.ms-holo-projects{
  position:relative;
  width:100%;
  height:clamp(660px,78vh,940px);
  min-height:660px;
  margin-top:clamp(18px,3vw,44px);
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  perspective:1200px;
  user-select:none;
  -webkit-user-select:none;
}
 .ms-holo-projects__viewport{
  position:absolute;
  inset:0;
  overflow:visible;
  background:transparent;
  cursor:grab;
  touch-action:pan-y;
}
.ms-holo-projects__viewport.is-dragging{cursor:grabbing}
.ms-holo-projects__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:transparent!important;
  pointer-events:none;
  filter:
    drop-shadow(0 0 16px rgba(201,255,54,.16))
    drop-shadow(0 0 34px rgba(126,255,227,.08));
}
.ms-holo-projects__cards{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform-style:preserve-3d;
}
.ms-holo-card{
  --ms-card-opacity:1;
  position:absolute;
  left:0;
  top:0;
  width:clamp(138px,12vw,188px);
  color:#f4f5ef;
  text-decoration:none;
  opacity:var(--ms-card-opacity);
  pointer-events:auto;
  will-change:transform,opacity;
  transform-origin:center center;
  transform-style:preserve-3d;
}
.ms-holo-card__glass{
  position:relative;
  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
  padding:9px;
  border:1px solid rgba(201,255,54,.24);
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.016));
  box-shadow:
    0 18px 48px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(126,255,227,.025);
  -webkit-backdrop-filter:blur(10px) saturate(118%);
  backdrop-filter:blur(10px) saturate(118%);
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s cubic-bezier(.2,.75,.25,1),
    background .24s ease;
}
.ms-holo-card__glass:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(201,255,54,.10),transparent 30%,transparent 68%,rgba(126,255,227,.08));
  opacity:.6;
}
.ms-holo-card:hover .ms-holo-card__glass,
.ms-holo-card:focus-visible .ms-holo-card__glass{
  transform:scale(1.045);
  border-color:rgba(201,255,54,.74);
  background:
    linear-gradient(145deg,rgba(201,255,54,.095),rgba(255,255,255,.025));
  box-shadow:
    0 22px 60px rgba(0,0,0,.24),
    0 0 26px rgba(201,255,54,.16),
    0 0 48px rgba(126,255,227,.08),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.ms-holo-card:focus-visible{
  outline:2px solid var(--lime,#c9ff36);
  outline-offset:5px;
  border-radius:20px;
}
.ms-holo-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ms-holo-card__media:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(3,6,5,.34));
}
.ms-holo-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.012);
  transition:transform .4s cubic-bezier(.2,.75,.25,1);
}
.ms-holo-card:hover .ms-holo-card__media img{transform:scale(1.055)}
.ms-holo-card__meta{
  position:relative;
  z-index:1;
  display:grid;
  gap:5px;
  min-width:0;
  padding:0 2px 3px;
}
.ms-holo-card__meta small{
  color:var(--lime,#c9ff36);
  font-size:8px;
  line-height:1.15;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ms-holo-card__meta strong{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:clamp(11px,1vw,14px);
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:650;
}
.ms-holo-card[aria-hidden="true"]{
  pointer-events:none;
}
#projects,
#projects > .wrap,
.ms-holo-projects__cards{
  overflow:visible!important;
}
html.ms-holo-grid-ready #projects .projects-grid{
  display:none!important;
}

@media(max-width:900px){
  .ms-holo-projects{
    height:clamp(610px,74vh,820px);
    min-height:610px;
  }
  .ms-holo-card{
    width:clamp(126px,20vw,158px);
  }
}
@media(max-width:620px){
  .ms-holo-projects{
    width:calc(100% + 18px);
    margin-left:-9px;
    height:clamp(560px,70svh,720px);
    min-height:560px;
    margin-top:8px;
  }
  .ms-holo-card{
    width:118px;
  }
  .ms-holo-card__glass{
    gap:7px;
    padding:7px;
    border-radius:14px;
    -webkit-backdrop-filter:blur(8px) saturate(112%);
    backdrop-filter:blur(8px) saturate(112%);
  }
  .ms-holo-card__media{border-radius:9px}
  .ms-holo-card__meta small{font-size:7px}
  .ms-holo-card__meta strong{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .ms-holo-card__glass,
  .ms-holo-card__media img{
    transition:none!important;
  }
}