/* ==========================================================================
   Home page -- only what's specific to Home. Shared hero styles now live
   in base.css since About/Resume reuse the exact same header.
   ========================================================================== */

/* Ambient background wash behind the hero -- Home only. Standing in for
   the real site's WebGL shader (a proprietary Framer Shader component --
   not reproducible in CSS), approximated with three independently-drifting
   blurred color blobs using the confirmed real light-tint tokens. */
.page-home .hero-bg {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 620px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.hero-bg span:nth-child(1) {
  width: 420px;
  height: 420px;
  top: -60px;
  left: 8%;
  background: rgba(201, 230, 255, 0.55);
  animation: blob-drift-a 26s ease-in-out infinite alternate;
}

.hero-bg span:nth-child(2) {
  width: 380px;
  height: 380px;
  top: 20px;
  left: 38%;
  background: rgba(211, 207, 255, 0.5);
  animation: blob-drift-b 32s ease-in-out infinite alternate;
}

.hero-bg span:nth-child(3) {
  width: 360px;
  height: 360px;
  top: -20px;
  right: 6%;
  background: rgba(235, 19, 188, 0.12);
  animation: blob-drift-c 22s ease-in-out infinite alternate;
}

@keyframes blob-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6%, 8%) scale(1.08); }
}
@keyframes blob-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-8%, 5%) scale(0.94); }
}
@keyframes blob-drift-c {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-5%, 10%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg span { animation: none; }
}

.section-divider-wrap {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-top: 27px;
}
.section-divider {
  height: 1px;
  width: 100%;
  background: var(--color-border);
}

/* ---- Case study grid ---- */
.case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 24px;
}

@media (max-width: 809px) {
  .case-list { grid-template-columns: 1fr; }
}

.case-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.case-card:hover .case-card-thumb img {
  transform: scale(1.03);
}

.case-card--neutral { --case-hover-accent: var(--color-text-primary); }
.case-card--blue    { --case-hover-accent: var(--accent-blue); }
.case-card--green   { --case-hover-accent: var(--accent-green); }
.case-card--pink     { --case-hover-accent: var(--accent-pink); }
.case-card--violet  { --case-hover-accent: var(--accent-violet); }
.case-card--purple  { --case-hover-accent: var(--accent-purple); }
.case-card--amber   { --case-hover-accent: var(--accent-amber); }

.case-card:hover h3 { color: var(--case-hover-accent, var(--color-text-primary)); }

.case-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.case-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out-soft);
}

@media (max-width: 809px) {
  .case-card-thumb { border-radius: 8px; }
}

.case-card-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.case-card h3 {
  flex: 1 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  transition: color var(--duration-fast);
}

.case-card-meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.case-card-meta span:nth-child(2) {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}