/* 
ENHANCED HOME CSS RULES

1. Modern hero section with improved layout
2. Enhanced CTA buttons with cybersecurity theme
3. Floating decorative elements
4. Smooth animations and transitions
5. Better responsive design
*/

/* 1. Enhanced Hero Section */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    max-width: min(60vw, 900px);
    width: 100%;
    padding: 2rem 0;
    z-index: 10;
}

.hero-content {
    position: relative;
    z-index: 15;
    width: 100%;
}

.hero-intro {
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.hero-greeting {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: #64ffda;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-name {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    color: #fff;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff 0%, #64ffda 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 600;
    color: #64ffda;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-description {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Medium screen adjustments */
@media (max-width: 1200px) and (min-width: 769px) {
    .hero {
        max-width: min(55vw, 750px);
        padding-right: 2rem;
    }
}

/* 2. Enhanced CTA Buttons */
.hero-cta {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 2s ease;
}

.hero-cta.visible {
    opacity: 1;
    transform: translateY(0);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button.primary {
    background: linear-gradient(135deg, #64ffda 0%, #4ecdc4 100%);
    color: #000;
    border: 2px solid #64ffda;
    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
}

.cta-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
    background: linear-gradient(135deg, #4ecdc4 0%, #64ffda 100%);
}

.cta-button.secondary {
    background: transparent;
    color: #64ffda;
    border: 2px solid #64ffda;
    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.1);
}

.cta-button.secondary:hover {
    background: rgba(100, 255, 218, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(100, 255, 218, 0.2);
}

.cta-button i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.cta-button:hover i {
    transform: translateX(3px);
}

/* 3. Layout for homepage-only sections */
.profile-box {
    background-color: #000;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    text-align: center;
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-top: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    left: 0;
}

.profile-image {
    max-width: 8rem;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
}

.profile-text {
    color: #64ffda;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 500;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-left: 0;
    text-align: center;
}

.nav-menu li a {
    color: #ccc;
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
    padding: 0;
    transition: color 0.3s ease;
    display: inline-block;
}

.nav-menu li a:hover {
    color: #64ffda;
}

.nav-menu li a::before {
    content: '';
    position: absolute;
    left: -0.7em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3em;
    height: 0.3em;
    border-radius: 50%;
    background-color: #64ffda;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-menu li a:hover::before {
    opacity: 1;
}

/* 3. Floating Decorative Elements */
.hero-decorations {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.floating-icon {
    position: absolute;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 1.6s ease;
    color: #64ffda;
    font-size: 2rem;
    animation: float 6s ease-in-out infinite;
}

.floating-icon.visible {
    opacity: 0.6;
    transform: translateY(0) scale(1);
}

.floating-icon:nth-child(1) {
    top: 20%;
    right: 20%;
    animation-delay: 0s;
}

.floating-icon:nth-child(2) {
    top: 40%;
    right: 10%;
    animation-delay: 1.5s;
}

.floating-icon:nth-child(3) {
    top: 60%;
    right: 25%;
    animation-delay: 3s;
}

.floating-icon:nth-child(4) {
    top: 80%;
    right: 15%;
    animation-delay: 4.5s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(2deg);
    }
    50% {
        transform: translateY(-5px) rotate(-1deg);
    }
    75% {
        transform: translateY(-15px) rotate(1deg);
    }
}

/* 4. Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 20;
}

.scroll-indicator.visible {
    opacity: 1;
}

.scroll-arrow {
    width: 2rem;
    height: 2rem;
    border: 2px solid #64ffda;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounce 2s infinite;
    background: rgba(100, 255, 218, 0.1);
    backdrop-filter: blur(10px);
}

.scroll-arrow i {
    color: #64ffda;
    font-size: 0.8rem;
}

.scroll-text {
    font-size: 0.8rem;
    color: #64ffda;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 300;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 5. Enhanced Background Styles */
.content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(100, 255, 218, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Matrix Background Canvas */
.matrix-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Music Notes Animation Canvas */
.music-notes-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.8;
}

/* Hero Video Background */
.hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero {
    position: relative;
    z-index: 3;
}

/* 6. Enhanced Animations and Effects */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Enhanced typing animation styles */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}



/* Typing text elements */
#typing-text-name, #typing-text-title, #typing-text-description {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: none;
}

/* Enhanced cursor styles */
.cursor {
    display: inline-block;
    animation: blink 1.2s infinite;
    color: #64ffda;
    font-weight: 300;
    margin-left: 2px;
}

.cursor-name {
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 1.1;
}

.cursor-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.2;
}

.cursor-description {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    line-height: 1.6;
}

/* Hide cursors initially */
.cursor.hidden {
    display: none;
}



/* Mobile styles for hero section */
@media (max-width: 768px) {
    .hero {
        max-width: 100%;
        padding: 1rem 0;
        text-align: center;
        align-items: center;
        min-height: 80vh;
    }
    
    .hero-content {
        text-align: center;
        width: 100%;
    }
    
    .hero-intro {
        margin-bottom: 0.5rem;
    }
    
    .hero-greeting {
        font-size: 1rem;
    }
    
    .hero-name {
        font-size: 2.5rem;
        margin: 0.5rem 0;
        word-break: break-word;
    }
    
    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        word-break: break-word;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .cta-button {
        width: 80%;
        max-width: 250px;
        justify-content: center;
        padding: 0.8rem 1.5rem;
    }
    
    /* Hide floating decorations on mobile */
    .hero-decorations {
        display: none;
    }
    
    /* Adjust scroll indicator for mobile */
    .scroll-indicator {
        bottom: 1rem;
    }
    
    /* Allow text wrapping on mobile for typing animation */
    #typing-text-name, #typing-text-title, #typing-text-description {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center;
    }
    
    /* Adjust cursor sizes for mobile */
    .cursor-name {
        font-size: 2.5rem;
    }
    
    .cursor-title {
        font-size: 1.5rem;
    }
    
    .cursor-description {
        font-size: 1rem;
    }
    
    /* Fix profile-box width on mobile */
    .profile-box {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.nav-menu li {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.nav-menu li:nth-child(1) { animation-delay: 0.2s; }
.nav-menu li:nth-child(2) { animation-delay: 0.4s; }
.nav-menu li:nth-child(3) { animation-delay: 0.6s; }
.nav-menu li:nth-child(4) { animation-delay: 0.8s; }
.nav-menu li:nth-child(5) { animation-delay: 1.0s; }

/* Social Icons Styling */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-left: 0.5rem;
}

.social-icons a {
    color: #ccc;
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: #64ffda;
    transform: translateY(-3px);
}

/* Animation for social icons */
.social-icons a {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.social-icons a:nth-child(1) { animation-delay: 1s; }
.social-icons a:nth-child(2) { animation-delay: 1.2s; }
.social-icons a:nth-child(3) { animation-delay: 1.4s; }

/* Unity icons animation overlay (replaces music notes) */
.unity-icons-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* above matrix, below hero */
    pointer-events: none;
    overflow: hidden;
}

.unity-icon {
    position: absolute;
    bottom: -10vh;
    left: 0; /* overridden inline */
    transform: translateY(0vh);
    filter: hue-rotate(var(--hue-rotate, 0deg));
    animation: unity-rise var(--rise-duration, 18s) linear var(--rise-delay, 0s) infinite;
}

.unity-icon-inner {
    display: inline-block;
    color: #64ffda;
    opacity: 0.6;
    will-change: transform;
    animation: unity-wiggle var(--wiggle-duration, 5s) ease-in-out infinite alternate,
               unity-spin 12s ease-in-out infinite alternate;
}

@keyframes unity-rise {
    0% { transform: translateY(0vh); }
    100% { transform: translateY(-120vh); }
}

@keyframes unity-wiggle {
    0% { transform: translateX(calc(var(--wiggle-amplitude, 12px) * -1)); }
    100% { transform: translateX(var(--wiggle-amplitude, 12px)); }
}

@keyframes unity-spin {
    0% { transform: rotate(calc(var(--spin-angle, 8deg) * -1)); }
    100% { transform: rotate(var(--spin-angle, 8deg)); }
}

/* Back to Top button */
.back-to-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #64ffda 0%, #4ecdc4 100%);
    color: #000;
    border: 2px solid #64ffda;
    box-shadow: 0 8px 25px rgba(100, 255, 218, 0.25);
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    z-index: 5000;
}

.back-to-top i {
    font-size: 1rem;
}

.back-to-top:hover {
    transform: translateY(6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(100, 255, 218, 0.35);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 768px) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 52px;
    height: 52px;
  }
}