@import url("/photo-grid.css");

.project-index {
  --media-height: 76svh;
  margin: clamp(110px, 10vw, 160px) var(--gutter) 100px;
}
.project-index a { position: relative; display: block; min-width: 0; width: min(100%, calc(var(--media-height) * (var(--media-ratio)))); }
.project-index :is(img, video) { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .project-index a:hover :is(img, video) { transform: scale(1.025); } }
.project-index video { object-position: left top; }
.project-index a { overflow: hidden; }
.project-index a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--red);
  transition: box-shadow .22s ease;
}
.project-index span {
  position: absolute; z-index: 1;
  inset: auto 0 0;
  padding: 7px 12px 8px;
  background: var(--red);
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
  overflow-wrap: anywhere;
  transform: translateY(calc(100% + 3px));
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.project-index a:focus-visible { outline: none; }
.project-index a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--red); }
.project-index a:focus-visible span { transform: none; }
@media (hover: hover) {
  .project-index a:hover span { transform: none; }
}
@media (hover: none) {
  .project-index span { position: static; display: block; transform: none; background: none; color: #151515; padding: 8px 0 0; font-weight: 400; font-size: 13px; text-transform: uppercase; }
  .project-index a { overflow: visible; }
}
@media (max-width: 680px) {
  .project-index { --media-height: 74svh; }
}

.project-index .is-full :is(img, video) { object-fit: cover !important; }

/* ---- En bas d’Idées : il y a ça en plus ---- */
.fun-teaser {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 92svh;
  margin-top: 40px;
  padding: 18vh var(--gutter) 14vh;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.fun-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(180deg, #ff16cc 0px, #ff16cc 30px, #ff2828 84px, #ff2828 104px, #12e5ef 168px, #12e5ef 270px, #ff16cc 330px) 0 0 / 100% 330px;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 46%);
  mask: linear-gradient(to bottom, transparent 0, #000 46%);
}
.fun-teaser-text {
  display: inline-block;
  padding: 3px 8px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}
.fun-teaser-word {
  font: italic 900 clamp(110px, 24vw, 360px)/.9 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: -.07em;
  padding: 0 .08em .06em;
  background: repeating-linear-gradient(140deg, #fff781 0, #ff692e 28px, #ff16cc 54px, #6f34ff 80px, #12e5ef 110px, #fff781 144px);
  background-size: 288px 288px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(4px 4px 0 #541058);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.fun-teaser:hover .fun-teaser-word { transform: rotate(-4deg) scale(1.04); }
.fun-teaser:focus-visible { outline: none; }
.fun-teaser:focus-visible .fun-teaser-text { outline: 2px solid #fff; }
@media (prefers-reduced-motion: no-preference) {
  .fun-teaser::before { animation: teaser-rise 2.4s linear infinite; }
  .fun-teaser-word { animation: teaser-shift 3s linear infinite; }
  @keyframes teaser-rise { to { background-position: 0 -330px; } }
  @keyframes teaser-shift { to { background-position: 288px 288px; } }
}