/* Effets : voile d'ouverture, transitions entre pages, titres révélés, curseur, écrins vivants.
   Tout se replie sur une page immobile et complète avec « réduire les animations ». */

/* Transitions entre pages (navigateurs qui les connaissent) : le nom d'une participation
   glisse de la liste jusqu'au titre de sa fiche. */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-out 0.55s var(--ease) both; }
::view-transition-new(root) { animation: page-in 0.9s var(--ease) 0.1s both; }
::view-transition-group(*) { animation-duration: 0.9s; animation-timing-function: var(--ease); }

@keyframes page-out { to { opacity: 0; transform: translateY(-1.5rem); filter: blur(6px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(2rem); } }

/* Voile d'ouverture */

.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--ink);
  color: var(--champagne);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
.js .veil { display: flex; }
.js .veil:not(.is-playing) { visibility: hidden; }
.is-open .veil { transform: translateY(-100%); }

.veil__mark { width: 5.5rem; height: 5.5rem; overflow: visible; }
.veil__mark circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 352;
  stroke-dashoffset: 352;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: draw 1.1s var(--ease) 0.1s forwards;
}
.veil__mark text {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  fill: currentColor;
  opacity: 0;
  animation: fade 0.8s var(--ease) 0.5s forwards;
}
.veil__name {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.6em;
  margin-right: -0.6em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.7);
  opacity: 0;
  animation: fade 0.8s var(--ease) 0.7s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* Filet de progression et grain */

.progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
}

/* Curseur */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.cursor.is-active { opacity: 1; }
.cursor::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.cursor.is-hovering::before { transform: scale(1.6); background: rgba(168, 136, 90, 0.1); }
.cursor.has-label::before { transform: scale(2.9); background: var(--ink); border-color: var(--ink); }
.cursor__label {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  margin-left: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.cursor.has-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.has-cursor [data-cursor], .has-cursor [data-cursor] * { cursor: none; }

/* Titres révélés mot à mot */

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.04em 0.28em;
  margin: -0.12em -0.04em -0.28em;
}
.word__inner { display: inline-block; }

.can-reveal [data-split]:not(.is-split) { visibility: hidden; animation: failsafe 0s 2.5s forwards; }
@keyframes failsafe { to { visibility: visible; } }

.can-reveal .is-split .word__inner {
  transform: translateY(140%) rotate(4deg);
  transform-origin: left bottom;
  transition: transform 1.3s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.can-reveal.is-open .is-split.is-visible .word__inner { transform: none; }

/* Blocs révélés au défilement */

.can-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.can-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.can-reveal .principles li:nth-child(2) { transition-delay: 0.12s; }
.can-reveal .principles li:nth-child(3) { transition-delay: 0.24s; }
.can-reveal .register__row:nth-child(2n) { transition-delay: 0.06s; }

/* Ouverture de l'accueil */

.overture__glow {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(38% 34% at var(--gx, 50%) var(--gy, 42%), rgba(168, 136, 90, 0.2), transparent 70%);
  transform: translateY(var(--parallax, 0));
  transition: background-position 1s;
  animation: breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: 0.75; } to { opacity: 1; } }

.can-reveal .overture::before { transform: scale(1.04); opacity: 0; transition: transform 2s var(--ease) 0.2s, opacity 2s var(--ease) 0.2s; }
.can-reveal.is-open .overture::before { transform: none; opacity: 1; }

.can-reveal .overture__eyebrow,
.can-reveal .overture__lede,
.can-reveal .overture__scroll {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.can-reveal .overture__scroll { transform: translateX(-50%) translateY(1.25rem); }
.can-reveal.is-open .overture__eyebrow { opacity: 1; transform: none; transition-delay: 0.1s; }
.can-reveal.is-open .overture__lede { opacity: 1; transform: none; transition-delay: 0.9s; }
.can-reveal.is-open .overture__scroll { opacity: 1; transform: translateX(-50%); transition-delay: 1.3s; }
.overture__scroll { transform: translateX(-50%); margin-left: 0; }
.overture__title .word__inner { transition-duration: 1.6s; }

/* Chiffres romains en parallaxe */

.maison__numeral,
.principles__numeral { display: inline-block; transform: translateY(var(--parallax, 0)); will-change: transform; }

/* Boutons : le fond monte comme un rideau */

.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.5s var(--ease);
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s var(--ease);
}
.button:hover { background: transparent; color: var(--ivory); border-color: var(--ink); }
.button:hover::before { transform: scaleY(1); }

[data-magnetic] { display: inline-block; transition: transform 0.5s var(--ease); }

/* Registre : la ligne survolée s'avance, les autres s'effacent */

.register__row { transition: opacity 0.6s var(--ease); }
.register:hover .register__row:not(:hover) { opacity: 0.38; }
.register__name { transition: transform 0.8s var(--ease), color 0.6s var(--ease); }
.register__link:hover .register__name { transform: translateX(0.6rem); color: var(--champagne); }
.register__link:hover { padding-left: 0; }

/* Aperçu flottant (accueil) */

.float-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 22rem;
  padding: 4px;
  background: var(--ink);
  border: 1px solid rgba(168, 136, 90, 0.5);
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.4s var(--ease), clip-path 0.7s var(--ease);
}
.float-preview.is-visible { opacity: 1; clip-path: inset(0); }
.float-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

@media (hover: hover) and (pointer: fine) {
  .register-section .register__thumb { display: none; }
  .register-section .register__link { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 1.3fr) 2rem; }
}

/* Bandeau des maisons */

.marquee {
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(5rem, 12vw, 10rem);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  transition: color 0.6s var(--ease);
}
.marquee span:hover { color: var(--ink); }
.marquee i { font-style: normal; font-size: 1.2rem; color: var(--champagne); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Écrin vivant : la vitrine s'incline, un reflet passe sur la vitre */

.ecrin { perspective: 1800px; }
.ecrin__window {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.ecrin__window.is-tilting { transition: transform 0.25s ease-out; }
.ecrin__window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 50% at var(--mx, 50%) var(--my, 50%), rgba(255, 248, 235, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  mix-blend-mode: screen;
}
.ecrin__window.is-tilting::after { opacity: 1; }

.can-reveal .ecrin img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition: clip-path 1.6s var(--ease) 0.3s, transform 2.2s var(--ease) 0.3s;
}
.can-reveal .ecrin.is-visible img { clip-path: inset(0); transform: none; }

.ecrin__window::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(244, 228, 196, 0.22) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  z-index: 2;
}
.can-reveal .ecrin.is-visible .ecrin__window::before { animation: sheen 2.4s var(--ease) 1.4s both; }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* Miniatures de la liste : l'image s'éveille au survol */

.register__thumb img { transition: filter 0.8s var(--ease), transform 1.4s var(--ease); }

/* Participation suivante : un filet champagne s'étire sous le nom */

.maison__next-name { position: relative; display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.maison__next-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.6rem;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transition: transform 0.9s var(--ease);
}
.maison__next:hover .maison__next-name::after { transform: scaleX(1); }

/* Signature du pied de page */

.colophon { overflow: hidden; }
.colophon__signature {
  margin: 4rem 0 -0.12em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 16vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(168, 136, 90, 0.55);
  white-space: nowrap;
  user-select: none;
}
.colophon__year { margin-top: 2.5rem; }

/* Petits écrans */

@media (max-width: 560px) {
  .masthead.is-floating { padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .float-preview { display: none; }
  .marquee span { -webkit-text-stroke-width: 0.75px; }
}

/* Moins d'animations */

@media (prefers-reduced-motion: reduce) {
  .grain, .overture__glow, .marquee__track { animation: none; }
  .veil, .cursor, .float-preview { display: none !important; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; }
  .masthead { transition: none; }
}