/* ========================================
   CARD EFFECTS
   Mini layer stack effects for Launch Pad thumbnails
   Includes foil, metallic, UV, holographic, and specialty effects
   ======================================== */

/* ========================================
   GOLD FOIL EFFECT (Mars, Titan)
   ======================================== */
.card-layer--foil-gold {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.card-layer--foil-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,
        #B8860B 15%,
        #DAA520 25%,
        #FFD700 35%,
        #FFF8DC 50%,
        #FFD700 65%,
        #DAA520 75%,
        #B8860B 85%,
        #8B6914 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
}

.sample-card:hover .card-layer--foil-gold::before {
    animation-play-state: running;
}

/* Mars-specific mask */
.card-layer--foil-gold[data-mask="mars"]::before {
    -webkit-mask-image: url('../assets/mars/foil.webp');
    mask-image: url('../assets/mars/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Titan-specific mask */
.card-layer--foil-gold[data-mask="titan"]::before {
    -webkit-mask-image: url('../assets/titan/foil.webp');
    mask-image: url('../assets/titan/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ========================================
   METALLIC INK EFFECT (Rains of Terror)
   ======================================== */
.card-layer--metallic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.card-layer--metallic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #6B6B6B 0%,
        #8A8A8A 20%,
        #A8A8A8 35%,
        #D0D0D0 50%,
        #A8A8A8 65%,
        #8A8A8A 80%,
        #6B6B6B 100%
    );
    background-size: 200% 200%;
    animation: metallic-shimmer 5s ease-in-out infinite;
    animation-play-state: paused;
    filter: url(#metallic-grain);
    opacity: 0.85;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/rains-of-terror/metallic-ink.webp');
    mask-image: url('../assets/rains-of-terror/metallic-ink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--metallic::before {
    animation-play-state: running;
}

/* ========================================
   UV REACTIVE EFFECT (Dark Matter)
   ======================================== */
.card-layer--uv-ink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.card-layer--uv-ink img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sample-card:hover .card-layer--uv-ink {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.9))
            drop-shadow(0 0 12px rgba(138, 43, 226, 0.7))
            drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
}

/* ========================================
   HOLOGRAPHIC EFFECT (Jupiter)
   ======================================== */
.card-layer--holographic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(255,107,157,0.6) 0%, transparent 50%),
        radial-gradient(ellipse 70% 90% at 85% 75%, rgba(84,160,255,0.6) 0%, transparent 50%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(72,219,251,0.5) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 30% 80%, rgba(255,223,0,0.5) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 70% 20%, rgba(168,85,247,0.5) 0%, transparent 50%);
    animation: holographic-shift 6s linear infinite;
    animation-play-state: paused;
    border-radius: 4px;
    mix-blend-mode: overlay;
    will-change: filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.sample-card:hover .card-layer--holographic {
    animation-play-state: running;
}

/* Holographic CMYK Layer (Jupiter) */
.card-layer--holo-cmyk img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    image-rendering: high-quality;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ========================================
   SUBSTRATE LAYERS
   ======================================== */
/* Silver Substrate (Solar Surfing) */
.card-layer--silver-substrate {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        #C0C0C0 0%,
        #E8E8E8 25%,
        #F5F5F5 50%,
        #E8E8E8 75%,
        #C0C0C0 100%
    );
    background-size: 200% 200%;
    animation: silver-gleam 4s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
}

.sample-card:hover .card-layer--silver-substrate {
    animation-play-state: running;
}

/* Silver CMYK Show-Through (Solar Surfing) */
.card-layer--silver-cmyk {
    position: relative;
}

.card-layer--silver-cmyk img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    image-rendering: high-quality;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Gold CMYK Show-Through (Titan) */
.card-layer--gold-cmyk {
    position: relative;
}

.card-layer--gold-cmyk img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    image-rendering: high-quality;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Red Substrate (Red Planet) */
.card-layer--substrate-red {
    position: absolute;
    inset: 0;
    background: #B5404B;
    border-radius: 4px;
}

/* White Substrate (Feather samples) */
.card-layer--substrate-white {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Urban Grey Substrate (F1) */
.card-layer--substrate-grey {
    position: absolute;
    inset: 0;
    background: #5a5a5a;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15),
                inset 0 0 20px rgba(0, 0, 0, 0.1);
}

/* White ink images on grey substrate - render as pure white */
.card-layer--substrate-grey ~ .card-layer img {
    filter: brightness(0) invert(1);
}

/* Black Substrate (F4, F8) */
.card-layer--substrate-black {
    position: absolute;
    inset: 0;
    background: #1a1a1a;
    border-radius: 4px;
}

/* White ink images on black substrate - render as pure white */
.card-layer--substrate-black ~ .card-layer img {
    filter: brightness(0) invert(1);
}

/* Cobalt Substrate (F10) */
.card-layer--substrate-cobalt {
    position: absolute;
    inset: 0;
    background: #0021FF;
    border-radius: 4px;
}

/* ========================================
   FEATHER FOIL EFFECTS
   ======================================== */
/* Gold Foil Feather */
.card-layer--foil-gold-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%, #B8860B 15%, #DAA520 25%, #FFD700 35%,
        #FFF8DC 50%, #FFD700 65%, #DAA520 75%, #B8860B 85%, #8B6914 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-gold-foil-black/foil.webp');
    mask-image: url('../assets/feather-gold-foil-black/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--foil-gold-feather::before {
    animation-play-state: running;
}

/* Blue Foil Feather (F2) */
.card-layer--foil-blue-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #1a3a5c 0%, #2d5a87 15%, #4a90d9 30%, #7ec8e3 50%,
        #4a90d9 70%, #2d5a87 85%, #1a3a5c 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-foil-only/foil.webp');
    mask-image: url('../assets/feather-foil-only/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--foil-blue-feather::before {
    animation-play-state: running;
}

/* Blue Foil Embossed Feather (F11) */
.card-layer--foil-blue-emboss-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #0044AA 0%, #0066DD 15%, #0088FF 30%, #66CCFF 50%,
        #0088FF 70%, #0066DD 85%, #0044AA 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-foil-emboss/foil.webp');
    mask-image: url('../assets/feather-foil-emboss/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.card-layer--foil-blue-emboss-feather::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../assets/feather-foil-emboss/emboss-shading.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: overlay;
    opacity: 0.55;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-foil-emboss/foil.webp');
    mask-image: url('../assets/feather-foil-emboss/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--foil-blue-emboss-feather::before {
    animation-play-state: running;
}

/* Red Foil Feather (F4) */
.card-layer--foil-red-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B0000 0%, #CD5C5C 20%, #FF6347 40%, #FFA07A 50%,
        #FF6347 60%, #CD5C5C 80%, #8B0000 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-red-foil-white/foil.webp');
    mask-image: url('../assets/feather-red-foil-white/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--foil-red-feather::before {
    animation-play-state: running;
}

/* Silver Foil Feather (F5 - CMYK over foil) */
.card-layer--foil-silver-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #A0A0A0 0%, #C0C0C0 20%, #E0E0E0 40%, #FFFFFF 50%,
        #E0E0E0 60%, #C0C0C0 80%, #A0A0A0 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-cmyk-over-foil/foil.webp');
    mask-image: url('../assets/feather-cmyk-over-foil/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--foil-silver-feather::before {
    animation-play-state: running;
}

/* Metallic Ink Feather (F6, F7) */
.card-layer--metallic-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #6B6B6B 0%, #8A8A8A 20%, #A8A8A8 35%,
        #D0D0D0 50%, #A8A8A8 65%, #8A8A8A 80%, #6B6B6B 100%
    );
    background-size: 200% 200%;
    animation: metallic-shimmer 5s ease-in-out infinite;
    animation-play-state: paused;
    filter: url(#metallic-grain);
    opacity: 0.85;
    border-radius: 4px;
}

.card-layer--metallic-feather[data-mask="coated"]::before {
    -webkit-mask-image: url('../assets/feather-metallic-coated/metallic-ink.webp');
    mask-image: url('../assets/feather-metallic-coated/metallic-ink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.card-layer--metallic-feather[data-mask="uncoated"]::before {
    -webkit-mask-image: url('../assets/feather-metallic-uncoated/metallic-ink.webp');
    mask-image: url('../assets/feather-metallic-uncoated/metallic-ink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--metallic-feather::before {
    animation-play-state: running;
}

/* White Ink Mask Technique (F4) */
.card-layer--white-ink-mask {
    position: relative;
}

.card-layer--white-ink-mask::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-red-foil-white/white-ink.webp');
    mask-image: url('../assets/feather-red-foil-white/white-ink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.card-layer--white-ink-mask img {
    opacity: 0;
}

/* ========================================
   SCRATCH-OFF CARD LAYERS (F12)
   ======================================== */
.card-layer--metallic-scratch-off {
    position: absolute;
    inset: 0;
}

.card-layer--metallic-scratch-off::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #6B6B6B 0%, #8A8A8A 20%, #A8A8A8 35%,
        #D0D0D0 50%, #A8A8A8 65%, #8A8A8A 80%, #6B6B6B 100%
    );
    background-size: 200% 200%;
    animation: metallic-shimmer 5s ease-in-out infinite;
    animation-play-state: paused;
    filter: url(#metallic-grain);
    opacity: 0.85;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-scratch-off/metallic.webp');
    mask-image: url('../assets/feather-scratch-off/metallic.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sample-card:hover .card-layer--metallic-scratch-off::before {
    animation-play-state: running;
}

/* Image overlay */
.card-layer--overlay {
    position: absolute;
    inset: 0;
}

.card-layer--overlay img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* EZ Release Coating */
.card-layer--ez-release-scratch-off {
    position: absolute;
    inset: 0;
}

.card-layer--ez-release-scratch-off::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #888888;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-scratch-off/ez-release.webp');
    mask-image: url('../assets/feather-scratch-off/ez-release.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Black noise texture overlay */
.card-layer--noise-scratch-off {
    position: absolute;
    inset: 0;
}

.card-layer--noise-scratch-off::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../assets/feather-scratch-off/black-noise-tile.webp');
    background-size: 50px 50px;
    background-repeat: repeat;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-scratch-off/ez-release.webp');
    mask-image: url('../assets/feather-scratch-off/ez-release.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ========================================
   FLUORESCENT PINK EFFECTS
   ======================================== */
.card-layer--fl-pink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
    opacity: 0.85;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.card-layer--fl-pink img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sample-card:hover .card-layer--fl-pink {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.6));
}

/* White Ink Layer for FL Pink on Cobalt */
.card-layer--white-ink-cobalt img {
    filter: brightness(0) invert(1);
}

/* FL Pink 2 on White */
.card-layer--fl-pink-feather {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: filter 0.3s ease;
}

.card-layer--fl-pink-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FF6FFF;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-fl-pink/fl-pink.webp');
    mask-image: url('../assets/feather-fl-pink/fl-pink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.card-layer--fl-pink-feather img {
    opacity: 0;
}

.sample-card:hover .card-layer--fl-pink-feather {
    filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.8))
            drop-shadow(0 0 20px rgba(255, 105, 180, 0.5));
}

/* FL Pink 2 on Cobalt */
.card-layer--fl-pink-cobalt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: filter 0.3s ease;
}

.card-layer--fl-pink-cobalt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FF6FFF;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/feather-fl-pink-cobalt/fl-pink.webp');
    mask-image: url('../assets/feather-fl-pink-cobalt/fl-pink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.card-layer--fl-pink-cobalt img {
    opacity: 0;
}

.sample-card:hover .card-layer--fl-pink-cobalt {
    filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.8))
            drop-shadow(0 0 20px rgba(255, 105, 180, 0.5));
}

/* ========================================
   CASE STUDY ASPECT RATIOS
   ======================================== */
.card__layer-stack--corvus {
    aspect-ratio: 97 / 129;
}

.card__layer-stack--monarchy {
    aspect-ratio: 4 / 5;
}

.card__layer-stack--ravenstag,
.card__layer-stack--the-kiss {
    aspect-ratio: 2 / 3;
}

.card__layer-stack--iridophore {
    aspect-ratio: 11 / 17;
}

.card__layer-stack--robot {
    aspect-ratio: 1650 / 2550;
}

.card__layer-stack--dust {
    aspect-ratio: 2925 / 5100;
}

.card__layer-stack--square {
    aspect-ratio: 1 / 1;
}

/* ========================================
   CASE STUDY CARD EFFECTS
   ======================================== */
/* Ravenstag: Black Laminate Base */
.card-layer--laminate-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-radius: 4px;
}

/* Ravenstag: Silver Foil */
.card-layer--foil-silver-ravenstag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #808080 0%, #A8A8A8 15%, #C0C0C0 25%, #E8E8E8 35%,
        #FFFFFF 50%, #E8E8E8 65%, #C0C0C0 75%, #A8A8A8 85%, #808080 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/ravenstag/foil-silver.webp');
    mask-image: url('../assets/ravenstag/foil-silver.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--foil-silver-ravenstag::before {
    animation-play-state: running;
}

/* Ravenstag: Red Foil */
.card-layer--foil-red-ravenstag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B0000 0%, #CD5C5C 20%, #FF6347 40%, #FFA07A 50%,
        #FF6347 60%, #CD5C5C 80%, #8B0000 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    animation-delay: 0.5s;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/ravenstag/foil-red.webp');
    mask-image: url('../assets/ravenstag/foil-red.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--foil-red-ravenstag::before {
    animation-play-state: running;
}

/* Robot: Silver Holographic Foil */
.card-layer--foil-silver-robot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #6B6B6B 0%, #A8A8A8 15%, #E8E8E8 30%,
        #FFFFFF 45%, #F0F0F0 55%, #D4D4D4 70%,
        #B8B8B8 85%, #6B6B6B 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    -webkit-mask-image: url('../assets/robot/foil.webp');
    mask-image: url('../assets/robot/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--foil-silver-robot::before {
    animation-play-state: running;
}

/* Scodix Foil Shimmer (Corvus Corax, Monarchy) */
.card-layer--scodix-foil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(139, 105, 20, 0.3) 0%,
        rgba(184, 134, 11, 0.4) 15%,
        rgba(218, 165, 32, 0.5) 25%,
        rgba(255, 215, 0, 0.6) 35%,
        rgba(255, 248, 220, 0.7) 50%,
        rgba(255, 215, 0, 0.6) 65%,
        rgba(218, 165, 32, 0.5) 75%,
        rgba(184, 134, 11, 0.4) 85%,
        rgba(139, 105, 20, 0.3) 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 4px;
    mix-blend-mode: overlay;
}

.sample-card:hover .card-layer--scodix-foil::before {
    animation-play-state: running;
}

/* Corvus Corax Layered Thumbnail */
.card-layer--corvus-scodix-foil {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

.card-layer--corvus-scodix-foil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        #8B6914 0%, #CD9B1D 15%, #FFE55C 30%, #FFFACD 45%,
        #FFD700 55%, #FFD700 70%, #CD9B1D 85%, #8B6914 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    -webkit-mask-image: url('../assets/corvus-corax/web/scodix-foil.webp');
    mask-image: url('../assets/corvus-corax/web/scodix-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--corvus-scodix-foil::before {
    animation-play-state: running;
}

/* The Kiss: UV Reveal Effect */
.card-layer--the-kiss-uv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.card-layer--the-kiss-uv img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sample-card:hover .card-layer--the-kiss-uv {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.9))
            drop-shadow(0 0 16px rgba(138, 43, 226, 0.7))
            drop-shadow(0 0 24px rgba(0, 255, 255, 0.5));
}

/* ========================================
   OTHER SAMPLES - Card Effects
   ======================================== */
/* Vinyl Sticker Substrate */
.card-layer--substrate-vinyl {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f0ede8 0%, #e5e0d8 50%, #f0ede8 100%);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    -webkit-mask-image: url('../assets/monster-sticker/monster-diecut-mask-alpha.png');
    mask-image: url('../assets/monster-sticker/monster-diecut-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Process+ FL Pink Underlay Layer */
.card-layer--fl-pink-process-plus {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.card-layer--fl-pink-process-plus img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sample-card:hover .card-layer--fl-pink-process-plus {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.8))
            drop-shadow(0 0 20px rgba(255, 105, 180, 0.5));
}

/* Process+ CMYK Layer */
.card-layer--process-plus {
    transition: filter 0.3s ease;
}

.sample-card:hover .card-layer--process-plus {
    filter: saturate(1.15);
}

/* Coaster Board Substrate */
.card-layer--substrate-coaster {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #d4c4a8 0%, #c9b896 50%, #d4c4a8 100%);
    border-radius: 50%;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1),
                0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Traditional Gold Foil on Coaster */
.card-layer--foil-gold-coaster {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.card-layer--foil-gold-coaster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%, #B8860B 15%, #DAA520 25%, #FFD700 35%,
        #FFF8DC 50%, #FFD700 65%, #DAA520 75%, #B8860B 85%, #8B6914 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 50%;
    -webkit-mask-image: url('../assets/trad-foil-coaster/foil.webp');
    mask-image: url('../assets/trad-foil-coaster/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--foil-gold-coaster::before {
    animation-play-state: running;
}

/* ========================================
   ENVELOPE CARD EFFECTS
   ======================================== */
.card__layer-stack--envelope {
    aspect-ratio: 2175 / 1575;
}

.card-layer--substrate-envelope {
    position: absolute;
    inset: 0;
    background-color: #f0ebe0;
    border-radius: 3px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08),
                0 2px 6px rgba(0, 0, 0, 0.15);
}

.card-layer--cmyk-envelope {
    position: absolute;
    inset: 0;
}

.card-layer--cmyk-envelope img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.card-layer--foil-gold-envelope {
    position: absolute;
    inset: 0;
    border-radius: 3px;
}

.card-layer--foil-gold-envelope::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%, #B8860B 15%, #DAA520 25%, #FFD700 35%,
        #FFF8DC 50%, #FFD700 65%, #DAA520 75%, #B8860B 85%, #8B6914 100%
    );
    background-size: 200% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    animation-play-state: paused;
    border-radius: 3px;
    -webkit-mask-image: url('../assets/traditional-foil-envelope/foil.webp');
    mask-image: url('../assets/traditional-foil-envelope/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sample-card:hover .card-layer--foil-gold-envelope::before {
    animation-play-state: running;
}

/* Note: Additional card effects (greeting cards, robot tile, The Kiss multi-foil,
   iridophore, dust, postosuchus, breach dogs, venus, bleed separation)
   are in a separate supplementary file due to size */