[data-ufco-hover-preview]{isolation:isolate}

.ufco-home-art-tile-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  color:inherit!important;
  text-decoration:none!important;
}

.ufco-touch-preview-trigger{
  display:none;
}

.ufco-hover-preview-cue{
  position:absolute;
  z-index:40;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  padding:16px;
  background:linear-gradient(180deg,rgba(6,9,15,.50),rgba(6,9,15,.82));
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.is-hover-preview-pending>.ufco-hover-preview-cue{opacity:1}

.ufco-hover-preview-cue-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(8,12,20,.58);
  font-size:19px;
  animation:ufco-hover-preview-pulse 1s ease-in-out infinite alternate;
}

.ufco-hover-preview-cue-copy{font-size:11px;font-weight:800;letter-spacing:.035em}

.ufco-hover-preview-cue-track{
  display:block;
  width:min(150px,72%);
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.20);
}

.ufco-hover-preview-cue-track>span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8b5cf6,#c4b5fd);
  transform:scaleX(0);
  transform-origin:left center;
}

.is-hover-preview-pending>.ufco-hover-preview-cue .ufco-hover-preview-cue-track>span{
  animation:ufco-hover-preview-card-progress 3s linear forwards;
}

.is-hover-preview-pending>img,
.is-hover-preview-pending>picture img{filter:brightness(.62) saturate(.78)!important}

.ufco-artwork-viewer[data-ufco-hover-artwork-viewer].is-auto-closing{
  opacity:0;
  transition-duration:.32s;
}

.ufco-hover-preview-controls{
  position:fixed;
  z-index:120010;
  left:50%;
  bottom:72px;
  display:flex;
  align-items:center;
  gap:12px;
  width:min(390px,calc(100vw - 32px));
  padding:8px 9px 8px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(8,11,17,.88);
  color:#dbe2ec;
  box-shadow:0 14px 42px rgba(0,0,0,.34);
  transform:translateX(-50%);
  backdrop-filter:blur(14px);
}

.ufco-hover-preview-countdown{display:grid;flex:1 1 auto;gap:5px;min-width:0;font-size:10px}
.ufco-hover-preview-timer{display:block;height:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.15)}

.ufco-hover-preview-timer>span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#a78bfa,#60a5fa);
  transform:scaleX(1);
  transform-origin:left center;
}

.ufco-artwork-viewer.is-counting .ufco-hover-preview-timer>span{
  animation:ufco-hover-preview-countdown 5s linear forwards;
}

.ufco-artwork-viewer.is-held .ufco-hover-preview-timer>span{
  transform:scaleX(1);
  background:#68d56f;
}

.ufco-hover-preview-hold{
  appearance:none;
  flex:0 0 auto;
  min-height:38px;
  padding:8px 13px;
  border:1px solid rgba(167,139,250,.42);
  border-radius:999px;
  background:rgba(139,92,246,.17);
  color:#f4f1ff;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}

.ufco-hover-preview-hold:hover,
.ufco-hover-preview-hold:focus-visible{border-color:#b9a6ff;background:rgba(139,92,246,.28)}

.ufco-hover-preview-hold[aria-pressed=true]{
  border-color:rgba(104,213,111,.48);
  background:rgba(104,213,111,.15);
  color:#b9f4c0;
}

@keyframes ufco-hover-preview-card-progress{to{transform:scaleX(1)}}
@keyframes ufco-hover-preview-countdown{to{transform:scaleX(0)}}
@keyframes ufco-hover-preview-pulse{to{transform:scale(1.08);border-color:rgba(196,181,253,.85)}}

@media(max-width:600px){
  .ufco-hover-preview-controls{bottom:62px;align-items:stretch;flex-direction:column;gap:8px;border-radius:14px}
  .ufco-hover-preview-hold{width:100%}
}

@media(hover:none),(pointer:coarse),(any-pointer:coarse){
  .ufco-touch-preview-trigger{
    appearance:none;
    position:absolute;
    z-index:45;
    right:10px;
    bottom:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:38px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    background:rgba(8,11,17,.84);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.34);
    font:inherit;
    font-size:10px;
    font-weight:850;
    line-height:1;
    letter-spacing:.025em;
    cursor:pointer;
    touch-action:manipulation;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  .ufco-touch-preview-trigger>span{
    font-size:14px;
    line-height:1;
  }

  .ufco-touch-preview-trigger:active{
    background:#7048db;
    transform:scale(.96);
  }

  .ufco-gallery-media-link .ufco-view-artwork{
    display:none!important;
  }
}

@media(max-width:420px){
  .ufco-home-art-tile .ufco-touch-preview-trigger{
    right:6px;
    bottom:6px;
    min-height:34px;
    padding:6px 9px;
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ufco-hover-preview-cue-icon,
  .ufco-hover-preview-cue-track>span,
  .ufco-hover-preview-timer>span{animation:none!important}
  .ufco-hover-preview-cue{transition:none!important}
  .ufco-touch-preview-trigger{transition:none!important}
}