/* Existing styles... I will append new styles. 
   Ideally I should use append_to_file but I only have replace/write.
   I'll read the file first then append. Oh wait I already read it.
   I'll use replace_file_content or write_to_file with full content if I need to make sure context is right.
   Actually I can just use append by replacing the end.
   But I'll just rewrite the file with appended content to be safe and clean.
*/

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

:root {
    --main-color: #FF76A4;
    --bg-text-color: #2F3CBE;
}

body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial Black', sans-serif;
    font-weight: 900;
    background: var(--main-color);
    color: #1a1a1a;
    line-height: 1.6;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-text-color);
    border: 3px solid var(--main-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-text-color);
}

.landing-page {
    position: relative;
    width: 100%;
    /* height: 100vh;  Removed fixed height to allow flowing with content if needed, but keeping for landing */
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 0 60px 80px;
}



/*
   SVG Ripple Implementation
   Solves flickering (no layout thrashing) and quality (vector).
*/

.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--main-color); Removed to allow layering */
    z-index: 11;
    /* Above dim overlay (10) */
    pointer-events: none;
    /* will-change: transform; */
    /* Promote container */
}

.ripple-ring {
    fill: none;
    stroke: var(--bg-text-color);
    stroke-width: 4.5px;
    /* Slightly thicker */
    opacity: 0;
    animation: ringExpand 15s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
    /* Ensure transform applies to circle center */
    vector-effect: non-scaling-stroke;
    /* Keep stroke width constant while scaling */
    /* will-change: transform, opacity; */
}

/* Staggered Animations and Random Positions using CX/CY */
/* 
   Note: For transform scaling to work from the center of each circle, 
   we rely on transform-origin: center (which is default for SVG elements usually 
   if transform-box is fill-box).
   However, we need to ensure the circles have a base radius.
   If r=0, scaling won't work. We need a base r, e.g., 1px.
   And we scale it up.
*/
.ripple-ring:nth-child(1) {
    animation-delay: 0s;
    cx: 20%;
    cy: 20%;
}

.ripple-ring:nth-child(2) {
    animation-delay: 1.5s;
    cx: 80%;
    cy: 80%;
}

.ripple-ring:nth-child(3) {
    animation-delay: 3s;
    cx: 30%;
    cy: 70%;
}

.ripple-ring:nth-child(4) {
    animation-delay: 4.5s;
    cx: 70%;
    cy: 30%;
}

.ripple-ring:nth-child(5) {
    animation-delay: 6s;
    cx: 50%;
    cy: 50%;
}

.ripple-ring:nth-child(6) {
    animation-delay: 7.5s;
    cx: 90%;
    cy: 10%;
}

.ripple-ring:nth-child(7) {
    animation-delay: 9s;
    cx: 40%;
    cy: 60%;
}

.ripple-ring:nth-child(8) {
    animation-delay: 10.5s;
    cx: 60%;
    cy: 40%;
}

.ripple-ring:nth-child(9) {
    animation-delay: 12s;
    cx: 15%;
    cy: 50%;
}

.ripple-ring:nth-child(10) {
    animation-delay: 13.5s;
    cx: 85%;
    cy: 50%;
}

@keyframes ringExpand {
    0% {
        transform: scale(0.01);
        opacity: 0;
    }

    4% {
        transform: scale(4);
        opacity: 1;
    }

    5.33% {
        transform: scale(5.33);
        opacity: 1;
    }

    30% {
        transform: scale(30);
        opacity: 0;
    }

    100% {
        transform: scale(100);
        /* Scale base 1vmax to 100vmax */
        opacity: 0;
    }
}


.landing-content {
    position: relative;
    z-index: 25;
    /* High z-index to stay above everything */
    max-width: 800px;
    pointer-events: none;
    /* Let clicks pass through if needed, but text selectable */
}

/* Re-enable pointer events for text selection */
.landing-content * {
    pointer-events: auto;
}


/* --- Photography Section --- */

.photography-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom */
    padding: 0 60px 80px;
    overflow: hidden;
    /* For existing layout */
}

.photography-content {
    position: relative;
    z-index: 30;
    /* Ensure text is above dim overlay and marquee */
    /* Text brightness is maintained because it's above the overlay */
}

.marquee-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 400px;
    /* Fixed height for photos */
    display: flex;
    align-items: center;
    overflow: visible;
    /* Allow seeing neighbors if shifted */
    z-index: 15;
    /* Above base, below text */
    transition: transform 0.1s ease-out;
    /* Fast response for mouse movement */
}

.marquee-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
    /* will-change: transform; Removed to prevent layer explosion/disappearing elements */
}

/* Pause animation on hover - Handled by JS now */
/* .marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
} */

.photo-item {
    height: 350px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.4s ease;
    cursor: pointer;
    opacity: 1;
    z-index: 15;
    /* Optional shadow */
    /* Shadow removed */
}


.landing-title {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial Black', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--bg-text-color);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
    /* will-change: transform; */
    /* Promote to layer */
    transform: translate3d(0, 0, 0);
    /* Hardware acceleration */
    backface-visibility: hidden;
    perspective: 1000px;
}

.landing-subtitle {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial Black', sans-serif;
    display: block;
    font-size: 1.62rem;
    color: var(--bg-text-color);
    opacity: 1;
    margin-top: 12px;
    font-weight: 900;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {

    .landing-page,
    .photography-section {
        padding: 0 40px 60px;
    }

    .landing-title {
        font-size: 3.15rem;
    }

    .landing-subtitle {
        font-size: 1.26rem;
    }
}

@media (max-width: 768px) {

    .landing-page,
    .photography-section {
        padding: 0 30px 50px;
    }

    .landing-title {
        font-size: 2.25rem;
    }

    .landing-subtitle {
        font-size: 0.99rem;
    }

    .photo-item {
        height: 250px;
        box-shadow: none;
        /* Remove shadow on mobile */
    }

    .marquee-wrapper {
        height: 300px;
    }
}

.text-content p {
    font-size: 2rem;
}

html {
    scroll-behavior: smooth;
}

.down-button,
.up-button {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    /* Use webkit-mask shorthand for better support */
    /* Inline SVG to avoid CORS issues locally */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.0273 62.9248"><path d="M62.9248 10.5957L62.9248 52.3633C62.9248 59.4043 59.3701 62.9248 52.1924 62.9248L10.7324 62.9248C3.58887 62.9248 0 59.4043 0 52.3633L0 10.5957C0 3.55469 3.58887 0 10.7324 0L52.1924 0C59.3701 0 62.9248 3.55469 62.9248 10.5957ZM28.7109 16.4062L28.7109 36.1621L28.8814 41.422L26.8652 39.2725L21.499 33.5986C21.0205 33.0176 20.2344 32.7441 19.5508 32.7441C18.0811 32.7441 17.0215 33.7695 17.0215 35.2051C17.0215 35.957 17.2949 36.5723 17.876 37.085L29.4629 48.2959C30.1807 49.0137 30.7959 49.2188 31.5137 49.2188C32.2656 49.2188 32.8467 49.0137 33.5645 48.2959L45.1855 37.085C45.7324 36.5723 46.0059 35.957 46.0059 35.2051C46.0059 33.7695 44.9121 32.7441 43.4424 32.7441C42.7588 32.7441 42.0068 33.0176 41.5283 33.5986L36.1621 39.2725L34.1562 41.4111L34.3506 36.1621L34.3506 16.4062C34.3506 14.9023 33.0518 13.6719 31.5137 13.6719C29.9756 13.6719 28.7109 14.9023 28.7109 16.4062Z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.0273 62.9248"><path d="M62.9248 10.5957L62.9248 52.3633C62.9248 59.4043 59.3701 62.9248 52.1924 62.9248L10.7324 62.9248C3.58887 62.9248 0 59.4043 0 52.3633L0 10.5957C0 3.55469 3.58887 0 10.7324 0L52.1924 0C59.3701 0 62.9248 3.55469 62.9248 10.5957ZM28.7109 16.4062L28.7109 36.1621L28.8814 41.422L26.8652 39.2725L21.499 33.5986C21.0205 33.0176 20.2344 32.7441 19.5508 32.7441C18.0811 32.7441 17.0215 33.7695 17.0215 35.2051C17.0215 35.957 17.2949 36.5723 17.876 37.085L29.4629 48.2959C30.1807 49.0137 30.7959 49.2188 31.5137 49.2188C32.2656 49.2188 32.8467 49.0137 33.5645 48.2959L45.1855 37.085C45.7324 36.5723 46.0059 35.957 46.0059 35.2051C46.0059 33.7695 44.9121 32.7441 43.4424 32.7441C42.7588 32.7441 42.0068 33.0176 41.5283 33.5986L36.1621 39.2725L34.1562 41.4111L34.3506 36.1621L34.3506 16.4062C34.3506 14.9023 33.0518 13.6719 31.5137 13.6719C29.9756 13.6719 28.7109 14.9023 28.7109 16.4062Z"/></svg>') no-repeat center / contain;
    z-index: 9999;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.down-button {
    background-color: #2F3CBE;
}

.up-button {
    background-color: #FF76A4;
    transform: rotate(180deg);
}

.down-button:hover {
    transform: translateY(5px);
}

.up-button:hover {
    transform: rotate(180deg) translateY(-5px);
    /* Correct direction for up button hover */
}

/* About Me Section */
.about-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Align bottom */
    justify-content: flex-start;
    /* Align left */
    padding: 0 60px 80px;
    /* Match landing padding */
    background-color: var(--main-color);
    /* Will morph to White */
}

.photography-section .down-button {
    background-color: #FF76A4;
    /* Pink button on Blue BG */
}

.about-section .up-button {
    background-color: #C011D7;
    /* Purple button */
}

.about-content {
    display: flex;
    flex-direction: column;
    /* Stack image above text */
    align-items: flex-start;
    /* Left align everything */
    gap: 40px;
    z-index: 20;
}

.about-pfp {
    width: 200px;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}

.about-title {
    font-size: 4.5rem;
    /* Match landing-title */
    font-weight: 900;
    color: var(--bg-text-color);
    /* Will morph to Black */
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Match landing-title */
}

.about-subtitle {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial Black', sans-serif;
    display: block;
    font-size: 1.62rem;
    color: var(--bg-text-color);
    opacity: 1;
    margin-top: 12px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        align-items: center;
        /* Keep centered on mobile */
        text-align: center;
        /* Center the text inside the wrapper */
        gap: 20px;
    }

    .about-title {
        font-size: 3rem;
    }

    .about-pfp {
        width: 150px;
        height: 150px;
    }

    .about-subtitle {
        font-size: 1.2rem;
        /* scale down subtitle too */
    }
}