/* ProAI Expert — Homepage Selected Work R1.2 final micro-polish
   Keeps the R1.1 ledger architecture; adds project-specific material character,
   clearer hierarchy, softer record fields and bounded interaction. */

.selected-work-r11 {
  --sw-focus: rgba(242, 240, 235, .88);
  background:
    radial-gradient(76% 46% at 50% 0%, rgba(213, 218, 220, .025), transparent 68%),
    linear-gradient(180deg, #090a0c 0%, #07080a 54%, #060709 100%);
}

.selected-work-r11__register-line {
  border-bottom-color: rgba(232, 231, 226, .19);
  color: rgba(184, 187, 193, .68);
}

.selected-work-r11__intro {
  padding-top: clamp(34px, 4.4vw, 62px);
}

.selected-work-r11__intro h2 {
  max-width: 10.8ch;
  font-weight: 470;
  letter-spacing: -.058em;
}

.selected-work-r11__lede {
  max-width: 540px;
  color: rgba(211, 213, 214, .76);
}

.selected-work-r11__ledger {
  border-top-color: rgba(232, 231, 226, .20);
}

.selected-work-r11__record {
  --sw-metal-a: #edf1f1;
  --sw-metal-b: #aeb8bc;
  --sw-metal-c: #f5f2ec;
  --sw-field: rgba(185, 201, 207, .052);
  --sw-field-edge: rgba(202, 214, 218, .08);
  --sw-accent: rgba(214, 224, 226, .78);
  isolation: isolate;
}

.selected-work-r11__record--client {
  --sw-metal-a: #eee9e1;
  --sw-metal-b: #b7afa6;
  --sw-metal-c: #f3eee7;
  --sw-field: rgba(201, 187, 168, .042);
  --sw-field-edge: rgba(224, 210, 191, .065);
  --sw-accent: rgba(223, 211, 194, .68);
}

.selected-work-r11__record--concept {
  --sw-metal-a: #dbe1e6;
  --sw-metal-b: #7f8d99;
  --sw-metal-c: #c7d0d7;
  --sw-field: rgba(118, 139, 156, .045);
  --sw-field-edge: rgba(150, 170, 186, .07);
  --sw-accent: rgba(166, 184, 197, .62);
}

.selected-work-r11__record::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 118% at 11% 52%, var(--sw-field), transparent 64%),
    linear-gradient(90deg, transparent 0%, var(--sw-field-edge) 48%, transparent 76%);
  opacity: .72;
  transform: translate3d(-1.5%, 0, 0);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1);
}

.selected-work-r11__record::before {
  z-index: 2;
  background: var(--sw-accent);
}

.selected-work-r11__record-head,
.selected-work-r11__record-body {
  position: relative;
  z-index: 1;
}

.selected-work-r11__record-head {
  border-bottom-color: rgba(232, 231, 226, .075);
}

.selected-work-r11__kind {
  color: rgba(133, 138, 146, .74);
}

.selected-work-r11__status {
  color: rgba(228, 227, 223, .78);
}

.selected-work-r11__record-body {
  background: linear-gradient(90deg, rgba(255,255,255,.008), transparent 44%);
}

.selected-work-r11__record--concept .selected-work-r11__record-body {
  background-image:
    linear-gradient(90deg, transparent 0, transparent 71px, rgba(173, 190, 202, .045) 72px, transparent 73px),
    linear-gradient(90deg, rgba(112, 132, 148, .018), transparent 55%);
}

.selected-work-r11__identity h3 a {
  display: inline-block;
  background: linear-gradient(105deg,
    var(--sw-metal-a) 0%,
    var(--sw-metal-b) 31%,
    var(--sw-metal-c) 50%,
    var(--sw-metal-b) 70%,
    var(--sw-metal-a) 100%);
  background-size: 190% 100%;
  background-position: 12% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: .93;
  filter: brightness(.96) contrast(1.025);
  transition:
    background-position 820ms cubic-bezier(.2,.7,.2,1),
    filter 420ms ease,
    opacity 420ms ease,
    transform 420ms cubic-bezier(.2,.7,.2,1);
}

.selected-work-r11__record--lead .selected-work-r11__identity h3 a {
  opacity: .99;
  filter: brightness(1.015) contrast(1.03);
}

.selected-work-r11__descriptor {
  color: rgba(185, 188, 193, .78);
}

.selected-work-r11__evidence {
  border-left-color: rgba(232, 231, 226, .105);
}

.selected-work-r11__record--client .selected-work-r11__evidence {
  border-left-color: rgba(224, 211, 195, .14);
}

.selected-work-r11__record--concept .selected-work-r11__evidence {
  border-left-color: rgba(151, 170, 185, .18);
}

.selected-work-r11__facts div {
  border-top-color: rgba(232, 231, 226, .09);
}

.selected-work-r11__facts dd {
  color: rgba(210, 211, 212, .78);
}

.selected-work-r11__actions a {
  border-color: rgba(232, 231, 226, .14);
  background: rgba(255,255,255,.012);
}

.selected-work-r11__actions a:last-child {
  border-color: rgba(232, 231, 226, .235);
}

.selected-work-r11__close {
  grid-template-columns: 1fr auto auto;
  border-bottom-color: rgba(232, 231, 226, .19);
}

.selected-work-r11__close-link {
  display: inline-flex;
  min-height: 44px;
  width: max-content;
  align-items: center;
  gap: 10px;
  color: rgba(232, 231, 226, .78);
  text-decoration: none;
  letter-spacing: .08em;
  transition: color 180ms ease, gap 220ms cubic-bezier(.2,.7,.2,1);
}

.selected-work-r11__close-link:focus-visible {
  outline: 2px solid var(--sw-focus);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .selected-work-r11__record:hover::after,
  .selected-work-r11__record:focus-within::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .selected-work-r11__record:hover .selected-work-r11__identity h3 a,
  .selected-work-r11__record:focus-within .selected-work-r11__identity h3 a {
    background-position: 86% 50%;
    filter: brightness(1.08) contrast(1.035);
    opacity: 1;
    transform: translateY(-1px);
  }

  .selected-work-r11__close-link:hover,
  .selected-work-r11__close-link:focus-visible {
    gap: 14px;
    color: #fff;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .selected-work-r11__record::after {
      animation: swR12FieldResolve linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }

    @keyframes swR12FieldResolve {
      from { opacity: .28; transform: translate3d(-2.4%, 0, 0); }
      to { opacity: .76; transform: translate3d(-.4%, 0, 0); }
    }
  }
}

@media (max-width: 760px) {
  .selected-work-r11__record::after {
    background: radial-gradient(100% 80% at 0% 42%, var(--sw-field), transparent 70%);
    opacity: .58;
    transform: none;
  }

  .selected-work-r11__record-body,
  .selected-work-r11__record--concept .selected-work-r11__record-body {
    background-image: none;
  }

  .selected-work-r11__identity h3 a {
    background-size: 145% 100%;
    background-position: 18% 50%;
  }

  .selected-work-r11__close {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

@media (max-width: 640px) {
  .selected-work-r11__register-line span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selected-work-r11__record::after,
  .selected-work-r11__identity h3 a,
  .selected-work-r11__close-link {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}
