/* ============================================================ RunOrJog — TWEAKS layer (attribute/var-scoped feel controls) Driven by tweaks-app.jsx via attributes + CSS vars: data-vibe="chill|balanced|hyped" data-surface="glass|solid|outline" style="--cyan: " (dominant accent remap) ============================================================ */ /* ───────────── VIBE: motion + glow intensity ───────────── */ /* Balanced is the authored default — no overrides needed. */ /* CHILL — calm, premium, slow. Tones the energy down. */ html[data-vibe="chill"] .tier.featured::before { animation-duration: 16s; opacity: 0.35; } html[data-vibe="chill"] .hexfx i { animation-duration: 30s !important; opacity: 0.3; } html[data-vibe="chill"] .float-card, html[data-vibe="chill"] .device-chip { animation-duration: 11s; } html[data-vibe="chill"] .cursor-spot { opacity: 0.45; transform: scale(0.8); } html[data-vibe="chill"] .showcase .eyebrow::after { animation: none; } html[data-vibe="chill"] .hero h1 { animation-duration: 12s; } html[data-vibe="chill"] .pill-marquee .marquee-track { animation-duration: 48s !important; } /* HYPED — fast, loud, gamer-energy. Everything amped. */ html[data-vibe="hyped"] .tier.featured::before { animation-duration: 3s; opacity: 0.8; } html[data-vibe="hyped"] .hexfx i { animation-duration: 7s !important; opacity: 0.72; } html[data-vibe="hyped"] .float-card, html[data-vibe="hyped"] .device-chip { animation-duration: 4s; } html[data-vibe="hyped"] .cursor-spot { opacity: 1; transform: scale(1.25); } html[data-vibe="hyped"] .showcase .eyebrow::after { animation-duration: 2.6s; } html[data-vibe="hyped"] .hero h1 { animation-duration: 2.6s; filter: drop-shadow(0 0 34px color-mix(in srgb, var(--cyan) 60%, transparent)); } html[data-vibe="hyped"] .btn-primary { animation: hyped-throb 1.6s ease-in-out infinite; } html[data-vibe="hyped"] .stat .n { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cyan) 70%, transparent)); } html[data-vibe="hyped"] .feature:hover, html[data-vibe="hyped"] .bento-card:hover { box-shadow: 0 30px 70px -28px rgba(0,0,0,.7), 0 0 70px -18px var(--cyan); } html[data-vibe="hyped"] .pill-marquee .marquee-track { animation-duration: 16s !important; } @keyframes hyped-throb { 0%, 100% { box-shadow: 0 14px 38px -14px color-mix(in srgb, var(--cyan) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 18px 54px -10px var(--cyan), 0 0 30px -2px var(--cyan), inset 0 1px 0 rgba(255,255,255,.45); } } @media (prefers-reduced-motion: reduce) { html[data-vibe="hyped"] .btn-primary { animation: none; } } /* ───────────── SURFACE: card texture / material ───────────── Driven by INHERITED custom props set inline on by tweaks-app.jsx (same proven path as Energy's --cyan). The cards consume the vars, so flipping them repaints live. NOTE: these are ALWAYS set (never unset) — this engine only invalidates existing elements when a prop's value CHANGES, not when it goes unset→set. Glass is the explicit default. */ :root { --card-bg: rgba(17, 19, 36, 0.60); --card-blur: 10px; --card-stroke: rgba(255, 255, 255, 0.085); --card-border-w: 1px; } .feature, .bento-card, .tier, .calc, .faq-item, .faq-search, .stats .container { transition: border-color .3s ease, box-shadow .3s ease; } /* featured tier keeps its gold wash but over whatever the card fill is */ .tier.featured { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 13%, var(--card-bg, var(--surface))), var(--card-bg, var(--surface))); } /* OUTLINE extras (hover + nav) re-evaluate on interaction, so attribute-keyed is fine here */ html[data-surface="outline"] .feature:hover, html[data-surface="outline"] .bento-card:hover { border-color: var(--cyan); box-shadow: 0 0 40px -14px var(--cyan), inset 0 0 30px -22px var(--cyan); } html[data-surface="outline"] .bento-card { --bc: var(--cyan); } html[data-surface="solid"] .nav.scrolled { background: #0a0c1c; backdrop-filter: none; }