/* =========================================================
   Design tokens
   ========================================================= */

:root {
  /* Font families */
  --font-body: "Lora", serif;
  --font-heading: "Dancing Script", cursive;

  /* Typographic scale */
  --font-size-body: 1rem;

  --font-size-h1: clamp(2.2rem, 4vw, 3.5rem);
  --font-size-h2: clamp(1.8rem, 3vw, 2.2rem);
  --font-size-h3: clamp(1.4rem, 2vw, 1.6rem);
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.1rem;
  --font-size-h6: 1rem;

  /* Line heights */
  --line-height-body: 1.55;
  --line-height-heading: 1.2;

  /* Colors */
  --color-background: var(--wp--preset--color--paper);
  --color-text: var(--wp--preset--color--ink);
  --color-primary: var(--wp--preset--color--sage);
  --color-accent: var(--wp--preset--color--clay);
  --color-border: var(--wp--preset--color--mist);
}

/* =========================================================
   Base typography
   ========================================================= */

body,
.editor-styles-wrapper {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* =========================================================
   Headings
   ========================================================= */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  font-weight: 400;
}

body h1,
.editor-styles-wrapper h1 {
  font-size: var(--font-size-h1);
}

body h2,
.editor-styles-wrapper h2 {
  font-size: var(--font-size-h2);
}

body h3,
.editor-styles-wrapper h3 {
  font-size: var(--font-size-h3);
}

body h4,
.editor-styles-wrapper h4 {
  font-size: var(--font-size-h4);
}

body h5,
.editor-styles-wrapper h5 {
  font-size: var(--font-size-h5);
}

body h6,
.editor-styles-wrapper h6 {
  font-size: var(--font-size-h6);
}

/* =========================================================
   Paragraphs
   ========================================================= */

body p,
.editor-styles-wrapper p {
  margin-bottom: 1rem;
}

/* =========================================================
   Links
   ========================================================= */

body a,
.editor-styles-wrapper a {
  text-decoration: none;
}

body a:hover,
.editor-styles-wrapper a:hover {
  text-decoration: underline;
}

/* =========================================================
   Image effects
   ========================================================= */

.wp-block-image[class*="imgfx-image-"],
.wp-block-media-text[class*="imgfx-image-"] .wp-block-media-text__media,
.wp-block-cover[class*="imgfx-hero-"] {
  overflow: hidden;
  position: relative;
}

.wp-block-image[class*="imgfx-image-"] img,
.wp-block-media-text[class*="imgfx-image-"] .wp-block-media-text__media img,
.wp-block-cover[class*="imgfx-hero-"] .wp-block-cover__image-background {
  transition: transform 450ms ease, filter 450ms ease, box-shadow 450ms ease;
  will-change: transform;
}

.wp-block-image.imgfx-image-frame-trace::before,
.wp-block-media-text.imgfx-image-frame-trace .wp-block-media-text__media::before,
.wp-block-image.imgfx-image-frame-trace-partial::before,
.wp-block-media-text.imgfx-image-frame-trace-partial .wp-block-media-text__media::before,
.wp-block-image.imgfx-image-frame-double-light::before,
.wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::before,
.wp-block-image.imgfx-image-frame-double-light::after,
.wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::after {
  content: "";
  inset: 12px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.wp-block-image.imgfx-image-frame-trace::before,
.wp-block-media-text.imgfx-image-frame-trace .wp-block-media-text__media::before {
  background:
    linear-gradient(var(--wp--preset--color--mist), var(--wp--preset--color--mist)) top left / 0 1px no-repeat,
    linear-gradient(var(--wp--preset--color--mist), var(--wp--preset--color--mist)) top right / 1px 0 no-repeat,
    linear-gradient(var(--wp--preset--color--mist), var(--wp--preset--color--mist)) bottom right / 0 1px no-repeat,
    linear-gradient(var(--wp--preset--color--mist), var(--wp--preset--color--mist)) bottom left / 1px 0 no-repeat;
  transition: background-size 380ms ease, opacity 260ms ease;
}

.wp-block-image.imgfx-image-frame-trace-partial::before,
.wp-block-media-text.imgfx-image-frame-trace-partial .wp-block-media-text__media::before {
  background:
    linear-gradient(var(--wp--preset--color--clay), var(--wp--preset--color--clay)) top left / 0 1px no-repeat,
    linear-gradient(var(--wp--preset--color--clay), var(--wp--preset--color--clay)) top right / 1px 0 no-repeat;
  transition: background-size 340ms ease, opacity 240ms ease;
}

.wp-block-image.imgfx-image-frame-double-light::before,
.wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::before,
.wp-block-image.imgfx-image-frame-double-light::after,
.wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::after {
  border: 1px solid rgba(245, 242, 235, 0.88);
  transition: opacity 320ms ease, transform 320ms ease;
}

.wp-block-image.imgfx-image-frame-double-light::before,
.wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::before {
  transform: scale(0.96);
}

.wp-block-image.imgfx-image-frame-double-light::after,
.wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::after {
  inset: 22px;
  transform: scale(1.04);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wp-block-image.imgfx-image-zoom-discret:hover img,
  .wp-block-image.imgfx-image-zoom-discret:focus-within img,
  .wp-block-media-text.imgfx-image-zoom-discret:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-zoom-discret:focus-within .wp-block-media-text__media img {
    transform: scale(1.02);
  }

  .wp-block-image.imgfx-image-zoom-equilibre:hover img,
  .wp-block-image.imgfx-image-zoom-equilibre:focus-within img,
  .wp-block-media-text.imgfx-image-zoom-equilibre:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-zoom-equilibre:focus-within .wp-block-media-text__media img {
    transform: scale(1.035);
  }

  .wp-block-image.imgfx-image-zoom-affirme:hover img,
  .wp-block-image.imgfx-image-zoom-affirme:focus-within img,
  .wp-block-media-text.imgfx-image-zoom-affirme:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-zoom-affirme:focus-within .wp-block-media-text__media img {
    transform: scale(1.05);
  }

  .wp-block-image.imgfx-image-zoom-shadow:hover img,
  .wp-block-image.imgfx-image-zoom-shadow:focus-within img,
  .wp-block-media-text.imgfx-image-zoom-shadow:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-zoom-shadow:focus-within .wp-block-media-text__media img {
    transform: scale(1.04);
    filter: brightness(0.9);
  }

  .wp-block-image.imgfx-image-warm:hover img,
  .wp-block-image.imgfx-image-warm:focus-within img,
  .wp-block-media-text.imgfx-image-warm:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-warm:focus-within .wp-block-media-text__media img {
    filter: brightness(1.03) saturate(1.08) sepia(0.08);
  }

  .wp-block-image.imgfx-image-pan-horizontal-discret:hover img,
  .wp-block-image.imgfx-image-pan-horizontal-discret:focus-within img,
  .wp-block-media-text.imgfx-image-pan-horizontal-discret:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-pan-horizontal-discret:focus-within .wp-block-media-text__media img {
    transform: scale(1.04) translate3d(1.5%, 0, 0);
  }

  .wp-block-image.imgfx-image-pan-horizontal-equilibre:hover img,
  .wp-block-image.imgfx-image-pan-horizontal-equilibre:focus-within img,
  .wp-block-media-text.imgfx-image-pan-horizontal-equilibre:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-pan-horizontal-equilibre:focus-within .wp-block-media-text__media img {
    transform: scale(1.06) translate3d(3%, 0, 0);
  }

  .wp-block-image.imgfx-image-pan-vertical-discret:hover img,
  .wp-block-image.imgfx-image-pan-vertical-discret:focus-within img,
  .wp-block-media-text.imgfx-image-pan-vertical-discret:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-pan-vertical-discret:focus-within .wp-block-media-text__media img {
    transform: scale(1.04) translate3d(0, -1.5%, 0);
  }

  .wp-block-image.imgfx-image-pan-vertical-equilibre:hover img,
  .wp-block-image.imgfx-image-pan-vertical-equilibre:focus-within img,
  .wp-block-media-text.imgfx-image-pan-vertical-equilibre:hover .wp-block-media-text__media img,
  .wp-block-media-text.imgfx-image-pan-vertical-equilibre:focus-within .wp-block-media-text__media img {
    transform: scale(1.06) translate3d(0, -3%, 0);
  }

  .wp-block-image.imgfx-image-frame-trace:hover::before,
  .wp-block-image.imgfx-image-frame-trace:focus-within::before,
  .wp-block-media-text.imgfx-image-frame-trace:hover .wp-block-media-text__media::before,
  .wp-block-media-text.imgfx-image-frame-trace:focus-within .wp-block-media-text__media::before {
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    opacity: 1;
  }

  .wp-block-image.imgfx-image-frame-trace-partial:hover::before,
  .wp-block-image.imgfx-image-frame-trace-partial:focus-within::before,
  .wp-block-media-text.imgfx-image-frame-trace-partial:hover .wp-block-media-text__media::before,
  .wp-block-media-text.imgfx-image-frame-trace-partial:focus-within .wp-block-media-text__media::before {
    background-size: 100% 1px, 1px 100%;
    opacity: 1;
  }

  .wp-block-image.imgfx-image-frame-double-light:hover::before,
  .wp-block-image.imgfx-image-frame-double-light:hover::after,
  .wp-block-image.imgfx-image-frame-double-light:focus-within::before,
  .wp-block-image.imgfx-image-frame-double-light:focus-within::after,
  .wp-block-media-text.imgfx-image-frame-double-light:hover .wp-block-media-text__media::before,
  .wp-block-media-text.imgfx-image-frame-double-light:hover .wp-block-media-text__media::after,
  .wp-block-media-text.imgfx-image-frame-double-light:focus-within .wp-block-media-text__media::before,
  .wp-block-media-text.imgfx-image-frame-double-light:focus-within .wp-block-media-text__media::after {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wp-block-cover.imgfx-hero-zoom-equilibre .wp-block-cover__image-background {
    animation: cnet-hero-zoom-equilibre 11s ease-in-out infinite alternate;
    transform-origin: center center;
  }

  .wp-block-cover.imgfx-hero-zoom-discret .wp-block-cover__image-background {
    animation: cnet-hero-zoom-discret 14s ease-in-out infinite alternate;
    transform-origin: center center;
  }

  .wp-block-cover.imgfx-hero-zoom-affirme .wp-block-cover__image-background {
    animation: cnet-hero-zoom-affirme 8.5s ease-in-out infinite alternate;
    transform-origin: center center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-image[class*="imgfx-image-"] img,
  .wp-block-media-text[class*="imgfx-image-"] .wp-block-media-text__media img,
  .wp-block-cover.imgfx-hero-zoom-discret .wp-block-cover__image-background,
  .wp-block-cover.imgfx-hero-zoom-equilibre .wp-block-cover__image-background,
  .wp-block-cover.imgfx-hero-zoom-affirme .wp-block-cover__image-background {
    transition: none;
    animation: none;
    transform: none;
    filter: none;
    box-shadow: none;
  }

  .wp-block-image.imgfx-image-frame-trace::before,
  .wp-block-media-text.imgfx-image-frame-trace .wp-block-media-text__media::before,
  .wp-block-image.imgfx-image-frame-trace-partial::before,
  .wp-block-media-text.imgfx-image-frame-trace-partial .wp-block-media-text__media::before,
  .wp-block-image.imgfx-image-frame-double-light::before,
  .wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::before,
  .wp-block-image.imgfx-image-frame-double-light::after,
  .wp-block-media-text.imgfx-image-frame-double-light .wp-block-media-text__media::after {
    opacity: 0;
    transition: none;
  }
}

@keyframes cnet-hero-zoom-discret {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

@keyframes cnet-hero-zoom-equilibre {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

@keyframes cnet-hero-zoom-affirme {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}