/* Leather cardholder face (coded: CSS body + SVG skyline/stitch).
   Live assets are never photo PNGs of the face/perimeter/skyline.
   Layer stack, back to front:
   body -> grain -> shade -> skyline deboss -> pocket slot/lip ->
   edge burnish -> U-stitch SVG. */

.wallet-face {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.leather {
    position: absolute;
    inset: 0;
    border-radius: 1.55% / 2.2%;
    overflow: hidden;
    background: #c5824d;
    /* depth shadow lives on .wallet (scene), not the face */
    isolation: isolate;
}

.leather__edge {
    position: absolute;
    inset: 0;
    border-radius: 1.55% / 2.2%;
    pointer-events: none;
    z-index: 6;
    box-shadow:
        inset 0 0 0 1px rgba(110, 62, 28, 0.34),
        inset 0 1.5px 2px rgba(88, 44, 14, 0.18),
        inset 0 -1px 0 rgba(255, 220, 180, 0.22),
        inset 0 -2px 2px rgba(96, 50, 18, 0.14),
        inset 1px 0 2px rgba(110, 60, 25, 0.12),
        inset -1px 0 2px rgba(110, 60, 25, 0.12);
}

/* Panels: back strip (0-11.8%), rolled pocket edge band, front pocket below */
.leather__body {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 16% 20% at 0% 0%,
            rgba(96, 50, 18, 0.18), transparent 100%),
        radial-gradient(ellipse 16% 20% at 100% 0%,
            rgba(96, 50, 18, 0.18), transparent 100%),
        linear-gradient(90deg,
            rgba(105, 55, 20, 0.1) 0%, transparent 2.5%,
            transparent 97.5%, rgba(105, 55, 20, 0.1) 100%),
        radial-gradient(ellipse 130% 100% at 50% 20%,
            rgba(255, 205, 155, 0.1), transparent 68%),
        linear-gradient(180deg,
            #cb9166 0%,
            #c98c60 11.8%,
            #cb8d55 12.0%,
            #c98750 14.7%,
            #c98149 16%,
            #cb8652 55%,
            #c68347 88%,
            #bf7c44 100%);
}

/* Soft roll on the back panel strip (ref is flat-lit, not glossy) */
.leather__body::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 11.8%;
    background:
        linear-gradient(180deg,
            rgba(120, 65, 30, 0.06) 0%,
            transparent 55%,
            rgba(120, 65, 30, 0.05) 100%);
}

/* Card slot ~15% from top (ref dark band ~y 56–65 on 415 crop). */
.leather__slot {
    position: absolute;
    left: 0;
    right: 0;
    top: 13.2%;
    height: 6px;
    z-index: 3;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(96, 50, 18, 0.14) 40%,
        rgba(96, 50, 18, 0.1) 70%,
        transparent 100%);
}

.leather__slot-lip {
    position: absolute;
    left: 0;
    right: 0;
    top: 14.8%;
    height: 10px;
    z-index: 3;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(90, 45, 15, 0.12) 22%,
        rgba(74, 36, 12, 0.32) 52%,
        rgba(74, 36, 12, 0.2) 70%,
        rgba(110, 56, 22, 0.08) 86%,
        transparent 100%);
}

.leather__slot-shade {
    position: absolute;
    left: 0;
    right: 0;
    top: 16.8%;
    height: 4.5%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(96, 50, 20, 0.1) 0%,
        transparent 100%);
}

.leather__pocket {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.leather__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.28;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.25  0 0 0 0 0.11  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.14' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.7  0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l2)'/%3E%3C/svg%3E");
    background-size: 130px 130px, 320px 320px;
    mix-blend-mode: multiply;
}

.leather__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(ellipse 140% 120% at 50% 45%,
            transparent 58%, rgba(100, 52, 20, 0.16) 100%);
}

.leather__skyline {
    position: absolute;
    left: 3%;
    top: 26.5%;
    width: 94%;
    height: 65%;
    object-fit: fill;
    z-index: 3;
    pointer-events: none;
    opacity: 0.54;
}

.leather__stitch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 8;
    pointer-events: none;
    opacity: 1;
    display: block;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}