/* ==========================================================================
   BIO PAGE STYLES — Udet Jasso Artist Portfolio
   ==========================================================================

   Styles specific to the biography/about page (bio.html). This page
   presents the artist's biography in a centered content panel with a
   two-column layout: biographical text on the left, a circular portrait
   on the right.

   HTML structure:
   <main id="main-content">
     <div class="bio-container">
       <h1 class="page-title">Artist Bio</h1>
       <div class="bio-grid reveal">
         <div class="bio-text"><p>...</p></div>
         <div class="bio-portrait floating"><img ...></div>
       </div>
     </div>
   </main>

   Design goals:
   - Elegant, readable biography text
   - Circular portrait with a gentle floating animation
   - Responsive: stacks to single column on mobile
   - Maintains the dark gothic-romantic aesthetic

   This file builds on top of css/styles.css which must be loaded first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION 1: Bio Container
   --------------------------------------------------------------------------
   The outer wrapper for all bio page content. Max-width constrains the
   panel, auto margins center it horizontally, and padding provides
   vertical breathing room between the nav bar and the content.
   -------------------------------------------------------------------------- */

.bio-container {
   max-width: var(--max-width-narrow);
   margin: 0 auto;
   padding: var(--space-xl) var(--space-lg);
   position: relative;
   z-index: 1;     /* Above bubble background (z-index: 0) */
   flex: 1;        /* Ensures page content fills available space */
}


/* --------------------------------------------------------------------------
   SECTION 2: Page Title
   --------------------------------------------------------------------------
   The shared "Artist Bio" heading styled with the Metal Mania display
   font and centered at the top of the content panel.
   -------------------------------------------------------------------------- */

.page-title {
   font-family: var(--font-heading);
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   color: var(--color-text);
   text-align: center;
   margin-bottom: var(--space-xl);
   text-shadow: 0 0 20px rgba(216, 167, 177, 0.2);
}


/* --------------------------------------------------------------------------
   SECTION 3: Bio Grid — Two-Column Layout
   --------------------------------------------------------------------------
   The main content grid places biography text on the left and the
   artist portrait on the right. Uses CSS Grid with uneven column
   widths so the text column gets more space.

   Layout:
   - Desktop: two-column grid (1.2fr 0.8fr)
   - Mobile (<768px): single column, portrait moves above text
   -------------------------------------------------------------------------- */

.bio-grid {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   gap: var(--space-xl);
   align-items: start;   /* Top-align so portrait doesn't force text down */
}


/* --------------------------------------------------------------------------
   SECTION 4: Biographical Text
   --------------------------------------------------------------------------
   The left column containing the artist's biography. Multiple paragraphs
   with generous line-height for comfortable reading of the EB Garamond
   serif font.
   -------------------------------------------------------------------------- */

.bio-text {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

/* Individual paragraphs of biography text. Font-size and line-height
   are optimized for long-form reading. */
.bio-text p {
   font-family: var(--font-body);
   font-size: 1.1rem;
   line-height: 1.8;
   color: var(--color-text);
   opacity: 0.9;
}

/* First paragraph slightly larger for a subtle "lead" effect */
.bio-text p:first-child {
   font-size: 1.15rem;
}


/* --------------------------------------------------------------------------
   SECTION 5: Portrait
   --------------------------------------------------------------------------
   The right column containing the artist's circular portrait. The portrait
   has a midnight-purple border and a gentle floating animation that creates
   an ethereal, dreamlike quality — as if the portrait is suspended in air.

   The floating animation is slow (6 seconds per cycle) and subtle
   (only 8px of movement) to avoid being distracting while still
   adding visual interest.
   -------------------------------------------------------------------------- */

.bio-portrait {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* The circular portrait image */
.bio-portrait img {
   width: 280px;
   height: 280px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--color-accent-primary);
   /* Soft pink glow emanating from behind the portrait */
   box-shadow:
      0 0 20px rgba(216, 167, 177, 0.15),
      0 0 40px rgba(216, 167, 177, 0.05);
}


/* --------------------------------------------------------------------------
   SECTION 6: Floating Animation
   --------------------------------------------------------------------------
   Applied via the `.floating` class on the portrait wrapper. The portrait
   gently bobs up and down, creating an ethereal, suspended-in-space
   feeling. The glow intensifies slightly at the peak of the float.
   -------------------------------------------------------------------------- */

@keyframes bio-portrait-float {
   0%, 100% {
      transform: translateY(0);
      box-shadow:
         0 0 20px rgba(216, 167, 177, 0.15),
         0 0 40px rgba(216, 167, 177, 0.05);
   }
   50% {
      transform: translateY(-8px);
      /* Glow intensifies at the peak of the float */
      box-shadow:
         0 0 30px rgba(216, 167, 177, 0.25),
         0 0 60px rgba(216, 167, 177, 0.1);
   }
}

.floating img {
   animation: bio-portrait-float 6s ease-in-out infinite;
}


/* --------------------------------------------------------------------------
   SECTION 7: Responsive Layout
   --------------------------------------------------------------------------
   On tablet and mobile, the two-column layout collapses to a single column.
   The portrait is moved above the text (using CSS order) so visitors see
   the face before reading the biography — a common UX pattern for
   personal/about pages.
   -------------------------------------------------------------------------- */

/* ---- Tablet and below (768px) ---- */
@media screen and (max-width: 768px) {
   .bio-grid {
      /* Switch to single column */
      grid-template-columns: 1fr;
      gap: var(--space-lg);
   }

   /* Move portrait above text on mobile */
   .bio-portrait {
      order: -1;
   }

   .bio-portrait img {
      width: 220px;
      height: 220px;
   }

   .bio-container {
      padding: var(--space-lg) var(--space-md);
   }

   .bio-text p {
      font-size: 1rem;
      line-height: 1.7;
   }
}

/* ---- Small mobile (480px) ---- */
@media screen and (max-width: 480px) {
   .bio-portrait img {
      width: 180px;
      height: 180px;
   }

   .bio-container {
      padding: var(--space-lg) var(--space-sm);
   }
}


/* --------------------------------------------------------------------------
   SECTION 8: prefers-reduced-motion
   --------------------------------------------------------------------------
   For users who prefer reduced motion, stop the floating animation
   and show the portrait statically.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
   .floating img {
      animation: none;
   }
}