:root { --entree-mot-ratio: 3.4871; --entree-mot-hauteur: 1.8487; --entree-mot-ascendante: 1.4707; }

.entree { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 30px; background: var(--noir); cursor: pointer; transition: background-color .55s ease; }
.sans-entree .entree { display: none; }
.entree__lueurs { position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(30% 34% at 38% 44%, rgba(201, 52, 133, .5), transparent 70%),
    radial-gradient(30% 34% at 62% 52%, rgba(106, 53, 216, .5), transparent 70%),
    radial-gradient(44% 40% at 50% 50%, rgba(154, 54, 194, .22), transparent 72%);
  filter: blur(40px); animation: entree-lueurs 1.4s ease-out both, entree-respire 4s ease-in-out 1.4s infinite alternate; transition: opacity .4s ease; }
.entree__logo { --p: 128px; --decal: calc((var(--p) * .3 + var(--p) * .46 * var(--entree-mot-hauteur) * var(--entree-mot-ratio)) / 2); position: relative; display: flex; align-items: flex-start; gap: calc(var(--p) * .3); transform-origin: 0 0; will-change: transform; animation: entree-centre .7s cubic-bezier(.6, 0, .2, 1) 1.05s backwards; }
.entree__plaque { flex: none; width: var(--p); height: var(--p); overflow: visible; animation: entree-plaque .85s cubic-bezier(.2, .9, .3, 1.15) .15s both; }
.entree__signe { transform-box: fill-box; transform-origin: center; animation: entree-signe .65s cubic-bezier(.3, 1.6, .5, 1) .62s both; }
.entree__reflet { animation: entree-reflet .9s ease-in-out 1.1s both; }
.entree__mot { flex: none; height: calc(var(--p) * .46 * var(--entree-mot-hauteur)); width: calc(var(--p) * .46 * var(--entree-mot-hauteur) * var(--entree-mot-ratio)); margin-top: calc(var(--p) * (.73 - .46 * var(--entree-mot-ascendante))); clip-path: inset(-10% 100% -10% 0); animation: entree-mot .7s cubic-bezier(.6, 0, .2, 1) 1.1s forwards; }
.entree__devise { font: 600 19px/1.2 var(--titre); color: var(--doux); letter-spacing: .01em; animation: entree-monte .6s ease-out 1.75s both; transition: opacity .3s ease; }
.entree__barre { width: min(220px, 52vw); height: 3px; border-radius: 3px; background: var(--s2); overflow: hidden; animation: entree-monte .5s ease-out .3s both; transition: opacity .3s ease; }
.entree__barre span { display: block; height: 100%; background: var(--marque); transform-origin: 0 50%; transform: scaleX(0); animation: entree-barre 3s cubic-bezier(.35, 0, .25, 1) forwards; }
.entree--fin .entree__barre span { animation: none; transform: scaleX(1); transition: transform .25s ease-out; }
.entree--sortie { background-color: transparent; pointer-events: none; }
.entree--sortie .entree__lueurs, .entree--sortie .entree__devise, .entree--sortie .entree__barre { opacity: 0; }
.entree-atterrit .entete__logo img { opacity: 0; }
.entete__logo img { transition: opacity .2s ease; }

@keyframes entree-lueurs { from { opacity: 0; transform: scale(.85); } }
@keyframes entree-respire { to { transform: scale(1.08) translate3d(1%, -1%, 0); } }
@keyframes entree-plaque { from { opacity: 0; transform: scale(.55) rotate(-8deg); filter: blur(14px); } }
@keyframes entree-signe { from { opacity: 0; transform: translateY(5px) scale(.6); } }
@keyframes entree-reflet { from { transform: translateX(0); } to { transform: translateX(210px); } }
@keyframes entree-mot { to { clip-path: inset(-10% -2% -10% 0); } }
@keyframes entree-centre { from { transform: translateX(var(--decal)); } to { transform: none; } }
@keyframes entree-monte { from { opacity: 0; transform: translateY(8px); } }
@keyframes entree-barre { to { transform: scaleX(.9); } }

@media (max-width: 560px) {
  .entree__logo { --p: 72px; }
  .entree__devise { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .entree__logo, .entree__lueurs, .entree__plaque, .entree__signe, .entree__reflet, .entree__devise, .entree__barre { animation: none; }
  .entree__mot { animation: none; clip-path: none; }
  .entree__barre span { animation: none; transform: scaleX(1); }
}