/* Styles for: About the Author (Bio) Page */

html,
body {
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.canvas-horiz-scroll {
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
}

#bio-page-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f1e2d0;
  z-index: -10;
}

.canvas {
  top: 0;
  right: 0;
  width: 100vw;
  height: auto;
  width: auto; /* 1922px */
  height: 191.9444vh; /* 2073px */
  aspect-ratio: 1922 / 2073;
  position: relative; /* Ensure canvas is the positioning context for menu */
}
@media (orientation: portrait) {
  .canvas {
    min-width: 100vw;
  }
}
@media (min-aspect-ratio: 19/10) {
  .canvas-horiz-scroll {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
  }
  .canvas {
    position: relative; /* Keep positioning context for menu */
    left: auto;
    right: auto;
    transform: none;
  }
}

section {
  width: auto;
  height: 100vh;
  aspect-ratio: 16/9;
  position: relative;
}
@media (orientation: portrait) {
  section {
    width: 100vw;
    height: auto;
    aspect-ratio: 16/9;
  }
}

#bio-biography-text {
  position: absolute;
  left: 96.5741vh;
  top: 59.9074vh;
  width: 71.1111vh; /* 768px - fixed width */
  height: auto; /* Dynamic height based on content */
  z-index: 5;
}

#bio-biography-text object {
  width: 100%;
  height: 100%;
}
@media (orientation: portrait) {
  #bio-biography-text {
    left: 54.3229vw;
    top: 33.6979vw;
    width: 39.8958vw;
    height: auto;
  }
}

#plumes {
  position: absolute;
  left: 0vh;
  top: 0vh;
  width: auto; /* 1922px */
  height: 191.9444vh; /* 2073px */
  aspect-ratio: 1922 / 2073;
  background: url(assets/plumes.png) no-repeat;
  background-size: contain;
  z-index: -5;
}
@media (orientation: portrait) {
  #plumes {
    left: 0vw;
    top: 0vw;
    width: 100.1042vw;
    height: auto;
  }
}

#bio-purveyor {
  position: absolute;
  left: 72.7778vh;
  top: 32.2222vh;
  width: auto; /* 1066px */
  height: 30vh; /* 324px */
  aspect-ratio: 1066 / 324;
  background: url(assets/purveyor.png) no-repeat;
  background-size: contain;
  z-index: 20;
}
/* When viewport is narrower than 16:9, right-align bio image */
@media (max-aspect-ratio: 16/9) and (orientation: landscape) {
  #bio-purveyor {
    right: 0;
    left: auto; /* Override left positioning */
  }
}

@media (orientation: portrait) {
  #bio-purveyor {
    left: 40.9375vw;
    top: 18.125vw;
    width: 55.5208vw;
    height: auto;
  }
}

#bio-L {
  position: absolute;
  left: 144.0741vh;
  top: 153.4259vh;
  width: auto; /* 278px */
  height: 15.5556vh; /* 168px */
  aspect-ratio: 278 / 168;
  background: url(assets/L.png) no-repeat;
  background-size: contain;
  z-index: 22;
}
@media (orientation: portrait) {
  #bio-L {
    left: 81.0417vw;
    top: 86.3021vw;
    width: 14.4792vw;
    height: auto;
  }
}

/* Mobile background container - Dedicated background element for bio page */
#bio-mobile-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('assets/plumes.png') no-repeat center center;
  background-size: contain;
  background-color: #f1e2d0; /* Bio page background color */
  z-index: 1050; /* Behind mobile container (1100) but in front of everything else */
  display: none;
}

/* Mobile container - Proportional scaling container for bio page */
#bio-mobile-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Design canvas: 1080x2400 - scale to fit width with max height constraint */
  width: min(100vw, 45vh); /* 1080/2400 = 0.45 aspect ratio */
  height: min(222.22vw, 100vh); /* 2400/1080 = 2.222 aspect ratio */
  z-index: 1100; /* Higher than footer (1000) and other elements */
  display: none;
}

/* Mobile slider - Positioned relative to bio mobile container */
#bio-mobile-slider {
  position: absolute;
  left: 17.6852%; /* 191/1080 * 100 - position within mobile container */
  top: 38.2917%; /* 919/2400 * 100 - position within mobile container */
  width: 70.5556%; /* 762/1080 * 100 - design dims: 762×854px */
  height: 35.5833%; /* 854/2400 * 100 - design dims: 762×854px */
  background: url('assets/home-mobile-slider.png') no-repeat center center;
  background-size: contain;
}

/* Mobile footer - Portrait-only footer bar for bio page */
#bio-mobile-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8.3333vw; /* ~34px at 1080px width */
  background: rgba(241, 226, 208, 0.3); /* Bio page background with transparency */
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.125vw; /* ~15px at 1080px width */
  box-sizing: border-box;
  z-index: 1200; /* Above mobile container (1100) */
  cursor: default; /* Remove pointer cursor on hover */
}

#bio-mobile-social-icons {
  display: flex;
  gap: 1.0417vw; /* ~5px at 1080px width */
  align-items: center;
  transform: translateY(-0.5208vw); /* ~-2px at 1080px width */
}

#bio-mobile-email-text {
  color: #1e100a;
  font-size: 2.5vw; /* ~12px at 1080px width */
  font-family: "Georgia", serif;
  text-shadow: none;
}

.bio-mobile-social-icon {
  width: 5vw; /* ~24px at 1080px width */
  height: 5vw;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.bio-mobile-social-icon:hover {
  opacity: 1;
}

#bio-mobile-icon-email {
  background: var(--icon_email_svg_url) no-repeat center;
  background-size: contain;
}

#bio-mobile-icon-facebook {
  background: var(--icon_facebook_svg_url) no-repeat center;
  background-size: contain;
  display: none; /* Keep hidden like desktop version */
}

#bio-mobile-icon-instagram {
  background: var(--icon_instagram_svg_url) no-repeat center;
  background-size: contain;
  display: none; /* Keep hidden like desktop version */
}

#bio-mobile-copyright {
  color: #1e100a;
  font-size: 2.5vw; /* ~12px at 1080px width */
  font-family: "Georgia", serif;
  text-shadow: none;
}

/* Portrait mode styles for bio page */
@media (orientation: portrait) {
  body {
    background-color: #f1e2d0; /* Bio page background color */
  }

  /* Hide all animated elements for mobile static version */
  .canvas-horiz-scroll .canvas > *:not(#bio-mobile-background-container):not(#bio-mobile-container):not(#bio-mobile-footer-bar) {
    display: none !important;
  }

  /* Show mobile elements in portrait for bio page */
  #bio-mobile-background-container,
  #bio-mobile-container,
  #bio-mobile-footer-bar {
    display: block;
  }

  #bio-mobile-footer-bar {
    display: flex; /* footer needs flexbox for layout */
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 2.0833vw 3.125vw; /* ~10px 15px at 1080px width */
  }

  #bio-mobile-copyright {
    margin-top: 1.0417vw; /* ~5px at 1080px width */
    margin-left: 3.125vw; /* ~15px at 1080px width */
  }
}