/* =========================================================================== transitions.css — passaggio landing → login. Solo dal "Log in" IN ALTO (.topbar__login): una tendina nera entra da sinistra coprendo lo schermo (il logo resta fisso, identico, in alto a sinistra), poi si naviga al login. Sul login SOLO l'immagine di destra fa un'animazione d'ingresso. Il resto — logo, pannello nero — è già lì, fermo. Caricato da index.html (tendina) e app.html (ingresso immagine). =========================================================================== */ /* --- Niente lampo nel passaggio cross-document (index.html -> app.html) ------ Con le View Transitions il browser TIENE la vecchia schermata (la tendina già nera) finché il login è pronto, poi fa un cross-fade nativo. Nessun morph (nessun view-transition-name): tra due neri è invisibile, ma toglie il flash di reload che si vedeva mentre l'app caricava (CSS/JS uPlot da CDN). */ @view-transition{ navigation:auto; } ::view-transition-old(root){ animation:rb-vt-out .2s linear both; } ::view-transition-new(root){ animation:rb-vt-in .2s linear both; } @keyframes rb-vt-out{ to{ opacity:0; } } @keyframes rb-vt-in{ from{ opacity:0; } } /* --- Landing: tendina nera che entra da sinistra --------------------------- */ .rb-curtain{ position:fixed; inset:0; z-index:2147483000; pointer-events:none; overflow:hidden; } /* Il pannello nero scorre; è l'unica cosa che si muove. Ease morbido e deciso. */ .rb-curtain__panel{ position:absolute; inset:0; background:#090a0c; transform:translateX(-100%); transition:transform .52s cubic-bezier(.65,0,.35,1); will-change:transform; } .rb-curtain--in .rb-curtain__panel{ transform:translateX(0); } /* Il logo NON si muove: pinnato sopra il pannello, esattamente dove sta sul login (stesso top/left del padding di .auth__form-side), così pare fisso. */ /* Il logo è un CLONE del wordmark della landing (vedi transitions-landing.js), pinnato via inline style sulla sua posizione reale: porta con sé markup, spaziatura, versione e stili. Qui serve solo tenerlo sopra il pannello nero. */ .rb-curtain__logo{ z-index:1; } /* --- Anti-lampo: shell nero dal primo frame (classe messa in ) --------- */ html.rb-entering, html.rb-entering body{ background:#090a0c; } html.rb-entering .ambient{ opacity:0; } /* --- Login: ingresso premium orchestrato. Il logo resta FERMO. -------------- */ .auth.auth--enter{ background:#090a0c; } /* Immagine a destra: wipe morbido dal centro verso il bordo (ease "expo out"). */ .auth.auth--enter .auth__cover{ animation:rb-cover-in .85s cubic-bezier(.16,1,.3,1) .05s both; } @keyframes rb-cover-in{ from{ clip-path:inset(0 100% 0 0); } /* nascosta: collassata sul bordo sinistro */ to{ clip-path:inset(0 0 0 0); } /* rivelata verso destra */ } /* Il form sale e sfuma, dopo l'immagine — un solo movimento pulito, niente scatto. Sostituisce l'authin di 07-timing (che qui farebbe doppio movimento). */ .auth.auth--enter .auth__form{ animation:none; } .auth.auth--enter .auth__center{ animation:rb-rise .7s cubic-bezier(.16,1,.3,1) .2s both; } @keyframes rb-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } /* Chi ha chiesto meno movimento: niente slide, niente wipe, niente rise. */ @media (prefers-reduced-motion: reduce){ .rb-curtain__panel{ transition-duration:.01ms; } .auth.auth--enter .auth__cover, .auth.auth--enter .auth__center{ animation:none; } }