/* CARE360 0.3.24: accessible graphic accents and a distinct R1 research image.
   Layered on approved v0.3.23 design; no external assets or trackers. */

/* Distinct decorative circles in the results introduction. */
.site .care360-results-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site .care360-results-hero::after {
  content: "";
  position: absolute;
  right: clamp(16px, 5%, 85px);
  top: 10px;
  width: clamp(110px, 18vw, 225px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 0 32%, rgba(65,156,77,.16) 32.5% 34%, transparent 34.5% 55%, rgba(87,168,74,.16) 55.5% 57%, transparent 57.5%),
    radial-gradient(circle at 70% 28%, rgba(121,185,93,.23) 0 9px, transparent 10px),
    radial-gradient(circle at 20% 78%, rgba(255,173,27,.34) 0 6px, transparent 7px);
  animation: care360GraphicFloat 9s ease-in-out infinite alternate;
  z-index: 0;
}
.site .care360-results-hero > .wrap { position: relative; z-index: 1; }
@keyframes care360GraphicFloat {
  from { transform: translate3d(0, 0, 0) rotate(-9deg); }
  to { transform: translate3d(0, 12px, 0) rotate(7deg); }
}

/* Dynamic results timeline: the left edge animates as a result is reached. */
.site main .result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site main .result::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(#76be6f, #f1b137);
  transform: scaleY(.08);
  transform-origin: center center;
  opacity: 0;
  transition: transform .65s cubic-bezier(.22,1,.36,1),opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.site main .result.care360-result-active::before,
.site main .result:hover::before,
.site main .result:focus-within::before {
  opacity: 1;
  transform: scaleY(1);
}
.site main .result .num {
  transition: transform .45s cubic-bezier(.22,1,.36,1), background-color .4s ease,box-shadow .4s ease;
}
.site main .result.care360-result-active .num,
.site main .result:hover .num,
.site main .result:focus-within .num {
  background: #d8f2cc;
  transform: rotate(-3deg) scale(1.045);
  box-shadow: 0 6px 20px rgba(24,117,63,.14);
}
.site main .result .care360-result-demo-photo {
  display: block;
  background: #eaf4e8;
}
.site main .result.care360-result-research .care360-result-demo-photo {
  object-fit: contain;
  object-position: center;
  background: #eaf4e8;
}

/* Decorative dot motif around the five learning areas; behind content only. */
body.home .site main #skills {
  position: relative;
  isolation: isolate;
}
body.home .site main #skills::before {
  content: "";
  position: absolute;
  top: 22px;
  right: max(18px, calc((100vw - 1300px)/2));
  width: 140px; height: 120px;
  background-image: radial-gradient(circle, rgba(45,132,66,.27) 1.8px, transparent 2.4px);
  background-size: 17px 17px;
  opacity: .8;
  pointer-events: none;
  z-index: 0;
}
body.home .site main #skills > .wrap { position: relative; z-index: 1; }
body.home .site main .skill .glyph {
  transition: transform .42s cubic-bezier(.22,1,.36,1), background .4s ease,box-shadow .4s ease;
}
@media (hover:hover) and (pointer:fine) {
  body.home .site main .skill:hover .glyph {
    transform: translate3d(0,-4px,0) rotate(-5deg) scale(1.05);
    box-shadow: 0 9px 22px rgba(20,100,48,.13);
  }
  .site main .result .care360-result-demo-photo:hover {
    filter: saturate(1.08) contrast(1.02);
  }
}

/* Green-gold corner line on project update cards; no logo alterations. */
.site main .news-card,
.site main .care360-feed-item {
  position: relative;
}
.site main .news-card::after,
.site main .care360-feed-item::after {
  content: "";
  position: absolute;
  right: 17px; bottom: 16px;
  width: 32px; height: 32px;
  border-right: 2px solid rgba(105,171,78,.35);
  border-bottom: 2px solid rgba(105,171,78,.35);
  border-radius: 0 0 10px 0;
  pointer-events: none;
}

/* Visible focus on keyboard, no hover-only dependency. */
.site main .result:focus-within {
  border-color: #65a84c;
  box-shadow: 0 14px 36px rgba(24,108,52,.12);
}
@media(max-width:650px) {
  .site .care360-results-hero::after { top: 12px; right: -48px; opacity: .38; }
  body.home .site main #skills::before { width: 90px; height: 80px; opacity: .32; }
  .site main .result::before { width: 3px; }
}
@media(prefers-reduced-motion:reduce) {
  .site .care360-results-hero::after { animation: none !important; }
  .site main .result::before,
  .site main .result .num,
  body.home .site main .skill .glyph { transition: none !important; }
  .site main .result .num,
  .site main .result.care360-result-active .num,
  .site main .result:hover .num { transform: none !important; }
}