/* Jean-Pierre Fontes — the hero of the site (shortcode [jpf_hero], js/hero/hero.js).
   Everything is scoped to .jpf-hero, except the Divi header, made light while it floats over the
   dark stage (body.jpf-dark) and without its small signature while the big one is written. */
.jpf-hero {
  --jpf-dark: #0b0a09;
  --jpf-light: #ece6dc;
  --jpf-soft: rgb(236 230 220 / 0.58);
  --jpf-gutter: clamp(1.1rem, 3vw, 2.6rem);
  --jpf-pin: 210vh; /* scroll during which the stage stays */
  position: relative;
  height: calc(100vh + var(--jpf-pin));
  height: calc(100svh + var(--jpf-pin));
  background: var(--jpf-dark);
  color: var(--jpf-light);
  -webkit-font-smoothing: antialiased;
}
.jpf-hero__stage {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.jpf-hero.is-pinned .jpf-hero__stage { position: fixed; }
.jpf-hero.is-after .jpf-hero__stage { top: auto; bottom: 0; }
.jpf-hero__gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* the titles of the page, in the HTML from the start (search engines, first paint) */
.jpf-hero__titles {
  position: absolute;
  z-index: 2;
  left: var(--jpf-gutter);
  bottom: calc(var(--jpf-gutter) * 1.2);
  pointer-events: none;
}
.jpf-hero .jpf-hero__titles h1,
.jpf-hero .jpf-hero__titles h2 {
  margin: 0;
  padding: 0;
  color: inherit;
  text-shadow: none;
}
.jpf-hero .jpf-hero__titles h1 {
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.jpf-hero .jpf-hero__titles h2 {
  margin: 0.8em 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--jpf-soft);
}

/* the painting's caption, once it is whole */
.jpf-hero .jpf-hero__work {
  position: absolute;
  z-index: 2;
  right: var(--jpf-gutter);
  bottom: calc(var(--jpf-gutter) * 1.2);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--jpf-light);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s, visibility 0.8s, color 0.3s;
}
.jpf-hero .jpf-hero__work span { display: block; margin-top: 0.55em; letter-spacing: 0.14em; color: var(--jpf-soft); }
.jpf-hero .jpf-hero__work:hover,
.jpf-hero .jpf-hero__work:focus-visible { color: #fff; }
.jpf-hero.is-end .jpf-hero__work,
.jpf-hero.is-still .jpf-hero__work { opacity: 1; visibility: visible; }

.jpf-hero .jpf-hero__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--jpf-gutter) * 1.2);
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--jpf-soft);
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  transition: opacity 0.6s;
}
/* a drop running down a thread, as on the landing */
.jpf-hero .jpf-hero__line {
  position: relative;
  width: 1px;
  height: 2.4rem;
  margin-right: 0.3em; /* the letter spacing trails the text: centred on the letters */
  overflow: hidden;
  background: rgb(236 230 220 / 0.15);
}
.jpf-hero .jpf-hero__line::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 60%;
  left: 0;
  background: var(--jpf-light);
  animation: jpf-hero-hint 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes jpf-hero-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }
.jpf-hero.is-moving .jpf-hero__hint,
.jpf-hero.is-still .jpf-hero__hint { opacity: 0; }

@media (max-width: 760px) {
  .jpf-hero .jpf-hero__hint { display: none; }
  .jpf-hero .jpf-hero__work { left: var(--jpf-gutter); right: auto; bottom: calc(var(--jpf-gutter) * 1.2 + 5.2rem); text-align: left; }
}

/* the still version: no WebGL2, reduced motion asked for, or a failure */
.jpf-hero__still { display: none; }
.jpf-hero.is-still { height: auto; }
.jpf-hero.is-still .jpf-hero__stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
.jpf-hero.is-still .jpf-hero__gl { display: none; }
.jpf-hero.is-still .jpf-hero__still {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vh, 4rem);
  padding: calc(var(--jpf-gutter) + 7rem) var(--jpf-gutter) 11rem;
}
.jpf-hero .jpf-hero__art { width: min(80vw, 26rem); height: auto; box-shadow: 0 2rem 4rem -2rem #000; }
@media (prefers-reduced-motion: reduce) {
  .jpf-hero { height: auto; }
  .jpf-hero .jpf-hero__stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .jpf-hero .jpf-hero__gl, .jpf-hero .jpf-hero__hint { display: none; }
  .jpf-hero .jpf-hero__still {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 6vh, 4rem);
    padding: calc(var(--jpf-gutter) + 7rem) var(--jpf-gutter) 11rem;
  }
  .jpf-hero .jpf-hero__work { opacity: 1; visibility: visible; transition: none; }
}

/* the Divi header over the dark stage */
body.jpf-dark #main-header { background: none !important; box-shadow: none !important; }
body.jpf-dark #main-header #top-menu > li > a,
body.jpf-dark #main-header #top-menu > li > a::before,
body.jpf-dark #main-header .mobile_menu_bar::before,
body.jpf-dark #main-header #et_search_icon::before,
body.jpf-dark #main-header .et-cart-info { color: rgb(236 230 220 / 0.88) !important; }
body.jpf-dark #main-header #logo { filter: invert(1); }
body.jpf-signing #main-header #logo { opacity: 0; }