/* Page de garde AJ EXPERT & CONSEIL, proposition "fronton".
   Un portique classique qui s'eleve sous les yeux du visiteur : les marches
   s'etalent, quatre colonnes montent, l'entablement se pose, le fronton se
   trace, puis le nom se grave lettre a lettre. Or sur bleu royal, un seul monde. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 900;
  /* le nom se grave des le premier instant : pas de police de secours visible */
  font-display: block;
}

:root {
  --bleu: #0B1F55;
  --or: #CFA94F;
  --or-voile: rgb(207 169 79 / 0.1);
  --ivoire: #DCE3F2;
}

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

html {
  background: var(--bleu);
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--ivoire);
  font-family: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--or); color: var(--bleu); }

.scene {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  overflow: hidden;
}

.lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- l'emblème ---------- */
.emblem {
  width: min(560px, 86vw, 68svh);
  height: auto;
  overflow: visible;
}
.emblem rect,
.emblem path,
.emblem circle {
  fill: var(--or-voile);
  stroke: var(--or);
  stroke-width: 2;
  stroke-linejoin: miter;
  transform-box: fill-box;
}
.emblem .canal,
.emblem .fronton path,
.emblem .fronton circle { fill: none; }
.emblem .canal { stroke-width: 1; stroke-opacity: 0.55; }
.emblem .fronton path,
.emblem .fronton circle { stroke-dasharray: 1; }

.marche { transform-origin: center; animation: etale 0.8s cubic-bezier(0.65, 0, 0.2, 1) both; }
.m1 { animation-delay: 0.1s; }
.m2 { animation-delay: 0.25s; }
.m3 { animation-delay: 0.4s; }

.colonne {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: monte 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.k1 { animation-delay: 0.7s; }
.k2 { animation-delay: 0.84s; }
.k3 { animation-delay: 0.98s; }
.k4 { animation-delay: 1.12s; }

.entablement { animation: pose 0.85s both; animation-delay: 1.85s; }

.fronton path:nth-child(1) { animation: trace 0.9s cubic-bezier(0.65, 0, 0.2, 1) 2.55s both; }
.fronton path:nth-child(2) { animation: trace 0.8s cubic-bezier(0.65, 0, 0.2, 1) 2.85s both; }
.fronton circle { animation: trace 0.6s cubic-bezier(0.65, 0, 0.2, 1) 3.25s both; }

/* ---------- le nom, grave lettre a lettre ---------- */
.nom {
  margin: clamp(22px, 4.5svh, 40px) 0 0;
  padding-left: 0.16em; /* compense l'espacement apres la derniere lettre */
  font-weight: 500;
  font-size: clamp(22px, 4.4vw, 58px);
  font-variation-settings: "opsz" 28;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--or);
  text-align: center;
}
.groupe { display: inline-block; white-space: nowrap; }
.mot { display: inline-block; }
.c {
  display: inline-block;
  animation: grave 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(3.0s + var(--i) * 0.05s);
}
.c0 { --i: 0; }  .c1 { --i: 1; }  .c2 { --i: 2; }  .c3 { --i: 3; }
.c4 { --i: 4; }  .c5 { --i: 5; }  .c6 { --i: 6; }  .c7 { --i: 7; }
.c8 { --i: 8; }  .c9 { --i: 9; }  .c10 { --i: 10; } .c11 { --i: 11; }
.c12 { --i: 12; } .c13 { --i: 13; } .c14 { --i: 14; } .c15 { --i: 15; }

.etat {
  margin: clamp(14px, 2.6svh, 24px) 0 0;
  padding-left: 0.34em;
  font-weight: 500;
  font-size: clamp(12px, 1.25vw, 16px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ivoire);
  animation: leve 0.9s ease-out 4.2s both;
}
/* court filet d'or au-dessus de la phrase */
.etat::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto 18px;
  background: var(--or);
}

/* ---------- mouvements ---------- */
@keyframes etale { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grave { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes leve { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
/* tombe de haut, se pose, rebondit d'un souffle */
@keyframes pose {
  0%   { transform: translateY(-90px); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.45); }
  14%  { opacity: 1; }
  58%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  72%  { transform: translateY(-4px); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); }
  86%  { transform: translateY(0); }
  100% { transform: translateY(0); opacity: 1; }
}

/* mouvement reduit : tout apparait, dans le meme ordre, sans chute ni trace */
@media (prefers-reduced-motion: reduce) {
  .marche, .colonne, .entablement,
  .fronton path, .fronton circle { animation: apparait 0.5s both; }
  .fronton path { stroke-dasharray: none; }
  .c { animation-name: apparait; }
}