/* Double-layer background + smooth zoom (override)
   - Keeps your original page.css intact
   - Adds blurred fill behind + full-width foreground image
   - Foreground smoothly zooms from 1.00 -> 1.25 as screen becomes portrait
*/

.main_container{
  position: relative;
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #000; /* fallback */
  overflow: hidden;
}

/* ensure content sits above background layers */
.main_container > *:not(.main_header){
  position: relative;
  z-index: 2;
}

/* blurred fill behind */
.main_container::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("./IMG_20200613_215756_crop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(32px);
  transform: scale(1.08);  /* hide blur edge */
  opacity: 0.55;
  pointer-events: none;
}

/* foreground "hero" image:
   - Always spans full viewport width (no blur bars on desktop)
   - Height follows aspect ratio (auto)
   - Zoom is applied via transform (set by zoom.js) and is smooth, max 1.25
*/
.main_container::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: url("./IMG_20200613_215756_crop.jpg");
  background-size: 100% auto;         /* full width */
  background-position: center 20%;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;

  transform-origin: center top;
  transform: scale(var(--fg-zoom, 1));
}

/* touch: avoid scroll/zoom gestures interfering with canvas control */
#myCanvas{ touch-action: none; }

/* Header positioning + mobile compaction */
@media (max-width: 900px){
  .main_header_content{
    padding: 2px 10px !important;
    border-radius: 32px !important;
  }
}

/* Header position (single source of truth) */
.main_header{
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 5vh) !important;
}