/* Parchment Animation Styles */

/* 3D Container */
.perspective-container {
    perspective: 1000px;
    width: 100%;
    position: relative;
    z-index: 50;
}

/* The Parchment Wrapper */
.parchment {
    width: 95%;
    max-width: 700px;
    margin: 0 auto;
    background: linear-gradient(to bottom right, #f4f1e8, #e8e4d5);
    border-radius: 4px;
    /* Slightly rounded */
    box-shadow: 0 0 0 rgba(212, 175, 55, 0);

    /* 3D Properties */
    transform-origin: top center;
    transform: rotateX(-15deg);
    opacity: 0;
    height: 0;
    overflow: hidden;
    /* For unfold effect */

    /* Hardware Acceleration */
    will-change: transform, height, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Texture Overlay */
    position: relative;
}

/* Paper Texture & Noise */
.parchment::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Torn/Rough Edges Effect (Optional - using mask or simple border) */
.parchment {
    /* Simple border for now to keep it clean but premium */
    border: 1px solid rgba(212, 175, 55, 0.1);
}

/* Content Area */
.parchment-content {
    opacity: 0;
    /* Content fades in slightly after unfold starts */
    transition: opacity 1s ease-in;
}

/* Letter Text Color - Dark Vintage Ink */
#letter-content,
#letter-content p,
#parchment-letter p,
.parchment-content {
    color: #2c1810 !important;
    text-shadow: none !important; /* Remove any glow that might reduce contrast */
}

/* Unfold Animation Class (Added by JS) */
.parchment.unfolding {
    animation: unfoldParchment 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes unfoldParchment {
    0% {
        opacity: 0;
        height: 0;
        transform: rotateX(-15deg);
        box-shadow: 0 0 0 rgba(212, 175, 55, 0);
    }

    20% {
        opacity: 1;
        height: 100px;
        /* Small open */
        transform: rotateX(-10deg);
    }

    100% {
        opacity: 1;
        height: auto;
        /* Fallback or handle via JS max-height */
        /* Since keyframes can't animate to auto smoothly, we usually use max-height in simple CSS 
           OR we use JS GSAP. Since we use GSAP in JS, this class might be supplementary or we rely on GSAP.
           Prompt asked for JS GSAP sequence, but let's keep basic styling here.
           Let's use a large max-height for CSS-only fallback.
        */
        transform: rotateX(0deg);
        box-shadow: 0 20px 60px rgba(212, 175, 55, 0.15);
    }
}

/* Typewriter Cursor */
.cursor-caret {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: #2c1810;
    /* Dark Ink to match text */
    margin-left: 2px;
    vertical-align: bottom;
    animation: blink-caret 1s steps(1) infinite;
}

@keyframes blink-caret {
    50% {
        opacity: 0;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .parchment {
        width: 92%;
    }

    .parchment-content {
        padding: 1.5rem;
    }
}