/* ============================================================ Adjuro — Cinematic Layer (drop-in) Motion + trust-network support styles. Bolt onto an existing site. Uses your brand tokens via CSS variables (fallbacks below map to the locked Adjuro palette — override in :root). ============================================================ */ :root { --accent-primary: #0D7377; /* teal — override to your brand */ --accent-secondary: #FF6B35; /* orange — log-position only */ --ink: #0A0A0A; --bg: #F8F4E8; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- scroll progress bar (needs
) ---- */ .cine-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--accent-primary); z-index: 9500; transition: width 0.1s linear; } /* ---- trust-network canvas (page-wide fixed background) ---- */ .net-fixed { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* ---- generic scroll-reveal (add class="reveal" to any element) ---- */ /* Fail-open: the hidden state only applies once cinematic.js has added `cine-ready` to . If the script 404s / is CSP-blocked, nothing is ever hidden — the page just loses the animation. */ .reveal { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); } .cine-ready .reveal { opacity: 0; transform: translateY(34px); filter: blur(8px); } .reveal.in { opacity: 1; transform: none; filter: blur(0); } .reveal[data-d="1"] { transition-delay: 0.08s; } .reveal[data-d="2"] { transition-delay: 0.16s; } .reveal[data-d="3"] { transition-delay: 0.24s; } .reveal[data-d="4"] { transition-delay: 0.32s; } /* ---- typed-in block (e.g. JSON). Wrap each line in ---- */ .cine-type .ln { display: block; opacity: 0; transform: translateY(6px); } .cine-type.typed .ln { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .cine-type .cursor { display: inline-block; width: 0.55em; height: 1.05em; background: var(--accent-primary); vertical-align: -0.18em; margin-left: 2px; animation: cineBlink 1s step-end infinite; } .cine-type.done .cursor { display: none; } @keyframes cineBlink { 50% { opacity: 0; } } /* ---- reduced motion: show everything, no movement ---- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .cine-type .ln { opacity: 1 !important; transform: none !important; } }