/* ============================================================
   projects — Strix theme page stylesheet
   One consistent card per project: header (number · title · badge · desc ·
   tags) + a media stage pairing frameless desktop & mobile screenshots.
   No device chrome; hover lifts the panels and reveals a live-site pill.
   ============================================================ */

/* --- Hero --- */
.projects-hero{
  position:relative;padding:clamp(9rem,15vh,11rem) 0 clamp(3rem,6vh,5rem);overflow:hidden;
}
.projects-hero-grid{
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000,transparent 80%);
}
.projects-hero-inner{
  max-width:1300px;position:relative;
}
.projects-hero-title{
  margin:0;font-size:clamp(2.8rem,7vw,6rem);line-height:1;letter-spacing:-.02em;font-weight:800;
}
.projects-accent{
  color:var(--accent);
}
.projects-hero-lead{
  margin:1.6rem 0 0;max-width:44ch;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.65;color:#9BA3B4;
}

/* --- Layout --- */
.projects-container{
  max-width:1300px;
}
/* Rhythm between the stacked project sections: the first sits closer to the
   hero, the last leaves room before the closing CTA. Was an inline
   style="padding:…" string assembled in PHP for every project in the loop —
   :first-of-type cannot serve here because the hero is the first <section>. */
.projects-section{ padding:0 0 clamp(3rem,6vh,4.5rem); }
.projects-section-first{ padding-top:clamp(2rem,4vh,3rem); }
.projects-section-last{ padding-bottom:clamp(4rem,8vh,6rem); }

/* --- Unified project card --- */
.projects-card{
  opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease;border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;background:linear-gradient(165deg,#0C1523 0%,#0A0C10 55%);
}
.projects-card-head{
  padding:clamp(1.8rem,4vw,3.2rem) clamp(1.8rem,4vw,3.2rem) 0;
}
.projects-card-title{
  margin:0;font-family:'Fredoka',sans-serif;font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.01em;
}
.projects-card-desc{
  margin:1rem 0 0;max-width:62ch;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:#B8BECC;
}

/* --- Media stage: frameless desktop + mobile screenshots, side by side --- */
.projects-card-stage{
  --stage-pad:clamp(1.6rem,4vw,3.2rem);
  position:relative;padding:var(--stage-pad);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(1rem,2.6vw,2.6rem);
}
.projects-card-stage.is-solo{
  grid-template-columns:minmax(0,1fr);
}
/* Clean, frameless screenshot panels — rounded corners, thin ring, soft shadow;
   the wide panel reads as desktop, the tall one as mobile, no device chrome.
   `container-type:size` is what makes the scroll work: it lets the shot inside
   measure the frame it has to travel through, via 100cqh. */
.projects-screen{
  position:relative;display:block;overflow:hidden;background:#0B0E13;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -30px rgba(0,0,0,.75);transition:transform .45s ease,box-shadow .45s ease;container-type:size;
}
.projects-screen-desktop{
  min-width:0;aspect-ratio:16/10;border-radius:16px;
}
.projects-screen-mobile{
  flex:0 0 auto;width:clamp(150px,17vw,210px);aspect-ratio:9/19.3;border-radius:26px;
}
@media (hover:hover){
  .projects-card:hover .projects-screen-desktop{ transform:translateY(-6px) scale(1.012);box-shadow:0 42px 84px -28px rgba(0,0,0,.85); }
  .projects-card:hover .projects-screen-mobile{ transform:translateY(-6px);box-shadow:0 42px 84px -28px rgba(0,0,0,.85); }
}

/* --- The shot itself ---
   .is-scroll holds a full-page capture taller than its frame: it sits at the
   top and slides up by exactly its own overflow (100cqh - 100%), so the pass
   ends on the last pixel of the page and never overshoots into empty space.
   .is-static is a shot no taller than the frame — it simply fills it. */
.projects-shot{
  position:absolute;inset-inline:0;top:0;display:block;width:100%;
}
.is-scroll .projects-shot{
  /* Near-linear with soft ends — the pass is meant to be read, not swooped. */
  height:auto;transform:translateY(0);transition:transform var(--shot-dur,8s) cubic-bezier(.45,.05,.55,.95);
}
.is-static .projects-shot{
  height:100%;object-fit:cover;object-position:top center;
}
.projects-card.is-playing .is-scroll .projects-shot{
  transform:translateY(calc(100cqh - 100%));
}
@media (hover:hover){
  .projects-card:hover .is-scroll .projects-shot,
  .projects-card:focus-within .is-scroll .projects-shot{ transform:translateY(calc(100cqh - 100%)); }
}

/* Hover affordance — pointer devices only, and only while the card is at rest. */
.projects-shot-hint{
  position:absolute;inset-block-end:calc(var(--stage-pad) + .9rem);inset-inline-start:calc(var(--stage-pad) + .9rem);
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;
  background:rgba(6,10,16,.72);border:1px solid rgba(255,255,255,.14);
  font-size:.78rem;letter-spacing:.01em;color:#D3D8E2;pointer-events:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .3s ease,transform .3s ease;
}
.projects-card:hover .projects-shot-hint,
.projects-card.is-playing .projects-shot-hint{ opacity:0;transform:translateY(6px); }
@media (hover:none){ .projects-shot-hint{ display:none; } }

/* Reduced motion: no travel — the frame just shows the top of the page, which
   is exactly what a plain screenshot would have shown. */
@media (prefers-reduced-motion:reduce){
  .is-scroll .projects-shot{ transition:none; }
  .projects-card:hover .is-scroll .projects-shot,
  .projects-card:focus-within .is-scroll .projects-shot,
  .projects-card.is-playing .is-scroll .projects-shot{ transform:translateY(0); }
  .projects-shot-hint{ display:none; }
}

/* --- Final CTA --- */
.projects-cta-section{
  padding:0 0 clamp(5rem,10vh,8rem);text-align:center;
}
.projects-cta-inner{
  max-width:800px;
}
.projects-cta-title{
  margin:0;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;
}
.projects-cta-text{
  margin:1.2rem 0 2rem;color:#9BA3B4;font-size:1.15rem;line-height:1.6;
}
.projects-cta-lg{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--accent);color:#04140F;font-weight:700;font-size:1.05rem;padding:.95rem 1.7rem;border-radius:999px;text-decoration:none;transition:transform .25s;
}

/* --- Small screens: stack — full-width desktop shot on top, mobile shot below --- */
@media (max-width: 48em){
  .projects-card-stage{
    grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(1.4rem,5vw,2rem);
  }
  .projects-screen-desktop{ width:100%; }
  .projects-screen-mobile{ width:clamp(150px,42vw,200px); }
}