@font-face {
    font-family: 'OCRA';
    src: url('../assets/fonts/OCRA.ttf') format('truetype');
}

:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --subtitle-color-1: #737373;
    /* System Architect */
    --subtitle-color-2: #545454;
    /* Artist */
    --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-duration: 0.6s;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'OCRA', sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: auto;
    position: relative;
    min-width: 1440px;
    min-height: 900px;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Profile Section - Centered & Shifted Down */
.profile-section {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Shift down by 25% of DP height (250 * 0.25 = 62.5px) */
    transform: translate(-50%, calc(-50% + 62.5px));
    width: 1000px;
    height: 625px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none;
    /* Allow clicks to pass through to text */
}

.interactive-area {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* DP Styling - Scaled 1.25x (250px) */
.dp-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    z-index: 10;
    transition: all var(--transition-duration) var(--spring-easing);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto;
    /* Restore interactivity */
}

.dp-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Buttons Container */
.buttons-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 5;
}

/* Button Base Styles */
.social-btn {
    position: absolute;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.4;
    transition: all var(--transition-duration) var(--spring-easing);
    pointer-events: auto;
    /* Restore interactivity */
    text-decoration: none;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    top: 0;
    left: 0;
}

.social-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sizing Ratios - Scaled 1.25x */
/* Large Buttons: 62.5px */
.social-btn.github,
.social-btn.gmail,
.social-btn.linkedin,
.social-btn.stackoverflow {
    width: 62.5px;
    height: 62.5px;
    margin-top: -31.25px;
    margin-left: -31.25px;
}

/* Small Buttons: 1.25 units -> ~39.06px */
.social-btn.resume,
.social-btn.call {
    width: 39.06px;
    height: 39.06px;
    margin-top: -19.53px;
    margin-left: -19.53px;
    padding: 8px;
}

/* Positioning - Scaled 1.25x & Gutter 100% */
/* 
   Inner X: +/- 175px
   Inner Y: +/- 44px
   Outer X: +/- 248px
   Outer Y: 0
*/

/* Left Group */
/* Resume (Outer, Center) */
.social-btn.resume {
    transform: translate(-248px, 0);
}

/* Gmail (Inner, Top) */
.social-btn.gmail {
    transform: translate(-175px, -44px);
}

/* Github (Inner, Bottom) */
.social-btn.github {
    transform: translate(-175px, 44px);
}

/* Right Group */
/* Call (Outer, Center) */
.social-btn.call {
    transform: translate(248px, 0);
}

/* Linkedin (Inner, Top) */
.social-btn.linkedin {
    transform: translate(175px, -44px);
}

/* Stackoverflow (Inner, Bottom) */
.social-btn.stackoverflow {
    transform: translate(175px, 44px);
}


/* Hover Logic */

/* DP Hover: Scale 1.5x & Squircle */
.dp-wrapper:hover {
    transform: scale(1.5);
    border-radius: 25%;
}

/* Push Effect - Scaled 1.25x & Gutter 100% */
/* 
   Inner Push X: +/- 238px
   Inner Push Y: +/- 44px
   Outer Push X: +/- 311px
   Outer Push Y: 0
*/

.dp-wrapper:hover~.buttons-container .social-btn.resume {
    transform: translate(-311px, 0);
    opacity: 0.1;
}

.dp-wrapper:hover~.buttons-container .social-btn.gmail {
    transform: translate(-238px, -44px);
    opacity: 0.1;
}

.dp-wrapper:hover~.buttons-container .social-btn.github {
    transform: translate(-238px, 44px);
    opacity: 0.1;
}

.dp-wrapper:hover~.buttons-container .social-btn.call {
    transform: translate(311px, 0);
    opacity: 0.1;
}

.dp-wrapper:hover~.buttons-container .social-btn.linkedin {
    transform: translate(238px, -44px);
    opacity: 0.1;
}

.dp-wrapper:hover~.buttons-container .social-btn.stackoverflow {
    transform: translate(238px, 44px);
    opacity: 0.1;
}

/* Individual Button Hover */
.social-btn:hover {
    opacity: 1 !important;
    z-index: 20;
    transform: scale(1.3);
}

/* Specific Hover Transforms (Default Position + Scale) */
.social-btn.resume:hover {
    transform: translate(-248px, 0) scale(1.3);
}

.social-btn.gmail:hover {
    transform: translate(-175px, -44px) scale(1.3);
}

.social-btn.github:hover {
    transform: translate(-175px, 44px) scale(1.3);
}

.social-btn.call:hover {
    transform: translate(248px, 0) scale(1.3);
}

.social-btn.linkedin:hover {
    transform: translate(175px, -44px) scale(1.3);
}

.social-btn.stackoverflow:hover {
    transform: translate(175px, 44px) scale(1.3);
}


/* Text Section - Centered & Offset */
.text-section {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Offset upwards by 1.0x DP height (250 * 1.0 = 250px) */
    transform: translate(-50%, calc(-50% - 250px));
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: flex-start;
    /* Align tops of names */
    z-index: 5;
    width: max-content;
    pointer-events: auto;
    /* Ensure text is clickable */
}

.text-block {
    display: flex;
    flex-direction: column;
}

.name {
    font-size: 5.625rem;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
}

.subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 0.5rem;
    white-space: nowrap;
}

/* Founder Link */
.founder {
    display: block;
    color: #545454;
    text-decoration: none;
    transition: color 0.3s;
    margin-top: 0.2rem;
    /* Small gap under Senior Eng */
}

.founder:hover {
    color: #990000;
    /* Dark Red (Redder) */
}

/* Left Block Alignment */
.left-block {
    align-items: flex-start;
    width: min-content;
}

.left-block .name {
    text-align: justify;
    text-align-last: justify;
    width: 100%;
}

/* Right Block Alignment */
.right-block {
    align-items: flex-start;
    width: min-content;
}

.right-block .name {
    width: 100%;
    text-align: justify;
    text-align-last: justify;
}

/* Subtitle Row for Right Block */
.subtitle-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.5rem;
}

/* Subtitle Colors & Alignment */
.subtitle.system-architect {
    color: var(--subtitle-color-1);
}

.subtitle.artist {
    color: var(--subtitle-color-2);
    /* No vertical shift, aligned with System Architect */
}

/* Remove double margin for subtitles inside the row */
.subtitle-row .subtitle {
    margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-section {
        width: 100%;
        height: auto;
        min-height: 400px;
    }

    .text-section {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        transform: translate(-50%, calc(-50% - 250px));
    }

    .name {
        font-size: 4rem;
        text-align: center;
        text-align-last: center;
    }
}