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

   RESET & BASE STYLES

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



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    /* Colors */

    --neon-blue: #00d4ff;

    --neon-blue-glow: rgba(0, 212, 255, 0.5);

    --dark-bg: #0a0a0a;

    --darker-bg: #050505;

    --text-primary: #ffffff;

    --text-secondary: #b0b0b0;



    /* Spacing */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 2rem;

    --spacing-lg: 4rem;

    --spacing-xl: 6rem;



    /* Typography */

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;



    /* Transitions */

    --transition-fast: 0.2s ease;

    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);



    /* Orbit System - Responsive Sizing */

    --orbit-container-size: 100%;

    --inner-orbit-radius: 85%;

    /* 170% diameter = 85% radius - SIGNIFICANTLY INCREASED to prevent icon overlap */

    --outer-orbit-radius: 95%;

    /* 150% diameter = 75% radius - INCREASED to prevent icon overlap */

    --skill-icon-size: 42px;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: var(--font-primary);

    background-color: var(--dark-bg);

    color: var(--text-primary);

    overflow-x: hidden;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    cursor: none;

    margin: 0;

    padding: 0;

}



a {

    text-decoration: none;

    color: inherit;

}



/* Remove default section spacing */

section {

    margin: 0;

    padding: 0;

}



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

   CUSTOM CURSOR TRACKING

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



.cursor-dot,

.cursor-ring {

    position: fixed;

    top: 0;

    left: 0;

    pointer-events: none;

    z-index: 9999;

    transform: translate(-50%, -50%);

    transition: opacity 0.3s ease, transform 0.1s ease;

}



.cursor-dot {

    width: 8px;

    height: 8px;

    background: var(--neon-blue);

    border-radius: 50%;

    box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue-glow);

    mix-blend-mode: screen;

}



.cursor-ring {

    width: 40px;

    height: 40px;

    border: 2px solid rgba(0, 212, 255, 0.3);

    border-radius: 50%;

    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;

}



/* Hover state for cursor */

body.cursor-hover .cursor-ring {

    width: 60px;

    height: 60px;

    border-color: var(--neon-blue);

    background: rgba(0, 212, 255, 0.05);

}



body.cursor-hover .cursor-dot {

    transform: translate(-50%, -50%) scale(1.5);

}



/* Hide cursor on touch devices */

@media (hover: none) and (pointer: coarse) {

    body {

        cursor: default;

    }



    .cursor-dot,

    .cursor-ring {

        display: none;

    }

}



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

   PREMIUM CURSOR GLOW EFFECT

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



.cursor-glow {

    position: fixed;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 9999;

    opacity: 0.9;

    transition: none;

    background: radial-gradient(circle,

            rgba(0, 212, 255, 0.6) 0%,

            rgba(0, 170, 255, 0.4) 30%,

            rgba(0, 130, 255, 0.2) 60%,

            transparent 100%);

    transform: translate(-50%, -50%);

    mix-blend-mode: screen;

    filter: blur(40px);

    will-change: transform;

}



/* Enhanced glow on hover over interactive elements */

body.cursor-hover .cursor-glow {

    background: radial-gradient(circle,

            rgba(0, 212, 255, 0.8) 0%,

            rgba(0, 170, 255, 0.5) 30%,

            rgba(0, 130, 255, 0.3) 60%,

            transparent 100%);

    width: 320px;

    height: 320px;

    filter: blur(50px);

    opacity: 1;

}



/* Disable glow on mobile */

@media (max-width: 768px) {

    .cursor-glow {

        display: none !important;

    }

}



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

   MUTE TOGGLE

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



.mute-toggle {

    position: fixed;

    top: 2rem;

    right: 2rem;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: var(--neon-blue);

    transition: all var(--transition-smooth);

}



.mute-toggle:hover {

    background: rgba(0, 212, 255, 0.1);

    border-color: var(--neon-blue);

    box-shadow: 0 0 20px var(--neon-blue-glow);

    transform: scale(1.05);

}



.sound-icon {

    width: 24px;

    height: 24px;

    transition: opacity var(--transition-fast);

}



.sound-icon.hidden {

    display: none;

}



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

   SECTION COMMON STYLES

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



.section-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 100px 40px;

}



.section-header {

    text-align: center;

    margin-bottom: 60px;

}



.section-label {

    display: inline-block;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--neon-blue);

    margin-bottom: 1rem;

    position: relative;

    padding: 0 20px;

}



.section-label::before,

.section-label::after {

    content: '';

    position: absolute;

    top: 50%;

    width: 40px;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--neon-blue));

}



.section-label::before {

    right: 100%;

}



.section-label::after {

    left: 100%;

    background: linear-gradient(90deg, var(--neon-blue), transparent);

}



.section-title {

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 900;

    margin-bottom: 1rem;

    background: linear-gradient(135deg, #ffffff 0%, var(--neon-blue) 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1.2;

}



.section-subtitle {

    font-size: 1.2rem;

    color: var(--text-secondary);

    max-width: 600px;

    margin: 0 auto;

}



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

   HERO SECTION

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



.hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

    padding-bottom: 0;

    margin-bottom: 0;

}



/* Seamless transition to next section */

.hero::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100%;

    height: 200px;

    background: linear-gradient(180deg, transparent 0%, var(--dark-bg) 80%);

    pointer-events: none;

    z-index: 1;

}



/* Video Background */

.grid-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 120%;

    z-index: 0;

    overflow: hidden;

    background: var(--dark-bg);

}



.grid-canvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.grid-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 50% 50%,

            transparent 0%,

            rgba(10, 10, 10, 0.5) 100%);

    pointer-events: none;

}



/* Hero Content - Split Layout */

.hero-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xl);

    align-items: center;

    padding: 0 var(--spacing-lg);

    max-width: 1600px;

    width: 100%;

    height: 100%;

    margin: 0 auto;

}



/* Left Side - Text Content */

.hero-text-side {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--spacing-md);

}



.hero-text-content {

    max-width: 600px;

    opacity: 0;

    transform: translateX(-50px);

    animation: slideInLeft 1s ease forwards 0.3s;

}



.greeting {

    font-size: clamp(1.2rem, 2vw, 1.5rem);

    color: var(--neon-blue);

    font-weight: 300;

    margin-bottom: var(--spacing-sm);

    letter-spacing: 0.05em;

}



/* Hero Bio Section */

.hero-bio {

    margin-top: var(--spacing-md);

}



.bio-text {

    font-size: 1rem;

    line-height: 1.8;

    color: var(--text-secondary);

    letter-spacing: 0.02em;

}



/* Right Side - Profile Image */

.hero-image-side {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--spacing-md);

    height: 100%;

}



.profile-image-container {

    position: relative;

    width: 100%;

    max-width: 600px;

    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: translateX(50px) scale(0.95);

    animation: slideInRight 1s ease forwards 0.5s;

    --glow-x: 50%;

    --glow-y: 50%;

}



/* Dynamic glow behind profile */

.profile-image-container::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 70%;

    height: 70%;

    background: radial-gradient(circle at var(--glow-x) var(--glow-y),

            rgba(0, 212, 255, 0.5) 0%,

            rgba(0, 212, 255, 0.2) 30%,

            transparent 70%);

    filter: blur(60px);

    z-index: 1;

    pointer-events: none;

    transition: all 0.3s ease;

}



/* Profile Image - Centered, PNG with transparent background */

.profile-image {

    position: relative;

    width: 90%;

    height: 90%;

    object-fit: contain;

    object-position: center center;

    z-index: 10;

    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.7));

    transition: all var(--transition-smooth);

}



.profile-image:hover {

    transform: scale(1.03);

    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.8));

}



/* Circular Dotted Borders */

.circle-border {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border: 2px dashed rgba(0, 212, 255, 0.3);

    border-radius: 50%;

    z-index: 0;

    pointer-events: none;

}



.inner-border {

    width: 65%;

    height: 65%;

}



.middle-border {

    width: 80%;

    height: 80%;

}



.outer-border {

    width: 100%;

    height: 100%;

}



/* Rotating Skills Orbits */

.skills-orbit {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    transform: translate(-50%, -50%);

    z-index: 1;

}



/* Inner Orbit - 65% circle, rotates clockwise (right) */

.inner-orbit {

    animation: rotateOrbit 30s linear infinite;

}



/* Middle Orbit - 80% circle, rotates counter-clockwise (left) */

.middle-orbit {

    animation: rotateOrbitReverse 35s linear infinite;

}



/* Outer Orbit - 100% circle, rotates clockwise (right) */

.outer-orbit {

    animation: rotateOrbit 40s linear infinite;

}



.skill-icon {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 50px;

    height: 50px;

    margin: -25px 0 0 -25px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 212, 255, 0.1);

    backdrop-filter: blur(5px);

    border-radius: 10px;

    padding: 6px;

    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.5);

    border: 2px solid rgba(0, 212, 255, 0.6);

    transition: all var(--transition-smooth);

    z-index: 1;

}



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

   ORBITAL ANIMATION SYSTEM - PRODUCTION READY

   ================================================================

   

   CONCEPT:

   - Orbit containers rotate (parent motion)

   - Icons are positioned on circular path using rotate + translateY

   - Icons counter-rotate to stay upright (cancel parent rotation)

   - Inner orbit: clockwise, Outer orbit: counter-clockwise

   

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



.skills-orbit {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    transform: translate(-50%, -50%);

    z-index: 1;

}



/* Inner Orbit Container - Rotates Clockwise */

.inner-orbit {

    animation: orbitClockwise 30s linear infinite;

    will-change: transform;

}



/* Outer Orbit Container - Rotates Counter-Clockwise */

.outer-orbit {

    animation: orbitCounterClockwise 40s linear infinite;

    will-change: transform;

}



.skill-icon {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 42px;

    height: 42px;

    margin: -21px 0 0 -21px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 212, 255, 0.1);

    backdrop-filter: blur(5px);

    border-radius: 10px;

    padding: 6px;

    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.5);

    border: 2px solid rgba(0, 212, 255, 0.6);

    transition: all var(--transition-smooth);

    z-index: 1;

}



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

   INNER ORBIT - 8 ICONS - PERFECT CIRCULAR ALIGNMENT

   ================================================================

   

   POSITIONING LOGIC (Percentage-based for perfect alignment):

   1. rotate(angle) - Set icon's angular position on orbit

   2. translateY(calc(var(--inner-orbit-radius) * -2)) - Move to exact radius

   3. rotate(-angle) - Counter-rotate to keep icon upright

   

   Using --inner-orbit-radius ensures icons sit EXACTLY on dashed circle

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



.inner-orbit .skill-icon[data-pos="0"] {

    transform: rotate(0deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-0deg);

}



.inner-orbit .skill-icon[data-pos="1"] {

    transform: rotate(45deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-45deg);

}



.inner-orbit .skill-icon[data-pos="2"] {

    transform: rotate(90deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-90deg);

}



.inner-orbit .skill-icon[data-pos="3"] {

    transform: rotate(135deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-135deg);

}



.inner-orbit .skill-icon[data-pos="4"] {

    transform: rotate(180deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-180deg);

}



.inner-orbit .skill-icon[data-pos="5"] {

    transform: rotate(225deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-225deg);

}



.inner-orbit .skill-icon[data-pos="6"] {

    transform: rotate(270deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-270deg);

}



.inner-orbit .skill-icon[data-pos="7"] {

    transform: rotate(315deg) translateY(calc(var(--inner-orbit-radius) * -2)) rotate(-315deg);

}



/* Position 5 icons evenly around middle circle (80% diameter = 40% radius) */

.middle-orbit .skill-icon[data-pos="0"] {

    transform: rotate(0deg) translateX(0) translateY(-40%) rotate(0deg);

}



.middle-orbit .skill-icon[data-pos="1"] {

    transform: rotate(72deg) translateX(0) translateY(-40%) rotate(-72deg);

}



.middle-orbit .skill-icon[data-pos="2"] {

    transform: rotate(144deg) translateX(0) translateY(-40%) rotate(-144deg);

}



.middle-orbit .skill-icon[data-pos="3"] {

    transform: rotate(216deg) translateX(0) translateY(-40%) rotate(-216deg);

}



.middle-orbit .skill-icon[data-pos="4"] {

    transform: rotate(288deg) translateX(0) translateY(-40%) rotate(-288deg);

}



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

   OUTER ORBIT - 7 ICONS - PERFECT CIRCULAR ALIGNMENT

   ================================================================

   

   POSITIONING LOGIC (Percentage-based for perfect alignment):

   1. rotate(angle) - Set icon's angular position on orbit

   2. translateY(calc(var(--outer-orbit-radius) * -2)) - Move to exact radius

   3. rotate(-angle) - Counter-rotate to keep icon upright

   

   Using --outer-orbit-radius ensures icons sit EXACTLY on dashed circle

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



.outer-orbit .skill-icon[data-pos="0"] {

    transform: rotate(22deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-22deg);

}



.outer-orbit .skill-icon[data-pos="1"] {

    transform: rotate(73deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-73deg);

}



.outer-orbit .skill-icon[data-pos="2"] {

    transform: rotate(125deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-125deg);

}



.outer-orbit .skill-icon[data-pos="3"] {

    transform: rotate(176deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-176deg);

}



.outer-orbit .skill-icon[data-pos="4"] {

    transform: rotate(227deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-227deg);

}



.outer-orbit .skill-icon[data-pos="5"] {

    transform: rotate(278deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-278deg);

}



.outer-orbit .skill-icon[data-pos="6"] {

    transform: rotate(329deg) translateY(calc(var(--outer-orbit-radius) * -2)) rotate(-329deg);

}



.skill-icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 3px 10px rgba(0, 212, 255, 0.3));

    transition: all var(--transition-smooth);

}



.skill-icon:hover {

    background: rgba(0, 212, 255, 0.18);

    border-color: rgba(0, 212, 255, 0.6);

    box-shadow:

        0 8px 40px rgba(0, 212, 255, 0.4),

        inset 0 1px 0 rgba(255, 255, 255, 0.2),

        0 2px 4px rgba(0, 0, 0, 0.4);

    transform: scale(1.2) translateZ(0) !important;

}



.skill-icon:hover img {

    filter: drop-shadow(0 5px 25px rgba(0, 212, 255, 0.8)) brightness(1.1);

}



/* Main Heading */

.hero-heading {

    font-family: 'Space Grotesk', 'Montserrat', 'Inter', sans-serif;

    font-size: clamp(3rem, 7vw, 5.5rem);

    font-weight: 900;

    letter-spacing: -0.02em;

    line-height: 1.1;

    margin-bottom: var(--spacing-md);

    color: var(--text-primary);

    white-space: nowrap;

}



.heading-line {

    display: inline-block;

    background: linear-gradient(135deg,

            var(--text-primary) 0%,

            var(--neon-blue) 100%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



/* Tagline */

.hero-tagline {

    margin-bottom: var(--spacing-md);

    line-height: 1.8;

    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



.tagline-highlight {

    display: block;

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

    font-weight: 500;

    color: var(--neon-blue);

    margin-bottom: var(--spacing-xs);

}



.tagline-subtitle {

    display: block;

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

    font-weight: 500;

    color: var(--neon-blue);

    letter-spacing: 0.1em;

}



/* Bio Section */

.hero-bio {

    margin-bottom: var(--spacing-lg);

    max-width: 500px;

}



.bio-text {

    font-size: clamp(0.95rem, 1.5vw, 1.05rem);

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.7);

    font-weight: 300;

}



/* CTA Container */

.cta-container {

    display: flex;

    gap: var(--spacing-md);

    align-items: center;

    margin-bottom: var(--spacing-xl);

}



/* Primary CTA */

.cta-primary {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    padding: 1rem 2.5rem;

    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);

    color: #0a0a0a;

    font-size: 1rem;

    font-weight: 600;

    text-decoration: none;

    border-radius: 50px;

    border: 2px solid transparent;

    position: relative;

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);

}



.cta-primary::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, 0.4),

            transparent);

    transition: left 0.6s ease;

}



.cta-primary:hover::before {

    left: 100%;

}



.cta-primary:hover {

    background: linear-gradient(135deg, #00ffff 0%, #00d4ff 50%, #0099cc 100%);

    transform: translateY(-3px);

    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5);

    border-color: rgba(255, 255, 255, 0.2);

}



.cta-primary svg {

    transition: transform var(--transition-smooth);

}



.cta-primary:hover svg {

    transform: translateX(5px);

}



/* Secondary CTA */

.cta-secondary {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    padding: 1rem 2rem;

    background: rgba(0, 212, 255, 0.08);

    backdrop-filter: blur(10px);

    color: var(--neon-blue);

    font-size: 1rem;

    font-weight: 500;

    border: 2px solid rgba(0, 212, 255, 0.3);

    border-radius: 50px;

    cursor: not-allowed;

    opacity: 0.6;

    font-family: var(--font-primary);

    position: relative;

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.cta-secondary::before {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at center,

            rgba(0, 212, 255, 0.1) 0%,

            transparent 70%);

    opacity: 0;

    transition: opacity 0.4s ease;

}



.cta-secondary:not(:disabled) {

    cursor: pointer;

    opacity: 1;

}



.cta-secondary:not(:disabled):hover {

    background: rgba(0, 212, 255, 0.15);

    border-color: var(--neon-blue);

    color: var(--text-primary);

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);

}



.cta-secondary:not(:disabled):hover::before {

    opacity: 1;

}



/* Scroll Indicator */

.scroll-indicator {

    position: absolute;

    bottom: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-xs);

}



.scroll-mouse {

    width: 30px;

    height: 50px;

    border: 2px solid var(--neon-blue);

    border-radius: 15px;

    position: relative;

    opacity: 0.6;

}



.scroll-wheel {

    width: 4px;

    height: 10px;

    background: var(--neon-blue);

    border-radius: 2px;

    position: absolute;

    top: 8px;

    left: 50%;

    transform: translateX(-50%);

    animation: scrollWheel 2s ease-in-out infinite;

}



.scroll-text {

    font-size: 0.75rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--text-secondary);

    opacity: 0.6;

}



.hero.scrolled .scroll-indicator {

    opacity: 0;

    pointer-events: none;

}



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

   ANIMATIONS

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



@keyframes fadeInUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInLeft {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInRight {

    to {

        opacity: 1;

        transform: translateX(0) scale(1);

    }

}



@keyframes rotateOrbit {

    from {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    to {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}



@keyframes rotateOrbitReverse {

    from {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    to {

        transform: translate(-50%, -50%) rotate(-360deg);

    }

}



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

   ORBIT ANIMATIONS - KEYFRAMES

   ================================================================

   

   orbitClockwise: Rotates the inner orbit container clockwise

   orbitCounterClockwise: Rotates the outer orbit container counter-clockwise

   stayUpright: Counter-rotates inner orbit icons to stay upright

   stayUprightReverse: Counter-rotates outer orbit icons to stay upright

   

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



@keyframes orbitClockwise {

    from {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    to {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}



@keyframes orbitCounterClockwise {

    from {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    to {

        transform: translate(-50%, -50%) rotate(-360deg);

    }

}



@keyframes stayUpright {

    from {

        transform: rotate(0deg) translateY(-160px) rotate(0deg);

    }



    to {

        transform: rotate(360deg) translateY(-160px) rotate(-360deg);

    }

}



@keyframes stayUprightReverse {

    from {

        transform: rotate(0deg) translateY(-240px) rotate(0deg);

    }



    to {

        transform: rotate(-360deg) translateY(-240px) rotate(360deg);

    }

}



/* Legacy animations kept for compatibility */

@keyframes rotateClockwise {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



@keyframes rotateCounterClockwise {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(-360deg);

    }

}



@keyframes keepUpright {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(-360deg);

    }

}



@keyframes keepUprightReverse {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



@keyframes pulse {



    0%,

    100% {

        opacity: 0.6;

        transform: translate(-50%, -50%) scale(1);

    }



    50% {

        opacity: 0.8;

        transform: translate(-50%, -50%) scale(1.05);

    }

}



@keyframes gradientShift {



    0%,

    100% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }

}



@keyframes scrollWheel {

    0% {

        opacity: 1;

        transform: translateX(-50%) translateY(0);

    }



    50% {

        opacity: 0.3;

        transform: translateX(-50%) translateY(15px);

    }



    100% {

        opacity: 1;

        transform: translateX(-50%) translateY(0);

    }

}



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

   RESPONSIVE DESIGN

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



@media (max-width: 1024px) {

    :root {

        --inner-orbit-radius: 28%;

        --outer-orbit-radius: 47.5%;

        --skill-icon-size: 45px;

    }



    .hero-content {

        grid-template-columns: 1fr;

        gap: var(--spacing-lg);

        padding: var(--spacing-md);

    }



    .hero-text-side {

        order: 2;

        text-align: center;

    }



    .hero-text-content {

        max-width: 100%;

    }



    .hero-image-side {

        order: 1;

        display: flex !important;

        /* CRITICAL: Ensure visible on mobile */

    }



    .profile-image-container {

        max-width: 450px;

        display: flex !important;

        /* CRITICAL: Fix mobile visibility */

        opacity: 1 !important;

        /* CRITICAL: Fix mobile visibility */

    }



    .profile-image {

        width: 50%;

    }



    .inner-orbit,

    .outer-orbit {

        display: block !important;

        /* CRITICAL: Ensure visible */

        opacity: 1 !important;

        /* CRITICAL: Ensure visible */

    }



    .inner-orbit {

        width: 70%;

        height: 70%;

    }



    .outer-orbit {

        width: 95%;

        height: 95%;

    }



    .inner-border {

        width: 70%;

        height: 70%;

    }



    .outer-border {

        width: 95%;

        height: 95%;

    }



    .skill-icon {

        width: 45px;

        height: 45px;

        margin: -22.5px 0 0 -22.5px;

    }



    .inner-orbit .skill-icon[data-pos] {

        transform: rotate(calc(45deg * attr(data-pos))) translateY(-140px) rotate(calc(-45deg * attr(data-pos)));

    }



    .outer-orbit .skill-icon[data-pos] {

        transform: rotate(calc(51.4deg * attr(data-pos))) translateY(-200px) rotate(calc(-51.4deg * attr(data-pos)));

    }



    .cta-container {

        justify-content: center;

    }



    .scroll-indicator {

        left: 50%;

        transform: translateX(-50%);

    }

}



@media (max-width: 768px) {

    :root {

        --inner-orbit-radius: 30%;

        --outer-orbit-radius: 46%;

        --skill-icon-size: 40px;

    }



    .mute-toggle {

        top: 1rem;

        right: 1rem;

        width: 45px;

        height: 45px;

    }



    .profile-image-container {

        max-width: 350px;

    }



    .hero-heading {

        font-size: clamp(2.5rem, 10vw, 4rem);

    }



    .greeting {

        text-align: center;

    }



    .cta-container {

        flex-direction: column;

        gap: var(--spacing-sm);

        width: 100%;

        max-width: 300px;

        margin-left: auto;

        margin-right: auto;

    }



    .cta-primary,

    .cta-secondary {

        width: 100%;

        justify-content: center;

        padding: 1rem 2rem;

    }

}



@media (max-width: 480px) {

    :root {

        --inner-orbit-radius: 28%;


        --outer-orbit-radius: 44%;


        --skill-icon-size: 35px;

    }



    .hero-content {

        padding: var(--spacing-sm);

    }



    .profile-image-container {

        max-width: 320px;

    }



    .profile-image {

        width: 55%;

    }



    .inner-orbit {

        width: 70%;

        height: 70%;

    }



    .outer-orbit {

        width: 92%;

        height: 92%;

    }



    .inner-border {

        width: 70%;

        height: 70%;

    }



    .outer-border {

        width: 92%;

        height: 92%;

    }



    .skill-icon {

        width: 38px;

        height: 38px;

        margin: -19px 0 0 -19px;

        padding: 6px;

    }



    .tagline-highlight {

        font-size: 1rem;

    }



    .tagline-subtitle {

        font-size: 0.85rem;

    }

}



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

   MOBILE & RESPONSIVE DESIGN

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



/* Mobile Navigation */

@media (max-width: 768px) {

    nav {

        width: 90% !important;

        padding: 12px 15px !important;

        top: 15px !important;

    }



    nav ul {

        gap: 8px !important;

        flex-wrap: wrap;

        justify-content: center;

    }



    nav li a {

        font-size: 0.75rem !important;

        padding: 6px 10px !important;

    }

}



/* Tablet & Small Laptop */

@media (max-width: 1024px) {

    .hero-content {

        flex-direction: column;

        gap: 40px;

    }



    .hero-text-side,

    .hero-image-side {

        width: 100%;

        max-width: 600px;

    }



    .profile-image-container {

        width: 350px !important;

        height: 350px !important;

    }



    .skills-orbit.inner-orbit {

        width: 280px !important;

        height: 280px !important;

    }



    .skills-orbit.outer-orbit {

        width: 380px !important;

        height: 380px !important;

    }

}



/* Mobile Devices */

@media (max-width: 768px) {

    body {

        cursor: auto !important;

    }



    .cursor-dot,

    .cursor-ring {

        display: none !important;

    }



    .hero {

        min-height: auto;

        padding: 80px 20px 40px;

    }



    .hero-heading {

        font-size: 2.5rem !important;

    }



    .hero-tagline {

        font-size: 1rem !important;

    }



    .tagline-highlight {

        font-size: 1.2rem !important;

    }



    .hero-bio {

        font-size: 0.9rem !important;

    }



    .cta-container {

        flex-direction: column;

        gap: 15px !important;

    }



    .cta-primary,

    .cta-secondary {

        width: 100%;

        justify-content: center;

    }



    .profile-image-container {

        width: 280px !important;

        height: 280px !important;

    }



    .profile-image {

        width: 160px !important;

        height: 160px !important;

    }



    .skills-orbit.inner-orbit {

        width: 220px !important;

        height: 220px !important;

    }



    .skills-orbit.outer-orbit {

        width: 300px !important;

        height: 300px !important;

    }



    .skill-icon {

        width: 35px !important;

        height: 35px !important;

    }



    .skill-icon img {

        width: 24px !important;

        height: 24px !important;

    }

}



/* Small Mobile Devices */

@media (max-width: 480px) {

    nav {

        width: 95% !important;

        padding: 10px 12px !important;

    }



    nav li a {

        font-size: 0.7rem !important;

        padding: 5px 8px !important;

    }



    .hero-heading {

        font-size: 2rem !important;

    }



    .tagline-highlight {

        font-size: 1rem !important;

    }



    .hero-bio {

        font-size: 0.85rem !important;

    }



    .profile-image-container {

        width: 240px !important;

        height: 240px !important;

    }



    .profile-image {

        width: 140px !important;

        height: 140px !important;

    }



    .skills-orbit.inner-orbit {

        width: 180px !important;

        height: 180px !important;

    }



    .skills-orbit.outer-orbit {

        width: 250px !important;

        height: 250px !important;

    }



    .skill-icon {

        width: 30px !important;

        height: 30px !important;

    }



    .skill-icon img {

        width: 20px !important;

        height: 20px !important;

    }



    .section-title {

        font-size: 2rem !important;

    }



    .section-subtitle {

        font-size: 0.9rem !important;

    }

}



/* Contact Section Responsive */

@media (max-width: 768px) {

    section[id="contact"] h2 {

        font-size: 2rem !important;

    }



    section[id="contact"] p {

        font-size: 0.95rem !important;

    }



    section[id="contact"] a[href^="mailto"] {

        padding: 15px 35px !important;

        font-size: 1rem !important;

    }



    section[id="contact"]>div>div:nth-child(3) {

        flex-direction: column !important;

        gap: 15px !important;

    }



    section[id="contact"]>div>div:nth-child(3) a {

        width: 100%;

        justify-content: center;

    }

}



/* Large Screens & MacBook */

@media (min-width: 1440px) {

    .hero-content {

        max-width: 1400px;

    }



    .profile-image-container {

        width: 500px !important;

        height: 500px !important;

    }



    .skills-orbit.inner-orbit {

        width: 380px !important;

        height: 380px !important;

    }



    .skills-orbit.outer-orbit {

        width: 520px !important;

        height: 520px !important;

    }



    .skill-icon {

        width: 60px !important;

        height: 60px !important;

    }



    .skill-icon img {

        width: 40px !important;

        height: 40px !important;

    }

}



/* Ultra-wide Screens */

@media (min-width: 1920px) {

    .section-container {

        max-width: 1600px !important;

    }



    .hero-heading {

        font-size: 5rem !important;

    }



    .hero-tagline {

        font-size: 1.8rem !important;

    }

}



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

   ACCESSIBILITY

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



@media (prefers-reduced-motion: reduce) {



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* Focus styles for keyboard navigation */

a:focus-visible,

button:focus-visible {

    outline: 2px solid var(--neon-blue);

    outline-offset: 4px;

}



/* High contrast mode support */

@media (prefers-contrast: high) {

    :root {

        --neon-blue: #00ffff;

        --text-secondary: #ffffff;

    }



    .video-overlay {

        background: rgba(0, 0, 0, 0.8);

    }

}