/* ─── stratul de lumină ───────────────────────────────────────────── Se pune ca prim copil al containerului de pagină. Containerul: position: relative; isolation: isolate; background: transparent Culoarea de fond a paginii trece pe .ambient (vezi HTML mai jos). */ .ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* wrapper: se deplasează */ .ambient-blob { position: absolute; will-change: transform; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } /* interior: se redimensionează + își schimbă forma, pe alt ceas */ .ambient-squish { position: absolute; inset: 0; will-change: transform; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* haloul (alb pe pagini deschise, indigo pe pagini închise) */ .ambient-halo { position: absolute; inset: -14%; border-radius: 50%; filter: blur(28px); } /* pata de culoare */ .ambient-tint { position: absolute; inset: 0; border-radius: 50%; filter: blur(26px); } /* ─── traiectorii (5, folosite ciclic) ───────────────────────────── */ @keyframes ambDriftA { from { transform: translate3d(-34px, -24px, 0); } to { transform: translate3d(78px, 66px, 0); } } @keyframes ambDriftB { from { transform: translate3d(46px, 34px, 0); } to { transform: translate3d(-66px, -56px, 0); } } @keyframes ambDriftC { from { transform: translate3d(-24px, 46px, 0); } to { transform: translate3d(66px, -44px, 0); } } @keyframes ambDriftD { from { transform: translate3d(58px, -40px, 0); } to { transform: translate3d(-48px, 52px, 0); } } @keyframes ambDriftE { from { transform: translate3d(-52px, 44px, 0); } to { transform: translate3d(40px, -46px, 0); } } /* ─── deformare elastică: scară asimetrică + rotație mică ───────── */ @keyframes ambSquishA { 0% { transform: scale(0.92, 0.86) rotate(0deg); } 33% { transform: scale(1.00, 1.16) rotate(12deg); } 66% { transform: scale(1.20, 1.02) rotate(-8deg); } 100% { transform: scale(0.92, 0.86) rotate(0deg); } } @keyframes ambSquishB { 0% { transform: scale(1.04, 1.18) rotate(0deg); } 40% { transform: scale(1.20, 0.90) rotate(-14deg); } 70% { transform: scale(0.88, 0.96) rotate(9deg); } 100% { transform: scale(1.04, 1.18) rotate(0deg); } } @keyframes ambSquishC { 0% { transform: scale(1.16, 0.92) rotate(0deg); } 45% { transform: scale(0.90, 1.14) rotate(15deg); } 75% { transform: scale(1.18, 1.02) rotate(-7deg); } 100% { transform: scale(1.16, 0.92) rotate(0deg); } } @keyframes ambSquishD { 0% { transform: scale(1.14, 1.04) rotate(0deg); } 38% { transform: scale(0.88, 0.94) rotate(-16deg); } 72% { transform: scale(1.06, 1.20) rotate(10deg); } 100% { transform: scale(1.14, 1.04) rotate(0deg); } } @keyframes ambSquishE { 0% { transform: scale(0.94, 1.16) rotate(0deg); } 42% { transform: scale(1.20, 0.98) rotate(13deg); } 78% { transform: scale(0.96, 0.90) rotate(-11deg); } 100% { transform: scale(0.94, 1.16) rotate(0deg); } } /* ─── oprit: prin clasă pe sau prin setarea de sistem ─────── */ html.ambient-off .ambient { display: none; } @media (prefers-reduced-motion: reduce) { .ambient-blob, .ambient-squish { animation: none !important; } } /* ─── suprafețele de citit lasă lumina să treacă ─────────────────── */ /* pagini deschise */ .ground-ivory { background: rgba(251,250,246,0.30); } .ground-tint { background: rgba(242,237,225,0.40); } /* pagini indigo */ .ground-indigo-panel { background: rgba(42,42,69,0.50); } /* ADAUGAT fata de document: aplicatia are tema intunecata de sistem, in care fondul paginii nu mai e ivory ci #1E1E30. ambient.js scrie culoarea inline pe strat, asa ca in tema intunecata ar fi pictat ivory peste tot. Legam stratul de acelasi token pe care il foloseste restul aplicatiei. */ [data-ambient]:not([data-ambient="dark"]) > .ambient { background: var(--hartie) !important; } [data-ambient="dark"] > .ambient { background: var(--noapte) !important; } /* ─── butonul de toggle ─────────────────────────────────────────── */ .ambient-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #D3CBB9; background: rgba(247,243,234,0.92); backdrop-filter: blur(6px); color: #A8814A; cursor: pointer; } .ambient-toggle:hover { border-color: #A8814A; } .ambient-toggle svg { display: block; } /* aprins: sticla plina si raze. stins: doar conturul, cerneala potolita. */ .ambient-toggle .bec-sticla { fill: rgba(168,129,74,0.28); } .ambient-toggle .bec-raze { opacity: 1; } html.ambient-off .ambient-toggle { color: #8C8878; } html.ambient-off .ambient-toggle .bec-sticla { fill: none; } html.ambient-off .ambient-toggle .bec-raze { opacity: 0; } /* pe pagini indigo, butonul se inversează */ .page--dark .ambient-toggle { border-color: #4A4A64; background: rgba(35,35,58,0.92); color: #D1B676; } .page--dark .ambient-toggle .bec-sticla { fill: rgba(209,182,118,0.30); } /* oprit ARE clasa pe , iar pagina indigo pe : selectorul le leaga */ html.ambient-off body.page--dark .ambient-toggle { color: #9A96A8; } /* ADAUGAT: aceeasi inversare si in tema intunecata de sistem, altfel butonul ramane un dreptunghi ivory pe pagina inchisa. */ @media (prefers-color-scheme: dark) { .ambient-toggle { border-color: #4A4A64; background: rgba(35,35,58,0.92); color: #D1B676; } .ambient-toggle .bec-sticla { fill: rgba(209,182,118,0.30); } html.ambient-off .ambient-toggle { color: #9A96A8; } html.ambient-off .ambient-toggle .bec-sticla { fill: none; } }