/* =================================================================
   LAYER ANIMATION COMPONENT
   Reusable horizontal fan animation for print layer visualization
   Based on Squarespace reference implementation
   ================================================================= */

/* =================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================= */

:root {
    --layer-perspective: 1000px;
    --layer-rotation: 15deg;
    /* Fluid layer width: scales smoothly with viewport, bounded by min/max */
    --layer-width: clamp(180px, 25vw, 380px);
    --layer-transition: 1s ease;
    --layer-transition-fast: 0.5s ease;
    /* Fluid container height: scales with viewport height */
    --container-height: clamp(350px, 50vh, 600px);
    --label-font-size: 14px;
    --label-color: #333;
    --highlight-color: rgba(255, 107, 0, 0.8);
}

/* =================================================================
   2. CONTAINER STYLES
   ================================================================= */

.layer-animation {
    position: relative;
    width: 100%;
    height: var(--container-height);
    perspective: var(--layer-perspective);
    /* No flex centering - vertical position locked by JS on init */
    overflow: visible; /* Allow labels to show outside container */
    padding: 20px 20px 60px 20px; /* Extra bottom padding for labels */
    box-sizing: border-box;
}

.layer-animation__container {
    /* Position set by JS on init - locks vertical position to prevent shift */
    /* IMPORTANT: height must be auto for vertical positioning to work correctly */
    /* Demo-specific overrides should NOT set height: 100% on this element */
    position: absolute;
    left: 0;
    width: 100%;
    height: auto !important; /* Override demo-specific height: 100% */
    transform-style: preserve-3d;
}

/* =================================================================
   3. LAYER BASE STYLES
   ================================================================= */

.layer {
    position: absolute;
    left: 0; /* Explicit left position - prevents flex static position inheritance */
    top: 0;
    width: var(--layer-width);
    height: auto;
    transform-origin: left center;
    transform: translateX(0) rotateY(0deg);
    transition: transform var(--layer-transition),
                opacity var(--layer-transition),
                box-shadow var(--layer-transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: visible; /* Allow labels to show below */
    /* Force each layer into its own GPU compositing layer to ensure z-index
       is respected during transitions, even when some layers have filters */
    will-change: transform;
    isolation: isolate;
}

.layer img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Ensure images fill layer bounds when aspect-ratio is enforced via data-aspect */
.layer-animation[data-aspect] .layer img {
    height: 100%;
    object-fit: cover;
}

/* Exclude label icons from layer img styling */
.layer .layer__label-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    display: inline-block !important;
    border-radius: 0;
    flex-shrink: 0;
    /* Invert white SVG to black for visibility on white label */
    filter: invert(1) !important;
    opacity: 1 !important;
}

/* =================================================================
   4. LAYER TYPE MODIFIERS
   ================================================================= */

/* Substrate Layer (Paper) - CSS-only white background with visible edge */
.layer--substrate {
    background: #fefefe;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                inset 0 0 20px rgba(0, 0, 0, 0.02);
    /* Aspect ratio to match image layers */
    aspect-ratio: 800 / 1164;
}

/* Red Uncoated Paper Substrate - for white ink underprint demos */
.layer--substrate-red {
    background: #B5404B; /* Red uncoated paper */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                inset 0 0 20px rgba(0, 0, 0, 0.05);
    /* Aspect ratio to match image layers */
    aspect-ratio: 800 / 1164;
}

/* Black Paper Substrate - for white ink opacity demos */
.layer--substrate-black {
    background: #1a1a1a; /* Epic Black paper */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
                inset 0 0 20px rgba(0, 0, 0, 0.1);
    aspect-ratio: 938 / 2138; /* Updated for revised Feather Sample 8 */
}

/* Coaster Board Substrate - cream/natural uncoated board */
.layer--substrate-coaster {
    background: #f9f7f2; /* Warm cream board color */
    /* Subtle paper texture using SVG noise pattern */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15),
                inset 0 0 25px rgba(0, 0, 0, 0.03);
    aspect-ratio: 1 / 1; /* Circular coaster */
}

/* Sticker Backing Paper - extends beyond kiss-cut */
.layer--substrate-sticker-backing {
    background: transparent;
}

.layer--substrate-sticker-backing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f5f5f5;
    border-radius: 4px;
    /* Depth shadow follows mask contour */
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
    /* Die-cut mask only - alpha channel PNG */
    -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;
}

/* Vinyl substrate - peelable portion */
.layer--vinyl-sticker {
    background: transparent;
}

.layer--vinyl-sticker::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 4px;
    /* Kiss-cut outline + depth shadow follows mask contour */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
            drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
    /* Combined mask (both cuts) - alpha channel PNG */
    -webkit-mask-image: url('../assets/monster-sticker/monster-combined-mask-alpha.png');
    mask-image: url('../assets/monster-sticker/monster-combined-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* UV Gloss Coating for stickers - covers entire sheet (die-cut boundary) */
.layer--uv-gloss-sticker {
    background: transparent;
}

.layer--uv-gloss-sticker::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    border-radius: 4px;
    /* Depth shadow follows mask contour */
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.1));
    /* Die-cut mask - UV gloss covers entire sheet */
    -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;
}

/* White Ink Layer - semi-transparent for opacity stacking effect */
.layer--white-ink-25 {
    background: transparent;
    aspect-ratio: 938 / 2138; /* Updated for revised Feather Sample 8 */
}

.layer--white-ink-25 img {
    /* Convert artwork to pure white (255,255,255) then apply 25% opacity */
    filter: brightness(0) invert(1);
    opacity: 0.25; /* Each layer at 25% - stacks to 100% when combined */
}

/* =================================================================
   WHITE INK OPACITY VARIATIONS - Feather Sample 8
   4-hit system: each layer can carry 0-100% opacity per pixel
   Total additive coverage: 0-400%
   ================================================================= */

.layer--white-ink-hit-1,
.layer--white-ink-hit-2,
.layer--white-ink-hit-3,
.layer--white-ink-hit-4 {
    background: transparent;
    aspect-ratio: 938 / 2138; /* Match feather dimensions */
}

.layer--white-ink-hit-1 img,
.layer--white-ink-hit-2 img,
.layer--white-ink-hit-3 img,
.layer--white-ink-hit-4 img {
    /* Convert artwork to pure white then apply 25% base opacity for display */
    filter: brightness(0) invert(1);
    opacity: 0.25;
}

/* Color-coded label badges matching inspector colors (Blue/Purple/Red/Orange) */
.layer--white-ink-hit-1 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #4a9eff; /* Blue */
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.layer--white-ink-hit-2 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #9b59b6; /* Purple */
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.layer--white-ink-hit-3 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #e74c3c; /* Red */
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.layer--white-ink-hit-4 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #f39c12; /* Orange */
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Technique-specific overrides for feather-white-opacity */
.layer-animation[data-technique="feather-white-opacity"] .layer--substrate-black {
    background: #1a1a1a;
    aspect-ratio: 938 / 2138;
}

/* Image Layer - contains raster artwork */
.layer--image {
    background: transparent;
}

/* Lamination Layer (Soft Touch) - CSS-only subtle frosted effect */
.layer--lamination {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5px) brightness(1.01);
    -webkit-backdrop-filter: blur(0.5px) brightness(1.01);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                inset 0 0 30px rgba(255, 255, 255, 0.2);
    /* Aspect ratio to match image layers */
    aspect-ratio: 800 / 1164;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(0.5px)) {
    .layer--lamination {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* Foil Layer - optional shimmer animation */
.layer--foil {
    background: transparent;
}

/* Holographic Substrate - container for Three.js canvas or static fallback */
.layer--holographic-substrate {
    /* Soft blurred blobs - no sharp edges (CSS fallback) */
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(255,107,157,0.8) 0%, rgba(255,107,157,0.4) 30%, transparent 60%),
        radial-gradient(ellipse 70% 90% at 85% 75%, rgba(84,160,255,0.8) 0%, rgba(84,160,255,0.4) 30%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(72,219,251,0.7) 0%, rgba(72,219,251,0.3) 35%, transparent 65%),
        radial-gradient(ellipse 60% 80% at 25% 80%, rgba(254,202,87,0.8) 0%, rgba(254,202,87,0.4) 30%, transparent 55%),
        radial-gradient(ellipse 75% 65% at 75% 20%, rgba(95,39,205,0.8) 0%, rgba(95,39,205,0.4) 30%, transparent 55%),
        radial-gradient(ellipse 85% 75% at 40% 60%, rgba(255,159,243,0.6) 0%, rgba(255,159,243,0.3) 35%, transparent 60%),
        linear-gradient(135deg, #88ddff 0%, #ff6b9d 50%, #feca57 100%);
    background-size: 200% 200%;
    animation: holographic-wave 6s linear infinite;
    overflow: visible; /* Allow label to show outside bounds */
    position: relative;
}

.layer--holographic-substrate canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    /* Blend marble texture with holographic CSS gradient */
    mix-blend-mode: multiply;
    opacity: 0.2;
}

.layer--holographic-substrate img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

@keyframes holographic-wave {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg) blur(0px);
    }
    50% {
        filter: hue-rotate(180deg) blur(0px);
    }
    100% {
        background-position: 100% 100%;
        filter: hue-rotate(360deg) blur(0px);
    }
}

/* White Ink Mask - shows where white ink blocks holographic effect */
.layer--white-ink-mask {
    background: transparent;
}

.layer--white-ink-mask img {
    /* Display as-is - PNG with transparency shows white blocking areas */
    filter: none;
}

/* UV Gloss Coating - protective glossy finish layer */
.layer--uv-coating {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(0.3px) brightness(1.05) saturate(1.1);
    -webkit-backdrop-filter: blur(0.3px) brightness(1.05) saturate(1.1);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                inset 0 0 40px rgba(255, 255, 255, 0.15);
    /* Aspect ratio to match image layers */
    aspect-ratio: 800 / 1164;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(0.3px)) {
    .layer--uv-coating {
        background: rgba(255, 255, 255, 0.12);
    }
}

/* UV Reactive Ink Layer - invisible until expanded (simulates blacklight effect) */
.layer--uv-reactive {
    background: transparent;
    opacity: 0;
    transition: transform var(--layer-transition),
                opacity var(--layer-transition),
                box-shadow var(--layer-transition),
                filter var(--layer-transition);
}

/* Show UV layer with glow when container is expanded */
.layer-animation.is-expanded .layer--uv-reactive {
    opacity: 0.75;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8))
            drop-shadow(0 0 15px rgba(138, 43, 226, 0.6));
}

/* Gold Foil Layer - metallic chrome effect with dramatic sweep animation */
.layer--foil-gold {
    position: relative;
    background: transparent;
}

/* Gold chrome overlay - uses foil image as mask */
.layer--foil-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,       /* Deep gold shadow */
        #CD9B1D 15%,      /* Dark gold */
        #FFD700 30%,      /* Pure gold */
        #FFEC8B 45%,      /* Light gold highlight */
        #FFF8DC 50%,      /* Bright flash */
        #FFEC8B 55%,      /* Light gold highlight */
        #FFD700 70%,      /* Pure gold */
        #CD9B1D 85%,      /* Dark gold */
        #8B6914 100%      /* Deep gold shadow */
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    /* Continuous sweep animation */
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    /* Mask to foil artwork shape */
    -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;
}

@keyframes gold-chrome-sweep {
    0%, 100% {
        background-position: 100% 0;
    }
    50% {
        background-position: 0% 0;
    }
}

/* Mars Gold Foil - uses Mars foil mask */
.layer--foil-gold-mars {
    position: relative;
    background: transparent;
}

.layer--foil-gold-mars::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,
        #CD9B1D 15%,
        #FFD700 30%,
        #FFEC8B 45%,
        #FFF8DC 50%,
        #FFEC8B 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;
    -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;
}

/* Traditional Foil Coaster - Gold foil with chrome sweep */
.layer--foil-gold-trad-coaster {
    position: relative;
    background: transparent;
}

.layer--foil-gold-trad-coaster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,       /* Deep gold shadow */
        #CD9B1D 15%,      /* Dark gold */
        #FFD700 30%,      /* Pure gold */
        #FFEC8B 45%,      /* Light gold highlight */
        #FFF8DC 50%,      /* Bright flash */
        #FFEC8B 55%,      /* Light gold highlight */
        #FFD700 70%,      /* Pure gold */
        #CD9B1D 85%,      /* Dark gold */
        #8B6914 100%      /* Deep gold shadow */
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 50%; /* Circular foil - CRITICAL for coaster shape */
    pointer-events: none;
    -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;
}

.layer--foil-gold-trad-coaster img {
    opacity: 0; /* Hide img, use ::before for chrome effect */
}

/* Glitter Holographic Foil - Traditional Foil Greeting Card */
/* Uses pixel grid effect - background-image set by JS */
.layer--foil-holo-greeting-card {
    position: relative;
    background: transparent;
}

.layer--foil-holo-greeting-card::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Background-image set dynamically by JS (pixel noise texture) */
    background-size: 32px 32px; /* Larger grid pattern */
    background-repeat: repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges; /* Firefox fallback */
    animation: pixel-holo-shift-greeting 4s linear infinite;
    will-change: filter;
    pointer-events: none;
    -webkit-mask-image: url('../assets/foil-greeting-card/foil.webp');
    mask-image: url('../assets/foil-greeting-card/foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@keyframes pixel-holo-shift-greeting {
    0% { filter: hue-rotate(0deg) brightness(1.0); }
    25% { filter: hue-rotate(90deg) brightness(1.15); }
    50% { filter: hue-rotate(180deg) brightness(1.0); }
    75% { filter: hue-rotate(270deg) brightness(1.15); }
    100% { filter: hue-rotate(360deg) brightness(1.0); }
}

.layer--foil-holo-greeting-card img {
    opacity: 0; /* Hide img, use ::before for pixel foil effect */
}

/* Silver Foil Mirror Board Substrate - solid metallic silver with sweep animation */
.layer--silver-substrate {
    position: relative;
    background: linear-gradient(
        120deg,
        #6B6B6B 0%,       /* Deep silver shadow */
        #8A8A8A 10%,      /* Dark silver */
        #B8B8B8 25%,      /* Medium silver */
        #D4D4D4 40%,      /* Light silver */
        #E8E8E8 50%,      /* Bright silver */
        #FFFFFF 55%,      /* White flash */
        #E8E8E8 60%,      /* Bright silver */
        #D4D4D4 70%,      /* Light silver */
        #B8B8B8 85%,      /* Medium silver */
        #6B6B6B 100%      /* Deep silver shadow */
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    aspect-ratio: 800 / 1164;
}

/* Uncoated Paper Substrate - textured, porous appearance */
.layer--substrate-uncoated {
    background: #f5f2eb; /* Warm off-white */
    /* Subtle paper texture using SVG noise pattern */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    border: 1px solid #d8d4cc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                inset 0 0 8px rgba(0, 0, 0, 0.06);
    aspect-ratio: 2138 / 3113;
}

/* Metallic Ink Layer - powdered metal shimmer effect (distinct from chrome foil) */
.layer--metallic-ink {
    position: relative;
    background: transparent;
}

/* Metallic ink overlay - muted shimmer with grain texture */
.layer--metallic-ink::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Softer silver gradient - less contrast than foil */
    background: linear-gradient(
        135deg,
        #6B6B6B 0%,       /* Deep silver */
        #8A8A8A 15%,      /* Dark silver */
        #A8A8A8 30%,      /* Medium silver */
        #C0C0C0 45%,      /* Light silver */
        #D0D0D0 50%,      /* Bright silver (no white flash) */
        #C0C0C0 55%,      /* Light silver */
        #A8A8A8 70%,      /* Medium silver */
        #8A8A8A 85%,      /* Dark silver */
        #6B6B6B 100%      /* Deep silver */
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    /* Slower, subtler animation than foil */
    animation: metallic-shimmer 5s ease-in-out infinite;
    /* Grain texture for powdered metal look */
    filter: url(#metallic-grain);
    opacity: 0.85;
    /* Mask to metallic ink artwork shape */
    -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;
}

@keyframes metallic-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* White Ink Primer Layer - for use on uncoated paper */
.layer--white-ink-primer {
    background: transparent;
}

.layer--white-ink-primer img {
    /* Full opacity - solid white primer */
    opacity: 1;
}

/* =================================================================
   4b. TEXTURED EFFECTS LAYERS (Enceladus)
   ================================================================= */

/* Textured Emboss Layer - yellow ink pattern (production visualization) */
.layer--textured-emboss {
    /* Inherits position: absolute from .layer - do not override */
    background: transparent;
    /* Default aspect ratio - can be overridden per technique */
    aspect-ratio: 800 / 1164;
}

.layer--textured-emboss img {
    /* Display yellow emboss pattern as-is */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Textured Surface - container for Three.js normal-mapped rendering */
.layer--textured-surface {
    /* Inherits position: absolute from .layer - do not override */
    background: transparent;
    overflow: hidden;
    /* Default aspect ratio - can be overridden per technique */
    aspect-ratio: 800 / 1164;
}

.layer--textured-surface canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.layer--textured-surface img {
    /* Fallback image when WebGL not available */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Raised Ink Layer - clear ink buildup areas */
.layer--raised-ink {
    /* Inherits position: absolute from .layer - do not override */
    background: transparent;
    /* Default aspect ratio - can be overridden per technique */
    aspect-ratio: 800 / 1164;
}

.layer--raised-ink img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Very subtle - clear ink is nearly invisible */
    opacity: 0.25;
    /* Slight glossy tint for visibility */
    filter: brightness(1.2) saturate(0.3);
    /* Glass-like blend */
    mix-blend-mode: overlay;
    border-radius: 4px;
}

/* =================================================================
   5. LAYER LABELS
   ================================================================= */

.layer__label {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    font-size: var(--label-font-size);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    color: var(--label-color);
    text-align: center;
    white-space: nowrap;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity var(--layer-transition-fast);
    pointer-events: none;
    z-index: 100;
}

/* Labels with icons - use flexbox layout */
.layer__label--with-icon {
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Hide the ::before color swatch when using icon - need high specificity */
.layer__label--with-icon::before,
.layer--scodix-foil-corvus .layer__label--with-icon::before,
.layer--scodix-sense-corvus .layer__label--with-icon::before {
    display: none !important;
    content: none !important;
}

/* Layer label icons - sized to match text and made visible */
.layer__label-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    display: inline-block !important;
    vertical-align: middle;
    /* Icons are white SVGs - invert to make them dark on white background */
    filter: invert(1) !important;
}

/* Show labels when layer has show-text class */
.layer.show-text .layer__label {
    opacity: 1;
}

/* =================================================================
   6. INTERACTION STATES
   ================================================================= */

/* Layer highlighting on individual hover */
.layer.is-highlighted {
    box-shadow: 0 0 25px var(--highlight-color) !important;
}

/* =================================================================
   7. RESPONSIVE BREAKPOINTS
   Note: clamp() handles most fluid scaling. These are edge cases only.
   ================================================================= */

/* Laptop screens with limited height (1080p at 100% zoom) */
@media (min-width: 1024px) and (max-height: 900px) {
    :root {
        /* Tighter height constraint for short viewports */
        --container-height: clamp(280px, 40vh, 380px);
    }

    .layer-animation {
        padding-bottom: 45px;
    }

    .layer__label {
        bottom: -25px;
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* Tablet (768px and below) */
@media (max-width: 768px) {
    :root {
        --label-font-size: 13px;
    }

    .layer-animation {
        padding: 15px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    :root {
        /* Tighter bounds for small screens */
        --layer-width: clamp(140px, 40vw, 200px);
        --container-height: clamp(280px, 45vh, 380px);
        --label-font-size: 11px;
    }

    .layer-animation {
        padding: 10px;
    }

    .layer__label {
        bottom: -25px;
        padding: 3px 8px;
    }
}

/* =================================================================
   7b. PORTRAIT ASPECT RATIO OVERRIDES
   For techniques with tall/narrow artwork (e.g., feather demos)
   Note: Prefer using data-aspect="feather" which has fluid clamp() sizing.
   data-technique overrides kept for backward compatibility.
   ================================================================= */

/* Portrait layers need narrower width to fit container height */
.layer-animation[data-technique="feather"] {
    --layer-width: clamp(110px, 14vw, 220px);
}

/* Rains of Terror (Metallic Ink) - standard aspect ratio, technique-specific overrides */
.layer-animation[data-technique="rains-of-terror"] .layer--substrate,
.layer-animation[data-technique="rains-of-terror"] .layer--substrate-uncoated {
    aspect-ratio: 2138 / 3113;
}

/* Enceladus (Textured Effects) - aspect ratio overrides */
.layer-animation[data-technique="enceladus"] .layer--substrate,
.layer-animation[data-technique="enceladus"] .layer--textured-emboss,
.layer-animation[data-technique="enceladus"] .layer--textured-surface,
.layer-animation[data-technique="enceladus"] .layer--raised-ink {
    aspect-ratio: 800 / 1164;
}

/* IndiGlow (CMYK + Fluorescent Pink) - aspect ratio overrides */
.layer-animation[data-technique="indiglow"] .layer,
.layer-animation[data-technique="indiglow"] .layer--substrate {
    aspect-ratio: 661 / 963;
}

/* =================================================================
   TRADITIONAL FOIL COASTER
   ================================================================= */

/* Traditional Foil Coaster - circular 1:1 aspect ratio */
.layer-animation[data-technique="trad-foil-coaster"] {
    --layer-width: 280px;
    --container-height: 100%;
    height: 100%;
    width: 100%;
}

.layer-animation[data-technique="trad-foil-coaster"] .layer-animation__container {
    width: 100%;
    /* Note: height: auto inherited from base - required for self-centering */
}

/* Expand layer width on hover */
.demo-wrapper:hover .layer-animation[data-technique="trad-foil-coaster"] {
    --layer-width: 340px;
}

/* Apply circular die-cut shape to ALL layers - this is the die-cut effect */
.layer-animation[data-technique="trad-foil-coaster"] .layer,
.layer-animation[data-technique="trad-foil-coaster"] .layer--substrate-coaster {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* Responsive sizing for circular coaster */
@media (max-width: 768px) {
    .layer-animation[data-technique="trad-foil-coaster"] {
        --layer-width: 180px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .layer-animation[data-technique="trad-foil-coaster"] {
        --layer-width: 220px;
    }
}

/* =================================================================
   MONSTER STICKER DIE-CUT + KISS-CUT
   ================================================================= */

.layer-animation[data-technique="monster-sticker"] {
    --layer-width: 320px;
    --container-height: 100%;
    height: 100%;
    width: 100%;
}

.layer-animation[data-technique="monster-sticker"] .layer,
.layer-animation[data-technique="monster-sticker"] .layer--substrate-sticker-backing,
.layer-animation[data-technique="monster-sticker"] .layer--vinyl-sticker {
    aspect-ratio: 1 / 1; /* Square masks (900x900) */
    box-shadow: none !important; /* Disable rectangular shadow - use drop-shadow on ::before instead */
}

/* Disable highlight box-shadow - handled via drop-shadow on pseudo-elements */
.layer-animation[data-technique="monster-sticker"] .layer.is-highlighted {
    box-shadow: none !important;
}

.layer-animation[data-technique="monster-sticker"] .layer-animation__container {
    height: 100%;
    width: 100%;
    justify-content: flex-start;
}

/* Apply combined mask to artwork layer - mask the img, not the layer */
.layer-animation[data-technique="monster-sticker"] .layer--image img {
    /* Kiss-cut outline + depth shadow follows mask contour */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
            drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
    -webkit-mask-image: url('../assets/monster-sticker/monster-combined-mask-alpha.png');
    mask-image: url('../assets/monster-sticker/monster-combined-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* -----------------------------------------------------------------
   MONSTER STICKER CONTOUR HIGHLIGHT GLOW
   Uses SVG filter for outline-only glow on non-rectangular shapes
   ----------------------------------------------------------------- */

/* Base transition for smooth highlight appearance */
.layer-animation[data-technique="monster-sticker"] .layer::before,
.layer-animation[data-technique="monster-sticker"] .layer--image img {
    transition: filter 0.3s ease;
}

/* Apply outline glow filter to ::before pseudo-elements when highlighted */
.layer-animation[data-technique="monster-sticker"] .layer.is-highlighted::before {
    filter: url(#outline-glow)
            drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
}

/* For the image layer, apply to the img element directly */
.layer-animation[data-technique="monster-sticker"] .layer--image.is-highlighted img {
    filter: url(#outline-glow)
            drop-shadow(0 0 1px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
            drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
}

@media (max-width: 768px) {
    .layer-animation[data-technique="monster-sticker"] {
        --layer-width: 220px;
    }
}

/* Fluorescent Pink Layer - vibrant pink color badge */
.layer--fl-pink .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FF1493;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Cyan 2 Layer - extra cyan hit (IndiGlowUp) */
.layer--cyan2 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #00FFFF;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Yellow 2 Layer - extra yellow hit (IndiGlowUp) */
.layer--yellow2 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FFFF00;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid #ccc;
}

/* =================================================================
   8. TECHNIQUE CONTAINER (Optional wrapper for demos)
   ================================================================= */

.technique-container {
    background-color: #022662; /* Indigo Ink blue */
    border: none;
    padding: 30px;
    margin: 40px auto;
    max-width: 1000px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.technique-title {
    text-align: center;
    margin-bottom: 10px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
}

.technique-description {
    text-align: center;
    margin-top: 20px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    padding: 0 20px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================
   9. PROCESS PLUS (Fluorescent Pink Strategic Underlays)
   ================================================================= */

/* Process Plus technique - portrait aspect ratio */
.layer-animation[data-technique="process-plus"] .layer,
.layer-animation[data-technique="process-plus"] .layer--substrate {
    aspect-ratio: 1296 / 1689;
}

/* FL Pink Underlay Layer - shows strategic pink underlay positions */
.layer--fl-pink-underlay {
    position: relative;
    background: transparent;
}

/* FL Pink 2 badge (double-hit powerhouse - guaranteed drama) */
.layer--fl-pink-2 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FF6FFF;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(255, 111, 255, 0.8);
}

/* Combined FL Pink badge (for grouped underlay layer) */
.layer--fl-pink-combined .layer__label::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #FF6FFF 0%, #FF99FF 50%, #FF6FFF 100%);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(255, 111, 255, 0.6);
}

/* =================================================================
   10. FEATHER BOOKMARK SAMPLES
   ================================================================= */

/* Feather Bookmark technique - tall portrait aspect ratio (900x2100) */
.layer-animation[data-technique="feather-bookmark"] .layer,
.layer-animation[data-technique="feather-bookmark"] .layer--substrate {
    aspect-ratio: 900 / 2100;
}

/* Cobalt Blue Substrate - for FL Pink on Cobalt samples */
.layer--substrate-cobalt {
    background: #0021FF;
    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);
    aspect-ratio: 900 / 2100;
}

/* Colored Substrate - generic for any dark/colored paper */
.layer--substrate-colored {
    background: #5a5a5a;
    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);
    aspect-ratio: 900 / 2100;
}

/* Silk Coated Substrate - bright white coated paper */
.layer--substrate-silk {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
                inset 0 0 15px rgba(0, 0, 0, 0.02);
    aspect-ratio: 900 / 2100;
}

/* Silk Substrate variant for Foil Only sample (900x2100) */
.layer-animation[data-technique="feather-bookmark"] .layer.layer--substrate-silk-foil-only {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
                inset 0 0 15px rgba(0, 0, 0, 0.02);
    aspect-ratio: 900 / 2100;
}

/* Substrate variant for Gold Foil sample (900x2100) */
.layer-animation[data-technique="feather-bookmark"] .layer.layer--substrate-gold-foil {
    background: #fefefe;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                inset 0 0 20px rgba(0, 0, 0, 0.02);
    aspect-ratio: 900 / 2100;
}

/* Printable Silver Foil Layer - animated chrome sweep with mask */
.layer--foil-silver-feather {
    position: relative;
    background: transparent;
}

.layer--foil-silver-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #6B6B6B 0%,
        #8A8A8A 10%,
        #B8B8B8 25%,
        #D4D4D4 40%,
        #E8E8E8 50%,
        #FFFFFF 55%,
        #E8E8E8 60%,
        #D4D4D4 70%,
        #B8B8B8 85%,
        #6B6B6B 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Hide img - shimmer effect replaces it */
.layer--foil-silver-feather img {
    opacity: 0;
}

/* Blue Foil Layer - animated blue chrome sweep with mask */
.layer--foil-blue-feather {
    position: relative;
    background: transparent;
}

.layer--foil-blue-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #0044AA 0%,
        #0066DD 15%,
        #0088FF 30%,
        #33AAFF 45%,
        #66CCFF 50%,
        #33AAFF 55%,
        #0088FF 70%,
        #0066DD 85%,
        #0044AA 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Hide img inside foil layers using ::before effect */
.layer--foil-blue-feather img {
    opacity: 0;
}

/* Gold Foil Layer for feather bookmark - animated gold chrome sweep */
.layer--foil-gold-feather {
    position: relative;
    background: transparent;
}

.layer--foil-gold-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,
        #CD9B1D 15%,
        #FFD700 30%,
        #FFEC8B 45%,
        #FFF8DC 50%,
        #FFEC8B 55%,
        #FFD700 70%,
        #CD9B1D 85%,
        #8B6914 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-gold-feather img {
    opacity: 0;
}

/* Red Foil Layer - animated red chrome sweep with mask */
.layer--foil-red-feather {
    position: relative;
    background: transparent;
}

.layer--foil-red-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #AA0000 0%,
        #CC2222 15%,
        #EE3333 30%,
        #FF5555 45%,
        #FF7777 50%,
        #FF5555 55%,
        #EE3333 70%,
        #CC2222 85%,
        #AA0000 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-red-feather img {
    opacity: 0;
}

/* Black Ink Layer - standard black ink */
.layer--black-ink {
    background: transparent;
}

/* Black Ink Flood - solid black background under lamination */
.layer--black-ink-flood {
    background: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    aspect-ratio: 900 / 2100;
}

/* Ebony Karess Black Laminate - solid black printable lamination */
.layer--laminate-black {
    background: #0a0a0a;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25),
                inset 0 0 30px rgba(0, 0, 0, 0.2);
}

/* =================================================================
   RAVENSTAG - Printable Foil Over Black Laminate
   ================================================================= */

/* Printable Silver Foil - Ravenstag */
.layer--foil-silver-ravenstag {
    background: transparent;
}

.layer--foil-silver-ravenstag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #4a4a4a 0%,
        #7a7a7a 12%,
        #a8a8a8 24%,
        #c8c8c8 36%,
        #e8e8e8 44%,
        #ffffff 50%,
        #e8e8e8 56%,
        #c8c8c8 64%,
        #a8a8a8 76%,
        #7a7a7a 88%,
        #4a4a4a 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    -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;
}

.layer--foil-silver-ravenstag img {
    opacity: 0;
}

/* Red Foil - Ravenstag */
.layer--foil-red-ravenstag {
    background: transparent;
}

.layer--foil-red-ravenstag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B0000 0%,
        #B22222 15%,
        #DC143C 30%,
        #FF4444 45%,
        #FF6666 50%,
        #FF4444 55%,
        #DC143C 70%,
        #B22222 85%,
        #8B0000 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    -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;
}

.layer--foil-red-ravenstag img {
    opacity: 0;
}

/* Metallic Ink Layer for feather bookmark - uses specific mask */
.layer--metallic-ink-feather {
    position: relative;
    background: transparent;
}

.layer--metallic-ink-feather::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #6B6B6B 0%,
        #8A8A8A 15%,
        #A8A8A8 30%,
        #C0C0C0 45%,
        #D0D0D0 50%,
        #C0C0C0 55%,
        #A8A8A8 70%,
        #8A8A8A 85%,
        #6B6B6B 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: metallic-shimmer 5s ease-in-out infinite;
    opacity: 0.85;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* White Ink Layers for feather bookmark - uses mask to display white */
/* Base styles for all white ink layers */
.layer--white-ink-metallic-uncoated,
.layer--white-ink-fl-pink-cobalt,
.layer--white-ink-red-foil {
    background: transparent;
}

.layer--white-ink-metallic-uncoated::before,
.layer--white-ink-fl-pink-cobalt::before,
.layer--white-ink-red-foil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 4px;
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--white-ink-metallic-uncoated img,
.layer--white-ink-fl-pink-cobalt img,
.layer--white-ink-red-foil img {
    opacity: 0;
}

/* Sample-specific mask paths */
.layer--white-ink-metallic-uncoated::before {
    -webkit-mask-image: url('../assets/feather-metallic-uncoated/white-ink.webp');
    mask-image: url('../assets/feather-metallic-uncoated/white-ink.webp');
}

.layer--white-ink-fl-pink-cobalt::before {
    -webkit-mask-image: url('../assets/feather-fl-pink-cobalt/white-ink.webp');
    mask-image: url('../assets/feather-fl-pink-cobalt/white-ink.webp');
}

.layer--white-ink-red-foil::before {
    -webkit-mask-image: url('../assets/feather-red-foil-white/white-ink.webp');
    mask-image: url('../assets/feather-red-foil-white/white-ink.webp');
}

/* White Ink Only layer - standard aspect ratio */
.layer-animation[data-technique="feather-bookmark"] .layer.layer--white-ink-only {
    background: transparent;
    aspect-ratio: 900 / 2100;
}

.layer--white-ink-only img {
    opacity: 1;
}

/* Aspect ratio overrides for specific samples */
/* Foil Only sample - 900x2100 (standardized to match actual image dimensions) */
.layer-animation[data-technique="feather-bookmark"] .layer.layer--foil-blue-feather {
    aspect-ratio: 900 / 2100;
}

/* Embossed Foil sample - 900x2100 (standard feather size) */
.layer-animation[data-technique="feather-bookmark"] .layer.layer--foil-blue-emboss,
.layer-animation[data-technique="feather-bookmark"] .layer.layer--emboss-die-copper {
    aspect-ratio: 900 / 2100;
}

/* Colored Substrate override for White Ink sample */
.layer-animation[data-technique="feather-bookmark"] .layer.layer--substrate-colored {
    aspect-ratio: 900 / 2100;
}

/* FL Pink 2 layers - uses mask to display vibrant fluorescent pink */
.layer--fl-pink-2-feather,
.layer--fl-pink-2-cobalt {
    position: relative;
    background: transparent;
}

.layer--fl-pink-2-feather::before,
.layer--fl-pink-2-cobalt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FF6FFF;
    border-radius: 4px;
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--fl-pink-2-feather img,
.layer--fl-pink-2-cobalt img {
    opacity: 0;
}

/* Sample-specific FL Pink mask paths */
.layer--fl-pink-2-feather::before {
    -webkit-mask-image: url('../assets/feather-fl-pink/fl-pink.webp');
    mask-image: url('../assets/feather-fl-pink/fl-pink.webp');
}

.layer--fl-pink-2-cobalt::before {
    -webkit-mask-image: url('../assets/feather-fl-pink-cobalt/fl-pink.webp');
    mask-image: url('../assets/feather-fl-pink-cobalt/fl-pink.webp');
}

/* FL Pink 2 badge - bright pink indicator */
.layer--fl-pink-2-feather .layer__label::before,
.layer--fl-pink-2-cobalt .layer__label::before,
.layer--fl-pink-2 .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FF6FFF;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(255, 111, 255, 0.8);
}

/* ============================================================================
   CORVUS CORAX - Scodix Collaboration Layers
   12-layer embellished print with foils, metallic inks, and Scodix effects
   ============================================================================ */

/* Substrate: Hahnemuhle Cold Press Fine Art Paper */
.layer--substrate-hahnemuhle {
    background: #f5f3f0;
    /* Subtle paper texture */
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        );
    border-radius: 4px;
}

/* White Ink layers - shown as semi-transparent white */
.layer--white-ink-corvus {
    background: transparent;
}

.layer--white-ink-corvus img {
    /* White ink at full density - solid white */
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* Label badge for white ink */
.layer--white-ink-corvus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Sleeking Foils - Base style for Spot Gloss (transparent/glossy) */
.layer--foil-sleeking-corvus {
    background: transparent;
}

.layer--foil-sleeking-corvus::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Spot gloss - subtle transparent gloss effect */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.4) 25%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.4) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: spot-gloss-shimmer 4s ease-in-out infinite;
    -webkit-mask-image: url('../assets/corvus-corax/web/sleeking-foil.webp');
    mask-image: url('../assets/corvus-corax/web/sleeking-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@keyframes spot-gloss-shimmer {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

/* Label badge for spot gloss */
.layer--foil-sleeking-corvus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.8), rgba(255,255,255,0.3));
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Printable Silver Sleeking Foil - metallic silver chrome effect */
.layer--foil-silver::before {
    background: linear-gradient(
        120deg,
        #4a4a4a 0%,
        #7a7a7a 12%,
        #a8a8a8 24%,
        #c8c8c8 36%,
        #e8e8e8 44%,
        #ffffff 50%,
        #e8e8e8 56%,
        #c8c8c8 64%,
        #a8a8a8 76%,
        #7a7a7a 88%,
        #4a4a4a 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: silver-chrome-sweep 3s ease-in-out infinite;
    -webkit-mask-image: url('../assets/corvus-corax/web/sleeking-foil.webp');
    mask-image: url('../assets/corvus-corax/web/sleeking-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-sleeking-corvus img {
    opacity: 0;
}

@keyframes silver-chrome-sweep {
    0%, 100% {
        background-position: 100% 0;
    }
    50% {
        background-position: 0% 0;
    }
}

/* Label badge for silver foil - overrides spot gloss badge */
.layer--foil-silver .layer__label::before {
    background: linear-gradient(135deg, #c0c0c0, #ffffff, #c0c0c0);
    border: none;
}

/* Metallic Ink - Gradient with shimmer */
.layer--metallic-ink-corvus {
    background: transparent;
}

.layer--metallic-ink-corvus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #5a4a35 0%,
        #7a6a4f 15%,
        #9a8a6f 30%,
        #b8a888 42%,
        #d4c8a8 48%,
        #e8dcb8 50%,
        #d4c8a8 52%,
        #b8a888 58%,
        #9a8a6f 70%,
        #7a6a4f 85%,
        #5a4a35 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: metallic-shimmer 4s ease-in-out infinite;
    -webkit-mask-image: url('../assets/corvus-corax/web/metallic-ink.webp');
    mask-image: url('../assets/corvus-corax/web/metallic-ink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--metallic-ink-corvus img {
    opacity: 0;
}

@keyframes metallic-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Label badge for metallic ink */
.layer--metallic-ink-corvus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #7a6a4f, #c4b89a, #7a6a4f);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* CMYK Composite - No special effects, just the composite image */
.layer--cmyk-composite {
    background: transparent;
}

/* Scodix Foil + Matte Gold - Gold chrome effect */
.layer--scodix-foil-corvus {
    background: transparent;
}

.layer--scodix-foil-corvus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,
        #CD9B1D 15%,
        #FFD700 30%,
        #FFEC8B 45%,
        #FFF8DC 50%,
        #FFEC8B 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;
    -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;
}

.layer--scodix-foil-corvus > img {
    opacity: 0;
}

/* Label badge for Scodix gold foil */
.layer--scodix-foil-corvus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #CD9B1D, #FFD700, #CD9B1D);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Scodix Sense - Clear texture with subtle emboss effect */
.layer--scodix-sense-corvus {
    background: transparent;
}

.layer--scodix-sense-corvus::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Subtle clear gloss with slight shadow for depth */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.3) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.3) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: sense-shimmer 6s ease-in-out infinite;
    -webkit-mask-image: url('../assets/corvus-corax/web/scodix-sense.webp');
    mask-image: url('../assets/corvus-corax/web/scodix-sense.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Add subtle shadow for Scodix Sense depth */
.layer--scodix-sense-corvus::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    pointer-events: none;
    -webkit-mask-image: url('../assets/corvus-corax/web/scodix-sense.webp');
    mask-image: url('../assets/corvus-corax/web/scodix-sense.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--scodix-sense-corvus > img {
    opacity: 0;
}

@keyframes sense-shimmer {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

/* Label badge for Scodix Sense */
.layer--scodix-sense-corvus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Traditional Foil Stamp - Bright Gold */
.layer--foil-stamp-corvus {
    background: transparent;
}

.layer--foil-stamp-corvus::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Nudge right and up to align with artwork (translate doesn't stretch) */
    transform: translate(5px, -4px);
    /* Rich bright gold foil gradient */
    background: linear-gradient(
        135deg,
        #B8860B 0%,
        #FFD700 15%,
        #FFF8DC 30%,
        #FFD700 45%,
        #DAA520 55%,
        #FFD700 70%,
        #FFF8DC 85%,
        #B8860B 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-foil-shimmer 4s ease-in-out infinite;
    /* Use the foil stamp image as mask */
    -webkit-mask-image: url('../assets/corvus-corax/web/foil-stamp.webp');
    mask-image: url('../assets/corvus-corax/web/foil-stamp.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-stamp-corvus img {
    opacity: 0;
}

@keyframes gold-foil-shimmer {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

/* Label badge for foil stamp */
.layer--foil-stamp-corvus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #B8860B, #FFD700, #B8860B);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* =================================================================
   11. STANDARDIZED ASPECT RATIOS
   Based on physical print dimensions for maintainability
   Use data-aspect attribute on .layer-animation element
   ================================================================= */

/* NASA Art Collection: 7.125" × 10.375" (with 0.0625" bleeds) */
.layer-animation[data-aspect="nasa"] .layer,
.layer-animation[data-aspect="nasa"] .layer--substrate,
.layer-animation[data-aspect="nasa"] .layer--substrate-red,
.layer-animation[data-aspect="nasa"] .layer--substrate-uncoated,
.layer-animation[data-aspect="nasa"] .layer--silver-substrate,
.layer-animation[data-aspect="nasa"] .layer--holographic-substrate,
.layer-animation[data-aspect="nasa"] .layer--lamination,
.layer-animation[data-aspect="nasa"] .layer--uv-coating,
.layer-animation[data-aspect="nasa"] .layer--textured-emboss,
.layer-animation[data-aspect="nasa"] .layer--raised-ink {
    aspect-ratio: 57 / 83; /* 7.125" / 10.375" = 57/83 */
}

/* Feather Collection: 3.125" × 7.125" (with 0.0625" bleeds) */
.layer-animation[data-aspect="feather"] .layer,
.layer-animation[data-aspect="feather"] .layer--substrate,
.layer-animation[data-aspect="feather"] .layer--substrate-black,
.layer-animation[data-aspect="feather"] .layer--substrate-uncoated,
.layer-animation[data-aspect="feather"] .layer--substrate-cobalt,
.layer-animation[data-aspect="feather"] .layer--substrate-colored,
.layer-animation[data-aspect="feather"] .layer--substrate-silk {
    aspect-ratio: 25 / 57; /* 3.125" / 7.125" = 25/57 */
}

/* Corvus Corax / Scodix: 12.125" × 16.125" (with 0.0625" bleeds) */
.layer-animation[data-aspect="corvus"] .layer,
.layer-animation[data-aspect="corvus"] .layer--substrate,
.layer-animation[data-aspect="corvus"] .layer--substrate-hahnemuhle {
    aspect-ratio: 97 / 129;
}

/* Square / Circular: 1:1 (coasters, die-cuts) */
.layer-animation[data-aspect="square"] .layer,
.layer-animation[data-aspect="square"] .layer--substrate,
.layer-animation[data-aspect="square"] .layer--substrate-coaster {
    aspect-ratio: 1 / 1;
}

/* Monarchy: 12" × 15" (Scodix Collaboration) */
.layer-animation[data-aspect="monarchy"] .layer {
    aspect-ratio: 4 / 5; /* 12" / 15" */
}

/* Iridophore: 11" × 17" (Holographic Substrate) */
.layer-animation[data-aspect="iridophore"] .layer {
    aspect-ratio: 11 / 17;
}

/* Ravenstag: Printable Foil Over Black Laminate - 12" × 18" */
.layer-animation[data-aspect="ravenstag"] .layer,
.layer-animation[data-aspect="ravenstag"] .layer--substrate,
.layer-animation[data-aspect="ravenstag"] .layer--laminate-black {
    aspect-ratio: 2 / 3;
}

/* Business Card: 3.5" × 2" (with 0.0625" bleeds = 3.625" × 2.125") */
/* LANDSCAPE orientation - wider than tall */
.layer-animation[data-aspect="business-card"] .layer,
.layer-animation[data-aspect="business-card"] .layer--substrate {
    aspect-ratio: 7 / 4; /* 3.5" / 2" = 7/4 = 1.75 */
}

/* Greeting Card Flat: 8.5" × 5.5" (LANDSCAPE - unfolded) */
.layer-animation[data-aspect="greeting-card-flat"] .layer,
.layer-animation[data-aspect="greeting-card-flat"] .layer--substrate {
    aspect-ratio: 17 / 11; /* 8.5" / 5.5" = 17/11 = ~1.545 */
}

/* =================================================================
   11b. STANDARDIZED LAYER WIDTHS PER ASPECT RATIO
   Fluid scaling with clamp() - narrower bounds for taller aspect ratios
   ================================================================= */

/* NASA Art - moderate portrait (~0.69 ratio) */
.layer-animation[data-aspect="nasa"] {
    --layer-width: clamp(220px, 24vw, 380px);
}

.demo-wrapper:hover .layer-animation[data-aspect="nasa"] {
    --layer-width: clamp(280px, 30vw, 450px);
}

/* Feather - tall portrait (~0.44 ratio), narrow bounds */
.layer-animation[data-aspect="feather"] {
    --layer-width: clamp(110px, 14vw, 220px);
}

.demo-wrapper:hover .layer-animation[data-aspect="feather"] {
    --layer-width: clamp(140px, 18vw, 280px);
}

/* Corvus - moderate portrait, standard width */
.layer-animation[data-aspect="corvus"] {
    --layer-width: clamp(200px, 22vw, 340px);
}

/* Square - 1:1, wider allowed */
.layer-animation[data-aspect="square"] {
    --layer-width: clamp(200px, 22vw, 340px);
}

.demo-wrapper:hover .layer-animation[data-aspect="square"] {
    --layer-width: clamp(260px, 28vw, 400px);
}

/* Monarchy - moderate portrait, standard width */
.layer-animation[data-aspect="monarchy"] {
    --layer-width: clamp(200px, 22vw, 340px);
}

.demo-wrapper:hover .layer-animation[data-aspect="monarchy"] {
    --layer-width: clamp(260px, 28vw, 400px);
}

/* Iridophore - tall portrait (11x17) */
.layer-animation[data-aspect="iridophore"] {
    --layer-width: clamp(160px, 17vw, 280px);
}

.demo-wrapper:hover .layer-animation[data-aspect="iridophore"] {
    --layer-width: clamp(200px, 22vw, 340px);
}

/* Ravenstag - tall portrait (12x18 / 2:3) */
.layer-animation[data-aspect="ravenstag"] {
    --layer-width: clamp(170px, 18vw, 300px);
}

.demo-wrapper:hover .layer-animation[data-aspect="ravenstag"] {
    --layer-width: clamp(220px, 24vw, 360px);
}

/* Dust - very tall portrait (9.75x17 / ratio 0.57) */
.layer-animation[data-aspect="dust"] {
    --layer-width: clamp(140px, 15vw, 240px);
}

.demo-wrapper:hover .layer-animation[data-aspect="dust"] {
    --layer-width: clamp(180px, 19vw, 300px);
}

/* Business Card - landscape (3.5x2 / 7:4), wider allowed */
.layer-animation[data-aspect="business-card"] {
    --layer-width: clamp(200px, 22vw, 340px);
}

.demo-wrapper:hover .layer-animation[data-aspect="business-card"] {
    --layer-width: clamp(260px, 28vw, 420px);
}

/* Greeting Card Flat - landscape (8.5x5.5 / 17:11), wider allowed */
.layer-animation[data-aspect="greeting-card-flat"] {
    --layer-width: clamp(260px, 28vw, 420px);
}

.demo-wrapper:hover .layer-animation[data-aspect="greeting-card-flat"] {
    --layer-width: clamp(320px, 34vw, 500px);
}

/* Holographic Substrate Label Badge */
.layer--holographic-substrate .layer__label::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #FF6B9D 0%, #48DBFB 50%, #FECA57 100%);
    background-size: 200% 200%;
    animation: holographic-badge 2s linear infinite;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes holographic-badge {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =================================================================
   11c. RESPONSIVE OVERRIDES FOR STANDARDIZED ASPECTS
   Note: clamp() in section 11b handles fluid scaling across all viewports.
   Breakpoint overrides removed - no longer needed.
   ================================================================= */

/* =================================================================
   12. THE KISS - 15-Layer Foil Build
   12" × 18" poster with multiple metallic foils and UV reactive ink
   ================================================================= */

/* The Kiss aspect ratio: 12" × 18" = 2:3 */
.layer-animation[data-aspect="the-kiss"] .layer {
    aspect-ratio: 2 / 3;
}

/* The Kiss layer width - tall portrait (~0.67 ratio) */
.layer-animation[data-aspect="the-kiss"] {
    --layer-width: clamp(140px, 18vw, 280px);
}

.demo-wrapper:hover .layer-animation[data-aspect="the-kiss"] {
    --layer-width: clamp(180px, 22vw, 340px);
}

/* Sapphire Coating - Clear adhesion primer layer (CSS-only) */
.layer--sapphire-coating {
    background: rgba(100, 149, 237, 0.15); /* Subtle cornflower blue tint */
    backdrop-filter: blur(0.3px) brightness(1.02);
    -webkit-backdrop-filter: blur(0.3px) brightness(1.02);
    border: 1px dashed rgba(100, 149, 237, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
                inset 0 0 30px rgba(100, 149, 237, 0.1);
    aspect-ratio: 2 / 3;
}

/* Sapphire Coating label badge */
.layer--sapphire-coating .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #6495ED, #87CEEB, #6495ED);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Printable Laminate - The Kiss (CSS-only clear protective layer) */
.layer--printable-laminate-kiss {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(0.4px) brightness(1.03);
    -webkit-backdrop-filter: blur(0.4px) brightness(1.03);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
                inset 0 0 25px rgba(255, 255, 255, 0.15);
    aspect-ratio: 2 / 3;
}

/* Printable Laminate label badge */
.layer--printable-laminate-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* UV Reactive Ink - The Kiss (invisible until expanded with glow effect) */
.layer--uv-reactive-kiss {
    background: transparent;
    opacity: 0;
    transition: transform var(--layer-transition),
                opacity var(--layer-transition),
                box-shadow var(--layer-transition),
                filter var(--layer-transition);
}

/* Show UV layer with glow when container is expanded */
.layer-animation.is-expanded .layer--uv-reactive-kiss {
    opacity: 0.85;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.9))
            drop-shadow(0 0 20px rgba(138, 43, 226, 0.7))
            drop-shadow(0 0 30px rgba(255, 0, 255, 0.5));
}

/* UV Reactive Ink label badge */
.layer--uv-reactive-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #00FFFF, #8A2BE2, #FF00FF);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.8);
}

/* -----------------------------------------------------------------
   THE KISS FOIL LAYERS
   Animated chrome sweep effects for all metallic foils
   ----------------------------------------------------------------- */

/* Printable Gold Foil - The Kiss */
.layer--foil-gold-kiss {
    background: transparent;
}

.layer--foil-gold-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,
        #CD9B1D 15%,
        #FFD700 30%,
        #FFEC8B 45%,
        #FFF8DC 50%,
        #FFEC8B 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;
}

/* First pass gold foil mask */
.layer--foil-gold-kiss-1::before {
    -webkit-mask-image: url('../assets/the-kiss/gold-1.webp');
    mask-image: url('../assets/the-kiss/gold-1.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Second pass gold foil mask */
.layer--foil-gold-kiss-2::before {
    -webkit-mask-image: url('../assets/the-kiss/gold-2.webp');
    mask-image: url('../assets/the-kiss/gold-2.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-gold-kiss img {
    opacity: 0;
}

/* Gold foil label badge */
.layer--foil-gold-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #CD9B1D, #FFD700, #CD9B1D);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Printable Silver Foil - The Kiss */
.layer--foil-silver-kiss {
    background: transparent;
}

.layer--foil-silver-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #4a4a4a 0%,
        #7a7a7a 12%,
        #a8a8a8 24%,
        #c8c8c8 36%,
        #e8e8e8 44%,
        #ffffff 50%,
        #e8e8e8 56%,
        #c8c8c8 64%,
        #a8a8a8 76%,
        #7a7a7a 88%,
        #4a4a4a 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
}

/* First pass silver foil mask */
.layer--foil-silver-kiss-1::before {
    -webkit-mask-image: url('../assets/the-kiss/silver-1.webp');
    mask-image: url('../assets/the-kiss/silver-1.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Second pass silver foil mask */
.layer--foil-silver-kiss-2::before {
    -webkit-mask-image: url('../assets/the-kiss/silver-2.webp');
    mask-image: url('../assets/the-kiss/silver-2.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-silver-kiss img {
    opacity: 0;
}

/* Silver foil label badge */
.layer--foil-silver-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #a8a8a8, #ffffff, #a8a8a8);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Rose Gold Foil - The Kiss */
.layer--foil-rose-gold-kiss {
    background: transparent;
}

.layer--foil-rose-gold-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B5A5A 0%,
        #B76E79 15%,
        #E8B4B4 30%,
        #F4D4D4 45%,
        #FFE8E8 50%,
        #F4D4D4 55%,
        #E8B4B4 70%,
        #B76E79 85%,
        #8B5A5A 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
}

/* First pass rose gold foil mask */
.layer--foil-rose-gold-kiss-1::before {
    -webkit-mask-image: url('../assets/the-kiss/rose-gold-1.webp');
    mask-image: url('../assets/the-kiss/rose-gold-1.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Second pass rose gold foil mask */
.layer--foil-rose-gold-kiss-2::before {
    -webkit-mask-image: url('../assets/the-kiss/rose-gold-2.webp');
    mask-image: url('../assets/the-kiss/rose-gold-2.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-rose-gold-kiss img {
    opacity: 0;
}

/* Rose gold foil label badge */
.layer--foil-rose-gold-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #B76E79, #E8B4B4, #B76E79);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Matte Gold Foil - The Kiss (softer animation) */
.layer--foil-matte-gold-kiss {
    background: transparent;
}

.layer--foil-matte-gold-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #9A7B4F 0%,
        #B8956A 20%,
        #D4B896 40%,
        #C8A878 50%,
        #D4B896 60%,
        #B8956A 80%,
        #9A7B4F 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: metallic-shimmer 5s ease-in-out infinite;
    -webkit-mask-image: url('../assets/the-kiss/matte-gold.webp');
    mask-image: url('../assets/the-kiss/matte-gold.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-matte-gold-kiss img {
    opacity: 0;
}

/* Matte gold foil label badge */
.layer--foil-matte-gold-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #9A7B4F, #C8A878, #9A7B4F);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Matte Silver Foil - The Kiss (softer animation) */
.layer--foil-matte-silver-kiss {
    background: transparent;
}

.layer--foil-matte-silver-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #6B6B6B 0%,
        #8A8A8A 20%,
        #A8A8A8 40%,
        #B8B8B8 50%,
        #A8A8A8 60%,
        #8A8A8A 80%,
        #6B6B6B 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: metallic-shimmer 5s ease-in-out infinite;
    -webkit-mask-image: url('../assets/the-kiss/matte-silver.webp');
    mask-image: url('../assets/the-kiss/matte-silver.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-matte-silver-kiss img {
    opacity: 0;
}

/* Matte silver foil label badge */
.layer--foil-matte-silver-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #6B6B6B, #A8A8A8, #6B6B6B);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Copper Foil - The Kiss */
.layer--foil-copper-kiss {
    background: transparent;
}

.layer--foil-copper-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #6D4C41 0%,
        #8D6E63 15%,
        #B87333 30%,
        #DA8A67 45%,
        #EDCBB1 50%,
        #DA8A67 55%,
        #B87333 70%,
        #8D6E63 85%,
        #6D4C41 100%
    );
    background-size: 300% 100%;
    border-radius: 4px;
    pointer-events: none;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    -webkit-mask-image: url('../assets/the-kiss/copper.webp');
    mask-image: url('../assets/the-kiss/copper.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-copper-kiss img {
    opacity: 0;
}

/* Copper foil label badge */
.layer--foil-copper-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #8D6E63, #B87333, #8D6E63);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Black Spot Gloss - The Kiss */
.layer--foil-black-gloss-kiss {
    background: transparent;
}

.layer--foil-black-gloss-kiss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #0a0a0a 0%,
        #1a1a1a 20%,
        #2a2a2a 35%,
        #3a3a3a 45%,
        #4a4a4a 50%,
        #3a3a3a 55%,
        #2a2a2a 65%,
        #1a1a1a 80%,
        #0a0a0a 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: spot-gloss-shimmer 4s ease-in-out infinite;
    -webkit-mask-image: url('../assets/the-kiss/black-gloss.webp');
    mask-image: url('../assets/the-kiss/black-gloss.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-black-gloss-kiss img {
    opacity: 0;
}

/* Black spot gloss label badge */
.layer--foil-black-gloss-kiss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #1a1a1a, #3a3a3a, #1a1a1a);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* -----------------------------------------------------------------
   EMBOSSED FOIL LAYERS - Feather Foil Emboss Sample
   Traditional foil stamping with raised emboss effect
   ----------------------------------------------------------------- */

/* Blue Foil Emboss - animated chrome sweep */
.layer--foil-blue-emboss {
    background: transparent;
    box-shadow: none;
}

.layer--foil-blue-emboss::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #0044AA 0%,
        #0066DD 15%,
        #0088FF 30%,
        #33AAFF 45%,
        #66CCFF 50%,
        #33AAFF 55%,
        #0088FF 70%,
        #0066DD 85%,
        #0044AA 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--foil-blue-emboss img {
    opacity: 0;
}

/* Emboss shading overlay - raised relief effect
   Uses 135-degree lighting (upper-left) to create prominent
   highlight/shadow depth on the foil surface */
.layer--foil-blue-emboss::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.75;
    pointer-events: none;
    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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Blue foil emboss label badge */
.layer--foil-blue-emboss .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #0066DD, #66CCFF, #0066DD);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Copper Emboss Die - production visualization layer */
.layer--emboss-die-copper {
    background: transparent;
    box-shadow: none;
}

.layer--emboss-die-copper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #6D4C41 0%,
        #8D6E63 15%,
        #B87333 30%,
        #DA8A67 45%,
        #EDCBB1 50%,
        #DA8A67 55%,
        #B87333 70%,
        #8D6E63 85%,
        #6D4C41 100%
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 4s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--emboss-die-copper img {
    opacity: 0;
}

/* Copper emboss die label badge */
.layer--emboss-die-copper .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #8D6E63, #B87333, #8D6E63);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* =================================================================
   13. ROBOT DIE-CUT ASSEMBLY
   Per-component die-cut masking with holographic rainbow foil
   ================================================================= */

/* Robot piece layer container */
.robot-piece--masked {
    position: relative;
}

.robot-piece__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.robot-piece__layer img {
    width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------------------------------------------
   ROBOT DIE-CUT MASKS
   Alpha masks for each robot component
   ----------------------------------------------------------------- */

/* Body die-cut mask */
.robot-piece--body .robot-piece__layer {
    -webkit-mask-image: url('../assets/robot/body-mask-alpha.png');
    mask-image: url('../assets/robot/body-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Left arm die-cut mask */
.robot-piece--left-arm .robot-piece__layer {
    -webkit-mask-image: url('../assets/robot/left-arm-mask-alpha.png');
    mask-image: url('../assets/robot/left-arm-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Right arm die-cut mask */
.robot-piece--right-arm .robot-piece__layer {
    -webkit-mask-image: url('../assets/robot/right-arm-mask-alpha.png');
    mask-image: url('../assets/robot/right-arm-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Tread die-cut mask (used for both left and right treads) */
.robot-piece--left-tread .robot-piece__layer,
.robot-piece--right-tread .robot-piece__layer {
    -webkit-mask-image: url('../assets/robot/tread-mask-alpha.png');
    mask-image: url('../assets/robot/tread-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Envelope die-cut mask */
.robot-piece--envelope .robot-piece__layer {
    -webkit-mask-image: url('../assets/robot/envelope-mask-alpha.png');
    mask-image: url('../assets/robot/envelope-mask-alpha.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* -----------------------------------------------------------------
   ROBOT WHITE SUBSTRATE LAYER
   Base white paper visible through die-cut shape
   ----------------------------------------------------------------- */

.robot-piece__layer--substrate {
    background: #fefefe;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
}

/* -----------------------------------------------------------------
   ROBOT RAINBOW HOLOGRAPHIC FOIL
   Iridescent effect masked to foil artwork shape
   ----------------------------------------------------------------- */

.robot-piece__layer--holo-foil {
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(255, 107, 157, 0.8) 0%, transparent 60%),
        radial-gradient(ellipse 70% 90% at 85% 75%, rgba(84, 160, 255, 0.8) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(72, 219, 251, 0.7) 0%, transparent 65%),
        radial-gradient(ellipse 60% 80% at 25% 80%, rgba(254, 202, 87, 0.8) 0%, transparent 55%),
        radial-gradient(ellipse 75% 65% at 75% 20%, rgba(95, 39, 205, 0.8) 0%, transparent 55%),
        linear-gradient(135deg, #88ddff 0%, #ff6b9d 50%, #feca57 100%);
    background-size: 200% 200%;
    animation: holographic-wave 6s linear infinite;
    pointer-events: none;
}

/* Mask holographic foil to foil artwork shape for each component */

/* Body holographic foil mask */
.robot-piece--body .robot-piece__layer--holo-foil {
    -webkit-mask-image: url('../assets/robot/body-foil.webp');
    mask-image: url('../assets/robot/body-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Left arm holographic foil mask (foil-only piece) */
.robot-piece--left-arm .robot-piece__layer--holo-foil {
    -webkit-mask-image: url('../assets/robot/left-arm-foil.webp');
    mask-image: url('../assets/robot/left-arm-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Tread holographic foil mask */
.robot-piece--left-tread .robot-piece__layer--holo-foil,
.robot-piece--right-tread .robot-piece__layer--holo-foil {
    -webkit-mask-image: url('../assets/robot/tread-foil.webp');
    mask-image: url('../assets/robot/tread-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Envelope holographic foil mask */
.robot-piece--envelope .robot-piece__layer--holo-foil {
    -webkit-mask-image: url('../assets/robot/envelope-foil.webp');
    mask-image: url('../assets/robot/envelope-foil.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* =================================================================
   VENUS - Spot Gloss Digital Foil over Printable Soft Touch Laminate
   Sample #13 | Explorer Silk 130# Cover | 7x10.25"
   ================================================================= */

/* Printable Soft Touch Laminate - Venus
   Subtle matte texture effect with soft diffusion */
.layer--soft-touch-laminate-venus {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(0.6px) brightness(1.02) saturate(0.98);
    -webkit-backdrop-filter: blur(0.6px) brightness(1.02) saturate(0.98);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
                inset 0 0 30px rgba(0, 0, 0, 0.04);
    /* Subtle matte texture pattern */
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.01) 1px,
            rgba(0, 0, 0, 0.01) 2px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.01) 1px,
            rgba(0, 0, 0, 0.01) 2px
        );
    aspect-ratio: 57 / 83; /* NASA poster 7x10.25" ratio */
}

/* Soft Touch Laminate label badge */
.layer--soft-touch-laminate-venus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(200, 200, 200, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* White Ink label badge - Venus */
.layer--white-ink-venus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Spot Gloss label badge - Venus */
.layer--spot-gloss-venus .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9),
        rgba(200, 200, 200, 0.9),
        rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* =================================================================
   TRADITIONAL FOIL ENVELOPE - A7 (5.25" x 7.25")
   3 layers: Envelope substrate, CMYK black ink, Gold foil stamp
   ================================================================= */

/* Envelope aspect ratio - A7 envelope ~1.38:1 (2175x1575px source) */
.layer-animation[data-aspect="envelope"] .layer,
.layer-animation[data-aspect="envelope"] .layer--substrate-envelope {
    aspect-ratio: 2175 / 1575;
}

/* Envelope layer sizing */
.layer-animation[data-technique="trad-foil-envelope"] {
    --layer-width: 320px;
}

.demo-wrapper:hover .layer-animation[data-technique="trad-foil-envelope"] {
    --layer-width: 400px;
}

/* Envelope substrate - warm cream envelope paper with subtle texture */
.layer--substrate-envelope {
    background-color: #f0ebe0; /* Warm cream envelope color */
    /* Subtle paper texture using SVG noise pattern */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15),
                inset 0 0 25px rgba(0, 0, 0, 0.03);
}

/* CMYK Black ink layer - standard image display */
.layer--cmyk-envelope {
    background: transparent;
}

/* Gold Foil for Envelope - chrome sweep with mask */
.layer--foil-gold-envelope {
    position: relative;
    background: transparent;
}

.layer--foil-gold-envelope::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        #8B6914 0%,       /* Deep gold shadow */
        #CD9B1D 15%,      /* Dark gold */
        #FFD700 30%,      /* Pure gold */
        #FFEC8B 45%,      /* Light gold highlight */
        #FFF8DC 50%,      /* Bright flash */
        #FFEC8B 55%,      /* Light gold highlight */
        #FFD700 70%,      /* Pure gold */
        #CD9B1D 85%,      /* Dark gold */
        #8B6914 100%      /* Deep gold shadow */
    );
    background-size: 300% 100%;
    animation: gold-chrome-sweep 3s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    -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;
}

.layer--foil-gold-envelope img {
    opacity: 0; /* Hide img, use ::before for chrome effect */
}

/* Gold Foil label badge - Envelope */
.layer--foil-gold-envelope .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #CD9B1D, #FFD700, #CD9B1D);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Responsive sizing for envelope */
@media (max-width: 768px) {
    .layer-animation[data-technique="trad-foil-envelope"] {
        --layer-width: 200px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .layer-animation[data-technique="trad-foil-envelope"] {
        --layer-width: 260px;
    }
}

@media (min-width: 1200px) {
    .layer-animation[data-technique="trad-foil-envelope"] {
        --layer-width: 360px;
    }
    .demo-wrapper:hover .layer-animation[data-technique="trad-foil-envelope"] {
        --layer-width: 440px;
    }
}

/* ==========================================================================
   SCRATCH-OFF FEATHER (Feather #12)
   Layer stack: Substrate > Metallic > CMYK Underprint > UV Coating >
                EZ Release > Black Noise > White Ink > CMYK
   ========================================================================== */

/* Metallic Ink for scratch-off feather - uses scratch-off specific mask */
.layer--metallic-ink-scratch-off {
    position: relative;
    background: transparent;
}

.layer--metallic-ink-scratch-off::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #6B6B6B 0%,
        #8A8A8A 15%,
        #A8A8A8 30%,
        #C0C0C0 45%,
        #D0D0D0 50%,
        #C0C0C0 55%,
        #A8A8A8 70%,
        #8A8A8A 85%,
        #6B6B6B 100%
    );
    background-size: 200% 200%;
    border-radius: 4px;
    pointer-events: none;
    animation: metallic-shimmer 5s ease-in-out infinite;
    opacity: 0.85;
    -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%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.layer--metallic-ink-scratch-off img {
    opacity: 0; /* Hide img, use ::before for metallic effect */
}

/* Coated substrate - smooth glossy paper for scratch-off */
.layer--substrate-coated {
    background: #e8e8e8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Satin Aqueous UV Coating - protective clear layer */
.layer--uv-coating-satin {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(0.3px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* EZ Release Ink - light blue scratch-off layer (feather-shaped) */
.layer--ez-release-ink {
    background: transparent;
}

/* EZ Release label badge */
.layer--ez-release-ink .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #7fddee;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Black noise pattern - concealment layer using grunge tile, masked to feather shape */
/* Use ::after for the pattern so the mask doesn't hide the label */
.layer--black-noise-pattern {
    background: transparent;
}

.layer--black-noise-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: url('../assets/feather-scratch-off/black-noise-tile.webp');
    background-size: 150px 150px;
    background-repeat: repeat;
    -webkit-mask-image: url('../assets/feather-scratch-off/white-ink.webp');
    mask-image: url('../assets/feather-scratch-off/white-ink.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

/* Black noise label badge */
.layer--black-noise-pattern .layer__label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Feather aspect ratio support for scratch-off layers */
.layer-animation[data-aspect="feather"] .layer--substrate-coated,
.layer-animation[data-aspect="feather"] .layer--uv-coating-satin,
.layer-animation[data-aspect="feather"] .layer--ez-release-ink,
.layer-animation[data-aspect="feather"] .layer--black-noise-pattern {
    aspect-ratio: 938 / 2138;
}