/* Shared navigation transition. Keep timing and visual settings in one place. */
:root {
  --cv-transition-ready: 1;
  --cv-transition-out-duration: 500ms;
  --cv-transition-in-duration: 650ms;
  --cv-transition-reduced-out-duration: 80ms;
  --cv-transition-reduced-in-duration: 100ms;
  --cv-transition-color-des-visages: #C40F14;
  --cv-transition-color-spam: #E6DFC5;
  --cv-transition-color-black: #000000;
  --cv-transition-color-white: #ffffff;
  --cv-artikulation-photo-position: center 60%;
  --cv-transition-photo-content-blur: 48px;
}

.cv-transition-entering,
.cv-transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 57% 63%,
      rgba(44, 85, 68, 0.18),
      transparent 75%
    ),
    #242017;
}

.cv-transition-curtain {
  transition: opacity var(--cv-transition-out-duration) cubic-bezier(0.40, 0, 0.22, 1);
}

.cv-transition-curtain.is-covered,
html.cv-transition-incoming .cv-transition-entering {
  opacity: 1;
  pointer-events: auto;
}

/* Match each page's background in both directions. */
html.cv-transition-from-des-visages {
  --cv-transition-source-color: var(--cv-transition-color-des-visages);
}

html.cv-transition-to-des-visages {
  --cv-transition-destination-color: var(--cv-transition-color-des-visages);
}

html.cv-transition-from-spam {
  --cv-transition-source-color: var(--cv-transition-color-spam);
}

html.cv-transition-to-spam {
  --cv-transition-destination-color: var(--cv-transition-color-spam);
}

html.cv-transition-from-black {
  --cv-transition-source-color: var(--cv-transition-color-black);
}

html.cv-transition-to-black {
  --cv-transition-destination-color: var(--cv-transition-color-black);
}

html.cv-transition-from-white {
  --cv-transition-source-color: var(--cv-transition-color-white);
}

html.cv-transition-to-white {
  --cv-transition-destination-color: var(--cv-transition-color-white);
}

html:is(.cv-transition-to-des-visages, .cv-transition-to-spam, .cv-transition-to-black, .cv-transition-to-white) .cv-transition-entering {
  background: var(--cv-transition-destination-color);
}

html:is(.cv-transition-to-des-visages, .cv-transition-to-spam, .cv-transition-to-black, .cv-transition-to-white) .cv-transition-curtain {
  background: var(--cv-transition-source-color, #ffffff);
  transition:
    opacity var(--cv-transition-out-duration) cubic-bezier(0.40, 0, 0.22, 1),
    background-color var(--cv-transition-out-duration) cubic-bezier(0.40, 0, 0.22, 1);
}

html:is(.cv-transition-to-des-visages, .cv-transition-to-spam, .cv-transition-to-black, .cv-transition-to-white) .cv-transition-curtain.is-covered {
  background-color: var(--cv-transition-destination-color);
}

/* Photo transitions use spatial colors instead of a solid curtain.
   Small copies avoid downloading full backgrounds on other pages. */
html:is(.cv-transition-to-aleas-photo, .cv-transition-to-bio-photo, .cv-transition-to-artikulation, .cv-transition-to-des-visages-photo, .cv-transition-to-spam-photo, .cv-transition-to-des-visages-ep-photo, .cv-transition-to-flor-photo, .cv-transition-to-nubes-photo, .cv-transition-to-music-live, .cv-transition-to-gonzalez-photo, .cv-transition-to-contact-photo, .cv-transition-to-home-photo) :is(.cv-transition-curtain, .cv-transition-entering) {
  overflow: hidden;
}

html.cv-transition-to-artikulation :is(.cv-transition-curtain, .cv-transition-entering) {
  background:
    linear-gradient(to top, #000, transparent 65%),
    linear-gradient(105deg, #030205 35%, #2116bc 80%, #30207b);
}

html:is(.cv-transition-to-aleas-photo, .cv-transition-to-bio-photo, .cv-transition-to-artikulation, .cv-transition-to-des-visages-photo, .cv-transition-to-spam-photo, .cv-transition-to-des-visages-ep-photo, .cv-transition-to-flor-photo, .cv-transition-to-nubes-photo, .cv-transition-to-music-live, .cv-transition-to-gonzalez-photo, .cv-transition-to-contact-photo, .cv-transition-to-home-photo) :is(.cv-transition-curtain, .cv-transition-entering)::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(clamp(48px, 7vw, 120px));
  transform: scale(1.18);
}

html.cv-transition-to-bio-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #fff;
}

html.cv-transition-to-bio-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  right: 50%;
  background: url("../img/bio-transition.webp") center / cover no-repeat #fff;
  transform-origin: left center;
}

html.cv-transition-to-artikulation :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background:
    linear-gradient(to top, rgba(0,0,0,.55), transparent 45%),
    url("../img/artikulation-video-1.webp") var(--cv-artikulation-photo-position) / cover no-repeat;
}

html.cv-transition-to-des-visages-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: var(--cv-transition-color-des-visages);
}

html.cv-transition-to-des-visages-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background: url("../img/des-visages-transition.webp") left bottom / auto 100% no-repeat var(--cv-transition-color-des-visages);
  transform-origin: left bottom;
}

html.cv-transition-to-spam-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: var(--cv-transition-color-spam);
}

html.cv-transition-to-spam-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background: url("../img/spam-transition.webp") left bottom / min(56vw, 700px, calc((100vw - var(--pad-x)) * .53)) auto no-repeat var(--cv-transition-color-spam);
  transform-origin: left bottom;
}

html.cv-transition-to-des-visages-ep-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #000;
}

html.cv-transition-to-des-visages-ep-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background: url("../img/des-visages-ep-transition.webp") right 1.5cm bottom / auto 96vh no-repeat #000;
  transform-origin: right bottom;
}

html:is(.cv-transition-to-flor-photo, .cv-transition-to-nubes-photo) :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #000;
}

html.cv-transition-to-aleas-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #000;
}

html.cv-transition-to-aleas-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background:
    url("../img/cover-aleas.webp") left 10vw center / min(26vw, 350px) auto no-repeat,
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url("../img/aleas-transition.webp") center / cover no-repeat #000;
}

html.cv-transition-to-flor-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background:
    url("../img/cover-flor-de-loto.webp") left 10vw center / min(26vw, 350px) auto no-repeat,
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url("../img/flor-de-loto-transition.webp") center / cover no-repeat #000;
}

html.cv-transition-to-nubes-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background:
    url("../img/cover-nubes.webp") left 8vw center / min(32vw, 460px) auto no-repeat,
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("../img/nubes-transition.webp") center / cover no-repeat #000;
}

html.cv-transition-to-gonzalez-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #fff;
}

html.cv-transition-to-music-live :is(.cv-transition-curtain, .cv-transition-entering) {
  background: transparent;
}

html.cv-transition-to-music-live :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background: var(--cv-transition-live-image, none) center / 100% 100% no-repeat;
  filter: blur(var(--cv-transition-photo-content-blur));
  transform: scale(1.008);
}

html.cv-transition-to-gonzalez-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background: url("../img/gonzalez-transition.webp") center / cover no-repeat #fff;
}

html.cv-transition-to-contact-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #999;
}

html.cv-transition-to-contact-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  background: url("../img/contact-transition.webp") center / cover no-repeat #999;
}

html.cv-transition-to-home-photo :is(.cv-transition-curtain, .cv-transition-entering) {
  background: #0d0d0d;
}

html.cv-transition-to-home-photo :is(.cv-transition-curtain, .cv-transition-entering)::before {
  top: -32px;
  left: -14%;
  right: auto;
  bottom: auto;
  width: 114%;
  height: calc(100% + 64px);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.08) 40%, transparent 65%, rgba(0,0,0,.18)),
    url("../img/hero-home.webp") 50% 74% / cover no-repeat;
  filter: blur(var(--cv-transition-photo-content-blur));
  transform: scale(1.008);
}

html.cv-transition-leaving [data-page-transition-content],
html.cv-transition-incoming [data-page-transition-content] {
  filter: blur(7px) brightness(0.90);
  transform: scale(1.008);
}

html:is(.cv-transition-to-aleas-photo, .cv-transition-to-bio-photo, .cv-transition-to-artikulation, .cv-transition-to-des-visages-photo, .cv-transition-to-spam-photo, .cv-transition-to-des-visages-ep-photo, .cv-transition-to-flor-photo, .cv-transition-to-nubes-photo, .cv-transition-to-music-live, .cv-transition-to-gonzalez-photo, .cv-transition-to-contact-photo, .cv-transition-to-home-photo).cv-transition-incoming [data-page-transition-content] {
  filter: blur(var(--cv-transition-photo-content-blur)) brightness(1);
}

html.cv-transition-leaving [data-page-transition-content] {
  transition:
    filter var(--cv-transition-out-duration) cubic-bezier(0.40, 0, 0.22, 1),
    transform var(--cv-transition-out-duration) cubic-bezier(0.40, 0, 0.22, 1);
}

/* CSS fallback for browsers without Element.animate. */
html.cv-transition-incoming.cv-transition-reveal .cv-transition-entering {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cv-transition-in-duration) cubic-bezier(0.40, 0, 0.22, 1);
}

html.cv-transition-incoming.cv-transition-reveal [data-page-transition-content] {
  filter: blur(0) brightness(1);
  transform: scale(1);
  transition:
    filter var(--cv-transition-in-duration) cubic-bezier(0.40, 0, 0.22, 1),
    transform var(--cv-transition-in-duration) cubic-bezier(0.40, 0, 0.22, 1);
}

html:is(.cv-transition-to-aleas-photo, .cv-transition-to-bio-photo, .cv-transition-to-artikulation, .cv-transition-to-des-visages-photo, .cv-transition-to-spam-photo, .cv-transition-to-des-visages-ep-photo, .cv-transition-to-flor-photo, .cv-transition-to-nubes-photo, .cv-transition-to-music-live, .cv-transition-to-gonzalez-photo, .cv-transition-to-contact-photo, .cv-transition-to-home-photo).cv-transition-incoming.cv-transition-reveal [data-page-transition-content] {
  filter: blur(0px) brightness(1);
}

/* Explicit starting frames also work before a fast page's first paint. */
html.cv-transition-css-fallback.cv-transition-incoming.cv-transition-reveal .cv-transition-entering {
  transition: none;
  animation: cv-transition-overlay-in var(--cv-transition-css-duration) cubic-bezier(0.40, 0, 0.22, 1) both;
}

html.cv-transition-css-fallback.cv-transition-incoming.cv-transition-reveal [data-page-transition-content] {
  transition: none;
  animation: cv-transition-content-in var(--cv-transition-css-duration) cubic-bezier(0.40, 0, 0.22, 1) both;
}

html:is(.cv-transition-to-aleas-photo, .cv-transition-to-bio-photo, .cv-transition-to-artikulation, .cv-transition-to-des-visages-photo, .cv-transition-to-spam-photo, .cv-transition-to-des-visages-ep-photo, .cv-transition-to-flor-photo, .cv-transition-to-nubes-photo, .cv-transition-to-music-live, .cv-transition-to-gonzalez-photo, .cv-transition-to-contact-photo, .cv-transition-to-home-photo).cv-transition-css-fallback.cv-transition-incoming.cv-transition-reveal [data-page-transition-content] {
  animation-name: cv-transition-photo-in;
}

@keyframes cv-transition-overlay-in {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes cv-transition-content-in {
  from { filter: blur(7px) brightness(0.90); transform: scale(1.008); }
  to { filter: blur(0px) brightness(1); transform: scale(1); }
}

@keyframes cv-transition-photo-in {
  from { filter: blur(var(--cv-transition-photo-content-blur)) brightness(1); transform: scale(1.008); }
  to { filter: blur(0px) brightness(1); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cv-transition-photo-content-blur: 0px; }
  .cv-transition-curtain,
  html:is(.cv-transition-to-des-visages, .cv-transition-to-spam, .cv-transition-to-black, .cv-transition-to-white) .cv-transition-curtain,
  html.cv-transition-leaving [data-page-transition-content] {
    transition-duration: var(--cv-transition-reduced-out-duration);
  }

  html.cv-transition-incoming.cv-transition-reveal .cv-transition-entering,
  html.cv-transition-incoming.cv-transition-reveal [data-page-transition-content] {
    transition-duration: var(--cv-transition-reduced-in-duration);
  }
}