/* ===================================================================== Les passages d'un écran à l'autre. Le site tient sur trois échelles emboîtées — la vitrine, la galaxie des coffres, puis un coffre. Naviguer entre elles n'est pas « changer de page » : c'est avancer ou reculer d'un cran dans la même profondeur. Les quatre passages ci-dessous portent donc une DIRECTION, et c'est elle, pas la décoration, qui doit se lire : dive vitrine → galaxie on entre land galaxie → coffre on entre (couleur de l'actif) orbit coffre → galaxie on recule surface galaxie → vitrine on recule Trois signaux portent cette direction, dans cet ordre d'importance : le décor de la page (il avance et grossit quand on entre, il recule et rétrécit quand on sort), le sens des traits, et le sens de l'anneau. Le voile d'encre, lui, ne fait que couvrir — un disque qui s'ouvre quand on entre, un fondu quand on recule. Chaque passage a un PENDANT à l'arrivée : sans lui, le voile s'ouvrirait sur une page déjà entièrement affichée et le mouvement s'arrêterait net au lieu de déposer le visiteur. L'arrivée est posée par un petit script synchrone en tête de (voir les pages), parce qu'elle doit exister dès la première image — un module, différé par nature, arriverait trop tard. ===================================================================== */ :root{ /* Point de départ du voile — le lien cliqué, pas le centre de l'écran : le mouvement continue le geste. Le centre reste le repli, notamment à l'arrivée, où le point cliqué appartenait à l'autre page. */ --wx:50%; --wy:50%; /* Couleur du passage : l'or de la marque par défaut, la couleur de l'actif quand on entre dans son coffre ou qu'on en sort. */ --wc:#E4B767; } /* --------------------------------------------------------------------- Le décor pendant le passage Ce n'est pas un effet parmi d'autres : c'est CE qui dit la direction. On entre → la page grossit et se floute, comme dépassée par la caméra. On recule → elle rétrécit, comme lâchée derrière soi. La transition n'est déclarée que sous `.warp-active`, posée juste avant le passage : hors de ce moment, aucune règle ne pèse sur les éléments de premier niveau des pages. --------------------------------------------------------------------- */ html.warp-active{overflow:clip;} html.warp-active > body > *:not(.warp){ transition:transform .56s cubic-bezier(.5,0,.2,1), filter .56s ease, opacity .56s ease; transform-origin:50% 42%; will-change:transform, filter, opacity; } /* `data-warp` : on s'en va. `data-warp-in` : on vient d'arriver, et l'état de départ est posé avant le premier rendu puis relâché — le décor se remet en place au lieu d'apparaître déjà posé. Les deux décrivent le même état, donc la même règle. */ html[data-warp="dive"] > body > *:not(.warp), html[data-warp-in="dive"] > body > *:not(.warp) {transform:scale(1.07); filter:blur(4px); opacity:.45;} html[data-warp="land"] > body > *:not(.warp), html[data-warp-in="land"] > body > *:not(.warp) {transform:scale(1.13); filter:blur(5px); opacity:.38;} html[data-warp="surface"] > body > *:not(.warp), html[data-warp-in="surface"] > body > *:not(.warp) {transform:scale(.93); filter:blur(4px); opacity:.45;} html[data-warp="orbit"] > body > *:not(.warp), html[data-warp-in="orbit"] > body > *:not(.warp) {transform:scale(.85); filter:blur(5px); opacity:.38;} /* --------------------------------------------------------------------- Le voile --------------------------------------------------------------------- */ .warp{ position:fixed; inset:0; z-index:250; pointer-events:none; /* L'anneau atteint 190vmax : sans confinement de peinture, il déborderait du voile et ferait apparaître des barres de défilement le temps du passage. */ contain:layout paint style; } /* Entrer : un disque d'encre s'ouvre depuis le point cliqué. */ .warp .warp-ink{ position:absolute; inset:0; background:var(--ink,#14110F); clip-path:circle(0 at var(--wx) var(--wy)); transition:clip-path .58s cubic-bezier(.5,0,.2,1); } .warp.go .warp-ink{clip-path:circle(150% at var(--wx) var(--wy));} /* Reculer : pas de disque. Un disque qui s'ouvre est un mouvement vers l'avant — exactement ce qu'on ne veut pas dire ici. L'encre monte en fondu, et c'est le décor qui rétrécit derrière elle qui porte le recul. */ .warp-surface .warp-ink, .warp-orbit .warp-ink{ clip-path:none; opacity:0; transition:opacity .40s ease .04s; } /* `clip-path` répété ici : sans lui, la règle générique `.warp.go` (plus spécifique que `.warp-orbit`) réimposerait le disque au moment du départ. */ .warp-surface.go .warp-ink, .warp-orbit.go .warp-ink{clip-path:none; opacity:1;} /* L'arrivée rejoue le même geste à l'envers : le voile est là dès la première image et se retire. */ .warp-arrive .warp-ink{ clip-path:circle(150% at var(--wx) var(--wy)); transition:clip-path .52s cubic-bezier(.5,0,.2,1); } .warp-arrive.go .warp-ink{clip-path:circle(0 at var(--wx) var(--wy));} .warp-arrive.warp-surface .warp-ink, .warp-arrive.warp-orbit .warp-ink{ clip-path:none; opacity:1; transition:opacity .46s ease; } .warp-arrive.warp-surface.go .warp-ink, .warp-arrive.warp-orbit.go .warp-ink{opacity:0;} /* --------------------------------------------------------------------- L'anneau — la couleur de l'endroit qu'on quitte ou qu'on rejoint. Il s'écarte quand on entre, il se resserre quand on recule. C'est le seul élément qui porte la couleur de l'actif : entrer dans le coffre USDC ne ressemble pas à entrer dans le coffre EURC. --------------------------------------------------------------------- */ .warp .warp-halo{ position:absolute; left:var(--wx); top:var(--wy); width:0; height:0; border-radius:50%; opacity:0; transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--wc), 0 0 120px 30px var(--wc); } @keyframes warp-halo-out{ from{width:0; height:0; opacity:0;} 22%{opacity:.85;} to{width:190vmax; height:190vmax; opacity:0;} } @keyframes warp-halo-in{ from{width:190vmax; height:190vmax; opacity:0;} 40%{opacity:.8;} to{width:0; height:0; opacity:0;} } .warp-dive.go .warp-halo, .warp-land.go .warp-halo{ animation:warp-halo-out .64s cubic-bezier(.3,0,.2,1) both; } .warp-surface.go .warp-halo, .warp-orbit.go .warp-halo{ animation:warp-halo-in .58s cubic-bezier(.3,0,.2,1) both; } /* À l'arrivée l'anneau part du centre : le point cliqué appartenait à la page précédente et n'a plus de sens ici. */ .warp-arrive .warp-halo{left:50%; top:50%;} .warp-arrive.go .warp-halo{animation-duration:.72s; animation-delay:.06s;} /* --------------------------------------------------------------------- Les traits — des étoiles filantes, dans le sens de la marche. --------------------------------------------------------------------- */ .warp .warp-rays{position:absolute; inset:0; opacity:0; transition:opacity .2s ease .1s;} .warp.go .warp-rays{opacity:1;} .warp .warp-rays i{ position:absolute; left:50%; top:50%; width:2px; height:26vh; background:linear-gradient(to top, transparent, var(--wc)); transform-origin:50% 0; transform:rotate(var(--a)) translateY(0) scaleY(.06); opacity:0; } @keyframes warp-ray-out{ from{transform:rotate(var(--a)) translateY(0) scaleY(.06); opacity:0;} 40%{opacity:.75;} to{transform:rotate(var(--a)) translateY(46vh) scaleY(1); opacity:0;} } @keyframes warp-ray-in{ from{transform:rotate(var(--a)) translateY(46vh) scaleY(1); opacity:0;} 45%{opacity:.7;} to{transform:rotate(var(--a)) translateY(0) scaleY(.06); opacity:0;} } .warp-dive.go .warp-rays i, .warp-land.go .warp-rays i{ animation:warp-ray-out .5s cubic-bezier(.4,0,.3,1) both; animation-delay:calc(110ms + var(--d)); } .warp-surface.go .warp-rays i, .warp-orbit.go .warp-rays i{ animation:warp-ray-in .48s cubic-bezier(.4,0,.3,1) both; animation-delay:var(--d); } /* --------------------------------------------------------------------- La marque au centre — celle de l'endroit où l'on va. En entrant dans un coffre, c'est le logo de l'actif qu'on vient de cliquer qui se pose : le geste et son aboutissement portent la même image. --------------------------------------------------------------------- */ .warp .warp-badge{ position:absolute; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:14px; opacity:0; transform:translate(-50%,-50%) scale(.8); transition:opacity .3s ease .2s, transform .45s cubic-bezier(.2,.9,.25,1) .2s; } .warp.go .warp-badge{opacity:1; transform:translate(-50%,-50%) scale(1);} /* En reculant, la marque part de plus gros et se pose : on s'en éloigne. */ .warp-surface .warp-badge, .warp-orbit .warp-badge{transform:translate(-50%,-50%) scale(1.22);} .warp .warp-mark{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 26px var(--wc)); } .warp .warp-mark svg{width:100%; height:100%;} .warp .warp-mark .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;} /* Un logo « glyphe » (sans fond propre) flotte dans le disque au lieu de le remplir — même distinction que partout ailleurs sur le site. */ .warp .warp-mark .logo-img.glyph{ width:76%; height:76%; border-radius:0; object-fit:contain; background:none; } .warp .warp-mark .logo-init{font-family:var(--mono); font-weight:600; font-size:1.4rem; color:var(--paper);} /* Pas de `text-transform` : les libellés sont déjà écrits en bas de casse, et une règle générale mettrait aussi le symbole de l'actif en minuscules — « ouverture du coffre usdc » se lit comme une faute. */ .warp .warp-badge b{ font-family:var(--mono); font-weight:400; font-size:.78rem; letter-spacing:.08em; color:var(--paper-dim); } /* --------------------------------------------------------------------- Préférence « moins d'animations » : le passage n'existe plus du tout. Le JS ne l'arme déjà pas, mais l'arrivée est posée par un script synchrone qui, lui, ne peut pas dépendre d'un module — cette règle est le filet. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .warp{display:none;} html.warp-active{overflow:visible;} html.warp-active > body > *:not(.warp){ transition:none; transform:none; filter:none; opacity:1; } }