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

CTM PATH™ Guided Journey v6.0

SCREEN 04 — YOUR PERMISSION™

File:
screen04.css

Purpose:
Screen 04 Visual Styling

Responsibility:
• Screen 04 Layout
• Permission Illustration
• Typography hierarchy
• Emotional spacing
• Premium navigation cue
• Responsive behaviour

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


/*==================================================
Screen 04 Container
==================================================*/

.screen04{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    padding:40px 24px;

}



/*==================================================
Progress Indicator
==================================================*/

.screen04 .screen-progress{

    position:absolute;

    top:48px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

}



.screen04 .moment-label{

    font-size:0.75rem;

    letter-spacing:3px;

    color:rgba(246,241,231,0.55);

    font-weight:500;

}





/*==================================================
Main Content
==================================================*/

.screen04 .screen-content{

    width:100%;

    max-width:520px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}





/*==================================================
Illustration
==================================================*/

.screen04 .screen-visual{

    width:220px;

    height:220px;

    margin-bottom:34px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.screen04 .screen-image{

    width:100%;

    height:auto;

    display:block;

}





/*==================================================
Tamil Title
==================================================*/

.screen04 .screen-title.tamil{

    margin:0 0 24px;

    color:#F6F1E7;

    font-size:clamp(2rem,5vw,2.8rem);

    font-weight:600;

    line-height:1.4;

    letter-spacing:0.5px;

}





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

.screen04 .screen-message.tamil{

    color:#F6F1E7;

    font-size:clamp(1.35rem,4vw,1.75rem);

    line-height:1.8;

    font-weight:500;

    margin-bottom:22px;

}



.screen04 .screen-message p{

    margin:0;

}





/*==================================================
English Subtitle
==================================================*/

.screen04 .screen-subtitle.english{

    color:rgba(246,241,231,0.72);

    font-size:clamp(1rem,3vw,1.2rem);

    line-height:1.7;

    font-weight:400;

    margin-bottom:44px;

}



.screen04 .screen-subtitle p{

    margin:0;

}





/*==================================================
Premium Journey Navigation
==================================================*/


.screen04 .journey-next{

    background:none;

    border:none;

    padding:0;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    color:#D6B56C;

    transition:all 0.4s ease;

}





/*==================================================
Golden Decorative Lines
==================================================*/


.screen04 .nav-decoration{

    width:120px;

    height:1px;

    background:#D6B56C;

    opacity:0.85;

}





/*==================================================
Tamil Navigation Text
==================================================*/


.screen04 .nav-tamil{

    font-size:1.45rem;

    font-weight:600;

    color:#D6B56C;

    letter-spacing:0.5px;

}





/*==================================================
Three Right Arrows
==================================================*/


.screen04 .nav-arrows{

    font-size:1.5rem;

    letter-spacing:8px;

    color:#D6B56C;

    line-height:1;

}





/*==================================================
English Navigation Text
==================================================*/


.screen04 .nav-english{

    font-size:0.9rem;

    font-weight:500;

    letter-spacing:5px;

    color:#D6B56C;

    text-transform:uppercase;

}





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


.screen04 .journey-next:hover{

    transform:translateY(-4px);

}



.screen04 .journey-next:hover .nav-decoration{

    opacity:1;

}





/*==================================================
Navigation Focus
==================================================*/


.screen04 .journey-next:focus{

    outline:none;

}





/*==================================================
Mobile Optimisation
==================================================*/

@media(max-width:600px){



    .screen04{

        padding:32px 20px;

    }



    .screen04 .screen-progress{

        top:32px;

    }



    .screen04 .screen-visual{

        width:180px;

        height:180px;

        margin-bottom:28px;

    }



    .screen04 .screen-title.tamil{

        margin-bottom:18px;

    }



    .screen04 .screen-message.tamil{

        line-height:1.7;

    }



    .screen04 .screen-subtitle.english{

        margin-bottom:34px;

    }



    .screen04 .nav-decoration{

        width:90px;

    }



    .screen04 .nav-tamil{

        font-size:1.25rem;

    }



    .screen04 .nav-arrows{

        font-size:1.3rem;

        letter-spacing:6px;

    }



    .screen04 .nav-english{

        font-size:0.8rem;

        letter-spacing:4px;

    }


}





/*==================================================
Large Screens
==================================================*/

@media(min-width:1200px){



    .screen04 .screen-visual{

        width:260px;

        height:260px;

    }



}