/*
Theme Name: MaxBaltoProSiteV2.6SEO
Theme URI: https://maxbalto.com
Author: Hyper Media Corp
Author URI: https://hypmedia.com
Description: Full WordPress theme for Max Balto with lens flares shifted left onto saxophone after video review.
Version: 2.6
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: maxbaltoprov29
*/

:root { --mb-gold: #d7a542; }

html,body{
  margin:0!important;
  padding:0!important;
  background:#000!important;
  overflow:hidden!important;
  font-family:Arial,Helvetica,sans-serif;
}

header,nav,.menu,.main-navigation,.wp-block-navigation,
.site-header,.site-footer,[class*="nav"],[class*="menu"],[class*="header"],
a[href*="book"],button,[class*="book"]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

.hero{
  position:relative;
  height:100vh;
  height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
}

.hero img{
  width:100vw;
  height:100vh;
  height:100svh;
  object-fit:contain;
  object-position:center center;
  background:#000;
  pointer-events:none;
  user-select:none;
}

.flare{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,235,1) 0%,
    rgba(255,226,138,.96) 24%,
    rgba(255,184,55,.46) 52%,
    transparent 76%);
  box-shadow:
    0 0 18px rgba(255,225,130,.95),
    0 0 38px rgba(255,180,45,.58),
    0 0 64px rgba(215,165,66,.34);
  opacity:0;
  transform:translate(-50%,-50%) scale(.35) rotate(0deg);
  animation:flarePulse 5.4s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}

.flare::before,
.flare::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,238,170,.98),
    rgba(255,255,255,0));
  transform:translate(-50%,-50%);
}

.flare::before{width:230%;height:2px;}
.flare::after{width:2px;height:230%;}

/*
  V29: shifted significantly LEFT after reviewing the video.
  These follow the sax key/body curve instead of sitting to the right.
*/
.f1{
  left:65.8%;
  top:43.5%;
  width:15px;
  height:15px;
  animation-delay:.2s;
}

.f2{
  left:65.0%;
  top:53.5%;
  width:24px;
  height:24px;
  animation-delay:1.15s;
}

.f3{
  left:64.2%;
  top:64.5%;
  width:18px;
  height:18px;
  animation-delay:2.3s;
}

.f4{
  left:67.2%;
  top:60.5%;
  width:20px;
  height:20px;
  animation-delay:3.25s;
}

@keyframes flarePulse{
  0%,66%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.35) rotate(0deg);
  }
  74%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.55) rotate(35deg);
  }
  84%{
    opacity:.52;
    transform:translate(-50%,-50%) scale(.95) rotate(75deg);
  }
  92%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.45) rotate(120deg);
  }
}

.overlay{
  position:absolute;
  inset:0;
  z-index:10;
}

.credit{
  position:absolute;
  bottom:max(12px,env(safe-area-inset-bottom));
  right:max(18px,env(safe-area-inset-right));
  z-index:11;
  font-size:clamp(10px,.85vw,12px);
  letter-spacing:.35px;
  opacity:0;
  animation:creditFade 2s ease forwards;
  animation-delay:3s;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
  white-space:nowrap;
}

.credit span{color:rgba(215,165,66,.94);}
.credit a{color:rgba(220,220,220,.78);text-decoration:none;}
.credit a:hover{color:#fff;}

@keyframes creditFade{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:520px){
  .credit{right:10px;bottom:8px;font-size:9px;}
  .f1{width:12px;height:12px;}
  .f2{width:18px;height:18px;}
  .f3{width:14px;height:14px;}
  .f4{width:15px;height:15px;}
}



/* =========================================================
   Mobile responsive rebuild - MaxBaltoProSiteV2.1
   Uses existing site artwork, but reframes it for phones.
   Desktop remains unchanged.
   ========================================================= */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #000 !important;
  }

  .hero {
    min-height: 100svh !important;
    height: 100svh !important;
    width: 100vw !important;
    background: #000 !important;
    display: block !important;
    overflow: hidden !important;
  }

  /*
    Mobile needs to feel like a real vertical artist site,
    not a shrunken desktop poster.
    The same artwork is enlarged/cropped like a mobile hero.
  */
  .hero img,
  .mbv24-hero-img,
  .mbv25-hero-img,
  .mbv28-hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    object-fit: cover !important;
    object-position: 58% center !important;
    opacity: .78 !important;
    filter: contrast(1.06) brightness(.82) saturate(1.05) !important;
  }

  .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.12) 32%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.94) 100%),
      linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.22) 52%, rgba(0,0,0,.34));
  }

  .hero::after {
    content: "MB\A MAX BALTO\A SAXOPHONIST\A\A LIVE. IMPROVISE. INSPIRE.\A\A MAX\A BALTO\A Saxophonist\A\A Follow on Instagram @max.balto" !important;
    white-space: pre-line !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 7vw !important;
    right: 7vw !important;
    bottom: 9vh !important;
    color: #f6f0e6 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(15px, 4.1vw, 24px) !important;
    line-height: 1.15 !important;
    letter-spacing: .08em !important;
    text-shadow: 0 3px 20px rgba(0,0,0,.95) !important;
  }

  .overlay {
    z-index: 9 !important;
  }

  .credit {
    z-index: 10 !important;
    right: 10px !important;
    bottom: 7px !important;
    font-size: 9px !important;
  }

  .flare {
    z-index: 6 !important;
  }

  /*
    Mobile flare positions: these are separate from desktop because the
    image is intentionally cropped/reframed on phones.
  */
  .f1 { left: 70.5% !important; top: 36.5% !important; width: 13px !important; height: 13px !important; }
  .f2 { left: 65.5% !important; top: 45.6% !important; width: 18px !important; height: 18px !important; }
  .f3 { left: 60.8% !important; top: 55.6% !important; width: 14px !important; height: 14px !important; }
  .f4 { left: 71.2% !important; top: 51.4% !important; width: 15px !important; height: 15px !important; }

  /* Keep any legacy injected buttons hidden on mobile too. */
  header, nav, .menu, .main-navigation, .wp-block-navigation,
  .site-header, [class*="nav"], [class*="menu"], [class*="header"],
  a[href*="book"], button, [class*="book"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  .hero::after {
    left: 6vw !important;
    right: 6vw !important;
    bottom: 8vh !important;
    font-size: clamp(13px, 3.9vw, 20px) !important;
  }
}



/* =========================================================
   MaxBaltoProSiteV2.3 - True vertical phone presentation
   Uses the existing hero artwork but reframes it like a mobile artist site.
   No Watch Live. No events. No extra menu.
   ========================================================= */

@media (max-width: 768px) and (orientation: portrait) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  /* Kill any desktop/nav/book artifacts on phone */
  header, nav, .menu, .main-navigation, .wp-block-navigation,
  .site-header, .site-footer, [class*="nav"], [class*="menu"], [class*="header"],
  a[href*="book"], button, [class*="book"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hero {
    position: relative !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: block !important;
    background: #050505 !important;
  }

  /*
    Instead of shrinking the entire desktop poster,
    crop/reframe the existing artwork so Max fills the vertical screen.
  */
  .hero img,
  .mbv24-hero-img,
  .mbv25-hero-img,
  .mbv28-hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    object-fit: cover !important;
    object-position: 64% center !important;
    opacity: .64 !important;
    filter: brightness(.76) contrast(1.08) saturate(1.04) !important;
    z-index: 0 !important;
  }

  .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.28) 28%,
        rgba(0,0,0,.26) 50%,
        rgba(0,0,0,.86) 84%,
        rgba(0,0,0,.98) 100%),
      linear-gradient(to right,
        rgba(0,0,0,.80) 0%,
        rgba(0,0,0,.28) 52%,
        rgba(0,0,0,.18) 100%);
  }

  /*
    Mobile-only content, styled like a true artist landing page.
    This is CSS-generated so the theme templates do not need external plugins.
  */
  .hero::after {
    content:
      "MB\A"
      "MAX BALTO\A"
      "SAXOPHONIST\A\A"
      "LIVE. IMPROVISE. INSPIRE.\A\A"
      "MAX\A"
      "BALTO\A"
      "Saxophonist\A\A"
      "Follow on Instagram\A"
      "@max.balto" !important;
    white-space: pre-line !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 7vw !important;
    right: 7vw !important;
    bottom: 7.5vh !important;
    color: #f7efe4 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(14px, 4.05vw, 22px) !important;
    line-height: 1.12 !important;
    letter-spacing: .08em !important;
    text-shadow: 0 4px 24px rgba(0,0,0,1) !important;
  }

  .overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9 !important;
  }

  .credit {
    z-index: 10 !important;
    right: 10px !important;
    bottom: 7px !important;
    font-size: 9px !important;
  }

  /* Mobile-specific lens flare placement, adjusted for portrait crop */
  .flare {
    z-index: 6 !important;
  }

  .f1 { left: 70.2% !important; top: 38.4% !important; width: 11px !important; height: 11px !important; }
  .f2 { left: 66.8% !important; top: 47.2% !important; width: 16px !important; height: 16px !important; }
  .f3 { left: 62.6% !important; top: 56.9% !important; width: 13px !important; height: 13px !important; }
  .f4 { left: 70.8% !important; top: 52.3% !important; width: 14px !important; height: 14px !important; }
}

@media (max-width: 390px) and (orientation: portrait) {
  .hero img,
  .mbv24-hero-img,
  .mbv25-hero-img,
  .mbv28-hero-img {
    object-position: 66% center !important;
  }

  .hero::after {
    left: 6vw !important;
    right: 6vw !important;
    bottom: 6.5vh !important;
    font-size: clamp(12px, 3.85vw, 19px) !important;
    line-height: 1.10 !important;
  }
}



/* =========================================================
   V2.4 Portrait phone orientation prompt
   Shows a polished rotate-phone animation only on vertical phones.
   Landscape mobile and desktop remain unchanged.
   ========================================================= */

.rotate-phone-notice {
  display: none;
}

@media (max-width: 768px) and (orientation: portrait) {
  .rotate-phone-notice {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 50% 32%, rgba(215,165,66,.14), transparent 28%),
      linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.985));
    color: #f5efe5;
    text-align: center;
    padding: 28px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }

  .rotate-phone-card {
    width: min(86vw, 360px);
    border: 1px solid rgba(215,165,66,.48);
    background: rgba(10,10,10,.72);
    box-shadow: 0 26px 80px rgba(0,0,0,.72);
    padding: 30px 24px 26px;
    box-sizing: border-box;
  }

  .rotate-phone-icon {
    width: 76px;
    height: 118px;
    border: 4px solid #d7a542;
    border-radius: 18px;
    margin: 0 auto 22px;
    position: relative;
    animation: rotatePhone 2.6s ease-in-out infinite;
    box-shadow: 0 0 28px rgba(215,165,66,.18);
  }

  .rotate-phone-icon::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 24px;
    height: 3px;
    background: rgba(215,165,66,.85);
    border-radius: 99px;
    transform: translateX(-50%);
  }

  .rotate-phone-icon::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(215,165,66,.85);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .rotate-phone-arrow {
    width: 76px;
    height: 30px;
    margin: -6px auto 22px;
    color: #d7a542;
    font-size: 30px;
    line-height: 30px;
    animation: arrowPulse 1.6s ease-in-out infinite;
  }

  .rotate-phone-card h2 {
    margin: 0 0 10px;
    font-family: Georgia, 'Times New Roman', serif;
    color: #d7a542;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: .06em;
  }

  .rotate-phone-card p {
    margin: 0;
    color: rgba(245,239,229,.86);
    font-size: 15px;
    line-height: 1.45;
  }

  .rotate-phone-card .small {
    display: block;
    margin-top: 14px;
    color: rgba(245,239,229,.55);
    font-size: 12px;
  }

  @keyframes rotatePhone {
    0%, 18% { transform: rotate(0deg); }
    45%, 62% { transform: rotate(90deg); }
    86%, 100% { transform: rotate(0deg); }
  }

  @keyframes arrowPulse {
    0%, 100% { opacity: .45; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(3px); }
  }
}

@media (min-width: 769px), (orientation: landscape) {
  .rotate-phone-notice {
    display: none !important;
  }
}



/* =========================================================
   V2.5 Luxury polish
   - Ghosted guitarist + upright bass ambience, Option C style
   - Apple-level portrait rotate overlay
   ========================================================= */

/* Subtle ghosted background musicians — intentionally almost invisible */
.ghost-musicians {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: .26;
  mix-blend-mode: screen;
}

.ghost-musicians .ghost {
  position: absolute;
  filter: blur(1.2px);
  opacity: .28;
  transform-origin: center;
}

.ghost-musicians .guitarist {
  left: 13%;
  top: 27%;
  width: 220px;
  height: 430px;
  transform: scale(.95);
}

.ghost-musicians .upright-bass {
  right: 12%;
  top: 20%;
  width: 230px;
  height: 480px;
  transform: scale(1.02);
}

.ghost-musicians .figure {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 70px;
  height: 190px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255,216,140,.18), rgba(255,216,140,.04));
  border-radius: 40px 40px 12px 12px;
  box-shadow: 0 0 44px rgba(215,165,66,.10);
}

.ghost-musicians .head {
  position: absolute;
  left: 50%;
  top: 3%;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,220,150,.13);
  box-shadow: 0 0 30px rgba(215,165,66,.12);
}

.ghost-musicians .guitar-body {
  position: absolute;
  left: 30%;
  top: 44%;
  width: 118px;
  height: 82px;
  border: 2px solid rgba(215,165,66,.16);
  border-radius: 52% 46% 48% 54%;
  transform: rotate(-18deg);
  box-shadow: inset 0 0 18px rgba(215,165,66,.07), 0 0 32px rgba(215,165,66,.08);
}

.ghost-musicians .guitar-neck {
  position: absolute;
  left: 54%;
  top: 37%;
  width: 158px;
  height: 6px;
  background: rgba(215,165,66,.13);
  transform: rotate(-30deg);
  border-radius: 99px;
}

.ghost-musicians .bass-body {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 98px;
  height: 205px;
  transform: translateX(-50%);
  border: 2px solid rgba(215,165,66,.15);
  border-radius: 50% 50% 42% 42%;
  box-shadow: inset 0 0 24px rgba(215,165,66,.07), 0 0 36px rgba(215,165,66,.08);
}

.ghost-musicians .bass-neck {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 8px;
  height: 250px;
  transform: translateX(-50%);
  background: rgba(215,165,66,.12);
  border-radius: 99px;
}

.ghost-musicians .bass-pin {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 2px;
  height: 105px;
  transform: translateX(-50%);
  background: rgba(215,165,66,.11);
}

@media (max-width: 900px) {
  .ghost-musicians {
    display: none !important;
  }
}

/* Replace/override the generic rotate prompt with a more premium treatment */
@media (max-width: 768px) and (orientation: portrait) {
  .rotate-phone-notice {
    background:
      radial-gradient(circle at 50% 28%, rgba(215,165,66,.16), transparent 31%),
      radial-gradient(circle at 50% 78%, rgba(255,255,255,.045), transparent 38%),
      linear-gradient(180deg, rgba(0,0,0,.965), rgba(4,4,4,.992)) !important;
    backdrop-filter: blur(22px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.1) !important;
  }

  .rotate-phone-card {
    border: 1px solid rgba(215,165,66,.34) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(8,8,8,.72) !important;
    border-radius: 28px !important;
    box-shadow:
      0 34px 100px rgba(0,0,0,.78),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
    padding: 34px 26px 30px !important;
  }

  .rotate-phone-icon {
    width: 78px !important;
    height: 124px !important;
    border: 2px solid rgba(215,165,66,.86) !important;
    border-radius: 24px !important;
    margin-bottom: 24px !important;
    animation: luxuryRotatePhone 3.4s cubic-bezier(.19,1,.22,1) infinite !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.035),
      0 20px 70px rgba(215,165,66,.12),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .rotate-phone-icon::before {
    width: 25px !important;
    height: 2px !important;
    top: 11px !important;
    background: rgba(245,226,180,.76) !important;
  }

  .rotate-phone-icon::after {
    width: 8px !important;
    height: 8px !important;
    bottom: 11px !important;
    background: rgba(245,226,180,.68) !important;
  }

  .rotate-phone-arrow {
    margin: -8px auto 24px !important;
    color: rgba(215,165,66,.90) !important;
    font-size: 34px !important;
    animation: luxuryArrowPulse 2.1s ease-in-out infinite !important;
  }

  .rotate-phone-card h2 {
    font-size: 27px !important;
    letter-spacing: .035em !important;
    color: #e3b45c !important;
    margin-bottom: 12px !important;
  }

  .rotate-phone-card p {
    font-size: 15.5px !important;
    line-height: 1.48 !important;
    color: rgba(247,239,228,.88) !important;
  }

  .rotate-phone-card .small {
    color: rgba(247,239,228,.52) !important;
    font-size: 12px !important;
    margin-top: 16px !important;
  }

  @keyframes luxuryRotatePhone {
    0%, 16% {
      transform: rotate(0deg) scale(1);
    }
    42%, 62% {
      transform: rotate(90deg) scale(1.035);
    }
    86%, 100% {
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes luxuryArrowPulse {
    0%, 100% {
      opacity: .36;
      transform: translateY(0) scale(.98);
    }
    50% {
      opacity: 1;
      transform: translateY(4px) scale(1.04);
    }
  }
}


/* V2.6 SEO readable-to-search hidden content */
.max-balto-seo-content {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}