/*
 * Trawa Romero · Catalogue Spotlight motion + image blend release
 * Progressive enhancement only: the baseline remains fully visible without JS.
 */

:root {
  --tr-spotlight-ease: cubic-bezier(.18, .78, .22, 1);
  --tr-spotlight-soft-rule: rgba(239, 140, 175, .24);
}

/* Keep the interactive cards visually bounded without putting the photographs
   back inside hard rectangular frames. */
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  border: 1px solid transparent !important;
  border-radius: clamp(14px, 1.25vw, 20px);
  background:
    linear-gradient(148deg, rgba(20, 16, 22, .94), rgba(7, 9, 13, .86) 58%, rgba(13, 10, 16, .94)) padding-box,
    linear-gradient(135deg, rgba(239, 140, 175, .44), rgba(255, 255, 255, .08) 38%, rgba(239, 140, 175, .12)) border-box !important;
  box-shadow:
    0 20px 52px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick::before {
  position: absolute;
  z-index: -1;
  inset: -25% -18% 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(235, 76, 141, .15), rgba(133, 62, 119, .055) 44%, transparent 72%);
  content: "";
  pointer-events: none;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick:hover,
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick:focus-within,
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick.is-active {
  border-color: transparent !important;
  background:
    linear-gradient(148deg, rgba(27, 18, 25, .97), rgba(8, 10, 14, .9) 58%, rgba(18, 12, 19, .97)) padding-box,
    linear-gradient(135deg, rgba(247, 147, 184, .76), rgba(255, 255, 255, .14) 42%, rgba(239, 140, 175, .24)) border-box !important;
  box-shadow:
    0 25px 62px rgba(0, 0, 0, .34),
    0 0 34px rgba(221, 74, 132, .08),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  transform: translateY(-4px) !important;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-trigger:focus-visible {
  border-radius: inherit;
  outline: 2px solid var(--pink);
  outline-offset: -3px;
}

/* Photographs dissolve into the dark canvas. The mask leaves the center crisp
   and fades only the outer edge; the full flower remains visible via contain. */
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-img {
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  background:
    radial-gradient(ellipse 62% 58% at 50% 43%, rgba(235, 86, 145, .14), rgba(166, 63, 120, .04) 58%, transparent 76%),
    linear-gradient(180deg, rgba(8, 10, 14, .9), rgba(8, 10, 14, .44) 68%, rgba(8, 10, 14, .94)) !important;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-img::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse 92% 90% at 50% 43%, transparent 52%, rgba(7, 9, 13, .13) 72%, rgba(7, 9, 13, .82) 100%),
    linear-gradient(180deg, transparent 64%, rgba(7, 9, 13, .84) 100%);
  content: "";
  pointer-events: none;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-img img {
  z-index: 1;
  padding: clamp(9px, .8vw, 14px) !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: saturate(1.09) brightness(1.025) contrast(1.035) !important;
  transform: scale(1.008) !important;
  -webkit-mask-image: radial-gradient(ellipse 49% 51% at 50% 48%, #000 56%, rgba(0, 0, 0, .92) 68%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .16) 90%, transparent 100%);
  mask-image: radial-gradient(ellipse 49% 51% at 50% 48%, #000 56%, rgba(0, 0, 0, .92) 68%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .16) 90%, transparent 100%);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: transform .7s var(--tr-spotlight-ease), filter .35s ease !important;
}

/* Black Jelly is already a transparent cutout. Preserve every contour instead
   of applying the JPEG edge fade a second time. */
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-img img[src*="black-jelly-bud.png"] {
  padding: clamp(13px, 1vw, 18px) !important;
  -webkit-mask-image: none;
  mask-image: none;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick:hover .tr-pick-img img,
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick:focus-within .tr-pick-img img,
body.tr-home-v3 #specimen .tr-spec-intro .tr-pick.is-active .tr-pick-img img {
  filter: saturate(1.13) brightness(1.045) contrast(1.035) !important;
  transform: scale(1.026) translateY(-.35%) !important;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-bar {
  position: relative;
  z-index: 3;
  border-top: 0 !important;
  background: linear-gradient(180deg, rgba(7, 9, 13, .36), rgba(12, 11, 16, .96) 34%, rgba(9, 10, 14, .99)) !important;
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-bar::before {
  position: absolute;
  inset: 0 11px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 140, 175, .32), transparent);
  content: "";
}

body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-profile {
  border: 1px solid rgba(239, 140, 175, .34);
  border-left: 3px solid var(--pink);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 18%, rgba(223, 126, 158, .11), transparent 38%),
    linear-gradient(110deg, rgba(20, 15, 21, .96), rgba(8, 10, 14, .92) 62%, rgba(13, 10, 16, .94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26);
}

/* The featured Product of the Week photograph uses the same edge treatment,
   including the EN layout where the image is nested in .tr-spec-media. */
body.tr-home-v3 #specimen .tr-spec-img {
  isolation: isolate;
  border: 0 !important;
  background:
    radial-gradient(ellipse 68% 62% at 50% 44%, rgba(222, 76, 137, .13), rgba(116, 54, 104, .035) 54%, transparent 76%),
    #080a0e !important;
}

body.tr-home-v3 #specimen .tr-spec-media {
  border-right: 0 !important;
  border-bottom: 0 !important;
}

body.tr-home-v3 #specimen .tr-spec-frame {
  display: none !important;
}

body.tr-home-v3 #specimen .tr-spec > .tr-spec-img {
  border-right: 0 !important;
  border-bottom: 0 !important;
}

body.tr-home-v3 #specimen .tr-spec-img::before {
  z-index: 2;
  inset: 0 !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse 94% 92% at 50% 44%, transparent 56%, rgba(7, 9, 13, .16) 74%, rgba(7, 9, 13, .86) 100%),
    linear-gradient(180deg, transparent 70%, rgba(7, 9, 13, .68) 100%) !important;
  content: "";
  pointer-events: none;
}

body.tr-home-v3 #specimen .tr-spec-img img {
  filter: saturate(1.07) brightness(1.02) contrast(1.025) !important;
  transform: scale(1.008) !important;
  -webkit-mask-image: radial-gradient(ellipse 49% 51% at 50% 48%, #000 58%, rgba(0, 0, 0, .93) 69%, rgba(0, 0, 0, .58) 81%, rgba(0, 0, 0, .18) 91%, transparent 100%);
  mask-image: radial-gradient(ellipse 49% 51% at 50% 48%, #000 58%, rgba(0, 0, 0, .93) 69%, rgba(0, 0, 0, .58) 81%, rgba(0, 0, 0, .18) 91%, transparent 100%);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: transform .8s var(--tr-spotlight-ease), filter .4s ease !important;
}

body.tr-home-v3 #specimen .tr-spec:hover .tr-spec-img img {
  filter: saturate(1.12) brightness(1.035) contrast(1.025) !important;
  transform: scale(1.025) !important;
}

/* JS adds the ready class, so content is fail-open when scripting or
   IntersectionObserver is unavailable. */
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready > .tr-picks-lab,
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready .tr-pick {
  will-change: opacity, transform, filter;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready > .tr-picks-lab {
  transition: opacity .5s ease, transform .62s var(--tr-spotlight-ease), filter .5s ease !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready .tr-pick {
  transition:
    opacity .6s ease,
    transform .74s var(--tr-spotlight-ease),
    filter .58s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready:not(.tr-spotlight-motion-visible) > .tr-picks-lab {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  filter: blur(5px) !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready:not(.tr-spotlight-motion-visible) .tr-pick {
  opacity: 0 !important;
  transform: translate3d(0, 24px, 0) scale(.975) !important;
  filter: none !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible > .tr-picks-lab,
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible .tr-pick {
  opacity: 1 !important;
  filter: none !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible > .tr-picks-lab {
  transform: none !important;
  transition-delay: .02s !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible .tr-pick {
  transform: none !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible .tr-pick:nth-child(1) {
  transition-delay: .08s !important;
}
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible .tr-pick:nth-child(2) {
  transition-delay: .18s !important;
}
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible .tr-pick:nth-child(3) {
  transition-delay: .28s !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible.tr-spotlight-motion-settled .tr-pick {
  transition-delay: 0s !important;
}

body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible.tr-spotlight-motion-settled .tr-pick:hover,
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible.tr-spotlight-motion-settled .tr-pick:focus-within,
body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready.tr-spotlight-motion-visible.tr-spotlight-motion-settled .tr-pick.is-active {
  transform: translateY(-4px) !important;
}

body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready .tr-spec-img,
body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready .tr-spec-body {
  will-change: opacity, transform, filter;
  transition: opacity .64s ease, transform .76s var(--tr-spotlight-ease), filter .6s ease !important;
}

body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready:not(.tr-spec-motion-visible) .tr-spec-img {
  opacity: 0 !important;
  transform: translate3d(-20px, 8px, 0) scale(.982) !important;
  filter: none !important;
}

body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready:not(.tr-spec-motion-visible) .tr-spec-body {
  opacity: 0 !important;
  transform: translate3d(20px, 8px, 0) !important;
  filter: none !important;
}

body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready.tr-spec-motion-visible .tr-spec-img,
body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready.tr-spec-motion-visible .tr-spec-body {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready.tr-spec-motion-visible .tr-spec-img {
  transition-delay: .08s !important;
}
body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready.tr-spec-motion-visible .tr-spec-body {
  transition-delay: .18s !important;
}
body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready.tr-spec-motion-visible.tr-spec-motion-settled :is(.tr-spec-img, .tr-spec-body) {
  transition-delay: 0s !important;
}

@media (max-width: 720px) {
  body.tr-home-v3 #specimen .tr-spec-intro .tr-pick {
    border-radius: 15px;
  }
  body.tr-home-v3 #specimen .tr-spec-intro .tr-pick-img img {
    padding: 9px !important;
  }
  body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready:not(.tr-spotlight-motion-visible) .tr-pick {
    transform: translate3d(18px, 0, 0) scale(.985) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready > .tr-picks-lab,
  body.tr-home-v3 #specimen .tr-picks.tr-spotlight-motion-ready .tr-pick,
  body.tr-home-v3 #specimen .tr-spec.tr-spec-motion-ready :is(.tr-spec-img, .tr-spec-body),
  body.tr-home-v3 #specimen .tr-pick-img img,
  body.tr-home-v3 #specimen .tr-spec-img img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  body.tr-home-v3 #specimen .tr-pick:hover,
  body.tr-home-v3 #specimen .tr-pick:focus-within,
  body.tr-home-v3 #specimen .tr-pick.is-active {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  body.tr-home-v3 #specimen .tr-pick,
  body.tr-home-v3 #specimen .tr-pick-profile {
    border: 1px solid ButtonText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }
  body.tr-home-v3 #specimen :is(.tr-pick-img img, .tr-spec-img img) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}