/* Boot: prevent first-paint flicker & accidental early transitions */
.no-anim .bio-sheet,
.no-anim .bio-overlay,
.no-anim .showreel-modal { transition: none !important; animation: none !important; }
/* Ensure BIO is not visible until opened */
.bio-sheet{ visibility: hidden; }
.bio-sheet.open{ visibility: visible; }

/* === katariinatamm.com — BIO overlay styles (scrim-only, perf-safe) === */

/* Overlay behind the sheet */
.bio-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}
.bio-overlay.open{ opacity: 1; pointer-events: auto; }

/* Bottom sheet container */
.bio-sheet{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(110%);
  width: min(860px, 92vw);
  max-height: 80vh;
  overflow: auto;
  /* Base surface (no filters) */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  border-radius: 18px 18px 0 0;
  padding: 1.1rem 1.25rem 0;
  color: #f5f5f5;
  z-index: 99;
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  pointer-events: none;
}
.bio-sheet.open{ transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Scrim drawn inside the sheet for legibility (no blur) */
.bio-sheet::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
          linear-gradient(180deg,
          rgba(18,18,18,0.55) 0%,
          rgba(18,18,18,0.42) 24%,
          rgba(18,18,18,0.38) 52%,
          rgba(18,18,18,0.42) 76%,
          rgba(18,18,18,0.55) 100%),
          radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.00) 60%);
  box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.10),
          0 8px 30px rgba(0,0,0,0.25);
}

/* Ensure content paints above scrims */
.bio-sheet > *{ position: relative; z-index: 1; }

/* Typography */
.bio-sheet,
.bio-content,
.bio-details{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
.bio-content{
  max-width: 58ch;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  padding-bottom: 96px; /* space before footer */
}

/* Top fold */
#bio-title{
  font-weight: 200;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  margin: .5rem 0 .9rem;
}
.bio-lines{
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 19px);
  line-height: 1.65;
  letter-spacing: .01em;
  text-align: center;
  margin: 0 auto .6rem;
  max-width: 56ch;
}
.bio-lines span{ display:block; margin:.18rem 0; }

/* Divider below the top fold (style either <hr> or .bio-divider) */
.bio-content hr,
.bio-divider{
  height: 1px;
  border: 0;
  margin: .9rem auto 1.1rem;
  width: min(520px, 80%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  opacity: .9;
}

/* "More" summary */
.bio-details summary{
  list-style: none;
  cursor: pointer;
  display: block;
  width: max-content;
  margin: .7rem auto .7rem;
  text-align: center;
  font-weight: 200;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bio-details summary::-webkit-details-marker{ display: none; }
.bio-details[open] > summary{ display: none; }

/* Sections */
.bio-details h3{
  font-weight: 300;
  letter-spacing: .06em;
  margin: 1rem 0 .35rem;
}
.bio-details ul{ margin: .35rem 0 0; padding-left: 1.1em; }
.bio-details li, .bio-details p{ font-weight: 300; line-height: 1.6; max-width: 60ch; }

/* Desktop two-column layout for details */
@media (min-width: 900px){
  .bio-details section{
    display: grid;
    grid-template-columns: 14ch 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  .bio-details h3{ margin: 0; }
  .bio-details section + section{
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: .9rem; margin-top: .9rem;
  }
  .bio-details section:first-of-type{
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: .9rem; margin-top: .9rem;
  }
}

/* Bottom fade above footer */
.bio-sheet::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,20,20,0), rgba(20,20,20,0.98));
  border-radius: 0 0 18px 18px;
  z-index: 2;
}

/* Footer with perf-safe scrim bar */
.bio-footer{
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  padding: .5rem 0 max(.8rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  isolation: isolate;
  contain: paint;
  will-change: transform;
}
.bio-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
          linear-gradient(180deg,
          rgba(18,18,18,0.40) 0%,
          rgba(18,18,18,0.52) 45%,
          rgba(18,18,18,0.64) 100%),
          radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%);
  box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.08),
          0 -6px 24px rgba(0,0,0,0.24);
  opacity: .98;
}
.bio-footer > *{ position: relative; z-index: 1; }

/* Bottom CLOSE button */
.bio-close-bottom{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 44px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.bio-close-bottom:hover{ background: rgba(255,255,255,0.14); }

/* Top X button (kept subtle but readable) */
.bio-close{
  position: sticky;
  top: 6px;
  margin-left: auto;
  display: inline-block;
  background: rgba(0,0,0,0.15);
  color: #fff;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  opacity: .9;
  cursor: pointer;
  z-index: 5;
  border-radius: 9999px;
  padding: 2px 10px;
}
.bio-close:hover{ background: rgba(0,0,0,0.22); }

/* Ensure the overlay/sheet don't intercept pull-to-refresh when closed */
.bio-overlay{ pointer-events: none; }
.bio-overlay.open{ pointer-events: auto; }
.bio-sheet{ pointer-events: none; }
.bio-sheet.open{ pointer-events: auto; }

/* Mobile polish */
@media (max-width: 480px){
  #bio-title{ font-size: 18px; letter-spacing: .20em; }
  .bio-lines{ font-size: 16px; }
  .bio-details h3{ font-size: 18px; }
  .bio-details li, .bio-details p{ font-size: 15px; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bio-sheet, .bio-sheet *{
    animation: none !important;
    transition: none !important;
  }
}


/* --- Safe removal of showreel close "X" without touching JS --- */
#showreel-close, .showreel-close {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}