/* =============================================================================
   themes/heartpulse.css — HEARTPULSE case study
   -----------------------------------------------------------------------------
   Art direction: the page opens inside HEARTPULSE's own brand world — Night,
   with "pink entering from the left and cyan from the right" (the logo's
   gradient becomes the scene's lighting) and Bebas Neue titles carrying the
   pink/cyan signal offset. Everything after the opening returns to Light's
   system (void and paper), so the case still reads as part of the portfolio.
   Brand source: HEARTPULSE Brand Kit (Night #05060D, Paper #F2EDE4, Pulse
   Magenta #FF0A96, Orchid #F406DE, Electric Violet #9B1BFF, Signal Blue
   #3355FF, Pulse Cyan #15F2FF; Poppins Bold wordmark, Bebas Neue titles).
   ============================================================================= */

/* ---- HEARTPULSE fonts (only this page loads them) ---------------------------- */
@font-face { font-family: "Bebas Neue"; src: url("/assets/fonts/bebas-neue-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bahnschrift Web"; src: local("Bahnschrift SemiBold SemiCondensed"), local("Bahnschrift"), url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

.theme-heartpulse {
  --hp-night: #05060D;
  --hp-blue-hour: #0B1030;
  --hp-paper: #F2EDE4;
  --hp-magenta: #FF0A96;
  --hp-orchid: #F406DE;
  --hp-violet: #9B1BFF;
  --hp-blue: #3355FF;
  --hp-cyan: #15F2FF;
  --hp-gradient: linear-gradient(90deg, var(--hp-magenta), var(--hp-orchid) 24%, var(--hp-violet) 50%, var(--hp-blue) 72%, var(--hp-cyan));
  --bebas: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --kicker: "Bahnschrift Web", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}

/* ---- 1. The opening: HEARTPULSE's world ------------------------------------- */
.hp-world {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(55vw 70vh at -6% 64%, rgba(255, 10, 150, .34), transparent 70%),
    radial-gradient(50vw 66vh at 106% 22%, rgba(21, 242, 255, .22), transparent 70%),
    radial-gradient(60vw 50vh at 50% 110%, rgba(51, 85, 255, .2), transparent 70%),
    var(--hp-night);
  color: #fff;
  --text: #fff;
  --text-soft: rgba(255, 255, 255, .78);
  --text-faint: rgba(255, 255, 255, .6);
  --rule: rgba(255, 255, 255, .16);
  --rule-strong: rgba(255, 255, 255, .34);
  --surface: var(--hp-night);
}
/* Side brushes — gradient strokes entering from each edge (from the kit) */
.hp-world::before, .hp-world::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 44vw;
  height: 10vw;
  background: var(--hp-gradient);
  -webkit-mask: url("/assets/brand/brush-dry.svg") center / 100% 100% no-repeat;
          mask: url("/assets/brand/brush-dry.svg") center / 100% 100% no-repeat;
  opacity: .5;
}
.hp-world::before { left: -16vw; bottom: 2%; transform: rotate(-12deg); opacity: .32; }
.hp-world::after { right: -14vw; top: 22%; transform: rotate(-14deg) scaleX(-1); opacity: .35; }

.hp-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(16px, 2.6vw, 44px); align-items: end; }
.hp-hero__id { grid-column: 1 / span 6; }
.hp-lockup { display: grid; justify-items: start; gap: clamp(14px, 2vw, 22px); margin-top: 6px; }
.hp-lockup__mark { width: clamp(120px, 15vw, 220px); height: auto; filter: drop-shadow(0 0 30px rgba(155, 27, 255, .35)); }
.hp-lockup__word { width: clamp(240px, 32vw, 520px); height: auto; }
.hp-lockup__channels {
  display: flex; align-items: center; gap: 12px;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: .76rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.hp-lockup__channels::before, .hp-lockup__channels::after { content: ""; width: 34px; height: 2px; }
@media (max-width: 480px) {                     /* keep the sub-brand line on one line on phones */
  .hp-lockup__channels { font-size: .66rem; letter-spacing: .22em; gap: 8px; white-space: nowrap; }
  .hp-lockup__channels::before, .hp-lockup__channels::after { width: 22px; }
}
.hp-lockup__channels::before { background: var(--hp-magenta); }
.hp-lockup__channels::after { background: var(--hp-cyan); }
.hp-hero__summary { margin-top: clamp(22px, 3vw, 36px); max-width: 30ch; font-size: var(--fs-lead); line-height: 1.32; }

/* The headline number, in Bebas Neue with the pink/cyan signal offset */
.hp-hero__impact { grid-column: 8 / span 5; justify-self: end; text-align: right; }
.signal {
  font-family: var(--bebas);
  font-weight: 400;
  line-height: .86;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: -.035em 0 0 var(--hp-magenta), .035em 0 0 var(--hp-cyan);
  font-variant-numeric: lining-nums;
}
.hp-hero__impact .signal { font-size: clamp(5.4rem, 3rem + 11vw, 13rem); }
.hp-hero__impact-label {
  margin-top: 10px;
  font-family: var(--kicker);
  font-weight: 600;
  font-size: clamp(.9rem, .8rem + .4vw, 1.15rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hp-hero__impact .proof__source { justify-content: flex-end; display: flex; gap: 8px; margin-top: 8px; }

/* Stat ribbon under the opening */
.hp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 24px clamp(16px, 2.4vw, 36px);
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 26px;
  border-top: 2px solid transparent;
  border-image: var(--hp-gradient) 1;
}
.hp-stat .signal { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); }
.hp-stat p { margin-top: 6px; font-size: 1.05rem; line-height: 1.3; color: var(--text-soft); }
.hp-stat .attr { margin-top: 8px; color: var(--text-faint); }
.hp-world .legend { margin-top: 30px; }
@media (max-width: 960px) {
  .hp-hero__id, .hp-hero__impact { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .hp-hero__impact .proof__source { justify-content: flex-start; }
}

/* ---- 2. Where it's at now: the three channels ------------------------------- */
.hp-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.hp-channel {
  position: relative;
  padding: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(180deg, rgba(11, 16, 48, .9), rgba(5, 6, 13, .9));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  display: grid;
  gap: 12px;
  align-content: start;
}
.hp-channel__mark { width: 64px; height: auto; }
.hp-channel__name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .3em; }
.hp-channel__sub {
  display: flex; align-items: center; gap: 10px;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
}
.hp-channel__sub::before, .hp-channel__sub::after { content: ""; flex: 1; height: 2px; max-width: 46px; }
.hp-channel__sub::before { background: var(--hp-magenta); }
.hp-channel__sub::after { background: var(--hp-cyan); }
.hp-channel p { color: rgba(255, 255, 255, .78); font-size: 1.08rem; line-height: 1.4; }
@media (max-width: 860px) { .hp-channels { grid-template-columns: 1fr; } }

/* Brush plate — the kit's category tag: gradient paint, white condensed caps */
.hp-plate {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: .55em 1.3em;
  font-family: var(--kicker);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.hp-plate::before {
  content: "";
  position: absolute;
  inset: 0 -6px;
  z-index: -1;
  background: linear-gradient(90deg, var(--hp-magenta), var(--hp-orchid) 55%, var(--hp-violet));
  -webkit-mask: url("/assets/brand/brush-house.svg") center / 100% 100% no-repeat;
          mask: url("/assets/brand/brush-house.svg") center / 100% 100% no-repeat;
}
.hp-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hp-plate--link {
  gap: .7em;
  padding: .85em 2.6em .85em 1.5em;     /* extra room on the right: the brush tapers there */
  font-size: .86rem;
  white-space: nowrap;                  /* one line, all on the one stroke */
  transition: transform .4s var(--ease-brush);
}
.hp-plate--link::before { inset: -2px -10px -2px -6px; }
@media (max-width: 480px) {
  .hp-plate--link { gap: .5em; padding: .85em 2.2em .85em 1.2em; font-size: .7rem; letter-spacing: .07em; }
}
/* the handle sits inside the same plate, in the same white type */
.hp-plate__handle { font-weight: 700; }
.hp-plate__arrow { flex: none; margin-left: -.2em; }
.hp-plate--link:hover { transform: translateY(-2px); }
.hp-plate--link:hover .hp-plate__handle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.hp-plate--link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* ---- 3. Lineage: market → publisher (on paper) ------------------------------ */
.lineage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--text); }
.lineage__step { padding: 22px clamp(14px, 2vw, 30px) 26px 0; display: grid; gap: 10px; align-content: start; }
.lineage__step + .lineage__step { padding-left: clamp(14px, 2vw, 30px); border-left: 1px solid var(--rule); }
.lineage__when { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); }
.lineage__name { font-size: var(--fs-h3); line-height: 1.02; }
.lineage__step p { color: var(--text-soft); font-size: 1.1rem; }
.lineage__art { margin-top: 8px; max-width: 260px; }
.lineage__art img { width: 100%; height: auto; }
.lineage__name--hp { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); letter-spacing: .26em; }
@media (max-width: 860px) {
  .lineage { grid-template-columns: 1fr; }
  .lineage__step + .lineage__step { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}