/* Snapchat AR case-study panel — loaded after the main portfolio styles. */

#work .case-media.is-snapchat{
  position:relative;
  min-height:380px;
  aspect-ratio:auto;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.055),transparent 30%),
    linear-gradient(145deg,#11151c 0%,#090b0f 62%,#06070a 100%);
  color:#f6f7f8;
}
#work .case-media.is-snapchat::after{display:none!important}

.snapchat-case-panel{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:27px 26px 24px;
  isolation:isolate;
}
.snapchat-case-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
  pointer-events:none;
}
.snapchat-case-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,transparent 30%,rgba(2,3,5,.34) 100%);
  pointer-events:none;
}

.snapchat-ghost-mark{
  position:absolute;
  z-index:-1;
  width:min(76%,310px);
  aspect-ratio:1;
  inset-inline-end:-7%;
  top:3%;
  color:#fff;
  opacity:.055;
  transform:rotate(-5deg);
  pointer-events:none;
}
.snapchat-ghost-mark svg{display:block;width:100%;height:100%;fill:currentColor}

.snapchat-case-kicker{
  position:relative;
  z-index:2;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:8px;
  color:#d9c59f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.4;
  text-transform:uppercase;
}
.snapchat-case-kicker::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#d9c59f;
  box-shadow:0 0 18px rgba(217,197,159,.22);
}

.snapchat-case-title{
  position:relative;
  z-index:2;
  max-width:13ch;
  margin:34px 0 0;
  font-family:var(--display);
  font-size:clamp(26px,2.25vw,34px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.snapchat-case-metrics{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:auto;
  padding-top:28px;
}
.snapchat-case-metric{
  min-width:0;
  padding:12px 10px 11px;
  border:1px solid rgba(255,255,255,.095);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(8px);
}
.snapchat-case-metric strong{
  display:block;
  font-family:var(--display);
  font-size:22px;
  line-height:1;
  letter-spacing:-.045em;
  color:#fff;
}
.snapchat-case-metric span{
  display:block;
  margin-top:7px;
  color:#aeb4bd;
  font-size:9px;
  line-height:1.45;
}

.snapchat-case-link{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin-top:17px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.72);
  color:#f4f5f6;
  font-size:11px;
  font-weight:700;
}
.snapchat-case-link svg{
  width:13px;
  height:13px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.snapchat-case-link:hover{color:#fff;border-bottom-color:#fff}

html[lang='ar'] .snapchat-case-kicker{
  font-family:var(--arabic);
  text-transform:none;
  letter-spacing:0;
}
html[lang='ar'] .snapchat-case-title{
  max-width:15ch;
  font-family:var(--arabic);
  font-size:clamp(25px,2vw,31px);
  line-height:1.36;
  letter-spacing:0;
}
html[lang='ar'] .snapchat-case-metric span,
html[lang='ar'] .snapchat-case-link{font-family:var(--arabic)}
html[lang='ar'] .snapchat-case-link svg{transform:scaleX(-1)}

@media(max-width:1050px){
  #work .case-media.is-snapchat{min-height:360px}
  .snapchat-case-title{font-size:30px}
}

@media(max-width:760px){
  #work .case-media.is-snapchat{min-height:390px}
  .snapchat-case-panel{padding:24px 22px 22px}
  .snapchat-ghost-mark{width:68%;inset-inline-end:-10%;top:8%}
  .snapchat-case-title{max-width:14ch;margin-top:29px;font-size:29px}
  html[lang='ar'] .snapchat-case-title{max-width:16ch;font-size:27px;line-height:1.4}
  .snapchat-case-metrics{gap:8px;padding-top:24px}
  .snapchat-case-metric{padding:11px 9px}
  .snapchat-case-metric strong{font-size:20px}
  .snapchat-case-metric span{font-size:8.5px}
}

@media(max-width:460px){
  #work .case-media.is-snapchat{min-height:430px}
  .snapchat-case-metrics{grid-template-columns:1fr 1fr}
  .snapchat-case-metric:last-child{grid-column:1/-1}
}