@font-face {
  font-family: 'PicNic';
  src: url('../assets/fonts/PicNic/fonts/webfonts/PicNic.woff2') format('woff2'),
       url('../assets/fonts/PicNic/fonts/webfonts/PicNic.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 14px;
  --color-text: #fff;
  --color-bg: #0f0e0e;
  --color-link: #f5e500;
  --color-link-hover: #fff67a;
  --page-padding: 0.5rem;
  --aspect: 4/5;
  --grid-item-height: 20vh;
  --c-gap: 3rem;
  --r-gap: 3rem;
  --column: 80px;
  --column-count: 3;
  --border-radius: 4px;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  height: 100%;
  width: 100%;
  font-family: 'PicNic', Arial, sans-serif;
  font-synthesis: none;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.loading {
  overflow: hidden;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fed866;
  opacity: 1;
  visibility: visible;
}

.site-loader::before {
  content: '';
  position: absolute;
  inset: -25%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.9'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.13;
  pointer-events: none;
  animation: loaderNoise 0.18s steps(2, end) infinite;
}

.site-loader.is-leaving {
  display: none;
}

.site-loader__canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: min(62vw, 62vh, 620px);
  height: min(62vw, 62vh, 620px);
  object-fit: contain;
}

@keyframes loaderNoise {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-3%, 2%, 0); }
  40% { transform: translate3d(2%, -4%, 0); }
  60% { transform: translate3d(4%, 3%, 0); }
  80% { transform: translate3d(-4%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.site-loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (scripting: none) {
  .site-loader {
    display: none;
  }
}

.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40000;
  width: clamp(82px, 7vw, 110px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity 0.12s linear;
  will-change: transform;
}

.site-cursor.is-visible {
  opacity: 1;
}

.site-cursor.is-pressed {
  scale: 0.88;
}

.site-cursor__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-cursor__image:first-child {
  animation: headerGlitchBase 3.2s steps(1, end) infinite;
}

.site-cursor__image--red,
.site-cursor__image--cyan {
  opacity: 0;
  mix-blend-mode: screen;
}

.site-cursor__image--red {
  filter: sepia(1) saturate(14) hue-rotate(305deg);
  animation: headerGlitchRed 3.2s steps(1, end) infinite;
}

.site-cursor__image--cyan {
  filter: sepia(1) saturate(14) hue-rotate(145deg);
  animation: headerGlitchCyan 3.2s steps(1, end) infinite;
}

.custom-cursor-enabled,
.custom-cursor-enabled * {
  cursor: none !important;
}

@media (pointer: coarse) {
  .site-cursor {
    display: none;
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    text-decoration: none;
    color: var(--color-link-hover);
  }

  &:focus {
    outline: none;
    background: lightgrey;

    &:not(:focus-visible) {
      background: transparent;
    }

    &:focus-visible {
      outline: 2px solid var(--color-link);
      background: transparent;
    }
  }
}

.line {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;

  &::before {
    background: var(--color-link-hover);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: transform 0.4s ease;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right center;
  }

  &:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.scene {
  perspective: 900px;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene__title {
  position: relative;
  z-index: 10;
  margin: 0;
}

.scene__title a {
  display: block;
}

.scene__title span {
  display: inline-block;
}

.scene__title .char {
  display: inline-block;
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
}

.carousel {
  --planche-size: min(680px, 76vh, 84vw);
  width: var(--planche-size);
  height: var(--planche-size);
  top: 50%;
  left: 50%;
  margin: calc(var(--planche-size) / -2) 0 0 calc(var(--planche-size) / -2);
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(-550px) rotateY(0deg);
}

.scene:nth-child(even) .carousel {
  transform: translateZ(-550px) rotateY(45deg);
}

.carousel__cell {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.card__face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  background-image: var(--img);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.card__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.card__face--back {
  transform: rotateY(180deg);
}

.preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 15vw;
  display: grid;
  align-content: center;
  justify-items: center;
  grid-row-gap: 1rem;
  opacity: 0;
  pointer-events: none;
}

.preview__header {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  line-height: 1;
}

.preview__title {
  margin: 0;
}

.preview__close {
  background: none;
  text-transform: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--color-close);
  &:hover,
  &:focus {
    outline: none;
    color: var(--color-link-hover);
  }
}

.grid {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: repeat(var(--column-count), minmax(var(--column), 1fr));
  grid-column-gap: var(--c-gap);
  grid-row-gap: var(--r-gap);
  width: 100%;
  perspective: 900px;
}

.grid__item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  will-change: transform, clip-path;
  overflow: hidden;
  border-radius: var(--border-radius);
  position: relative;
  transform-style: preserve-3d;
}

.grid__item-image {
  width: 100%;
  aspect-ratio: var(--aspect);
  background-size: 100%;
  background-position: 50% 50%;
  transition: opacity 0.15s cubic-bezier(0.2, 0, 0.2, 1);
}

.grid__item:hover .grid__item-image {
  opacity: 0.7;
}

.grid--audio {
  grid-template-columns: minmax(0, 1fr);
  width: min(900px, 100%);
  padding: clamp(12px, 2vw, 24px) 0;
}

.soundcloud-player {
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  border: 2px solid #fed866;
  border-radius: var(--border-radius);
  background: #fed866;
}

.soundcloud-player iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

@media (max-width: 700px) {
  .preview .grid--audio {
    display: grid;
    width: 100%;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  .soundcloud-player,
  .soundcloud-player iframe {
    min-height: 300px;
    height: 300px;
  }
}

.grid__item-caption h3 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

@media screen and (min-width: 65em) {
  :root {
    --column-count: 6;
  }
}

/* Background animation from manga-reader.html. */
#glitch-bg {
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url('../assets/background.jpg'); /* ton image de fond */
  background-size: cover;
  background-position: center;
  overflow:hidden;
}

#glitch-layer {
  position:absolute; inset:0; pointer-events:none;
  background: inherit; mix-blend-mode: screen;
  opacity:0.5;
}

/* Scanlines */
#glitch-bg::before {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(
    transparent 0px,
    rgba(255,255,255,0.03) 2px,
    transparent 4px
  );
  animation: scanlineMove 4s linear infinite;
}

@keyframes scanlineMove { 0%{transform:translateY(0);} 100%{transform:translateY(100%);} }


#smooth-wrapper { z-index: 1; }
.preview-wrapper { position: relative; z-index: 2; }
.preview { padding: 0 4vw; }
.preview .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5vw;
}
.grid__item-image {
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  .preview .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(92vw, 70vh);
    gap: 1rem;
  }
}

/* Jaune Morale identity. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: clamp(20px, 3vw, 44px);
  pointer-events: none;
}
.site-brand {
  margin: 0;
  color: var(--color-link);
  font-size: clamp(40px, 8vw, 112px);
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
}
.site-footer {
  min-height: 160px;
  padding: 40px clamp(20px, 3vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(245, 229, 0, 0.25);
  color: var(--color-link);
}
.footer-brand { font-weight: 400; letter-spacing: normal; }
.site-footer small { font-size: 10px; letter-spacing: 0.1em; }
/* Keep the existing links and animation targets, while hiding their text. */
.scene__title {
  width: min(680px, 76vh, 84vw);
  height: min(680px, 76vh, 84vw);
}
.scene__title a { width: 100%; height: 100%; }
.scene__title > a > span,
.preview__title > span { opacity: 0 !important; }
.scene__title a:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 8px;
  border-radius: 4px;
}
.preview__close { color: var(--color-link); }
.preview__close:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 6px;
}

.site-brand, .footer-brand { text-transform: none; }
.site-footer { flex-wrap: wrap; }
.site-footer small, .font-credit {
  font-family: Arial, sans-serif;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
}
.font-credit { margin: 0; width: 100%; color: #aaa; }

/* Large, centered identity and mobile reading layout. */
.site-header {
  display: flex;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 12px 12px;
}
@media (max-width: 700px) {
  .site-brand { font-size: clamp(30px, 10vw, 70px); }
  .carousel { --planche-size: min(98vw, 78svh); }
  .scene__title {
    width: min(98vw, 78svh);
    height: min(98vw, 78svh);
  }
  .preview {
    padding: max(90px, 17vw) 1vw max(12px, env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    row-gap: 8px;
  }
  .preview__header { align-items: center; }
  .preview__close { min-height: 44px; padding: 8px 12px; }
  .preview .grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    align-content: start;
    gap: 16px;
    padding: 0 0 12px;
  }
  .preview .grid__item { flex-shrink: 0; }
}

/* Logo aligned left on phones, centered from tablet widths. */
.site-header { justify-content: flex-start; }
.site-brand {
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  font-synthesis: weight;
  font-size: clamp(28px, 8.5vw, 96px);
}
@media (min-width: 768px) {
  .site-header { justify-content: center; }
  .site-brand { text-align: center; }
}

/* Center within the viewport, including narrow device previews. */
.site-header { justify-content: center; }
.site-brand { text-align: center; }
@media (max-width: 1024px) {
  .scene { height: 100svh; }
  .carousel { --planche-size: min(98vw, 76svh); }
  .scene__title {
    width: min(98vw, 76svh);
    height: min(98vw, 76svh);
  }
  .carousel,
  .scene:nth-child(even) .carousel {
    transform: translateZ(var(--carousel-depth, -550px)) rotateY(0deg);
  }
}

/* Split header: glitched mark on the left, compact wordmark on the right. */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(16px, 2.5vw, 36px);
}

.site-brand {
  margin: 0;
  color: var(--color-link);
  font-size: clamp(12px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.site-logo {
  position: relative;
  width: clamp(64px, 8vw, 112px);
  aspect-ratio: 1;
  isolation: isolate;
  display: none;
}

.site-logo__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform, clip-path, filter;
}

.site-logo__image--red,
.site-logo__image--cyan {
  mix-blend-mode: screen;
  opacity: 0;
}

.site-logo__image--red {
  filter: sepia(1) saturate(14) hue-rotate(305deg);
  animation: headerGlitchRed 3.2s steps(1, end) infinite;
}

.site-logo__image--cyan {
  filter: sepia(1) saturate(14) hue-rotate(145deg);
  animation: headerGlitchCyan 3.2s steps(1, end) infinite;
}

.site-logo__image:first-child {
  animation: headerGlitchBase 3.2s steps(1, end) infinite;
}

@keyframes headerGlitchBase {
  0%, 15%, 18%, 54%, 57%, 86%, 89%, 100% { transform: translate(0); clip-path: inset(0); }
  16% { transform: translate(3px, 0); clip-path: inset(22% 0 56% 0); }
  17% { transform: translate(-2px, 0); clip-path: inset(61% 0 18% 0); }
  55% { transform: translate(-3px, 0); clip-path: inset(39% 0 39% 0); }
  56% { transform: translate(2px, 0); clip-path: inset(73% 0 9% 0); }
  87% { transform: translate(3px, 0); clip-path: inset(12% 0 70% 0); }
  88% { transform: translate(-2px, 0); clip-path: inset(51% 0 27% 0); }
}

@keyframes headerGlitchRed {
  0%, 15%, 18%, 54%, 57%, 86%, 89%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  16%, 17% { opacity: 0.28; transform: translate(4px, 0); clip-path: inset(18% 0 60% 0); }
  55%, 56% { opacity: 0.3; transform: translate(-4px, 0); clip-path: inset(55% 0 23% 0); }
  87%, 88% { opacity: 0.28; transform: translate(3px, 0); clip-path: inset(71% 0 9% 0); }
}

@keyframes headerGlitchCyan {
  0%, 15%, 18%, 54%, 57%, 86%, 89%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  16%, 17% { opacity: 0.28; transform: translate(-3px, 0); clip-path: inset(57% 0 20% 0); }
  55%, 56% { opacity: 0.3; transform: translate(4px, 0); clip-path: inset(25% 0 51% 0); }
  87%, 88% { opacity: 0.28; transform: translate(-3px, 0); clip-path: inset(42% 0 33% 0); }
}

@media (max-width: 700px) {
  .site-header {
    padding: max(14px, env(safe-area-inset-top)) 14px 10px;
  }

  .site-logo {
    width: clamp(58px, 18vw, 78px);
  }

  .site-brand {
    font-size: clamp(12px, 3.8vw, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader::before {
    animation: none;
  }

  .site-cursor__image {
    animation: none !important;
  }

  .site-cursor__image--red,
  .site-cursor__image--cyan {
    display: none;
  }

  .site-logo__image {
    animation: none !important;
  }

  .site-logo__image--red,
  .site-logo__image--cyan {
    display: none;
  }
}

/* Leave more breathing room below the logo without moving the scroll sections. */
.scene { --image-offset: clamp(36px, 6vh, 64px); }
.carousel { top: calc(50% + var(--image-offset)); }
.scene__title { top: var(--image-offset); }

/* Center phone panels vertically within each screen-sized section. */
@media (max-width: 700px) {
  .scene { --image-offset: 0px; }
  .carousel { top: 50%; }
  .scene__title { top: 0; }
}

/* SoundCloud replaces the four-image preview grid. */
.preview .grid.grid--audio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(900px, 100%);
  max-width: 900px;
  min-height: 0;
  gap: 0;
  overflow: visible;
  padding: clamp(12px, 2vw, 24px) 0;
}

@media (max-width: 700px) {
  .preview .grid.grid--audio {
    width: 100%;
    max-width: none;
    padding: 0;
  }
}

/* Larger hit area without changing the visual size or position of the label. */
.preview__close {
  min-width: 48px;
  min-height: 48px;
  padding: 14px 18px;
  margin: -14px -18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}