/* ============================================================
   Prismi Projects — front end
   Colours come through CSS variables so the Elementor Style tab
   can drive them; everything else is layout the widget controls.
   ============================================================ */

.pp-root{
  --pp-ink:#0C0D0C;
  --pp-accent:#00B85C;
  --pp-accent-d:#0A7A42;
  --pp-hair:rgba(12,13,12,.12);
  --pp-ease:cubic-bezier(.22,1,.36,1);
  --pp-lift:-6px;

  position:relative;display:block;
}
.pp-root *,.pp-root *::before,.pp-root *::after{box-sizing:border-box}

/* ---------- filters ---------- */
.pp-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 34px;
}
.pp-filter{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.55rem 1.1rem;border-radius:99px;
  border:1px solid var(--pp-hair);background:transparent;
  font:inherit;font-size:.85rem;font-weight:500;color:var(--pp-ink);
  transition:background .35s var(--pp-ease),border-color .35s var(--pp-ease),color .35s var(--pp-ease);
}
.pp-filter:hover{border-color:var(--pp-ink)}
.pp-filter.is-on{background:var(--pp-ink);border-color:var(--pp-ink);color:#fff}
.pp-filter i{
  display:none;font-style:normal;font-size:.7rem;opacity:.6;
}
.pp-filter.is-on i{opacity:.8}

/* ---------- grid ---------- */
.pp-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;row-gap:44px;
  transition:opacity .35s var(--pp-ease);
}
.pp-root.is-busy .pp-grid{opacity:.35;pointer-events:none}
.pp-empty{grid-column:1/-1;margin:0;padding:2rem 0;opacity:.6}

/* ---------- card ---------- */
.pp-card{min-width:0}
.pp-card[hidden]{display:none}
.pp-card.is-new{
  animation:ppIn .7s var(--pp-ease) both;
  animation-delay:calc(var(--i,0) * .07s);
}
.pp-grid{transition:opacity .18s var(--pp-ease)}
.pp-grid.is-swapping{opacity:0}
@keyframes ppIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pp-card__link{display:block;text-decoration:none;color:inherit}

.pp-frame{
  position:relative;display:block;overflow:hidden;
  border-radius:10px;background:#fff;
  border:1px solid var(--pp-hair);
  box-shadow:0 30px 60px -34px rgba(12,13,12,.4),0 2px 6px -4px rgba(12,13,12,.12);
  transition:transform .7s var(--pp-ease),box-shadow .7s var(--pp-ease),border-color .7s var(--pp-ease);
}
.pp-card__link:hover .pp-frame,.pp-card.is-live .pp-frame{
  transform:translateY(var(--pp-lift));
  box-shadow:0 46px 80px -36px rgba(12,13,12,.45),0 2px 6px -4px rgba(12,13,12,.12);
}

/* browser bar */
.pp-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 13px;border-bottom:1px solid rgba(12,13,12,.09);
  background:linear-gradient(180deg,#FCFCFB 0%,#F2F2EF 100%);
}
.pp-bar i{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.pp-bar .r{background:#FF5F57}
.pp-bar .y{background:#FEBC2E}
.pp-bar .g{background:#28C840}
.pp-bar i + i{margin-left:-1px}
.pp-bar u{
  flex:1;text-align:center;text-decoration:none;margin-left:.4rem;
  padding:.26rem .9rem;border-radius:99px;
  background:#fff;border:1px solid rgba(12,13,12,.07);
  font-size:.7rem;color:rgba(12,13,12,.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* the window and the page inside it */
.pp-win{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/11;background:#fff;
}
.pp-shot{
  position:absolute;left:0;top:0;display:block;
  width:100%;height:auto;
  transform:translateY(0);
  transition:transform var(--pp-dur,9s) linear;
  backface-visibility:hidden;
}
.pp-card.is-ready .pp-card__link:hover .pp-shot,
.pp-card.is-ready.is-live .pp-shot{transform:translateY(var(--pp-travel,0px))}
/* the quick return is hover-only: on touch `:not(:hover)` matches for ever
   and would replace the real duration with 1.1s */
@media (hover:hover) and (pointer:fine){
  .pp-card:not(.is-live) 
}
.pp-card.is-live .pp-shot{transition:transform var(--pp-dur,9s) linear}
.pp-card__link:hover .pp-shot,.pp-card.is-live .pp-shot{
  transform:translateY(var(--pp-travel,0px));
}
.pp-card__link:not(:hover) .pp-shot{transition:transform 1.1s var(--pp-ease)}
.pp-noshot{
  position:absolute;inset:0;display:grid;place-items:center;
  background:#F2F2EF;font-size:.8rem;color:rgba(12,13,12,.4);
}

/* a scrollbar sized to how much page there is */
.pp-sb{
  position:absolute;right:7px;top:9px;bottom:9px;width:3.5px;
  border-radius:99px;background:rgba(12,13,12,.09);
  opacity:0;transition:opacity .45s var(--pp-ease);overflow:hidden;
}
.pp-card__link:hover .pp-sb,.pp-card.is-live .pp-sb{opacity:1}
.pp-sb i{
  display:block;width:100%;height:var(--pp-thumb,32%);border-radius:99px;
  background:linear-gradient(180deg,var(--pp-accent-d) 0%,var(--pp-accent) 45%,#6BE0A2 100%);
  background-size:100% 200%;
  box-shadow:0 0 8px rgba(0,184,92,.45);
  transform:translateY(0);
  transition:transform var(--pp-dur,9s) linear;
  animation:ppThumb 2.6s linear infinite;
}
.pp-card.is-ready .pp-card__link:hover .pp-sb i,
.pp-card.is-ready.is-live .pp-sb i{transform:translateY(var(--pp-sbt,0px))}
@media (hover:hover) and (pointer:fine){
  .pp-card:not(.is-live) .pp-card__link:not(:hover) .pp-sb i{transition:transform 1.1s var(--pp-ease)}
}
@keyframes ppThumb{from{background-position:0 0}to{background-position:0 -200%}}

.pp-hint{
  position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem;border-radius:99px;
  background:#fff;border:1px solid rgba(12,13,12,.1);
  box-shadow:0 8px 20px -12px rgba(12,13,12,.5);
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(12,13,12,.62);
  transition:opacity .5s var(--pp-ease),transform .5s var(--pp-ease);
}
.pp-hint s{
  width:6px;height:6px;border-radius:50%;background:var(--pp-accent);text-decoration:none;
  animation:ppPulse 2.2s var(--pp-ease) infinite;
}
@keyframes ppPulse{0%,70%,100%{opacity:1}85%{opacity:.3}}
.pp-card__link:hover .pp-hint,.pp-card.is-live .pp-hint{opacity:0;transform:translate(-50%,8px)}

.pp-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(12,13,12,.08);overflow:hidden;
}
.pp-progress i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--pp-accent-d),var(--pp-accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--pp-dur,9s) linear;
}
.pp-card.is-ready .pp-card__link:hover .pp-progress i,
.pp-card.is-ready.is-live .pp-progress i{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .pp-card:not(.is-live) .pp-card__link:not(:hover) .pp-progress i{transition:transform 1.1s var(--pp-ease)}
}
.pp-card.is-live .pp-progress i{transition:transform var(--pp-dur,9s) linear}

/* title and meta */
.pp-meta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  grid-template-areas:"name link" "cat link";
  gap:.25rem 1rem;padding-top:1.1rem;
}
.pp-meta b{
  grid-area:name;justify-self:start;
  font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  color:var(--pp-ink);
  transition:color .4s var(--pp-ease);
}
.pp-meta i{grid-area:cat;justify-self:start;font-style:normal;font-size:.85rem;opacity:.55}
.pp-meta svg{
  grid-area:link;align-self:center;width:16px;height:16px;opacity:0;
  transform:translate(-6px,6px);color:var(--pp-accent-d);
  transition:opacity .45s var(--pp-ease),transform .45s var(--pp-ease);
}
.pp-card__link:hover svg{opacity:1;transform:none}

/* ---------- accordion ---------- */
.pp-acc{margin-top:.9rem;border-top:1px solid var(--pp-hair)}
.pp-acc__b{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:.85rem 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pp-ink);text-align:left;
}
.pp-acc__b i{
  position:relative;width:13px;height:13px;flex:none;
}
.pp-acc__b i::before,.pp-acc__b i::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;border-radius:2px;
  background:currentColor;transition:transform .45s var(--pp-ease),opacity .35s var(--pp-ease);
}
.pp-acc__b i::after{transform:rotate(90deg)}
.pp-acc__b[aria-expanded="true"]{color:var(--pp-accent-d)}
.pp-acc__b[aria-expanded="true"] i::after{transform:rotate(0);opacity:0}
.pp-acc__p{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--pp-ease);
}
.pp-acc.is-open .pp-acc__p{grid-template-rows:1fr}
.pp-acc__in{overflow:hidden;font-size:.94rem;line-height:1.6;opacity:.72}
.pp-acc__in > :first-child{margin-top:0}
.pp-acc__in > :last-child{margin-bottom:1rem}

/* ---------- pagination ---------- */
.pp-foot{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:44px}
.pp-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pp-page{
  min-width:42px;height:42px;padding:0 .6rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--pp-hair);border-radius:99px;background:transparent;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--pp-ink);
  transition:background .35s var(--pp-ease),border-color .35s var(--pp-ease),color .35s var(--pp-ease);
}
.pp-page:hover:not([disabled]){border-color:var(--pp-ink)}
.pp-page.is-on{background:var(--pp-ink);border-color:var(--pp-ink);color:#fff}
.pp-page[disabled]{opacity:.3;cursor:default}
.pp-page svg{width:14px;height:8px}
.pp-gap{padding:0 .2rem;opacity:.4}

/* the filter bar can sit under the grid instead */
.pp-filters.is-bottom{margin:34px 0 0}

.pp-foot{flex-direction:column;align-items:center;gap:.9rem}
.pp-more[hidden],.pp-tally[hidden]{display:none !important}
.pp-tally{
  margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pp-ink);opacity:.45;
}
.pp-more u{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 .35rem;border-radius:99px;
  background:rgba(255,255,255,.16);text-decoration:none;
  font-size:.75rem;font-weight:700;
}
.pp-more{
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  padding:1rem 1.8rem;border-radius:99px;border:0;
  background:var(--pp-ink);color:#fff;
  font:inherit;font-size:.92rem;font-weight:600;
  transition:background .4s var(--pp-ease),transform .4s var(--pp-ease);
}
.pp-more:hover{background:var(--pp-accent-d);transform:translateY(-2px)}
.pp-more i{
  width:13px;height:13px;border-radius:50%;
  border:1.5px solid currentColor;border-top-color:transparent;
  opacity:0;
}
.pp-more.is-busy i{opacity:1;animation:ppSpin .7s linear infinite}
@keyframes ppSpin{to{transform:rotate(360deg)}}

/* ---------- busy ---------- */
.pp-busy{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:none;gap:6px;z-index:3;
}
.pp-root.is-busy .pp-busy{display:flex}
.pp-busy i{
  width:8px;height:8px;border-radius:50%;background:var(--pp-accent);
  animation:ppBounce 1.1s var(--pp-ease) infinite;
}
.pp-busy i:nth-child(2){animation-delay:.14s}
.pp-busy i:nth-child(3){animation-delay:.28s}
@keyframes ppBounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}

@media (max-width:767px){
  .pp-grid{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .pp-root *{transition:none !important;animation:none !important}
  .pp-shot{transform:none !important}
  .pp-acc__p{grid-template-rows:1fr}
}