/* Variables */
:root {
  --liquid-blue: #0766c5;
  --liquid-water: #1e90ff;
}

/* Liquid */
[data-layout*="liquid"] {
  --liquid-min-margin: var(--spacing-16, 1rem);
  --liquid-content: var(--spacing-2xl, 1280px);

  display: grid;
  grid-template-columns:
    [liquid-start] minmax(var(--liquid-min-margin), 1fr)
    [content-start] minmax(0, calc(var(--liquid-content) / 2))
    [half] minmax(0, calc(var(--liquid-content) / 2))
    [content-end] minmax(var(--liquid-min-margin), 1fr)
    [liquid-end];

  :where(& > *) {
    grid-column: content;
  }
}

/* Splash et autres enfants de Liquid */
[data-layout*="splash"] {
  display: grid;
  grid-column: liquid;
  grid-template-columns: inherit;

  :where(& > *) {
    grid-column: content;
  }
}

[data-layout*="splash-start"] {
  display: grid;
  grid-column: liquid-start / content-end;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: content;
  }
}

[data-layout*="splash-end"] {
  display: grid;
  grid-column: content-start / liquid-end;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: content;
  }
}

[data-layout*="splash-half-start"] {
  display: grid;
  grid-column: liquid-start / half;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: content-start / half;
  }
}

[data-layout*="splash-half-end"] {
  display: grid;
  grid-column: half / liquid-end;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: half / content-end;
  }
}

/* Hero image */
.hero-img {
  justify-self: center;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

section strong, section a {
  color: var(--liquid-blue);
}

/* Reset */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #222;
    font-size: 1.2rem;
    line-height: 1.5;
    font-family: system-ui, sans-serif;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  button {
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
  }
  :where(
      img,
      table,
      td,
      blockquote,
      pre,
      code,
      input,
      textarea,
      select,
      video,
      svg,
      iframe
    ) {
    max-width: 100%;
  }
  :where(pre, code, kbd, samp) {
    font-size: 1em;
    font-family: monospace, monospace;
  }

  :where(pre) {
    overflow: auto;
    line-height: normal;
    white-space: pre-wrap;
    tab-size: 2;
  }
}

/* Deco */
@layer deco {
  h1 {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 4rem;
    font-family: georgia, serif;
    text-align: center;
  }
  h2 {
    margin-block: 3rem 3rem;
    font-weight: 300;
    font-family: georgia, serif;
    text-align: center;
  }
  p, ul {
    margin-block: 0 1rem;
  }
  [data-layout="splash"] {
    margin-block: 1rem;
    padding-top: 1rem;
    background: #333;
    color: #fff;
    font-weight: 300;
  }
  [data-layout*="splash-"] {
    margin-bottom: 1rem;
    padding-top: 1rem;
    background: sienna;
    color: #fff;
    font-weight: 300;
    text-align: left;
  }
  [data-layout*="-end"] {
    background: DarkSlateGray;
  }
  pre {
    margin-inline: 0;
    padding: 1rem;
    border-radius: 10px;
    background: #333;
    color: #fff;
    font-weight: 300;
    text-align: left;
  }
  code {
    font-weight: 700;
    font-size: smaller;
    font-family: monospace, monospace;
  }
  footer {
    margin-inline: 0;
    margin-bottom: 0 !important;
    margin-top: 8rem !important;
    padding: 1rem;
    background: #000;
    color: #fff;
    font-weight: 300;

    & a {
      color: #fff;
      word-break: break-all;
    }
  }
}

/* ---- Debug styles ---- */
/* Thanks to https://codepen.io/hexagoncircle/pen/dyejrpE?editors=1100 */
.debug {
  --theme: SaddleBrown;
  --pseudo-offset: 0.25rem;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: 0.3s ease-out;
  transition-property: opacity, background, backdrop-filter;
}

.debug > * {
  position: relative;
  grid-row: 1 / -1;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border-inline: 2px dashed var(--theme);
}

.debug > *::before,
.debug > *::after {
  z-index: 3000;
  position: absolute;
  top: 50%;
  padding: 12px 4px;
  transform: translateY(-50%);
  border-radius: 4px;
  background-color: var(--theme);
  content: var(--column) var(--suffix);
  color: #fff;
  font-size: 0.8em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
}

.debug::before,
.debug::after {
  z-index: 3000;
  position: absolute;
  top: 0;
  left: 50vw;
  content: "";
}
.debug::before {
  height: 100vh;
  border-left: 2px dashed var(--theme);
}
.debug::after {
  top: 50vh;
  padding: 8px 4px;
  translate: var(--pseudo-offset) -50%;
  border-radius: 4px;
  background-color: var(--theme);
  content: "Half";
  color: #fff;
  font-size: 0.8em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
}

.debug > *::before {
  left: var(--pseudo-offset);
  --suffix: "-start";
}

.debug > *::after {
  right: var(--pseudo-offset);
  --suffix: "-end";
}

.debug > *:nth-child(2) {
  --column: "Content";
  background: rgb(139 69 19 / 10%);
}

.debug > *:nth-child(1) {
  --column: "Liquid";
  background: rgb(139 69 19 / 20%);
}

[id="debug"],
[id="debug"] + label {
  cursor: pointer;
  user-select: none;
}

[class="debug-group"] {
  z-index: 2000;
  position: fixed;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--liquid-blue);
  border-radius: 1rem;
  color: white;
}

/* Hints positionning */

.debug .hint {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 4px 10px;
  overflow-x: hidden;
  border-radius: 4px;
  background: var(--theme);
  color: #fff;
  font-weight: 400;
  font-size: 0.7em;
}

.debug .hint-splash-start {
  grid-column-start: 1;
  grid-column-end: 2;
}
.debug .hint-splash-end {
  grid-column-start: -2;
  grid-column-end: -1;
}
.debug .hint-content-start {
  grid-column-start: 2;
  grid-column-end: 3;
}
.debug .hint-content-end {
  grid-column-start: -3;
  grid-column-end: -2;
}

body:has([id="debug"]:checked) .debug {
  z-index: 1000;
  opacity: 1;
}

/* Source font : https://www.fontspace.com/super-woobly-font-f100650 */

@font-face {
  font-family: "Super Woobly";
  src: url("SuperWoobly-8MJlz-opti.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.liquid-title {
  width: 100%;
  max-width: 800px;
  height: auto;
}

.svg-text-mask,
.svg-text-bg {
  font-family: "Super Woobly";
  font-size: 8rem;
}

/* Le blanc dans un masque SVG rend l'élément visible */
.svg-text-mask {
  fill: #ffffff;
}

/* Couleur du texte haut (non rempli) */
.svg-text-bg {
  fill: var(--liquid-blue);
}

/* Animation verticale (sur le groupe parent) */
.water-rise {
  animation: riseVertical 1s ease-out forwards;
}

/* Animation horizontale de la vague (sur le path) */
.wave-path {
  fill: var(--liquid-water);
  animation: waveHorizontal 3s linear infinite;
}

/* Le viewBox SVG fait 200px de haut.
   y=50% correspond à 100px (milieu exact du titre).
   On part de 200px (sous le texte) jusqu'à 100px (moitié du titre). */
@keyframes riseVertical {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(100px);
  }
}

@keyframes waveHorizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-600px); /* Déplacement d'un motif complet */
  }
}

/* ----------------------------
 * Masquage visuel accessible
 * ---------------------------- */

/* Masquage du contenu visuellement tout en le gardant accessible aux technologies d'assistance. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}