/* ========================================================= LUCA RUGGIERO — shared page transition (negative flash) Centered 3x3 grid (9 photos) -> invert -> white (~1.1s) Incoming: page emerges from white (no content flash) Namespaced (#lr-tr / .lr-*) — safe on v1 and v2 pages. ========================================================= */ /* Incoming cover: set in BEFORE paint via inline script. Screen is white and page content hidden until reveal. */ html.lr-cover{background:#fff} html.lr-cover body{opacity:0} body{transition:opacity .4s cubic-bezier(.19,1,.22,1)} @media (prefers-reduced-motion:reduce){ html.lr-cover body{opacity:1} body{transition:none} } /* Outgoing overlay — full screen, dark, centers a square grid block */ #lr-tr{ position:fixed;inset:0;z-index:9999;pointer-events:none; display:flex;align-items:center;justify-content:center; background:#08080a;visibility:hidden;opacity:1 } #lr-tr.active{visibility:visible} /* the 3x3 block: square, centered, black margins around it */ #lr-tr .lr-g{ display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr); gap:6px;width:min(70vh,92vw);height:min(70vh,92vw) } #lr-tr .lc{position:relative;overflow:hidden;background:#131318;opacity:0;transform:scale(1.06)} #lr-tr .lc img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)} /* 1) tiles stagger in (per-cell delay set inline by JS, center-out) */ #lr-tr.in .lc{opacity:1;transform:none; transition:opacity .42s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1)} /* 2) negative flash — inverts photos AND the dark margins -> white */ #lr-tr.invert{filter:invert(1);transition:filter .34s ease} /* 3) tiles fade -> leaves the inverted (white) background */ #lr-tr.blank .lc{opacity:0;transition:opacity .32s ease} @media (max-width:560px){ #lr-tr .lr-g{width:92vw;height:92vw;gap:4px} }