/***NEW SVG SYSTEM ***/

/* =========================
   SVG EMBOSS ENGINE — FINAL STABLE
========================= */

/* BASE */
.altanz-preview-overlay {
    position: relative;
    overflow: hidden;
}



/* 🔥 LIGHTING OVERLAY (ADD HERE) */
.altanz-preview-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 25% 20%,
            rgba(255,255,255,0.10),
            transparent 55%),
        radial-gradient(circle at 75% 80%,
            rgba(0,0,0,0.08),
            transparent 65%
        );

    pointer-events: none;
    z-index: 5;

    mix-blend-mode: soft-light;
}

/* =========================
   🔥 FOIL REFLECTION LAYER (FINAL)
========================= */

.altanz-foil-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: 6;


    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.15) 45%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0.15) 55%,
        transparent 70%
    );
    
    background-size: 200% 200%;

    /* 🔥 THIS MAKES IT MOVE */
    
    background-position:
    calc(50% + (var(--x, 50%) - 50%) * 0.4)
    calc(50% + (var(--y, 50%) - 50%) * 0.4);

    opacity: 0.1;
    mix-blend-mode: screen;
    
    filter: blur(6px);

    transition: opacity 0.3s ease;
    transition: background-position 0.25s ease-out;
}


/* GOLD STRONG SHINE */
.altanz-preview-svg.gold ~ .altanz-foil-overlay {
    opacity: 1;
}

/* SILVER SOFT SHINE */
.altanz-preview-svg.silver ~ .altanz-foil-overlay {
    opacity: 0.6;
}


/* =========================
   ✨ MICRO SHIMMER (LUXURY)
========================= */

.altanz-foil-overlay::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent 40%,
        rgba(255,255,255,0.15) 50%,
        transparent 60%
    );

    opacity: 0.4;

    animation: altanzShimmer 6s infinite linear;

    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes altanzShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}











/* =========================
   PREVIEW SVG
========================= */

.altanz-preview-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* =========================
   TYPOGRAPHY
========================= */
#altanz-svg-text,
#altanz-svg-text-shadow,
#altanz-svg-text-core {

    font-family: "Times New Roman", serif;
    font-size: 52px;
    letter-spacing: 1px;
    font-weight: 500;
}


/* =========================
   GOLD (FIXED)
========================= */
.altanz-preview-svg.gold #altanz-svg-text {

    fill: url(#goldGradient);

    filter:
        contrast(1.22)
        brightness(1.06)
        saturate(1.25);

    opacity: 0.98;

    /* 🔥 REAL FOIL EDGE REFLECTION */
    text-shadow:
        0.4px 0.4px 0.8px rgba(0,0,0,0.25),   /* depth */
        -0.4px -0.4px 0.6px rgba(255,255,255,0.45); /* highlight */

    /* 🔥 MICRO PRESS INTO LEATHER */
    transform: translateY(0.2px);

    mix-blend-mode: normal;
}


/* =========================
   SILVER
========================= */
.altanz-preview-svg.silver #altanz-svg-text {

    fill: url(#silverGradient);

    filter:
        contrast(1.18)
        brightness(1.1)
        saturate(0.92);

    opacity: 0.96;

    text-shadow:
        0.4px 0.4px 0.8px rgba(0,0,0,0.2),
        -0.4px -0.4px 0.6px rgba(255,255,255,0.5);

    /* 🔥 MICRO PRESS INTO LEATHER */
    transform: translateY(0.2px);

    mix-blend-mode: normal;
}




/* =========================
   🔥 BLIND EMBOSS (FINAL TUNED)
========================= */

/* highlight edge (top-left light catch) */
.altanz-preview-svg.blind #altanz-svg-text-shadow {

    fill: rgba(255,255,255,0.12); /* 🔥 slightly stronger */

    transform: translate(-0.6px, -0.6px);

    mix-blend-mode: soft-light; /* 🔥 CHANGE from overlay */

    filter: blur(0.25px);

    opacity: 0.55; /* 🔥 reduced but cleaner */
}


/* depth + pressure */
.altanz-preview-svg.blind #altanz-svg-text {

    fill: rgba(0,0,0,0.48); /* 🔥 reduced from 0.6 */

    transform: translateY(0.35px);

    filter:
        url(#realEmboss)
        contrast(1.12)
        brightness(0.95)
        saturate(0.9);

    mix-blend-mode: multiply;

    opacity: 0.88; /* 🔥 softer */

    pointer-events: none;

    /* 🔥 refined depth */
    text-shadow:
        0 0.6px 0.6px rgba(255,255,255,0.06),
        0 -0.8px 1.2px rgba(0,0,0,0.28);
}

.altanz-preview-overlay[data-leather="grain"] .altanz-preview-svg.blind #altanz-svg-text {
    transform: translateY(0.5px);
}



/* =========================
   🔥 EDGE COMPRESSION RING (NEW)
========================= */

.altanz-preview-svg.blind::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at var(--x,50%) var(--y,50%),
            transparent 0%,
            transparent 35%,
            rgba(0,0,0,0.12) 40%,
            rgba(0,0,0,0.18) 48%,
            rgba(0,0,0,0.08) 55%,
            transparent 75%
        );

    mix-blend-mode: multiply;

    pointer-events: none;
    z-index: 2;

    opacity: 0.35;
}

/* =========================
   🔥 PRESSURE EDGE LIGHT RESPONSE
========================= */

.altanz-preview-svg.blind::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at var(--x,50%) var(--y,50%),
            rgba(255,255,255,0.04),
            transparent 55%
        );

    mix-blend-mode: soft-light;
    pointer-events: none;

    opacity: 0.4;
}





/* =========================
   MICRO TEXTURE (KEEP)
========================= */
.altanz-emboss-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;

    background-image:
        radial-gradient(circle at var(--x,50%) var(--y,50%),
            rgba(255,255,255,0.05),
            transparent 60%),
        radial-gradient(circle at calc(var(--x,50%) + 20px) calc(var(--y,50%) + 20px),
            rgba(0,0,0,0.06),
            transparent 70%);

    mix-blend-mode: overlay;

    opacity: 0.18;
    filter: blur(0.6px);
}


/* hide highlight layer when not blind */
.altanz-preview-svg:not(.blind) #altanz-svg-text-shadow {
    display: none;
}


/* =========================
   🔥 DISPLACEMENT ENGINE (TUNED)
========================= */
.altanz-displacement {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;

    background:
        radial-gradient(circle at var(--x, 50%) var(--y, 50%),
            rgba(0,0,0,0.22) 0%,
            rgba(0,0,0,0.14) 15%,
            rgba(0,0,0,0.08) 30%,
            rgba(0,0,0,0.04) 45%,
            transparent 70%
        );
    

    mix-blend-mode: multiply;

    opacity: 0;
    transition: opacity 0.2s ease;
}

/* activate */
.altanz-preview-svg.blind ~ .altanz-displacement {
    opacity: 0.55;
}



/* =========================
   🔥 INNER DEPRESSION CORE
========================= */
.altanz-preview-svg.blind #altanz-svg-text-core {

    fill: rgba(0,0,0,0.65); /* 🔥 stronger center */

    filter:
        blur(1.2px)      /* 🔥 sharper edge */
        contrast(1.7)
        brightness(0.9);

    mix-blend-mode: multiply;

    opacity: calc(var(--emboss-depth) + 0.15); /* 🔥 deeper */
}


.altanz-preview-svg:not(.blind) #altanz-svg-text-core {
    display: none;
}



/* =========================
   🔥 MICRO PRESS RESPONSE
========================= */

.altanz-preview-overlay[data-leather="grain"] .altanz-preview-svg.blind {
    transform: translateY(0.3px);
}

.altanz-preview-overlay[data-leather="soft"] .altanz-preview-svg.blind {
    transform: translateY(0.15px);
}



/* =========================
   🔥 INNER PRESS EDGE (NEW)
========================= */

.altanz-preview-svg.blind #altanz-svg-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;

    color: transparent;

    text-shadow:
        0 0 0 rgba(0,0,0,0.6),
        0.6px 0.6px 0 rgba(0,0,0,0.25),
        -0.6px -0.6px 0 rgba(255,255,255,0.05);

    mix-blend-mode: multiply;

    pointer-events: none;
}


/*********New********/


/* ===============================
✨ LUXURY TEXT TRANSITION
=============================== */

#altanz-svg-text,
#altanz-svg-text-shadow,
#altanz-svg-text-core {
    transition: 
        opacity 0.12s ease-out,
        filter 0.18s ease-out,
        transform 0.12s ease-out;
}



/* ===============================
🧠 EMBOSS SETTLE EFFECT
=============================== */

.altanz-preview-svg.blind #altanz-svg-text {
    transform: translateY(0.3px);
}

.altanz-preview-svg.blind #altanz-svg-text-shadow {
    transform: translateY(0.6px);
}


/* ===============================
🎯 STYLE TRANSITION SMOOTHING
=============================== */

.altanz-preview-svg {
    transition: all 0.18s ease-in-out;
}



/* ===============================
✨ GOLD FOIL — LIGHT RESPONSE
=============================== */

.altanz-preview-svg.gold #altanz-svg-text {
    filter: brightness(1.05) contrast(1.08);
    transition: filter 0.25s ease;
}

/* very subtle hover light shift */
.altanz-preview-overlay:hover 
.altanz-preview-svg.gold #altanz-svg-text {
    filter: brightness(1.12) contrast(1.12);
}


/* ===============================
✨ SILVER FOIL — LIGHT RESPONSE
=============================== */

.altanz-preview-svg.silver #altanz-svg-text {
    filter: brightness(1.06) contrast(1.1);
    transition: filter 0.25s ease;
}

.altanz-preview-overlay:hover 
.altanz-preview-svg.silver #altanz-svg-text {
    filter: brightness(1.14) contrast(1.15);
}


/* ===============================
🧠 BLIND — DEPTH REFINEMENT
=============================== */

.altanz-preview-svg.blind #altanz-svg-text {
    filter: 
        contrast(calc(1 + var(--emboss-depth)))
        brightness(0.98);
}

.altanz-preview-svg.blind #altanz-svg-text-shadow {
    opacity: var(--emboss-shadow);
}


/* ===============================
🔍 TEXT EDGE REFINEMENT
=============================== */

.altanz-preview-svg text {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}



/* ===============================
⌨️ TYPING SMOOTHNESS
=============================== */

#altanz-svg-text,
#altanz-svg-text-shadow,
#altanz-svg-text-core {
    transition: 
        opacity 0.08s linear,
        transform 0.08s ease-out;
}