/* Home Page Styles - Personal Portfolio Site */
/* Built on Bootstrap 5 with strict adherence to color palette and typography rules */

/* ===== HOME PAGE COLORS ===== */
/* Strict adherence to defined color palette - NO other colors allowed */

h1 {
    color: var(--color-green-darkest);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

/* Mobile title optimization */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    h1 br {
        display: none; /* Hide line break on mobile for single line */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
}

#cont-p-home {
    color: var(--color-blue-dark);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

blockquote p {
    color: var(--color-blue-medium);
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0;
}

.signature-text {
    color: var(--color-yellow-light);
}

/* ===== LAYOUT AND CONTAINER ===== */
.container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: var(--space-lg);
}

/* Responsive container for larger screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
        padding: var(--spacing-xxl);
    }

    .math-3d-container {
        min-height: 450px;
    }

    .math-3d-scene {
        width: 350px;
        height: 350px;
    }
}

@media (min-width: 1800px) {
    .container {
        max-width: 1600px;
        padding: var(--spacing-xxxl);
    }

    .math-3d-container {
        min-height: 500px;
    }

    .math-3d-scene {
        width: 400px;
        height: 400px;
    }
}

/* ===== MATH ANIMATION CONTAINERS ===== */
.math-animation-container {
    background: linear-gradient(135deg, var(--color-green-light) 0%, var(--color-green-medium) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-green-dark);
}

.math-animation-container:nth-child(even) {
    background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-blue-medium) 100%);
    border: 2px solid var(--color-blue-dark);
}

/* ===== 3D MATHEMATICAL OBJECT CONTAINER ===== */
.math-3d-container {
    background: linear-gradient(135deg, var(--color-blue-darkest) 0%, var(--color-blue-darker) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--color-yellow-medium);
    perspective: 1000px;
    perspective-origin: center center;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: containerGlow 6s ease-in-out infinite;
    /* Mobile touch optimization - allow scrolling through container */
    touch-action: pan-y; /* Allow vertical scrolling, prevent horizontal panning */
    pointer-events: auto; /* Ensure container can receive events */
}

/* Desktop layout - horizontal arrangement */
@media (min-width: 769px) {
    .math-3d-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .math-title-section {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: var(--space-md);
    }
    
    .math-3d-scene {
        flex: 0 0 auto;
        margin: 0 var(--space-md);
    }
    
    .math-text-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
}

.math-3d-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(6, 41, 67, 0.3) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 3D Scene Container */
.math-3d-scene {
    width: 300px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 2;
    /* Mobile touch optimization - only this area should capture touch events */
    touch-action: manipulation; /* Allow touch manipulation for rotation */
    cursor: grab; /* Show grab cursor on desktop */
}

/* 3D Lissajous Figure */
.lissajous-3d-figure {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: lissajous3D 12s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}

/* 3D Path Elements */
.lissajous-3d-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
    width: 300px;
    height: 300px;
    display: block;
    will-change: transform;
    backface-visibility: hidden;
}

.lissajous-3d-path:nth-child(1) {
    stroke: var(--color-yellow-light);
    stroke-width: 2;
    fill: none;
    transform: translate(-50%, -50%) rotateX(0deg);
    animation: mathGlow 4s ease-in-out infinite;
    animation-delay: 0s;
}

.lissajous-3d-path:nth-child(1) path {
    stroke: var(--color-yellow-light);
    stroke-width: 2;
    fill: none;
}

.lissajous-3d-path:nth-child(2) {
    stroke: var(--color-red-light);
    stroke-width: 2;
    fill: none;
    transform: translate(-50%, -50%) rotateX(60deg);
    animation: mathGlow 4s ease-in-out infinite;
    animation-delay: 0.5s;
}

.lissajous-3d-path:nth-child(2) path {
    stroke: var(--color-red-light);
    stroke-width: 2;
    fill: none;
}

.lissajous-3d-path:nth-child(3) {
    stroke: var(--color-green-light);
    stroke-width: 2;
    fill: none;
    transform: translate(-50%, -50%) rotateX(120deg);
    animation: mathGlow 4s ease-in-out infinite;
    animation-delay: 1s;
}

.lissajous-3d-path:nth-child(3) path {
    stroke: var(--color-green-light);
    stroke-width: 2;
    fill: none;
}

.lissajous-3d-path:nth-child(4) {
    stroke: var(--color-blue-light);
    stroke-width: 2;
    fill: none;
    transform: translate(-50%, -50%) rotateY(60deg);
    animation: mathGlow 4s ease-in-out infinite;
    animation-delay: 1.5s;
}

.lissajous-3d-path:nth-child(4) path {
    stroke: var(--color-blue-light);
    stroke-width: 2;
    fill: none;
}

.lissajous-3d-path:nth-child(5) {
    stroke: var(--color-yellow-medium);
    stroke-width: 2;
    fill: none;
    transform: translate(-50%, -50%) rotateY(120deg);
    animation: mathGlow 4s ease-in-out infinite;
    animation-delay: 2s;
}

.lissajous-3d-path:nth-child(5) path {
    stroke: var(--color-yellow-medium);
    stroke-width: 2;
    fill: none;
}

.lissajous-3d-path:nth-child(6) {
    stroke: var(--color-red-medium);
    stroke-width: 2;
    fill: none;
    transform: translate(-50%, -50%) rotateZ(60deg);
    animation: mathGlow 4s ease-in-out infinite;
    animation-delay: 2.5s;
}

.lissajous-3d-path:nth-child(6) path {
    stroke: var(--color-red-medium);
    stroke-width: 2;
    fill: none;
}

/* Math formula styling */
.math-formula {
    text-align: center;
    margin-bottom: var(--space-md);
    font-size: 1.125rem;
}

/* Lissajous curve container */
#lissajousPath {
    stroke: var(--color-yellow-light);
    stroke-width: 2;
    fill: none;
}

/* Butterfly curve container */
#butterflyPath {
    stroke: var(--color-red-light);
    stroke-width: 2;
    fill: none;
}

/* SVG containers */
svg {
    display: block;
    margin: 1rem auto;
    max-width: 100%;
    height: auto;
}

/* ===== CODE BLOCK STYLING ===== */
.code-block {
    background: linear-gradient(135deg, var(--color-blue-darkest) 0%, var(--color-blue-darker) 100%);
    color: var(--color-yellow-light);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    margin: var(--space-sm) 0;
    border: 1px solid var(--color-blue-dark);
    overflow-x: auto;
}

.scrollable-container {
    max-height: 400px;
    overflow-y: auto;
}

/* Code syntax highlighting */
.code-keyword {
    color: var(--color-red-light);
    font-weight: 400;
}

.code-header {
    color: var(--color-yellow-light);
}

.code-comment {
    color: var(--color-green-light);
    font-style: normal;
}

/* ===== IMAGE STYLING ===== */
.tux-image {
    display: block;
    margin: var(--space-lg) auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 3px solid var(--color-green-medium);
}

/* ===== RESPONSIVE DESIGN ===== */
/* Tablet styles */
@media (min-width: 768px) and (max-width: 991px) {
    .math-3d-container {
        min-height: 350px;
    }

    .math-3d-scene {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: var(--space-sm);
    }

    .math-animation-container {
        padding: var(--space-sm);
        margin: var(--space-sm) 0;
    }

    .math-3d-container {
        padding: var(--space-sm);
        margin: var(--space-sm) 0;
        min-height: auto;
        /* Mobile layout - vertical stacking */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* Reduce glow intensity on mobile */
        animation: none;
        /* Mobile touch optimization - allow scrolling through container */
        touch-action: pan-y; /* Allow vertical scrolling */
        pointer-events: auto; /* Container can receive events but won't block scrolling */
    }
    
    /* Text sections should not interfere with touch scrolling */
    .math-title-section,
    .math-text-section {
        touch-action: pan-y; /* Allow vertical scrolling through text */
        pointer-events: auto; /* Allow text selection and interaction */
    }
    
    /* Only the 3D scene should capture touch events for rotation */
    .math-3d-scene {
        touch-action: manipulation; /* Allow touch manipulation for rotation */
        pointer-events: auto; /* This area captures touch events */
    }
    
    /* Title section - full width, centered */
    .math-title-section {
        width: 100%;
        text-align: center;
        margin-bottom: var(--space-md);
    }
    
    .math-title-section h3 {
        font-size: 1.5rem;
        margin-bottom: var(--space-xs);
    }

    /* Animation section - centered */
    .math-3d-scene {
        width: 250px;
        height: 250px;
        margin: var(--space-md) 0;
        order: 2;
    }
    
    .lissajous-3d-path {
        width: 250px;
        height: 250px;
    }
    
    /* Text section - full width, centered */
    .math-text-section {
        width: 100%;
        text-align: center;
        margin-top: var(--space-md);
        order: 3;
    }
    
    .math-text-section p {
        margin-bottom: var(--space-sm);
        line-height: 1.4;
    }
    
    .math-text-section div {
        font-size: 0.7rem !important;
        line-height: 1.3;
    }
    
    .math-text-section ul {
        margin-left: var(--space-xs) !important;
    }
    
    .math-text-section li {
        margin-bottom: 0.25rem;
        font-size: 0.7rem;
    }
    
    /* Mobile responsive text styles */
    .math-title {
        text-align: center;
    }
    
    .math-formula-text {
        font-size: 0.8rem;
    }
    
    .math-interactive-text {
        font-size: 0.75rem;
    }
    
    .math-educational-content {
        font-size: 0.7rem;
        line-height: 1.3;
    }
    
    .math-educational-list {
        margin-left: var(--space-xs);
    }
    
    .math-educational-list li {
        font-size: 0.7rem;
    }
}

/* ===== 3D LISSAJOUS TEXT STYLING ===== */
.math-title {
    color: var(--color-yellow-light);
    margin-bottom: var(--space-sm);
    text-align: left;
}

.math-formula-text {
    color: var(--color-blue-light);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: var(--space-sm);
}

.math-interactive-text {
    color: var(--color-green-light);
    font-size: 0.8rem;
    text-align: left;
    margin-bottom: var(--space-sm);
}

.math-educational-content {
    color: var(--color-yellow-light);
    font-size: 0.75rem;
    text-align: left;
    line-height: 1.4;
    margin-top: var(--space-md);
}

.math-section-title {
    margin-bottom: var(--space-xs);
    font-weight: bold;
}

.math-section-text {
    margin-bottom: var(--space-xs);
}

.math-educational-list {
    margin-left: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.math-educational-list li {
    margin-bottom: 0.25rem;
}

    .code-block {
        padding: var(--space-sm);
    }

    .tux-image {
        margin: var(--space-sm) auto;
    }

@media (max-width: 480px) {
    .math-animation-container {
        padding: var(--space-xs);
    }

    .math-3d-container {
        padding: var(--space-xs);
        min-height: auto;
        /* Ensure vertical stacking on very small screens */
        flex-direction: column;
        align-items: center;
    }
    
    .math-title-section h3 {
        font-size: 1.25rem;
    }

    .math-3d-scene {
        width: 200px;
        height: 200px;
        margin: var(--space-sm) 0;
    }
    
    .lissajous-3d-path {
        width: 200px;
        height: 200px;
    }
    
    .math-text-section p {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .math-text-section div {
        font-size: 0.65rem !important;
        line-height: 1.2;
    }
    
    .math-text-section li {
        font-size: 0.65rem;
        margin-bottom: 0.2rem;
    }
    
    /* Very small screen text styles */
    .math-formula-text {
        font-size: 0.75rem;
    }
    
    .math-interactive-text {
        font-size: 0.7rem;
    }
    
    .math-educational-content {
        font-size: 0.65rem;
        line-height: 1.2;
    }
    
    .math-educational-list li {
        font-size: 0.65rem;
        margin-bottom: 0.2rem;
    }

    .code-block {
        padding: var(--space-xs);
    }
}

/* ===== ANIMATION ENHANCEMENTS ===== */
.math-animation-container {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.math-animation-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.math-3d-container {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.math-3d-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.math-3d-container:hover .lissajous-3d-figure {
    animation-duration: 6s;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    .math-animation-container {
        transition: none;
    }

    .math-animation-container:hover {
        transform: none;
    }

    .math-3d-container {
        transition: none;
    }

    .math-3d-container:hover {
        transform: none;
    }

    .lissajous-3d-figure {
        animation: none !important;
    }

    .lissajous-3d-path {
        animation: none !important;
    }
}

/* Focus states for keyboard navigation */
.math-animation-container:focus-within {
    outline: 2px solid var(--color-yellow-light);
    outline-offset: 2px;
}

.math-3d-container:focus-within {
    outline: 2px solid var(--color-yellow-light);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .math-animation-container {
        border-width: 3px;
    }

    .math-3d-container {
        border-width: 3px;
    }

    .lissajous-3d-path {
        stroke-width: 3px;
    }

    .code-block {
        border-width: 2px;
    }

    .tux-image {
        border-width: 4px;
    }
}