/* Telehealth page field only. Other landing pages keep the Pantheon in lp.css. */

body.page-telehealth{
  --th-h:175vh;
  --th-top:0px;
}
body.page-telehealth::after{
  background:#000 url(/assets/bg-telehealth-vogue-4.webp?v=5) center var(--th-top) / auto var(--th-h) no-repeat;
}

/* A light scrim keeps the marble present. Type sits on the glass tiles. */
body.page-telehealth::before{
  background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.42) 100%);
}
body.page-telehealth .offer-hero{
  background:rgba(8,7,6,.58);
}
body.page-telehealth .offer-copy .lede,
body.page-telehealth .offer-copy .eyebrow,
body.page-telehealth .hero-fine,
body.page-telehealth .fl-only{
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.55);
}

@media (max-width:900px){
  /* Let the portrait rise under the menu instead of stopping at a solid black bar. */
  body.page-telehealth .hp-pills{
    background:linear-gradient(180deg, #0b0a08 0%, #0b0a08 78%, rgba(11,10,8,0) 100%);
  }
}
@media (min-width:901px){
  body.page-telehealth .wrap{padding-top:clamp(280px, 46vh, 520px)}
  body.page-telehealth .offer-hero{background:rgba(8,7,6,.66)}
}
@media (max-width:900px) and (orientation:portrait){
  body.page-telehealth{
    --th-h:108vh;
    --th-top:20vh;
  }
  body.page-telehealth::after{
    background-image:url(/assets/bg-telehealth-vogue-4.webp?v=5);
    background-size:auto var(--th-h);
    background-position:center var(--th-top);
  }
  body.page-telehealth::before{
    background:linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.32) 52%, rgba(0,0,0,.62) 100%);
  }
  /* Open enough of the pair that the shoulders and gold drips sit above the copy. */
  body.page-telehealth .wrap{
    padding-top:clamp(280px, 42vh, 440px);
  }
  body.page-telehealth .offer-hero{
    background:rgba(8,7,6,.74);
  }
}

/* The shared flux layer is masked to the Pantheon. It does not belong on this scene. */
body.page-telehealth .gflux.floorfix{
  display:none;
}

/* ?bg=1–3 swap the field. ?bg=4 matches the live pair. */
html[data-th-bg="1"] .th-drip,
html[data-th-bg="2"] .th-drip,
html[data-th-bg="3"] .th-drip{display:none}

/* A soft highlight traveling down the gold drips. The box matches the photo. */
.th-drip{
  position:fixed;
  z-index:-1;
  top:var(--th-top, 0px);
  left:50%;
  height:var(--th-h, 100vh);
  width:calc(var(--th-h, 100vh) * 864 / 1152);
  transform:translateX(-50%);
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:plus-lighter;
  opacity:1;
  -webkit-mask-image:url(/assets/bg-telehealth-vogue-4-mask.png?v=5);
  mask-image:url(/assets/bg-telehealth-vogue-4-mask.png?v=5);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.th-drip::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:18%;
  background:linear-gradient(180deg, rgba(255,236,170,0) 0%, rgba(255,246,214,.7) 36%, rgba(255,255,246,1) 50%, rgba(255,214,120,.65) 64%, rgba(255,236,170,0) 100%);
  animation:th-drip-sheen 12s ease-in-out infinite;
}
@keyframes th-drip-sheen{
  from{transform:translateY(-130%)}
  to{transform:translateY(340%)}
}
@media (max-width:900px) and (orientation:portrait){
  html[data-th-bg="4"] body.page-telehealth{
    --th-h:108vh;
    --th-top:20vh;
  }
}
@media (prefers-reduced-motion:reduce){
  .th-drip{display:none}
}

/* Editorial alternates. */
html[data-th-bg] body.page-telehealth::after{
  background-color:#000;
  background-repeat:no-repeat;
  background-size:auto 100vh;
  background-position:center top;
}
html[data-th-bg="1"] body.page-telehealth::after{background-image:url(/assets/bg-telehealth-vogue-1.webp?v=2)}
html[data-th-bg="2"] body.page-telehealth::after{background-image:url(/assets/bg-telehealth-vogue-2.webp?v=2)}
html[data-th-bg="3"] body.page-telehealth::after{background-image:url(/assets/bg-telehealth-vogue-3.webp?v=2)}
html[data-th-bg="4"] body.page-telehealth::after{
  background-image:url(/assets/bg-telehealth-vogue-4.webp?v=5);
  background-size:auto var(--th-h);
  background-position:center var(--th-top);
}
html[data-th-bg] body.page-telehealth::before{
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.2) 36%, rgba(0,0,0,.5) 100%);
}
html[data-th-bg] body.page-telehealth .offer-hero{
  background:rgba(8,7,6,.66);
}
@media (min-width:901px){
  html[data-th-bg] body.page-telehealth .wrap{
    padding-top:clamp(280px, 46vh, 520px);
  }
  html[data-th-bg] body.page-telehealth::before{
    background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.42) 100%);
  }
}
@media (max-width:900px) and (orientation:portrait){
  html[data-th-bg] body.page-telehealth::after{
    background-size:auto 72vh;
  }
  html[data-th-bg="1"] body.page-telehealth::after{background-position:center 27vh}
  html[data-th-bg="2"] body.page-telehealth::after{background-position:center 30vh}
  html[data-th-bg="3"] body.page-telehealth::after{background-position:center 26vh}
  html[data-th-bg="4"] body.page-telehealth::after{
    background-size:auto var(--th-h);
    background-position:center var(--th-top);
  }
  html[data-th-bg] body.page-telehealth .wrap{
    padding-top:clamp(280px, 42vh, 440px);
  }
  html[data-th-bg] body.page-telehealth::before{
    background:linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.32) 52%, rgba(0,0,0,.62) 100%);
  }
  html[data-th-bg] body.page-telehealth .offer-hero{
    background:rgba(8,7,6,.74);
  }
}