/* CINEMATIC LAYER - Film grain + glass + premium polish Drop into your or link as stylesheet. Complements the existing oc2co dark theme. */ :root { --grain-opacity: 0.007; } /* Static subtle grain overlay (0.005-0.01 range). Clean static CSS texture (grid + radial) — no animation. Does not fight glassmorphism. Matches desired 2026 VST/Canva deep-navy subtle style. Uses only CSS gradients, no assets required (assets/visuals empty). */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: linear-gradient(rgba(255,255,255,var(--grain-opacity)) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,var(--grain-opacity)) 1px, transparent 1px), radial-gradient(circle at 30% 40%, rgba(255,255,255,0.003) 1px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.002) 1px, transparent 3px); background-size: 2.5px 2.5px, 2.5px 2.5px, 180px 140px, 220px 190px; mix-blend-mode: screen; } /* Enhanced glass cards (use on .project or new .glass elements) */ .glass { background: rgba(17, 29, 53, 0.65); border: 1px solid rgba(100, 212, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* Scroll progress indicator (cinematic pacing feel) */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--grad, linear-gradient(to right, #64D4FF, #1A8BCC)); z-index: 10000; transition: width 0.05s linear; } /* Light particles container (add in body) */ #particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.4; mix-blend-mode: screen; } /* ============================================ PREMIUM 2026 ENHANCEMENTS (advanced-web-visuals patterns) Glassmorphism, cyan/amber orbs, micro-interactions, scroll animations. Matches site: deep navy #05070f / #0B1424, cyan #00E5FF/#64D4FF, amber accents. For in-site Grok agent UI + curation + shared use by other agents. ============================================ */ /* Enhanced glassmorphism variants (stronger, refraction, agent-specific) */ .glass-strong { background: rgba(11, 20, 36, 0.72); border: 1px solid rgba(0, 229, 255, 0.18); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.06); } .glass-agent { background: rgba(6, 10, 20, 0.82); border: 1px solid rgba(0, 229, 255, 0.22); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 20px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(100,212,255,0.05) inset; } /* Cyan/Amber orbs - floating premium 2026 orbs (used in agent UI, previews, hero) */ .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.28; pointer-events: none; z-index: 0; transition: transform 1.2s cubic-bezier(0.23,1,0.32,1), opacity 0.6s ease; } .orb-cyan { background: radial-gradient(circle, rgba(0,229,255,0.65) 0%, rgba(0,229,255,0.15) 40%, transparent 72%); animation: float-orb-cyan 22s ease-in-out infinite; } .orb-amber { background: radial-gradient(circle, rgba(255,179,0,0.55) 0%, rgba(255,179,0,0.12) 42%, transparent 72%); animation: float-orb-amber 27s ease-in-out infinite reverse; } @keyframes float-orb-cyan { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(32px, -28px) scale(1.04); } 66% { transform: translate(-18px, 22px) scale(0.97); } } @keyframes float-orb-amber { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-25px, 18px) scale(1.03); } 75% { transform: translate(14px, -24px) scale(0.98); } } /* Micro-interactions (premium 2026 tactile feel) */ .micro-lift { transition: transform 0.18s cubic-bezier(0.23,1,0.32,1), box-shadow 0.18s ease, border-color 0.18s; } .micro-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.35); } .micro-lift:active { transform: scale(0.985) translateY(-1px); } .micro-scale { transition: transform 0.12s cubic-bezier(0.23,1,0.32,1); } .micro-scale:hover { transform: scale(1.015); } .micro-scale:active { transform: scale(0.97); } .glass.micro-lift:hover { border-color: rgba(0,229,255,0.32); } /* Scroll reveal + animation supports (advanced-web-visuals: scroll driven reveals) */ .reveal-scroll { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.23,1,0.32,1), transform 0.7s cubic-bezier(0.23,1,0.32,1); will-change: opacity, transform; } .reveal-scroll.visible { opacity: 1; transform: none; } .reveal-scroll[data-reveal="left"] { transform: translateX(-22px); } .reveal-scroll[data-reveal="left"].visible { transform: none; } .reveal-scroll[data-reveal="right"] { transform: translateX(22px); } .reveal-scroll[data-reveal="right"].visible { transform: none; } /* Scroll-timeline inspired progress / parallax hint (fallback + native) */ @media (prefers-reduced-motion: no-preference) { .scroll-parallax { transition: transform 0.1s linear; } /* Native scroll-timeline support for future 2026+ */ @supports (animation-timeline: view()) { .scroll-timeline-item { animation: scroll-reveal-timeline linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } } } @keyframes scroll-reveal-timeline { from { opacity: 0.2; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } } /* Dynamic curation / live preview containers (for agent curations + other agents reference) */ .curated-visual-card, .live-preview-frame { background: rgba(11,20,36,0.68); border: 1px solid rgba(0,229,255,0.16); border-radius: 14px; padding: 14px; position: relative; overflow: hidden; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform 0.2s cubic-bezier(0.23,1,0.32,1), border-color 0.2s, box-shadow 0.2s; } .curated-visual-card:hover, .live-preview-frame:hover { transform: translateY(-4px) scale(1.005); border-color: rgba(0,229,255,0.38); box-shadow: 0 18px 42px rgba(0,229,255,0.1); } .curated-visual-card .curate-badge { position: absolute; top: 10px; right: 10px; font-size: 0.58rem; padding: 1px 8px; border-radius: 999px; background: rgba(255,179,0,0.15); color: #ffb300; border: 1px solid rgba(255,179,0,0.3); letter-spacing: 0.5px; } .live-preview-frame .preview-header { font-size: 0.6rem; opacity: 0.6; margin-bottom: 6px; display:flex; align-items:center; gap:6px; } .live-preview-frame .preview-header .dot { width:5px; height:5px; background:#4ade80; border-radius:50%; display:inline-block; } .live-preview-frame .preview-content { background: #05070f; border: 1px solid rgba(100,212,255,0.1); border-radius: 8px; min-height: 92px; position: relative; overflow: hidden; } /* Apply / generate visual affordances (agent makes adding easier) */ .visual-apply-btn { background: linear-gradient(135deg, rgba(0,229,255,0.9), #1a8bcc); color: #05070f; border: none; padding: 6px 14px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; cursor: pointer; transition: all 0.15s cubic-bezier(0.23,1,0.32,1); box-shadow: 0 2px 8px rgba(0,229,255,0.3); } .visual-apply-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .visual-apply-btn:active { transform: scale(0.96); } /* Amber accent orbs in curation contexts */ .amber-orb { position: absolute; width: 38px; height: 38px; background: radial-gradient(circle at 35% 30%, #ffb300 0%, transparent 70%); border-radius: 50%; filter: blur(6px); opacity: 0.35; animation: amber-orb-pulse 4.5s ease-in-out infinite; z-index: 1; } @keyframes amber-orb-pulse { 0%,100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.48; transform: scale(1.15); } } /* Reduced motion respect (perf first per advanced-web-visuals) */ @media (prefers-reduced-motion: reduce) { .orb, .reveal-scroll, .curated-visual-card, .micro-lift { transition: none !important; animation: none !important; } }