/* Brand: Mrtechnician 
   Owner: Nirdeshan Kunwar
   Updates: Slimmer Navigation & Typing Animation
*/
:root {
--gold: #D4AF37;
--bg-black: #050505;
--pure-white: #ffffff;
--text-gray: #cccccc;
}

{
margin: 0;
padding: 0;
box-sizing: border-box;
}


html {
scroll-behavior: smooth;
}

body {
background-color: var(--bg-black);
color: var(--pure-white);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}

/* ULTRA-STATIONARY VERTICAL MENU
Brand: Mrtechnician
Logic: Total Viewport Anchor
*/

.side-menu {
/* LOCKING MECHANISM /
position: fixed !important;  / Locks to the screen window, not the page /
top: 40px !important;        / Exact distance from the top of the screen /
right: 25px !important;      / Exact distance from the right of the screen */

/* PREVENT MOVEMENT */  
z-index: 10000 !important;   /* Stays above everything (photo, text, etc.) */  
pointer-events: auto;        /* Ensures buttons remain clickable */  
  
/* FORCED VERTICAL ALIGNMENT */  
display: flex !important;  
flex-direction: column !important;  
align-items: flex-end;  
gap: 8px;  
  
/* PREVENT TRANSFORM DRIFT */  
transform: none !important;

}

.menu-items {
display: flex !important;
flex-direction: column !important; /* Keep buttons stacked vertically */
gap: 5px;
}

.menu-items a {
color: #ffffff !important;
text-decoration: none;
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;


/* Visuals */
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-right: 3px solid #D4AF37;
    
    /* Size Control */
    width: 100px;
    text-align: right;
    white-space: nowrap;
    
    /* Animation */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* HOVER UPGRADE */
.menu-items a:hover {
    background: #D4AF37;
    color: #000000 !important;
    width: 115px;
}

/* MOBILE LOCK */
@media (max-width: 768px) {
    .side-menu {
        top: 20px !important;
        right: 15px !important;
    }
    .menu-items a {
        width: 85px;
        font-size: 0.5rem;
    }
}

/* --- 2. THE CINEMATIC GOLD HEADERS --- */
.section-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 60px; /* Precise 2-line gap before content starts */
    
    /* 5-Stop Metallic Gradient */
    background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
    
    /* Glow effect */
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
}

/* Pulsing Aura behind the header */
.glow-wrapper {
    position: relative;
    display: inline-block;
}

.glow-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 75%);
    z-index: -1;
    filter: blur(20px);
    animation: headerPulse 4s infinite ease-in-out;
}

@keyframes headerPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}


/* --- 2. LAYOUT & TYPOGRAPHY --- */
.content-limit {
    width: 85%; 
    margin: 0 auto;
    text-align: center;
}

.full-section {
    padding: 50px 0; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- 3. HERO NAME WITH TYPING EFFECT --- */
.main-name { 
    font-family: 'Syncopate', sans-serif; 
    font-size: 2.8rem; 
    display: inline-block;
    overflow: hidden; /* Ensures content is hidden until typed */
    white-space: nowrap; /* Keeps name on one line during animation */
    margin: 0 auto;
    border-right: 3px solid var(--gold); /* The typing cursor */
    animation: 
        typing 3.5s steps(30, end),
        blink-caret .75s step-end infinite;
}

.main-name span { color: var(--gold); }

/* Typing Animation Keyframes */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Cursor Blink Keyframes */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--gold); }
}


 
/* --- 4. HERO PHOTO --- */
.photo-box img {
    width: 280px;  
    height: 280px; 
    border-radius: 50%;
    border: 4px solid var(--gold); 
    padding: 6px;
    margin-bottom: 25px;
    object-fit: cover;
}

/* --- 5. GALLERY & FORM --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.img-frame {
    width: 100%;
    height: 300px; 
    overflow: hidden;
    border: 1px solid #222;
    border-radius: 4px;
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.img-frame:hover img {
    transform: scale(1.05);
}

.contact-form { 
    width: 100%; 
    max-width: 500px; 
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form input, form textarea {
    width: 100%; 
    padding: 15px; 
    background: #111; 
    border: 1px solid #333; 
    color: white; 
    border-radius: 4px;
    font-size: 0.9rem;
}

.oscar-btn {
    width: 100%; 
    padding: 18px; 
    background: var(--gold); 
    color: black;
    border: none; 
    font-weight: 900; 
    cursor: pointer; 
    text-transform: uppercase;
}

/* --- 6. MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .content-limit { width: 90%; }
    .side-menu { top: 20px; right: 10px; }
    .main-name { font-size: 1.8rem; white-space: normal; border-right: none; animation: none; } /* Disable typing on small mobile for better fit */
    
    .photo-box img {
        width: 200px; 
        height: 200px;
    }

    .menu-items a {
        width: 75px;
        font-size: 0.45rem;
        padding: 5px 8px;
    }
     }