/* ============================================
   HOME CONCEPT — experimental homepage styles
   Scoped entirely under hc- prefixes so nothing here can leak into
   or collide with the live site's style.css. Loaded in addition to
   style.css (for reset, fonts, nav, footer, cursor, back-to-top).
   ============================================ */

/* ---------- TOP NAV ----------
   Brand + full link row grouped together at top-left (.hc-nav__left),
   Let's Talk + plain hamburger stay top-right. #menu-toggle keeps its
   id so script.js's existing open/close and nav-theme logic still
   works untouched. */
.hc-nav {
  align-items: center;
}
/* style.css now sets pointer-events:none on the shared .nav (so its
   empty middle stretch doesn't swallow clicks meant for the homepage's
   docked wordmark underneath it) and re-enables it only on .nav__links
   / .nav__menu. This page's brand/link/talk elements live outside
   those two classes, so they need the same re-enable here or they'd
   stop being clickable. */
.hc-nav__left, .hc-nav__talk { pointer-events: auto; }
.hc-nav__left {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
.hc-nav__brand {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}
.hc-nav__center {
  display: flex;
  gap: var(--space-m);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.hc-nav__center a {
  color: var(--dark);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.hc-nav__center a:hover { opacity: 1; }
.hc-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
.hc-nav__talk {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.hc-nav__talk:hover { opacity: 1; }
/* Hamburger stays the shared site's plain two-bar button — no circular
   background here (that override has been removed). */
@media (max-width: 900px) {
  .hc-nav__center { display: none; }
}
/* No divider under the nav on this concept — .nav--light (shared,
   used by other pages) adds a border-bottom; cancelled here only. */
.hc-nav.nav--light { border-bottom: none; }

/* ---------- HERO ----------
   Name sits high, right under the nav (was --space-xxl/12rem of top
   padding, pushing it too far down the page — now just enough to clear
   the fixed nav). */
.hc-hero {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  /* Tightened again (was 6rem/space-l) so more of the work grid clears
     the fold on a typical laptop viewport. */
  padding: 4rem var(--edge) var(--space-m);
}

.hc-hero__title-row {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Water-ripple hover name — the real, accessible link text is visually
   hidden (.hc-ripple__sr, standard sr-only clip) and a same-size canvas
   sits on top of it. ripple-webgl.js renders "Jalita Aspelin" (Switzer,
   matching the rest of the site) to an offscreen texture sized to fill
   this row edge-to-edge, then distorts it in real time with a WebGL
   water-ripple that follows the cursor exactly — expanding, rotating,
   fading rings, the way water actually moves, not a letter roll/swap. */
.hc-ripple {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}
.hc-ripple__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hc-ripple__canvas {
  display: block;
  width: 100%;
  height: auto;
}
/* Fallback — WebGL unavailable or prefers-reduced-motion: ripple-webgl.js
   hides the canvas and adds this class, which un-hides the real text
   with the same sizing/weight the canvas texture would have used. */
.hc-ripple--fallback .hc-ripple__sr {
  position: static;
  width: auto; height: auto;
  padding: 0; margin: 0;
  overflow: visible;
  clip: auto;
  display: block;
  font-family: var(--font-body);
  font-size: 13vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dark);
  text-align: center;
}

/* Split intro line beneath the name — short bio left, philosophy
   line right, matching the reference's two-column layout. */
.hc-hero__intro {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-l);
  margin-top: var(--space-m);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--grey);
  line-height: 1.5;
}
.hc-hero__intro strong { color: var(--dark); font-weight: 600; }
.hc-hero__intro-left { max-width: 28ch; }
.hc-hero__intro-right { max-width: 28ch; text-align: right; }
@media (max-width: 760px) {
  .hc-hero__intro { flex-direction: column; gap: var(--space-s); }
  .hc-hero__intro-left, .hc-hero__intro-right { max-width: 100%; text-align: left; }
}

/* ---------- WORK: 2-UP ROUNDED-CARD GRID ----------
   Direct structural match to the reference: a plain light-bg grid of
   project cards (no sticky/scroll-stack — that was the wrong call
   last round), each a clean rounded rectangle, title + arrow
   overlaid top, tag pills bottom-left. (Was a zigzag wavy-top clip-path —
   the reference uses soft rounded corners, not a wave, so that's gone.) */
.hc-work {
  position: relative;
  /* z-index:2 matches the shared site's own .intro/.work/etc pattern —
     needed on pages with the sticky/fixed hero (index.html) so this
     section's opaque background actually paints over the hero's video
     background and travelling wordmark as they scroll past, instead of
     those bleeding through. No-op on home-concept.html, which has no
     competing fixed/sticky layers to stack against. */
  z-index: 2;
  background: var(--bg);
  padding: 0 var(--edge) var(--space-xl);
}
.hc-work__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}
.hc-project {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.1;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
}
/* .hc-project__media reuses the site's shared .reveal-media scroll-reveal +
   parallax system (see script.js "SCROLL REVEAL MEDIA" block and style.css
   "CASE STUDY — SCROLL REVEAL MEDIA") instead of a one-off effect here — it
   already fades/scales each image in on scroll-in and drifts it slightly
   while in view, with no extra JS needed. Position/inset are overridden
   back to absolute (reveal-media's default is `relative`), and its own
   wave clip-path (built for a different, square-cornered use elsewhere)
   is cancelled below — .hc-project's border-radius + overflow:hidden is
   the only shape control here. */
.hc-project__media {
  position: absolute;
  inset: 0;
  background: #1a1a17;
  /* Rounding it again here (matches .hc-project) as well as on
     .reveal-media__inner below fixes a rendering seam — a thin hairline
     at the rounded corners where the parent's overflow:hidden clip and
     a transformed child (the parallax-driven .reveal-media__inner)
     don't quite agree at the sub-pixel level unless both layers carry
     the same border-radius. */
  border-radius: inherit;
  overflow: hidden;
}
.hc-project__media.reveal-media,
.hc-project__media.reveal-media.is-visible {
  clip-path: none;
}
.hc-project__media .reveal-media__inner {
  border-radius: inherit;
}
.hc-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hc-project:hover .hc-project__media .reveal-media__inner img { transform: scale(1.045); }
/* .hc-project--light: the card's underlying photo/screenshot reads as
   white/light rather than a dark full-bleed shot, so the white-on-photo
   title/pills/arrow below flip to dark instead. Separate from sizing
   (.hc-project--contain below) — Matsmart wants the light colour
   scheme but its image full-size, not shrunk. */
.hc-project--light .hc-project__media { background: #fff; }
/* .hc-project--contain: for shots with real UI detail worth seeing in
   full rather than cropped tight (Mailbird, Servaali) — inset +
   contained so the whole screenshot sits smaller within the card with
   visible margin, instead of filling it edge to edge. inset (not
   padding) because .reveal-media__inner is absolutely positioned —
   padding on its parent wouldn't shrink an absolutely-positioned
   child's box. */
.hc-project--contain .hc-project__media .reveal-media__inner { inset: 9%; }
.hc-project--contain .hc-project__media img { object-fit: contain; }
.hc-project__title {
  position: absolute;
  top: 6%;
  left: 6%;
  z-index: 1;
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hc-project__tags {
  position: absolute;
  bottom: 6%;
  left: 6%;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
}
/* Light-photo cards (.hc-project--light — Mailbird, Servaali):
   the title/pills above were designed for white-on-photo and
   disappear against a light card, so flip them to dark here. */
.hc-project--light .hc-project__title { color: var(--dark); }
.hc-project--light .hc-project__tags em { color: var(--dark); background: rgba(15,15,15,0.08); }
.hc-project__tags em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  padding: 0.4em 0.9em;
  border-radius: 999px;
}

/* ---------- WORK: hover reveal panel ----------
   componentry.dev/docs/components/hover-transition's effect,
   reimplemented in plain CSS (no npm/build step on this site): a solid
   colour panel sits over the whole card, clipped to a 0%-radius circle
   at its centre at rest, and expands outward from the middle on hover
   (was a left-to-right wipe — this reads as "appearing" rather than
   sliding in from a side). 150% comfortably covers every corner of the
   box regardless of aspect ratio. Client name top-right, one-line
   description in Switzer Medium below it, a stat pinned to the bottom.
   Colour alternates per card position, 2 per row, so no two cards
   touching share a colour — pink or near-black, both take light text. */
.hc-project__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 8%;
  color: var(--bg);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hc-project:hover .hc-project__hover {
  clip-path: circle(150% at 50% 50%);
}
/* Alternating pair pattern (P,L / L,P / P,L / ...), extended out to all
   13 cards for work.html's full grid — a no-op past :nth-child(6) on
   the 6-card pages (home-concept.html, index.html's homepage teaser). */
.hc-project:nth-child(1) .hc-project__hover,
.hc-project:nth-child(4) .hc-project__hover,
.hc-project:nth-child(5) .hc-project__hover,
.hc-project:nth-child(8) .hc-project__hover,
.hc-project:nth-child(9) .hc-project__hover,
.hc-project:nth-child(12) .hc-project__hover,
.hc-project:nth-child(13) .hc-project__hover {
  background: var(--accent);
}
.hc-project:nth-child(2) .hc-project__hover,
.hc-project:nth-child(3) .hc-project__hover,
.hc-project:nth-child(6) .hc-project__hover,
.hc-project:nth-child(7) .hc-project__hover,
.hc-project:nth-child(10) .hc-project__hover,
.hc-project:nth-child(11) .hc-project__hover {
  background: var(--bg);
  color: var(--dark);
}
.hc-project__hover-client {
  align-self: flex-end;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hc-project__hover-desc {
  margin-top: 1.1em;
  max-width: 28ch;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); /* up two sizes, per Jalita's request */
  line-height: 1.35;
}
/* Two stats per card (was one) — smaller than before so both fit
   comfortably under the description without crowding the panel. */
.hc-project__hover-stats {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.hc-project__hover-stat-number {
  display: block;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hc-project__hover-stat-label {
  display: block;
  margin-top: 0.2em;
  max-width: 30ch;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  opacity: 0.7;
}

/* The shared custom cursor (#cursor, see style.css) defaults to the
   same pink as var(--accent) — invisible against these cards' pink
   hover panels. Swap it to dark whenever the pointer sits over one of
   the pink cards specifically (the dark cards don't need this, their
   panel already contrasts fine against pink). .cursor is a sibling,
   not a descendant, of .hc-project, so :has() on body is what lets a
   hover on the card reach sideways to style it. */
body:has(.hc-project:nth-child(1):hover) .cursor,
body:has(.hc-project:nth-child(4):hover) .cursor,
body:has(.hc-project:nth-child(5):hover) .cursor,
body:has(.hc-project:nth-child(8):hover) .cursor,
body:has(.hc-project:nth-child(9):hover) .cursor,
body:has(.hc-project:nth-child(12):hover) .cursor,
body:has(.hc-project:nth-child(13):hover) .cursor {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--dark);
}
body:has(.hc-project:nth-child(1):hover) .cursor.is-active,
body:has(.hc-project:nth-child(4):hover) .cursor.is-active,
body:has(.hc-project:nth-child(5):hover) .cursor.is-active,
body:has(.hc-project:nth-child(8):hover) .cursor.is-active,
body:has(.hc-project:nth-child(9):hover) .cursor.is-active,
body:has(.hc-project:nth-child(12):hover) .cursor.is-active,
body:has(.hc-project:nth-child(13):hover) .cursor.is-active {
  background: rgba(15, 15, 15, 0.08);
}
body:has(.hc-project:nth-child(1):hover) .cursor svg,
body:has(.hc-project:nth-child(4):hover) .cursor svg,
body:has(.hc-project:nth-child(5):hover) .cursor svg,
body:has(.hc-project:nth-child(8):hover) .cursor svg,
body:has(.hc-project:nth-child(9):hover) .cursor svg,
body:has(.hc-project:nth-child(12):hover) .cursor svg,
body:has(.hc-project:nth-child(13):hover) .cursor svg {
  stroke: var(--dark);
}

@media (max-width: 760px) {
  .hc-work__grid { grid-template-columns: 1fr; }
  /* A bit taller than before (was 4/3.6) — extra headroom for the
     hover panel's description + two stats, which don't all fit at the
     shorter ratio on a narrow card for the longer-copy projects. */
  .hc-project { aspect-ratio: 4 / 4.3; }
  /* Stat labels were clipped to 30ch, wrapping narrower than the card
     actually is on a full-width mobile column — let them use the whole
     card width instead. */
  .hc-project__hover-stat-label { max-width: none; }
  /* The hover panel's content (client label, description, two stats)
     was overflowing the bottom of the card on mobile — sized for a
     wider desktop panel. Smaller type + tighter spacing throughout so
     it comfortably fits every project's copy, not just the shortest. */
  .hc-project__hover { padding: 7%; }
  .hc-project__hover-desc {
    margin-top: 0.8em;
    font-size: 0.92rem;
    line-height: 1.3;
  }
  .hc-project__hover-stats { gap: 0.45em; }
  .hc-project__hover-stat-number { font-size: 1.15rem; }
  .hc-project__hover-stat-label { font-size: 0.68rem; margin-top: 0.15em; }
}

/* ---------- WORK: "More Projects" button ----------
   Same pill shape/weight as .hc-about__cta further down the page, but
   inverted (black default, pink on hover) and centered under the grid
   with extra breathing room above it. */
.hc-work__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  text-align: center;
}
.hc-work__more-copy {
  max-width: 42ch;
  color: var(--grey);
  font-size: 0.95rem;
  line-height: 1.5;
}
.hc-work__more-btn {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--dark);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hc-work__more-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ---------- ABOUT-INTRO (dark card, Services/Industries) ---------- */
.hc-about {
  position: relative;
  /* Same reasoning as .hc-work above — needed so this section's opaque
     background actually covers index.html's sticky hero layer instead
     of it bleeding through. */
  z-index: 2;
  background: var(--dark);
  color: var(--bg);
  padding: var(--space-xl) var(--edge);
  overflow: hidden;
}
.hc-about__portrait {
  position: absolute;
  right: var(--edge);
  bottom: 0;
  height: 92%;
  pointer-events: none;
}
.hc-about__portrait picture,
.hc-about__portrait img { display: block; height: 100%; width: auto; }
.hc-about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr;
  gap: var(--space-l);
  max-width: 1400px;
  /* Reserves room for .hc-about__portrait (absolutely positioned,
     right-aligned) so the Services/Industries columns sit clear of it
     instead of running underneath. Dropped at the breakpoint below
     where the portrait itself is hidden. */
  padding-right: 460px;
}
.hc-about__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: var(--space-m);
}
.hc-about__text {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 32ch;
}
.hc-about__cta {
  display: inline-block;
  margin-top: var(--space-l);
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.hc-about__cta:hover { background: var(--bg); color: var(--accent); }
.hc-about__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.05rem;
}

@media (max-width: 1000px) {
  .hc-about__portrait { display: none; }
  .hc-about__grid { grid-template-columns: 1fr 1fr; padding-right: 0; }
  .hc-about__col--main { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hc-about__grid { grid-template-columns: 1fr 1fr; gap: var(--space-m); }
}

/* ---------- FOOTER — page-specific tweak ----------
   The "Swedish & Thai Citizen" line is dropped from this page's fine
   print, leaving just the copyright. The shared .footer__fine is
   space-between (built for two items); with one left, override to
   flex-end here only so the copyright keeps its original right-hand
   position instead of collapsing to the left edge. */
.footer__fine { justify-content: flex-end; }