/*
 * Page-Specific Styles for the Bio Page (bio/index.html)
 *
 * This file contains styles unique to the biography page, including the
 * two-column layout, auto-switching portrait, and the tree-ring timeline.
 */

/* ------------------- */
/* Bio Intro Layout    */
/* ------------------- */
/*
 * Styles the main introductory section of the bio page.
 */
.bio-intro {
    /* Adds padding at the bottom for spacing. */
    padding-bottom: 3rem;
    /* Adds a border to separate it from the timeline section. */
    border-bottom: 2px solid var(--color-text);
}

/*
 * Sets up a two-column layout for the photo and text using flexbox.
 */
.bio-layout {
    /* Enables flexbox. */
    display: flex;
    /* Allows items to wrap to the next line on smaller screens. */
    flex-wrap: wrap;
    /* Creates a gap between the two columns. */
    gap: 2rem;
    /* Aligns items to the start of the container. */
    align-items: flex-start;
}

/*
 * Defines the column for the artist's portrait.
 * It takes up roughly 40% of the container's width.
 */
.bio-photo-column {
    /* The column will grow and shrink as needed, with a base width of 40%. */
    flex: 1 1 40%;
    /* Sets a minimum width to prevent it from becoming too narrow. */
    min-width: 300px;
}

/*
 * Defines the column for the biographical text.
 * It takes up roughly 60% of the container's width.
 */
.bio-text-column {
    /* The column will grow and shrink, with a base width of 55%. */
    flex: 1 1 55%;
}

/* ------------------- */
/* Auto-Switching Photo*/
/* ------------------- */
/*
 * Container for the portraits.
 * Position is relative to allow absolute positioning of the images inside.
 */
#portrait-container {
    position: relative;
    /* The container's size is determined by its content (the images). */
    width: 100%;
    /* A fixed aspect ratio helps maintain layout consistency. */
    aspect-ratio: 1 / 1;
    /* A border that matches the site's aesthetic. */
    border: 3px solid var(--color-text);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

/*
 * Styles for the portrait images.
 */
#portrait-container img {
    /* All images are positioned absolutely within the container. */
    position: absolute;
    top: 0;
    left: 0;
    /* Ensures images fill the container without distortion. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The opacity is used for the fade transition. Initially, all are transparent. */
    opacity: 0;
    /* Smooth transition for the opacity change. */
    transition: opacity 1s ease-in-out;
}

/*
 * The 'active-portrait' class makes an image visible.
 * This class will be toggled by JavaScript.
 */
#portrait-container img.active-portrait {
    opacity: 1;
}

/* ------------------- */
/* Tree Ring Timeline  */
/* ------------------- */
/*
 * Styles the section containing the timeline.
 */
.timeline-section {
    /* Adds vertical padding for spacing. */
    padding: 3rem 0;
}

/*
 * The main container for the tree ring timeline.
 * It's designed to be a large, circular element.
 */
.tree-ring-timeline {
    /* Centers the timeline within its section. */
    margin: 2rem auto;
    /* Sets a max-width to keep it from getting too large on wide screens. */
    max-width: 700px;
    /* Creates a square container for the circle. */
    aspect-ratio: 1 / 1;
    /* Relative positioning to place the rings inside. */
    position: relative;
    /* Uses flexbox to center the rings. */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * Styles for each individual ring in the timeline.
 * The rings are created as concentric circles using borders.
 */
.ring, .ring-core {
    /* Absolutely positioned to stack on top of each other. */
    position: absolute;
    /* Creates the circular shape. */
    border-radius: 50%;
    /* The "wood" of the ring is created with a thick border. */
    border: 10px solid var(--color-background);
    /* A darker line to define the edge of the ring. */
    box-shadow: 0 0 0 3px var(--color-text);
    /* Default: slightly less prominent for non-hovered rings */
    opacity: 0.7;
    /* Smooth transitions for all interactive effects */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* Box-sizing ensures padding and border are included in the element's total width and height. */
    box-sizing: border-box;
    /* Center each ring absolutely */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Set background to transparent so inner rings can be reached */
    background: transparent;
    /* Enable pointer events for hover detection */
    pointer-events: all;
}

/*
 * Individual ring sizes - from largest (2025) to smallest (2020)
 */
.ring-2025 {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ring-2024 {
    width: 85%;
    height: 85%;
    z-index: 2;
}

.ring-2023 {
    width: 70%;
    height: 70%;
    z-index: 3;
}

.ring-2022 {
    width: 55%;
    height: 55%;
    z-index: 4;
}

.ring-2021 {
    width: 40%;
    height: 40%;
    z-index: 5;
}

.ring-2020 {
    width: 25%;
    height: 25%;
    z-index: 6;
    background-color: var(--color-text);
}

/*
 * Responsive adjustment for smaller screens
 */
@media (max-width: 600px) {
    .tree-ring-timeline {
        max-width: 95vw;
    }
}

/*
 * The content within each ring (year, description).
 * It's hidden by default and appears on hover.
 */
.ring-content {
    /* Positions content within its parent ring. */
    position: absolute;
    /* Hides the content initially. */
    opacity: 0;
    z-index: 20; /* Ensure text is above ring backgrounds */
    /* Centers the content within the ring. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Prevents the text from being selected or interacted with when hidden. */
    pointer-events: none;
    /* Smooth transition for the fade-in effect. */
    transition: opacity 0.3s ease-in-out;
    /* Text color that contrasts with the hover background. */
    color: white;
    padding: 1rem;
    text-align: center;
}

/*
 * Enhanced hover effect for the rings.
 * When a ring is hovered over, its background changes, it scales up, and the content appears.
 */
.ring:hover, .ring-core:hover {
    /* Highlight hovered ring: pop effect, glow, and full opacity */
    background-color: var(--color-secondary-accent);
    border-color: var(--color-secondary-accent);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05); /* Pop out and center hovered ring */
    box-shadow: 0 0 15px 5px rgba(249, 187, 58, 0.7), 0 0 0 3px var(--color-text);
}

/* Make all rings transparent when any ring is being hovered */
.tree-ring-timeline:hover .ring:not(:hover),
.tree-ring-timeline:hover .ring-core:not(:hover) {
    opacity: 0.1;
}

/* Shows the content of the hovered ring. */
.ring:hover .ring-content, .ring-core:hover .ring-content {
    opacity: 1;
    pointer-events: auto; /* Makes the content interactive */
    z-index: 30; /* Ensure hovered text is always on top */
}

/* Styles for the year inside the ring content. */
.ring-content h3 {
    color: var(--color-primary-accent);
}

/* Styles for the description inside the ring content. */
.ring-content p {
    font-size: 0.9rem;
    margin: 0;
}