/* Ouverture : le rideau de fer du hanout se lève sur l'enseigne Roubla (1,9 s), une fois par visite. */
.ouverture { display: none; }
.avec-ouverture .ouverture { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; overflow: clip; pointer-events: none;
  background: var(--papier); animation: ouv-fondu .45s ease 1.45s forwards; }
.ouverture .ouv-logo { width: min(64vw, 380px); margin: 0 auto; mix-blend-mode: multiply; animation: ouv-pose .8s cubic-bezier(.2, .7, .2, 1) .35s both; }
.ouverture .ouv-ligne { font-family: var(--titre); color: var(--brique); font-size: clamp(16px, 2vw, 20px); text-align: center; margin-top: 14px;
  animation: ouv-pose .6s ease .75s both; }
.ouverture .ouv-rideau { position: absolute; inset: 0; transform-origin: top; animation: ouv-leve .95s cubic-bezier(.6, .05, .25, 1) .2s forwards;
  background:
    linear-gradient(to bottom, transparent calc(100% - 46px), #4d4136 calc(100% - 46px), #4d4136 calc(100% - 40px), #a58f74 calc(100% - 40px), #6c5c4b 100%),
    repeating-linear-gradient(to bottom, #8b7a65 0 9px, #a3917a 9px 14px, #6e604f 14px 16px, #93816b 16px 24px); }
.ouverture .ouv-rideau::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 120px; height: 10px; margin-left: -60px; border-radius: 5px;
  background: #3e342b; box-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
@keyframes ouv-leve { to { transform: translateY(-101%); } }
@keyframes ouv-pose { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes ouv-fondu { to { opacity: 0; } }