/* The page changes only after the closing animation has fully covered the viewport. */
#page-passage{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#100f17;visibility:hidden;opacity:0;pointer-events:none;contain:layout paint;filter:none;backdrop-filter:none;mix-blend-mode:normal}
body.is-passage{overscroll-behavior:none}
body.is-passage #page-passage{visibility:visible;opacity:1;pointer-events:auto;animation:none!important}
#page-passage .passage-ring,#page-passage .passage-photo,#page-passage .passage-panes{display:none!important}
#page-passage .passage-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;animation:none!important;transform:none;translate:none;filter:none}
#page-passage .passage-center img{width:50px;height:50px;object-fit:contain;filter:none;opacity:.9}
#page-passage .passage-center span{max-width:80vw;text-align:center;font:9px/1.7 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#d4c4ab}
#page-passage[data-style=particles] .passage-center{align-self:start;margin-top:calc(46dvh + 70px)}
#page-passage[data-style=particles] .passage-center img{display:none}
#page-passage[data-style=particles]{background:radial-gradient(ellipse at 50% 46%,#211c2b,#0c0d13 70%)}
.passage-particles{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
#page-passage[data-style=particles] .passage-particles{display:block}
#page-passage[data-style=curtain]{background:linear-gradient(90deg,#15111e,#292131 50%,#15111e)}
#page-passage[data-style=iris]{background:radial-gradient(ellipse at 30% 30%,#34303c,#0d0d15 65%)}
#page-passage[data-style=diagonal]{background:linear-gradient(115deg,#100f17 25%,#39323e 50%,#100f17 75%)}
#page-passage[data-style=depth]{background:linear-gradient(145deg,#1b1926,#0c0d13 65%);box-shadow:inset 0 0 0 1px #d4c4ab40}
#page-passage[data-style=glow]{background:radial-gradient(ellipse at 68% 40%,#d4c4ab,#817387 20%,#211b2b 52%,#0c0d13 80%)}
#page-passage[data-style=glow] .passage-center span{color:#f5f2eb}
#page-passage[data-type=scene]:not([data-style=particles]) .passage-center img{display:none}
#page-passage[data-type=scene]:not([data-style=particles]) .passage-center{align-self:end;margin-bottom:15dvh}
/* Small title entrances complement the six different full-screen passages. */
body[data-page=entreprises].page-open .page-intro-copy{animation-name:pd-intro-side}
body[data-page=particuliers].page-open .page-intro-copy{animation-name:pd-intro-focus}
body[data-page=contact].page-open .page-intro-copy{animation-name:pd-intro-soft}
body[data-page=creations].page-open .page-intro-copy{animation-name:pd-intro-side}
@keyframes pd-intro-side{from{opacity:0;translate:-22px 0}to{opacity:1;translate:0 0}}
@keyframes pd-intro-focus{from{opacity:0;scale:.975}to{opacity:1;scale:1}}
@keyframes pd-intro-soft{from{opacity:0}to{opacity:1}}
@media(max-width:760px){#page-passage .passage-center span{font-size:8px;letter-spacing:.12em}#page-passage .passage-center img{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){#page-passage{display:none!important}body.page-open .page-intro-copy{animation:none!important}}