/* ═══════════════════════════════════════════════════════════
   ARGENTI — HUMAN STORY CASE STUDY
   PAGE-SPECIFIC CSS ONLY

   GLOBAL SYSTEM OWNS:
   typography · spotlight heroes · sections · surfaces ·
   cards · buttons · numbers · lists · navigation · footer ·
   accessibility · motion · responsive foundations

   THIS FILE OWNS:
   human-story composition · proof grid · website showcase ·
   reading panels · dialogue · system flow · AI manifesto
   ═══════════════════════════════════════════════════════════ */


/* =========================================================
   01 — HERO SPOTLIGHT POSITION
========================================================= */

.case-hero {
  --jm-hero-purple-x: 82%;
  --jm-hero-purple-y: 20%;
  --jm-hero-purple-top: -9rem;
  --jm-hero-purple-right: -7rem;
  --jm-hero-purple-bottom: auto;
  --jm-hero-purple-left: auto;

  --jm-hero-cyan-x: 15%;
  --jm-hero-cyan-y: 78%;
  --jm-hero-cyan-top: auto;
  --jm-hero-cyan-right: auto;
  --jm-hero-cyan-bottom: -10rem;
  --jm-hero-cyan-left: -8rem;
}


/* =========================================================
   02 — HERO PROOF
========================================================= */

.case-proof-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  width: 100%;
  max-width: 1050px;

  gap: 1rem;

  margin:
    2.25rem
    auto
    0;

  text-align: center;
}

.case-proof-grid .jm-card {
  position: relative;

  overflow: hidden;

  border-color:
    rgba(159, 77, 224, 0.20);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(244, 238, 252, 0.60)
    );

  box-shadow:
    0 18px 42px
    rgba(62, 1, 95, 0.10),

    inset 0 1px 0
    rgba(255, 255, 255, 0.92);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(140%);

  backdrop-filter:
    blur(18px)
    saturate(140%);
}

.case-proof-grid .jm-card::after {
  content: "";

  position: absolute;
  right: -3rem;
  bottom: -4rem;

  width: 8rem;
  height: 8rem;

  border-radius: 50%;

  background:
    rgba(0, 212, 255, 0.10);

  filter:
    blur(20px);

  pointer-events: none;
}

.case-proof-grid .jm-card > * {
  position: relative;
  z-index: 1;
}

.case-proof-grid .jm-card:hover {
  border-color:
    rgba(0, 212, 255, 0.36);

  box-shadow:
    0 24px 55px
    rgba(62, 1, 95, 0.15),

    0 0 25px
    rgba(0, 212, 255, 0.07),

    inset 0 1px 0
    rgba(255, 255, 255, 0.96);
}

.case-proof-grid .jm-card--purple {
  border-color:
    rgba(0, 212, 255, 0.22);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(0, 212, 255, 0.24),
      transparent 44%
    ),

    linear-gradient(
      145deg,
      var(--jm-purple-deep),
      var(--jm-purple) 60%,
      #401262
    );

  box-shadow:
    0 22px 50px
    rgba(62, 1, 95, 0.25),

    inset 0 1px 0
    rgba(255, 255, 255, 0.12);
}


/* =========================================================
   03 — WEBSITE SHOWCASE
========================================================= */

.case-showcase__figure {
  position: relative;

  width: 100%;
  max-width:
    var(--jm-content-max);

  margin:
    0
    auto;

  overflow: hidden;

  border:
    1px solid
    rgba(0, 212, 255, 0.25);

  border-radius:
    var(--jm-radius-large);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.92),
      rgba(239, 230, 247, 0.72)
    );

  box-shadow:
    0 32px 80px
    rgba(62, 1, 95, 0.18),

    0 0 35px
    rgba(0, 212, 255, 0.06),

    inset 0 1px 0
    rgba(255, 255, 255, 0.95);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%);

  backdrop-filter:
    blur(20px)
    saturate(135%);
}

.case-showcase__figure::before {
  content: "ARGENTI · LIVE PROJECT";

  position: absolute;
  top: 1rem;
  left: 1rem;

  z-index: 3;

  padding:
    0.5rem
    0.75rem;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius:
    var(--jm-radius-pill);

  background:
    linear-gradient(
      135deg,
      rgba(62, 1, 95, 0.88),
      rgba(32, 24, 73, 0.80)
    );

  color:
    var(--jm-white);

  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;

  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, 0.24),

    inset 0 1px 0
    rgba(255, 255, 255, 0.14);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);

  pointer-events: none;
}

.case-showcase__figure img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
  object-position: top center;
}

.case-showcase__figure figcaption {
  position: relative;

  padding:
    0.95rem
    1rem;

  border-top:
    1px solid
    rgba(159, 77, 224, 0.14);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.80),
      rgba(239, 230, 247, 0.72),
      rgba(222, 248, 255, 0.68)
    );

  text-align: center;
}


/* =========================================================
   04 — STORY READING PANEL
========================================================= */

.case-reading-width {
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 1100px;

  margin-inline: auto;

  padding:
    clamp(1.5rem, 4vw, 3rem);

  overflow: hidden;

  border:
    1px solid
    rgba(159, 77, 224, 0.15);

  border-radius:
    var(--jm-radius-large);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(0, 212, 255, 0.09),
      transparent 28%
    ),

    radial-gradient(
      circle at 0 100%,
      rgba(168, 85, 247, 0.10),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.84),
      rgba(247, 242, 252, 0.68)
    );

  box-shadow:
    0 24px 60px
    rgba(62, 1, 95, 0.10),

    inset 0 1px 0
    rgba(255, 255, 255, 0.94);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(130%);

  backdrop-filter:
    blur(20px)
    saturate(130%);
}

.case-reading-width::before {
  content: "";

  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--jm-purple-light),
      var(--jm-cyan),
      transparent
    );

  opacity: 0.70;

  box-shadow:
    0 0 18px
    rgba(0, 212, 255, 0.20);

  pointer-events: none;
}

.case-reading-width::after {
  content: "";

  position: absolute;
  right: -8rem;
  bottom: -9rem;

  z-index: -1;

  width: 18rem;
  height: 18rem;

  border-radius: 50%;

  background:
    rgba(159, 77, 224, 0.10);

  filter:
    blur(48px);

  pointer-events: none;
}

.case-reading-width > * {
  position: relative;
  z-index: 1;
}

.case-reading-width > .jm-body {
  max-width: 900px;
}

.case-reading-width > .jm-lead {
  max-width: 880px;

  color:
    var(--jm-purple);

  font-weight: 600;
}

.case-reading-width > .jm-body:last-child,
.case-reading-width > .jm-lead:last-child,
.case-reading-width > .jm-h3:last-child {
  margin-bottom: 0;
}


/* =========================================================
   05 — STORY SECTION ATMOSPHERE
========================================================= */

.jm-section:has(.case-reading-width) {
  isolation: isolate;

  overflow: hidden;
}

.jm-section:has(.case-reading-width)::before {
  content: "";

  position: absolute;
  top: 12%;
  left: -8rem;

  z-index: -1;

  width: 18rem;
  height: 18rem;

  border-radius: 50%;

  background:
    rgba(168, 85, 247, 0.07);

  filter:
    blur(60px);

  pointer-events: none;
}

.jm-section:has(.case-reading-width)::after {
  content: "";

  position: absolute;
  right: -8rem;
  bottom: 10%;

  z-index: -1;

  width: 18rem;
  height: 18rem;

  border-radius: 50%;

  background:
    rgba(0, 212, 255, 0.06);

  filter:
    blur(60px);

  pointer-events: none;
}


/* =========================================================
   06 — QUOTES
========================================================= */

.case-reading-width .jm-quote {
  position: relative;

  margin:
    1.75rem
    0;

  padding:
    1.35rem
    1.5rem
    1.35rem
    1.75rem;

  overflow: hidden;

  border:
    1px solid
    rgba(159, 77, 224, 0.20);

  border-left:
    4px solid
    var(--jm-purple-bright);

  border-radius:
    0
    var(--jm-radius-card)
    var(--jm-radius-card)
    0;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(0, 212, 255, 0.12),
      transparent 36%
    ),

    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.80),
      rgba(239, 230, 247, 0.67)
    );

  color:
    var(--jm-purple);

  box-shadow:
    0 16px 36px
    rgba(62, 1, 95, 0.09),

    inset 0 1px 0
    rgba(255, 255, 255, 0.90);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}

.case-reading-width .jm-quote::after {
  content: "“";

  position: absolute;
  right: 1rem;
  bottom: -1.4rem;

  color:
    rgba(159, 77, 224, 0.10);

  font-size: 7rem;
  line-height: 1;
  font-weight: 900;

  pointer-events: none;
}

.case-reading-width .jm-quote strong {
  color:
    var(--jm-purple-deep);
}


/* =========================================================
   07 — MINI DIALOGUE
========================================================= */

.case-dialogue {
  display: grid;

  gap: 0.65rem;
}

.case-dialogue p {
  position: relative;

  margin: 0;

  padding-left: 1.3rem;
}

.case-dialogue p::before {
  content: "→";

  position: absolute;
  top: 0;
  left: 0;

  color:
    var(--jm-cyan);

  font-weight: 900;
}


/* =========================================================
   08 — DELIVERY LIST
========================================================= */

.case-reading-width .jm-list {
  margin:
    1.75rem
    0;

  border-color:
    rgba(159, 77, 224, 0.16);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.72),
      rgba(239, 230, 247, 0.54)
    );

  box-shadow:
    0 16px 40px
    rgba(62, 1, 95, 0.08),

    inset 0 1px 0
    rgba(255, 255, 255, 0.90);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}

.case-reading-width .jm-list__row {
  border-bottom-color:
    rgba(159, 77, 224, 0.10);
}

.case-reading-width .jm-list__row:hover {
  background:
    linear-gradient(
      90deg,
      rgba(168, 85, 247, 0.07),
      rgba(0, 212, 255, 0.05)
    );
}


/* =========================================================
   09 — SYSTEM FLOW
========================================================= */

.case-system-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 0.5rem;

  margin:
    1.9rem
    0;

  padding:
    1rem;

  overflow: hidden;

  border:
    1px solid
    rgba(159, 77, 224, 0.18);

  border-radius:
    var(--jm-radius-card);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.74),
      rgba(239, 230, 247, 0.56)
    );

  box-shadow:
    0 15px 35px
    rgba(62, 1, 95, 0.08),

    inset 0 1px 0
    rgba(255, 255, 255, 0.92);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}

.case-system-flow span {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1;

  min-width: 0;

  padding:
    0.7rem
    0.5rem;

  border:
    1px solid
    rgba(159, 77, 224, 0.13);

  border-radius:
    var(--jm-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(244, 238, 252, 0.68)
    );

  color:
    var(--jm-purple);

  font-size:
    var(--jm-text-sm);

  line-height: 1.3;
  font-weight: 850;

  text-align: center;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.95);
}

.case-system-flow b {
  flex: 0 0 auto;

  background:
    linear-gradient(
      90deg,
      var(--jm-purple-light),
      var(--jm-cyan)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  font-size: 0.9rem;
  line-height: 1;
  font-weight: 900;
}


/* =========================================================
   10 — HUMAN LINES
========================================================= */

.case-human-lines {
  display: grid;

  gap: 0.6rem;

  margin:
    2rem
    0;
}

.case-human-lines p {
  position: relative;

  width: fit-content;

  margin: 0;

  padding:
    0.65rem
    1rem;

  border:
    1px solid
    rgba(159, 77, 224, 0.16);

  border-radius:
    var(--jm-radius-pill);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.76),
      rgba(239, 230, 247, 0.58)
    );

  font-size:
    clamp(1.35rem, 3vw, 2rem);

  line-height: 1.15;
  font-weight: 900;

  box-shadow:
    0 12px 28px
    rgba(62, 1, 95, 0.08),

    inset 0 1px 0
    rgba(255, 255, 255, 0.92);

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);
}

.case-human-lines p:nth-child(2) {
  margin-left: 2.5rem;
}


/* =========================================================
   11 — AI MANIFESTO
========================================================= */

.case-ai-manifesto {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1rem;

  margin-top: 1.9rem;
}

.case-ai-manifesto .jm-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: 0.9rem;

  overflow: hidden;

  border-color:
    rgba(159, 77, 224, 0.18);

  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(0, 212, 255, 0.10),
      transparent 40%
    ),

    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.80),
      rgba(239, 230, 247, 0.60)
    );

  box-shadow:
    0 16px 38px
    rgba(62, 1, 95, 0.09),

    inset 0 1px 0
    rgba(255, 255, 255, 0.94);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}

.case-ai-manifesto .jm-card:hover {
  border-color:
    rgba(0, 212, 255, 0.38);

  box-shadow:
    0 22px 48px
    rgba(62, 1, 95, 0.14),

    0 0 20px
    rgba(0, 212, 255, 0.06);
}

.case-ai-manifesto .jm-card__title {
  margin-bottom: 0;
}


/* =========================================================
   12 — REAL EXPERIENCE STATEMENT
========================================================= */

.case-reading-width .jm-statement {
  position: relative;

  width: fit-content;

  margin:
    2.25rem
    auto;

  padding:
    0.8rem
    1.4rem;

  border:
    1px solid
    rgba(159, 77, 224, 0.18);

  border-radius:
    var(--jm-radius-pill);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.76),
      rgba(239, 230, 247, 0.62)
    );

  box-shadow:
    0 16px 40px
    rgba(62, 1, 95, 0.10),

    0 0 24px
    rgba(0, 212, 255, 0.05),

    inset 0 1px 0
    rgba(255, 255, 255, 0.94);

  -webkit-backdrop-filter:
    blur(15px);

  backdrop-filter:
    blur(15px);
}


/* =========================================================
   13 — FINAL STATEMENT
========================================================= */

.case-final__line {
  display: block;

  margin-top: 0.1em;
}

.case-final__line:first-of-type {
  color:
    #d994f5;
}

.case-final__line:last-of-type {
  background:
    linear-gradient(
      90deg,
      #d994f5,
      #7fe8ff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  -webkit-text-fill-color:
    transparent;
}


/* =========================================================
   14 — TABLET
========================================================= */

@media (max-width: 950px) {

  .case-proof-grid {
    grid-template-columns:
      1fr;

    max-width: 650px;
  }

  .case-ai-manifesto {
    grid-template-columns:
      1fr;
  }

  .case-system-flow {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .case-system-flow b {
    display: none;
  }

}


/* =========================================================
   15 — MOBILE
========================================================= */

@media (max-width: 640px) {

  .case-hero {
    --jm-hero-purple-size: 20rem;
    --jm-hero-purple-top: -9rem;
    --jm-hero-purple-right: -10rem;

    --jm-hero-cyan-size: 19rem;
    --jm-hero-cyan-bottom: -9rem;
    --jm-hero-cyan-left: -10rem;
  }

  .case-proof-grid {
    gap: 0.75rem;
  }

  .case-showcase__figure {
    border-radius:
      var(--jm-radius-card);
  }

  .case-showcase__figure::before {
    top: 0.65rem;
    left: 0.65rem;

    padding:
      0.42rem
      0.6rem;

    font-size: 0.55rem;
  }

  .case-reading-width {
    padding: 1.2rem;

    border-radius:
      var(--jm-radius-card);
  }

  .case-reading-width .jm-quote {
    padding:
      1.1rem
      1rem
      1.1rem
      1.2rem;
  }

  .case-system-flow {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.55rem;

    padding: 0.7rem;
  }

  .case-system-flow span {
    padding:
      0.7rem
      0.5rem;
  }

  .case-human-lines p {
    width: 100%;

    font-size: 1.15rem;

    text-align: center;
  }

  .case-human-lines p:nth-child(2) {
    margin-left: 0;
  }

  .case-ai-manifesto {
    gap: 0.7rem;
  }

}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .case-proof-grid .jm-card,
  .case-ai-manifesto .jm-card,
  .case-system-flow span {
    transition: none;
  }

  .case-proof-grid .jm-card:hover,
  .case-ai-manifesto .jm-card:hover {
    transform: none;
  }

}

/* =========================================================
   FIX GRADIENT TEXT INSIDE GLASS PILLS
========================================================= */

.case-human-lines .jm-gradient-text,
.case-reading-width .jm-statement.jm-gradient-text {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.82),
      rgba(239, 230, 247, 0.68),
      rgba(222, 248, 255, 0.64)
    );

  -webkit-background-clip:
    border-box;

  background-clip:
    border-box;

  color:
    var(--jm-purple);

  -webkit-text-fill-color:
    var(--jm-purple);
}


/* DIFFERENT ACCENT FOR SECOND HUMAN LINE */

.case-human-lines .jm-gradient-text:nth-child(2) {
  color:
    #247fc4;

  -webkit-text-fill-color:
    #247fc4;
}


/* REAL EXPERIENCE STATEMENT */

.case-reading-width
.jm-statement.jm-gradient-text {
  color:
    var(--jm-purple-bright);

  -webkit-text-fill-color:
    var(--jm-purple-bright);

  box-shadow:
    0 16px 40px
    rgba(62, 1, 95, 0.12),

    0 0 25px
    rgba(0, 212, 255, 0.08),

    inset 0 1px 0
    rgba(255, 255, 255, 0.95);
}