/* ===== PopUp — Cases (página editorial imersiva) ===== */
/* depende de styles.css (tokens, nav, btn, footer, modal base) */

/* ---- minimal top bar ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 28px;transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s}
.topbar.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);padding:12px 28px}
.back-link{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono';font-size:12.5px;
  letter-spacing:.04em;color:var(--muted);padding:9px 15px 9px 12px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--panel);transition:color .25s,background .25s,transform .25s}
.back-link:hover{color:var(--fg);background:var(--panel-2);transform:translateX(-2px)}
.back-link svg{width:16px;height:16px}
.topbar-right{display:flex;align-items:center;gap:14px}
@media(max-width:560px){
  .topbar{padding:14px 18px}
  .back-link span{display:none}
  .back-link{padding:9px 11px}
}

/* ---- page hero ---- */
.cases-hero{
  min-height:auto;display:flex;flex-direction:column;justify-content:flex-start;
  padding:132px 0 84px;position:relative;
}
.hero-logo{display:none}

/* ---- engineering draft plate (logo) ---- */
.draft-plate{position:relative;align-self:flex-start;margin-bottom:56px;border-radius:14px;
  border:1px solid var(--line-2);overflow:hidden;
  display:grid;grid-template-columns:54px 1fr;grid-template-rows:46px 1fr;
  padding:clamp(26px,3.5vw,44px) clamp(30px,4vw,56px) clamp(58px,6vw,74px);
  gap:0;background:
    radial-gradient(120% 160% at 0% 0%,rgba(34,227,195,.07),transparent 55%),
    linear-gradient(180deg,rgba(124,92,255,.05),transparent 60%),
    var(--panel);
  box-shadow:0 30px 90px -50px rgba(0,0,0,.9)}
/* blueprint grid */
.draft-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(rgba(34,227,195,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,227,195,.10) 1px,transparent 1px);
  background-size:88px 88px,88px 88px,22px 22px,22px 22px;
  mask-image:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent 100%)}
.draft-plate>*{position:relative;z-index:1}

/* corner registration marks */
.reg{position:absolute;width:15px;height:15px;opacity:.75;z-index:2}
.reg::before,.reg::after{content:"";position:absolute;background:var(--cyan)}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.reg.tl{top:-7px;left:-7px}.reg.tr{top:-7px;right:-7px}
.reg.bl{bottom:-7px;left:-7px}.reg.br{bottom:-7px;right:-7px}
.plate-tag{position:absolute;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;z-index:2}
.pt-tl{top:13px;left:18px}.pt-tr{top:13px;right:18px;color:var(--cyan)}

/* dimension lines */
.draft-cell-top{grid-column:2;grid-row:1;display:flex;align-items:flex-end;padding-bottom:12px}
.draft-cell-left{grid-column:1;grid-row:2;display:flex;justify-content:flex-end;padding-right:14px}
.dim{position:relative;color:var(--cyan)}
.dim-h{width:100%;height:1px;background:currentColor;opacity:.9}
.dim-v{height:100%;width:1px;background:currentColor;opacity:.9}
.dim-tick{position:absolute;background:currentColor}
.dim-h .dim-tick{top:-4px;width:1px;height:9px}
.dim-h .dim-tick.l{left:0}.dim-h .dim-tick.r{right:0}
.dim-v .dim-tick{left:-4px;height:1px;width:9px}
.dim-v .dim-tick.t{top:0}.dim-v .dim-tick.b{bottom:0}
.dim-val{position:absolute;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.1em;color:var(--cyan)}
.dim-h .dim-val{left:50%;top:-18px;transform:translateX(-50%);background:var(--bg-elev);padding:0 8px}
.dim-v .dim-val{top:50%;left:-9px;transform:translate(-100%,-50%) rotate(-90deg);transform-origin:center;
  background:var(--bg-elev);padding:0 8px;white-space:nowrap}
/* draw-in animation */
.cases-hero[data-in] .dim-h{animation:grow-x .9s var(--ease) .2s both}
.cases-hero[data-in] .dim-v{animation:grow-y .9s var(--ease) .2s both}
@keyframes grow-x{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
@keyframes grow-y{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1)}}

/* logo cell */
.draft-logo{grid-column:2;grid-row:2;position:relative;justify-self:center;align-self:center;
  height:clamp(70px,10vw,132px);aspect-ratio:2877/1132;margin:8px 0}
.draft-logo img{height:100%;width:auto;display:block;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
[data-theme="light"] .draft-logo img{filter:invert(1)}
/* centerlines (dash-dot) through the logo */
.center-h,.center-v{position:absolute;z-index:0;opacity:.55}
.center-h{left:-22px;right:-22px;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--cyan) 0 7px,transparent 7px 11px,var(--cyan) 11px 13px,transparent 13px 20px)}
.center-v{top:-18px;bottom:-18px;left:50%;width:1px;
  background:repeating-linear-gradient(180deg,var(--cyan) 0 7px,transparent 7px 11px,var(--cyan) 11px 13px,transparent 13px 20px)}
/* corner nodes (control points) */
.node{position:absolute;width:7px;height:7px;border:1px solid var(--cyan);background:var(--bg-elev);
  border-radius:1px;z-index:2}
.node.n1{top:-3px;left:-3px}.node.n2{top:-3px;right:-3px}
.node.n3{bottom:-3px;left:-3px}.node.n4{bottom:-3px;right:-3px}
/* sheen across logo */
.draft-logo .sheen{position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-mask:url(images/logo.png) no-repeat center/contain;mask:url(images/logo.png) no-repeat center/contain;
  background:linear-gradient(105deg,transparent 38%,rgba(157,134,255,.95) 47%,rgba(34,227,195,.95) 55%,transparent 64%);
  background-size:260% 100%;background-position:135% 0;mix-blend-mode:screen;
  animation:sheen 6.5s var(--ease) infinite}
@keyframes sheen{0%,55%{background-position:135% 0}92%,100%{background-position:-55% 0}}

/* title block */
.title-block{position:absolute;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:auto auto;
  border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);
  background:color-mix(in srgb,var(--bg-elev) 86%,transparent);backdrop-filter:blur(4px);
  border-bottom-right-radius:14px}
.tb-row{display:contents}
.tb-row span,.tb-row b{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.08em;
  padding:7px 12px;border-bottom:1px solid var(--line)}
.tb-row span{color:var(--faint);text-transform:uppercase;border-right:1px solid var(--line)}
.tb-row b{color:var(--fg);font-weight:500}
.tb-row:last-child span,.tb-row:last-child b{border-bottom:0}

.cases-hero[data-in] .draft-plate{animation:plate-in 1s var(--ease) both}
@keyframes plate-in{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .draft-logo .sheen{animation:none;opacity:0}
  .cases-hero[data-in] .dim-h,.cases-hero[data-in] .dim-v{animation:none}
}
@media(max-width:620px){
  .draft-plate{grid-template-columns:32px 1fr;grid-template-rows:34px 1fr;align-self:stretch;
    padding-bottom:86px}
  .pt-tr{display:none}
  .draft-logo{align-self:start;margin-top:4px}
  .title-block{grid-template-columns:auto auto;transform:scale(.8);transform-origin:bottom right}
  .tb-row span,.tb-row b{font-size:9px;padding:5px 8px}
  .dim-val{font-size:9px}
}
.cases-hero[data-in] .hero-logo{animation:logo-pop 1s var(--ease) both}
@keyframes logo-pop{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.cases-hero .wrap{width:100%}
.ch-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:38px}
.ch-count{font-family:'JetBrains Mono';font-size:13px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.ch-count b{color:var(--cyan);font-weight:500}
.cases-hero h1{
  font-family:'Bricolage Grotesque';font-weight:800;
  font-size:clamp(52px,11vw,168px);line-height:.9;letter-spacing:-.04em;
  text-transform:uppercase;
}
.cases-hero h1 .line{display:block;overflow:hidden}
.cases-hero h1 .line>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.cases-hero h1 .line.thin>span{font-weight:600;color:var(--muted);-webkit-text-stroke:0}
.cases-hero[data-in] h1 .line>span{transform:none}
.cases-hero h1 .o{ -webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--line-2);color:transparent}
.ch-lead{display:flex;justify-content:flex-end;margin-top:48px}
.ch-lead p{max-width:440px;color:var(--muted);font-size:clamp(16px,1.5vw,19px);text-align:left;
  border-left:1px solid var(--line-2);padding-left:22px}
.ch-scroll{margin-top:54px;display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono';
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--faint)}
.ch-scroll .ln{width:60px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);position:relative;overflow:hidden}
.ch-scroll .ln::after{content:"";position:absolute;inset:0;width:30%;background:var(--cyan);animation:slide-ln 2.2s var(--ease) infinite}
@keyframes slide-ln{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

/* ---- sticky filter ---- */
.filter-bar{position:sticky;top:var(--topbar-h,60px);z-index:60;background:transparent;padding:18px 0;
  transition:background .4s var(--ease)}
.filter-bar.stuck{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filter-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-label{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-right:8px}
.fchip{appearance:none;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
  font-family:'JetBrains Mono';font-size:12.5px;letter-spacing:.04em;padding:9px 16px;border-radius:999px;
  cursor:pointer;transition:color .25s,background .25s,border-color .25s,transform .25s}
.fchip:hover{color:var(--fg);transform:translateY(-1px)}
.fchip[aria-pressed="true"]{color:#08080c;background:var(--grad);border-color:transparent;font-weight:600}
[data-theme="light"] .fchip[aria-pressed="true"]{color:#fff}
.fchip .n{opacity:.6;margin-left:6px;font-size:11px}

/* ---- mobile filter toggle — collapsed behind a button, expands on tap ---- */
.filter-toggle{display:none}

/* ---- cases container ---- */
.cases-wrap{padding:40px 0 30px}

@media(max-width:900px){
  .ch-lead{justify-content:flex-start}

  /* on mobile the bar sits directly over scrolling bento images/videos —
     --panel is a ~2% tint meant to sit on the solid page background, not
     legible on its own, so give the whole bar the same frosted look as
     the scrolled topbar (dark + blurred, not fully opaque) at all times
     instead of only once .stuck (scroll-triggered) kicks in */
  .filter-bar{
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
  }

  .filter-toggle{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:13px 16px;border-radius:14px;
    border:1px solid var(--line-2);background:var(--panel);color:var(--fg);
    font-family:'JetBrains Mono',monospace;font-size:12.5px;
    cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease);
  }
  .filter-toggle svg{flex-shrink:0;color:var(--muted)}
  .filter-toggle-label{text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--faint);flex-shrink:0}
  .filter-toggle-active{flex:1;text-align:left;font-weight:600;color:var(--fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .filter-toggle-chev{margin-left:auto;flex-shrink:0;color:var(--muted);transition:transform .3s var(--ease)}
  .filter-bar.open .filter-toggle-chev{transform:rotate(180deg)}
  .filter-bar.open .filter-toggle{border-color:var(--cyan,#22e3c3)}

  .filter-inner{
    max-height:0;opacity:0;overflow:hidden;margin-top:0;
    transition:max-height .35s var(--ease),opacity .25s var(--ease),margin-top .35s var(--ease);
  }
  .filter-inner .filter-label{display:none}
  .filter-bar.open .filter-inner{max-height:320px;opacity:1;margin-top:12px}
}
@media(max-width:560px){
  .cases-hero{min-height:auto;padding-top:130px}
  .filter-inner{gap:8px}
}

/* ---- closing line ---- */
.cases-end{border-top:1px solid var(--line);padding:90px 0 0}

@media(prefers-reduced-motion:reduce){
  .cases-hero h1 .line>span{transition:none!important;transform:none!important;opacity:1!important}
}

/* ======================================================
   MARQUEE — faixa cinética de categorias
   ====================================================== */
.cases-marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 0;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:inline-flex;
  align-items:center;
  gap:22px;
  animation:marquee-scroll 32s linear infinite;
  will-change:transform;
}
.marquee-track span{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  font-size:clamp(18px,2.6vw,30px);
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--muted);
}
.marquee-track .dot{
  font-size:10px;
  color:var(--cyan);
}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ======================================================
   BENTO GRID — mídia sempre visível, tamanhos variados
   ====================================================== */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:300px;
  grid-auto-flow:dense;
  gap:20px;
  padding-bottom:8px;
}
@media(max-width:1180px){.bento-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px}}
@media(max-width:900px){.bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;gap:12px}}
@media(max-width:620px){
  .bento-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .bento-grid .bento-card{grid-column:auto;grid-row:auto;aspect-ratio:4/5}
}

.bento-card.size-lg{grid-column:span 2;grid-row:span 2}
.bento-card.size-wide{grid-column:span 2;grid-row:span 1}
.bento-card.size-tall{grid-column:span 1;grid-row:span 2}
.bento-card.size-sm{grid-column:span 1;grid-row:span 1}
@media(max-width:900px){
  .bento-card.size-wide{grid-column:span 2;grid-row:span 1}
  .bento-card.size-tall{grid-column:span 1;grid-row:span 2}
}

.bento-card{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  opacity:0;
  transform:translateY(28px) scale(.98);
  transition:opacity .6s var(--ease), transform .6s var(--ease), box-shadow .35s var(--ease);
  perspective:900px;
}
.bento-card.in{opacity:1;transform:none}
.bento-card.hide{display:none}
.bento-card:hover{box-shadow:0 34px 80px -30px rgba(0,0,0,.75)}

.bc-link{display:block;position:absolute;inset:0;text-decoration:none;color:#fff}
.bc-link:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

.bc-media{position:absolute;inset:0;transition:transform .6s var(--ease)}
.bc-media video,.bc-media img{width:100%;height:100%;object-fit:cover;display:block}
.bc-ph{
  display:block;width:100%;height:100%;
  background:radial-gradient(160% 160% at 0% 0%,rgba(124,92,255,.18),rgba(34,227,195,.08) 55%,transparent),var(--panel-2,#0f0e17);
}
.bento-card:hover .bc-media{transform:scale(1.06)}

.bc-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,9,.92) 0%,rgba(6,6,9,.5) 38%,rgba(6,6,9,.05) 68%,transparent 100%);
  pointer-events:none;
}

.bc-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.44);padding:4px 10px;border-radius:6px;
  backdrop-filter:blur(4px);
}
.bc-gcount{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.44);padding:4px 9px;border-radius:6px;
  backdrop-filter:blur(4px);
}
.bc-gcount svg{width:11px;height:11px}

.bc-info{
  position:absolute;left:16px;right:56px;bottom:16px;z-index:2;
  display:flex;flex-direction:column;gap:6px;
}
.bc-seg{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.bc-name{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(18px,2.3vw,27px);letter-spacing:-.02em;line-height:1.06;
  color:#fff;
}
.size-lg .bc-name,.size-wide .bc-name{font-size:clamp(22px,3vw,36px)}
.bc-star{flex-shrink:0;font-style:normal;font-size:.6em;color:var(--cyan)}
.bc-tags{display:flex;flex-wrap:wrap;gap:5px}
.bc-tags span{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;
  color:rgba(200,180,255,.92);
  border:1px solid rgba(124,92,255,.4);background:rgba(124,92,255,.16);
  padding:3px 9px;border-radius:999px;
}

.bc-arrow{
  position:absolute;right:14px;bottom:14px;z-index:2;
  flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.3);backdrop-filter:blur(4px);
  display:grid;place-items:center;
  color:#fff;
  transition:background .25s var(--ease),transform .3s var(--ease),border-color .25s;
}
.bc-arrow svg{width:15px;height:15px}
.bc-link:hover .bc-arrow{background:var(--cyan);border-color:var(--cyan);color:#08080c;transform:rotate(-45deg)}

@media(prefers-reduced-motion:reduce){
  .bento-card{transition:none!important;opacity:1!important;transform:none!important}
  .bc-media{transition:none!important}
}

/* ======================================================
   PORTFOLIO GRID — layout image-forward
   ====================================================== */

/* container */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  padding-bottom:8px;
}
@media(min-width:1180px){
  .pf-grid{grid-template-columns:repeat(3,1fr)}
  .pf-card.pf-wide{grid-column:1 / -1}
}

/* compact variant — used for "outros trabalhos" strip on the case detail page */
.pf-grid--compact{grid-template-columns:repeat(3,1fr);gap:16px}
.pf-grid--compact .pf-thumb{aspect-ratio:16/10}
.pf-grid--compact .pf-info{padding:16px 18px 18px;gap:6px}
.pf-grid--compact .pf-name{font-size:clamp(16px,1.6vw,19px)}
.pf-grid--compact .pf-desc{display:none}
.pf-grid--compact .pf-info-foot{padding-top:10px}
@media(max-width:820px){.pf-grid--compact{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pf-grid--compact{grid-template-columns:1fr}}

/* ---- card base ---- */
.pf-card{
  border-radius:var(--r);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s var(--ease),transform .65s var(--ease),
             box-shadow .35s var(--ease);
}
.pf-card.in{opacity:1;transform:none}
.pf-card.hide{display:none}

/* stagger pairs */
.pf-grid .pf-card:nth-child(even){transition-delay:.08s}

/* wide cards (video + layout=full) */
.pf-card.pf-wide{grid-column:1 / -1}

/* hover lift — only on standard cards */
.pf-card:not(.pf-wide):hover{
  box-shadow:0 28px 80px -30px rgba(0,0,0,.75);
  transform:translateY(-4px);
}

/* ---- standard card: image + info below ---- */
.pf-link{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:var(--fg);
}
.pf-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r)}

/* thumbnail */
.pf-thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--panel-2,#0f0e17);
  flex-shrink:0;
}
.pf-media{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .75s var(--ease);
}
.pf-ph{
  background:radial-gradient(160% 160% at 0% 0%,rgba(124,92,255,.12),rgba(34,227,195,.06) 55%,transparent),
             var(--panel-2,#0f0e17);
}
.pf-link:hover .pf-media{transform:scale(1.05)}

/* number badge */
.pf-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.44);padding:4px 10px;border-radius:6px;
  backdrop-filter:blur(4px);
}

/* gallery-count badge (extra photos/videos inside the case) */
.pf-gcount{
  position:absolute;top:14px;right:14px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.06em;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.44);padding:4px 9px;border-radius:6px;
  backdrop-filter:blur(4px);
}
.pf-gcount svg{width:11px;height:11px}

/* card body */
.pf-info{
  padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:10px;flex:1;
}
.pf-info-top{display:flex;flex-direction:column;gap:3px}
.pf-name{
  font-family:'Bricolage Grotesque';font-weight:700;
  font-size:clamp(18px,2.2vw,26px);letter-spacing:-.02em;line-height:1.1;
  color:var(--fg);
}
.pf-seg{
  font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);
}
.pf-desc{
  font-size:14px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pf-info-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.pf-tags{display:flex;flex-wrap:wrap;gap:5px}
.pf-tags span{
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.06em;
  color:var(--violet-2);
  border:1px solid rgba(124,92,255,.28);background:rgba(124,92,255,.08);
  padding:3px 9px;border-radius:999px;
}

/* arrow circle */
.pf-arrow{
  flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  color:var(--cyan);
  transition:background .25s var(--ease),transform .3s var(--ease),border-color .25s;
}
.pf-arrow svg{width:15px;height:15px}
.pf-link:hover .pf-arrow{
  background:var(--cyan);border-color:var(--cyan);
  color:#08080c;transform:rotate(-45deg);
}

/* ---- wide card: cinematic full-width ---- */
.pf-visual{
  position:relative;
  overflow:hidden;
  aspect-ratio:21/9;
}
.pf-card.pf-vid .pf-visual{aspect-ratio:16/9}
.pf-card.pf-wide .pf-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  aspect-ratio:unset;
}
.pf-card.pf-wide:hover .pf-media{transform:scale(1.03)}

/* overlay gradient */
.pf-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to top,
    rgba(6,6,9,.96) 0%,
    rgba(6,6,9,.58) 32%,
    rgba(6,6,9,.14) 62%,
    transparent 100%
  );
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,3vw,48px) clamp(22px,3.5vw,52px);
  pointer-events:none;
}
.pf-cta{pointer-events:auto}

/* overlay meta row */
.pf-ov-meta{
  display:flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:12px;
}
.pf-ov-no{color:var(--cyan)}
.pf-ov-sep{opacity:.4}
.pf-ov-seg{color:rgba(255,255,255,.55)}

/* overlay name + desc */
.pf-ov-name{
  font-family:'Bricolage Grotesque';font-weight:700;
  font-size:clamp(26px,4.5vw,62px);letter-spacing:-.03em;line-height:1;
  color:#fff;margin-bottom:12px;
}
.pf-ov-desc{
  color:rgba(255,255,255,.72);
  font-size:clamp(13.5px,1.3vw,16px);
  max-width:540px;margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* overlay footer */
.pf-ov-foot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.pf-overlay .pf-tags span{
  border-color:rgba(124,92,255,.45);
  background:rgba(124,92,255,.16);
  color:rgba(200,180,255,.88);
}

/* CTA button */
.pf-cta{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-weight:600;font-size:14px;
  text-decoration:none;white-space:nowrap;
  padding:9px 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  transition:background .25s,gap .25s;
}
.pf-link:hover .pf-cta{background:rgba(255,255,255,.2);gap:12px}
.pf-cta svg{width:15px;height:15px;flex-shrink:0}

/* ---- responsive ---- */
@media(max-width:820px){
  .pf-grid{grid-template-columns:1fr;gap:12px}
  .pf-card.pf-wide{grid-column:auto}
  .pf-visual{aspect-ratio:16/9!important}
  .pf-card:not(.pf-wide):hover{transform:none}
}
@media(max-width:480px){
  .pf-info{padding:16px}
  .pf-overlay{padding:16px 18px 20px}
  .pf-ov-desc{display:none}
  .pf-desc{-webkit-line-clamp:3}
}
@media(prefers-reduced-motion:reduce){
  .pf-card{transition:none!important;opacity:1!important;transform:none!important}
  .pf-media{transition:none!important}
}

/* ===== LIGHTBOX ===== */
.lb{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease
}
.lb.lb--open{opacity:1;pointer-events:auto}
.lb[hidden]{display:none!important}
.lb-bd{position:absolute;inset:0;background:rgba(6,6,9,.92);backdrop-filter:blur(14px);cursor:pointer}
.lb-shell{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(96vw,1140px);max-height:92vh;
  background:var(--panel,#111);border:1px solid var(--line,#27272a);
  border-radius:20px;overflow:hidden;
  transform:scale(.95);transition:transform .22s ease
}
.lb.lb--open .lb-shell{transform:none}

/* top bar */
.lb-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line,#27272a);flex-shrink:0
}
.lb-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint,#52525b)
}
.lb-close{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2,#3f3f46);
  background:transparent;color:var(--muted,#71717a);display:grid;place-items:center;
  cursor:pointer;flex-shrink:0;transition:background .2s,color .2s
}
.lb-close:hover{background:var(--panel-2,#1a1a1f);color:var(--fg,#e4e4e7)}
.lb-close svg{width:15px;height:15px}

/* stage */
.lb-stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:18px;background:var(--bg,#060609);overflow:hidden
}
/* max-height uses a viewport unit rather than a percentage: .lb-stage sits in
   an auto-height flex column, so a percentage height never resolves against
   a definite value and the media renders at full intrinsic size, overflowing
   the modal instead of being capped. */
.lb-stage img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:8px;display:block}
.lb-stage video{max-width:100%;max-height:70vh;object-fit:contain;border-radius:8px;display:block}
.lb-stage iframe{width:100%;height:clamp(340px,60vh,700px);border:0;border-radius:8px}
.lb-loading{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint,#52525b)
}

/* footer nav */
.lb-foot{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:11px 16px;border-top:1px solid var(--line,#27272a);flex-shrink:0
}
.lb-nav{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2,#3f3f46);
  background:transparent;color:var(--muted,#71717a);display:grid;place-items:center;
  cursor:pointer;flex-shrink:0;transition:background .2s,color .2s
}
.lb-nav:hover{background:var(--panel-2,#1a1a1f);color:var(--fg,#e4e4e7)}
.lb-nav:disabled{opacity:.25;cursor:default;pointer-events:none}
.lb-nav svg{width:18px;height:18px}
.lb-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.lb-dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;
  background:var(--line-2,#3f3f46);cursor:pointer;transition:background .2s,transform .2s
}
.lb-dot.active{background:var(--cyan,#22e3c3);transform:scale(1.35)}

/* gallery hint badge — always visible after scene reveals */
.ph-gallery-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:6;display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px 6px 10px;white-space:nowrap;
  background:rgba(0,0,0,.56);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.07em;
  color:rgba(255,255,255,.82);pointer-events:none;
  opacity:0;transition:opacity .35s .15s, background .25s, border-color .25s
}
.ph-gallery-hint svg{width:13px;height:13px;flex-shrink:0;stroke:var(--cyan,#22e3c3)}
/* appear after scene reveals */
.scene.in .ph-gallery-hint{opacity:1}
/* brighten on figure hover */
.ph-figure[data-gallery]:hover .ph-gallery-hint{
  background:rgba(34,227,195,.18);
  border-color:rgba(34,227,195,.35);
  color:#fff
}
/* highlight the count when there are extras */
.ph-gallery-hint[data-has-extra="true"]{
  border-color:rgba(34,227,195,.25);
  background:rgba(0,0,0,.62);
}

/* expand hint on hover */
.ph-expand{
  position:absolute;top:11px;right:11px;z-index:5;
  width:32px;height:32px;border-radius:8px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:rgba(255,255,255,.85);
  opacity:0;transition:opacity .25s;pointer-events:none
}
.ph-expand svg{width:14px;height:14px}
.ph-figure[data-gallery]:hover .ph-expand,
.ph-figure[data-gallery]:focus-visible .ph-expand{opacity:1}
.ph-figure[data-gallery]{cursor:pointer}
.ph-figure[data-gallery]:focus-visible{outline:2px solid var(--cyan,#22e3c3);outline-offset:3px}

@media(max-width:600px){
  .lb-shell{width:100vw;max-height:100dvh;border-radius:0;border-left:0;border-right:0}
  .lb-stage{padding:10px}
  .lb-stage img,.lb-stage video{max-height:65dvh}
  .lb-stage iframe{height:clamp(280px,55vh,500px)}
}