/*======================================================================

CTM PATH™ Guided Journey v6.0

Purpose
Message System

Responsibility
• Welcome Messages
• Reflection Messages
• Insight Messages
• Quote Blocks
• Success Messages
• Warning Messages
• Emotion Cards
• Responsive Behaviour

======================================================================*/


/*==================================================
Message Container
==================================================*/

.message{

    position:relative;

    width:100%;

    max-width:820px;

    margin:0 auto;

    padding:40px;

    border-radius:28px;

    overflow:hidden;

    background:

        rgba(255,255,255,.04);

    border:

        1px solid rgba(216,179,106,.16);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}


/*==================================================
Top Highlight
==================================================*/

.message::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(216,179,106,.90),

        transparent

    );

}


/*==================================================
Soft Ambient Glow
==================================================*/

.message::after{

    content:"";

    position:absolute;

    right:-160px;

    top:-160px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(24,168,103,.10),

        transparent 72%

    );

    pointer-events:none;

}


/*==================================================
Message Header
==================================================*/

.message-header{

    margin-bottom:24px;

}


/*==================================================
Message Title
==================================================*/

.message-title{

    color:var(--text-primary);

    font-size:2rem;

    font-weight:700;

    line-height:1.35;

    text-align:center;

}


/*==================================================
Message Body
==================================================*/

.message-body{

    color:var(--text-secondary);

    font-size:1.12rem;

    line-height:1.9;

    text-align:center;

}


/*==================================================
Tamil Message
==================================================*/

.message-tamil{

    color:var(--text-primary);

    font-size:2rem;

    font-weight:600;

    line-height:1.75;

    text-align:center;

    margin-bottom:24px;

}


/*==================================================
English Message
==================================================*/

.message-english{

    color:var(--text-secondary);

    font-size:1.18rem;

    line-height:1.9;

    text-align:center;

}


/*==================================================
Quote
==================================================*/

.message-quote{

    position:relative;

    margin:36px 0;

    padding:28px 40px;

    border-left:

        4px solid #D8B36A;

    color:var(--text-primary);

    font-size:1.3rem;

    font-style:italic;

    background:

        rgba(255,255,255,.03);

}


/*==================================================
Reflection
==================================================*/

.message-reflection{

    background:

    linear-gradient(

        180deg,

        rgba(18,31,50,.95),

        rgba(11,20,34,.95)

    );

}


/*==================================================
Insight
==================================================*/

.message-insight{

    border-color:

        rgba(24,168,103,.35);

}


/*==================================================
Success
==================================================*/

.message-success{

    border-color:

        rgba(46,204,113,.40);

}


/*==================================================
Warning
==================================================*/

.message-warning{

    border-color:

        rgba(244,185,66,.40);

}


/*==================================================
Error
==================================================*/

.message-error{

    border-color:

        rgba(231,76,60,.45);

}


/*==================================================
Footer
==================================================*/

.message-footer{

    margin-top:36px;

    text-align:center;

}


/*==================================================
Divider
==================================================*/

.message-divider{

    width:220px;

    height:1px;

    margin:30px auto;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(216,179,106,.55),

        transparent

    );

}


/*==================================================
Animation
==================================================*/

.message{

    animation:

        messageFade .60s ease;

}


@keyframes messageFade{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
Hover
==================================================*/

.message:hover{

    box-shadow:

        0 24px 60px rgba(0,0,0,.40),

        0 0 28px rgba(216,179,106,.10);

}


/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

    .message{

        padding:28px;

        border-radius:22px;

    }

    .message-title{

        font-size:1.6rem;

    }

    .message-tamil{

        font-size:1.55rem;

    }

    .message-english{

        font-size:1rem;

    }

    .message-body{

        font-size:1rem;

    }

    .message-quote{

        padding:22px;

        font-size:1.08rem;

    }

}