/* --- 1. Inner Content (The Mask) --- */ .preview-follower__inner { /* CRITICAL: Must be hidden for the mask to work */ overflow: hidden; /* Matches the shadow's radius */ border-radius: 1.5rem; /* The Fix: Forces webkit browsers to respect the border-radius during animation */ -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); /* Solid background prevents shadow from showing through transparent images */ background-color: #fff; /* Animation Timing */ transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1); } /* --- 2. Initial Hidden State --- */ /* This specific selector ensures elements stay visible in Webflow Designer, but hide on the Live Site */ html:not(.wf-design-mode) .preview-follower__inner, html:not(.wf-design-mode) .preview-follower::before, html:not(.wf-design-mode) .preview-follower__label { opacity: 0; transform: scale(0); } /* --- 3. Label Specifics --- */ html:not(.wf-design-mode) .preview-follower__label { /* Override scale for label, it uses translate instead */ transform: translate(0px, 100%); } /* --- 4. Shadow Layer (The Pseudo-Element) --- */ .preview-follower::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 1.5rem; background-color: #fff; /* Your Shadow */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* CRITICAL: Match Inner Transition Exactly */ transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1); } /* --- 5. Image Utility --- */ .preview-follower [data-follower-visual] { display: block; width: 100%; height: 100%; z-index: 0; } /* --- 6. Hover Triggers --- */ @media (hover: hover) and (min-width: 992px) { /* Animate Shadow and Content together */ body:has([data-follower-collection]:hover) .preview-follower__inner, body:has([data-follower-collection]:hover) .preview-follower::before { opacity: 1; transform: scale(1); } /* Animate Label */ body:has([data-follower-collection]:hover) .preview-follower__label { opacity: 1; transform: translate(0px, 0%); } /* Dim other items */ body:has(.preview-item:hover) .preview-item:not(:hover) { opacity: 0.5; } /* Border logic */ .preview-item:last-of-type { border-bottom: 1px solid #f1f4f9; } }