/* --- Base Styles & Font --- */
:root {
  --primary-text-color: #514e4eed;
  --secondary-text-color: #534e4ec0; /* Dark grey for description */
  --title-text-color:#000;
  --background-color: #fff;    /* Requirement 4.1: White background */
  --separator-color: #ddd;
  --page-max-width: 1200px;    /* Max width for the content */
  --page-padding: 30px;        /* Padding inside the container */
}

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

html {
  scroll-behavior: smooth; /* Nice for single-page scrolling if links were added */
}

body {
  font-family: 'Montserrat', sans-serif; /* Requirement 5: Modern Font */
  background-color: var(--background-color);
  color: var(--primary-text-color);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll during animation */
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space below images */
}

/* --- Container / Margin --- */
.container { /* Requirement 4.2: Page Margin */
  max-width: var(--page-max-width);
  margin: 0 auto; /* Center the container */
  padding: var(--page-padding);
}

/* --- Header / Hero Section --- */
.hero-section {
  margin-bottom: 0.5rem; /* Space below header */
  min-height: 40vh; /* Give it some height */
  display: flex;
  align-items: center; /* Vertically center content within header area */
}

.hero-content {
  width: 100%;
  /* Mobile First: Stacked by default */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items on mobile */
  text-align: center;
  margin-bottom: 30px; /* so that in mobile view it doesn't look too crammed up with the about me text */
}

.hero-left {
  width: 100%; /* Full width on mobile */
  margin-bottom: 2rem;
}

.hero-right {
  width: 100%; /* Full width on mobile */
  display: flex; /* To help center image if needed */
  justify-content: center;
}

#main-heading { /* Requirement 3: Big Heading */
  font-size: clamp(3.5rem, 12vw, 6.5rem); /* Responsive font size */
  font-weight: 100;
  margin-bottom: 0.8rem;
  color: var(--primary-text-color);
  font-family: 'BrandStack'; /*'Avifan DEMO'*/;
  line-height: 1;

  /* Animation Setup */
  opacity: 0;
  transform: translateX(-100%); /* Start off-screen left */
  animation: slideInHeading 1.5s 0.3s ease-out forwards; /* name duration delay timing fill-mode */
}

.artist-title {
  /* ... (keep existing styles like font-size, color, etc.) ... */
  color: var(--title-text-color);
  line-height: 1.6;
  font-size: clamp(1rem, 2vw, 4.5rem); /* Responsive font size */
  /* === ADDITIONS FOR REQUIREMENT 2 === */
  opacity: 0; /* Start fully transparent */
  margin-top: 10px;
  animation: fadeInSubtitle 1.2s ease-out 0.6s forwards; /* name duration timing delay fill-mode */
  /* Note: Delay (0.6s) starts slightly after heading animation delay (0.3s) */
  /* === END ADDITIONS === */
}

/* === NEW: Style for the zoom container === */
.zoom-container {
  position: relative; /* Crucial for positioning the lens */
  display: inline-block; /* Or block, depending on desired layout flow */
  overflow: hidden; /* Hide parts of the lens that might go outside */
  cursor: zoom-in; /* Indicate zoom capability on hover */
  vertical-align: top; /* Align containers nicely if inline-block */
}

.portrait-photo {
  /* ... (keep existing styles like max-width, border-radius etc.) ... */
  max-width: 100%;
  width: 50%;
  height: auto;
  /*aspect-ratio: 1 / 1;*/
  object-fit: cover;
  border-radius: 10%;
  border: 3px solid var(--separator-color);
  /* === ADDITION FOR REQUIREMENT 1 === */
  transition: transform 0.3s ease-in-out; /* Smooth transition for zoom */
  display: block;
  /* === END ADDITION === */
}

/* === NEW: Style for the Magnifier Lens === */
.magnifier-lens {
  position: absolute;
  border: 2px solid #ccc; /* Style the lens border */
  border-radius: 50%; /* Circular lens, or remove for square */
  width: 150px; /* Size of the lens */
  height: 150px;
  background-repeat: no-repeat;
  display: none; /* Initially hidden */
  pointer-events: none; /* So it doesn't block mouse events on the image */
  z-index: 10; /* Ensure it's above the image */
}

/* --- About Section --- */
.about-section {
  margin-bottom: 3rem;
  margin-left: 0px;
  margin-right: 0px;
  width:100%
  /* Text stretches end-to-end within container padding */
}

.about-section p {
  font-size: 1.1rem;
  color: var(--primary-text-color);
  max-width: 1000px; /* Optional: Limit text width for readability */
  margin: 0 auto;   /* Center the text block if max-width is used */
  text-align: justify;
}


/* --- Portfolio Section --- */
.portfolio-section {
  margin-top: 2rem;
}

.separator { /* Requirement 4.3: Separation Line */
  border: none;
  height: 1px;
  background-color: var(--separator-color);
  margin: 4rem 0; /* More space around separators */
}

.painting-entry {
  margin-bottom: 3rem;
}

.painting-title { /* Requirement 4.3: Painting Title */
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 400; /* Less bold than main heading */
  margin-bottom: 2rem;
  color: var(--primary-text-color);
}

.painting-content {
  /* Mobile First: Stacked by default */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Space between image and text on mobile */
}

.painting-image-container {
  /* ... (keep existing styles like margin, max-width) ... */
  margin: 0 auto;
  max-width: 600px;
   /* === ADDITION FOR REQUIREMENT 1 === */
   /* Optional: Helps contain the zoomed image if it risks overflowing */
   /* overflow: hidden; */ /* Uncomment if needed */
   /* === END ADDITION === */
}

.painting-image {
  /* === ADDITION FOR REQUIREMENT 1 === */
  /* remove transition / transform if jS handles desktop */
 /*transition: transform 0.3s ease-in-out; */ /* Smooth transition for zoom */
  /* === END ADDITION === */
  /* Ensure display: block is still here if you added it previously */
  display: block;
  width: 100%; /* Ensure it takes container width */
  height: auto;
}

/* === ADDITION FOR REQUIREMENT 1 === */
/* Apply zoom on hover (desktop) and active (touch press) */
.painting-image:hover,
.painting-image:active {
  transform: scale(1.08); /* Zoom factor - adjust as desired */
  cursor: pointer; /* Indicate interactivity */
}

.painting-description { /* Requirement 4.3: Description styles */
  color: var(--secondary-text-color); /* Dark grey */
  font-weight: 400;
  text-align: center; /* Center text on mobile */
}

.painting-description p:first-child {
  margin-bottom: 1em; /* Add space between description and details */
}


.touch-device .zoom-container {
  cursor: default; // Remove zoom-in cursor on touch
}


/* --- Desktop Layout (using min-width media query) --- */
/* Requirement 4.3 & 4.4: Apply desktop layout rules */
@media (min-width: 768px) { /* Adjust breakpoint as needed (768px is common for tablets) */

  .hero-content {
      flex-direction: row; /* Arrange left/right side-by-side */
      justify-content: space-between; /* Space them out */
      align-items: center; /* Align items vertically in the middle */
      text-align: left; /* Align text left by default on desktop */
  }

  .hero-left {
      flex-basis: 55%; /* Allocate space for the left part */
      /* Requirement 4.3: Heading center justified in left partition */
      /* Requirement 4.3: Title center justified below heading */
      display: flex;
      flex-direction: column;
      /* The text-align: center below will center the content */
      padding-left: 5%; /* Add some padding to push from edge */
      margin-bottom: 0; /* Reset mobile margin */
      align-items: center; /* align the main titles in the center of the left part */
       /* text-align: center; /* Centers the text within this container */
  }
   #main-heading {
      margin-left: 0; /* Overrides potential centering from parent if needed */
      text-align: left; /* Ensure heading text is left aligned */
  }
  .artist-title {
      text-align: left; /* Ensure title text is left aligned */
  }

  .hero-right {
      flex-basis: 40%; /* Allocate space for the right part */
      /* Requirement 4.3: Portrait photo right justified */
      display: flex;
      justify-content: center; /* Push content (image) to the center*/
      align-items: center;
  }

 /* Ensure containers behave correctly on desktop */
 .hero-right .zoom-container {
  /* Adjust size/positioning if needed */
}

  .portrait-photo {
      width: auto; /* Let max-width control size */
      max-width: 250px; /* Slightly larger on desktop */
      /* No float needed with flexbox */
  }

  .about-section p {
       text-align: left; /* Left align about text on desktop */
  }


  .painting-content {
      flex-direction: row; /* Side-by-side layout for image and text */
      gap: 3rem; /* More gap on desktop */
      align-items: flex-start; /* Align top edges */
  }

  .portrait-photo {
    /* Overwrite mobile width settings */
    width: auto;
    max-width: 250px;
    /* Keep the transition from the base rule */
 }

 .painting-image-container {
    /* ... (keep existing desktop styles like flex-basis) ... */
    flex-basis: 60%;
    margin: 0;
    max-width: none;
     /* === ADDITION FOR REQUIREMENT 1 (Desktop context) === */
     /* More likely needed on desktop where layout is tighter */
     /* overflow: hidden; */ /* Uncomment if zoomed image breaks layout */
     /* === END ADDITION === */
 }


 .painting-image-container .zoom-container {
  width: 100%; /* Make container fill the image area */
}

  .painting-description {
      /* Requirement 4.3: Description on the right */
      flex-basis: 40%; /* Adjust ratio as desired */
      text-align: left; /* Left align text on desktop */
      padding-top: 1rem; /* Optional: Add some top padding to align better visually */
      font-size: 1.5rem;
  }
}


/* --- Heading Animation Keyframes --- */
@keyframes slideInHeading {
  /* ... (keep existing keyframes) ... */
   0% {
      opacity: 0;
      transform: translateX(-100%);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

/* === ADDITION FOR REQUIREMENT 2 === */
/* --- Subtitle Fade-in Animation Keyframes --- */
@keyframes fadeInSubtitle {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}