/* ============================================================ Card Effects — animated "alive" surfaces, opt-in per card via . Visuals apply ALWAYS; only the motion (animation) is disabled for users who prefer reduced motion — so effects are always visible. ============================================================ */ /* ── Glow — brand-colored pulsing halo ───────────────────────── */ html[data-card-effect="glow"] .grid-card { box-shadow: 0 0 16px rgba(var(--t-primary-rgb, 91,19,236), 0.5); animation: ce-glow 2.6s ease-in-out infinite; } @keyframes ce-glow { 0%, 100% { box-shadow: 0 0 8px rgba(var(--t-primary-rgb, 91,19,236), 0.35); } 50% { box-shadow: 0 0 24px rgba(var(--t-primary-rgb, 91,19,236), 0.70); } } /* ── Pulse — subtle breathing scale ──────────────────────────── */ html[data-card-effect="pulse"] .grid-card { animation: ce-pulse 2.4s ease-in-out infinite; } @keyframes ce-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } } /* ── Rainbow — border cycles through the spectrum ────────────── */ html[data-card-effect="rainbow"] .grid-card { border-style: solid !important; border-width: 2px !important; border-color: #ff3b30; animation: ce-rainbow 6s linear infinite; } @keyframes ce-rainbow { 0% { border-color: #ff3b30; } 17% { border-color: #ff9500; } 33% { border-color: #ffcc00; } 50% { border-color: #34c759; } 67% { border-color: #00c7be; } 83% { border-color: #af52de; } 100% { border-color: #ff3b30; } } /* ── Light sweep — a shine glides across the card ────────────── */ html[data-card-effect="sweep"] .grid-card { position: relative; overflow: hidden; } html[data-card-effect="sweep"] .grid-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-130%); animation: ce-sweep 3.2s ease-in-out infinite; pointer-events: none; } @keyframes ce-sweep { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(130%); } } /* ── Aurora — shifting multi-color gradient surface ──────────── */ html[data-card-effect="aurora"] .grid-card { background: linear-gradient(125deg, #6d5dfc, #c850c0, #4158d0, #43e97b) !important; background-size: 300% 300% !important; color: #fff !important; animation: ce-aurora 14s ease infinite; } @keyframes ce-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Primary-button hover animations (.btn-primary-themed) ───── */ html[data-btn-hover] .btn-primary-themed { transition: transform .18s ease, box-shadow .18s ease; } html[data-btn-hover="scale"] .btn-primary-themed:hover { transform: scale(1.05); } html[data-btn-hover="pulse"] .btn-primary-themed:hover { animation: ce-btn-pulse .8s ease-in-out infinite; } html[data-btn-hover="glow"] .btn-primary-themed:hover { box-shadow: 0 0 18px rgba(var(--t-primary-rgb, 91,19,236), 0.7); } html[data-btn-hover="shine"] .btn-primary-themed { position: relative; overflow: hidden; } html[data-btn-hover="shine"] .btn-primary-themed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-130%); pointer-events: none; } html[data-btn-hover="shine"] .btn-primary-themed:hover::after { animation: ce-sweep .9s ease-in-out; } @keyframes ce-btn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } /* ── Contact/social tile hover animations (.card-social-box) ──── */ html[data-box-hover] .card-social-box { transition: transform .18s ease, box-shadow .18s ease; } html[data-box-hover="scale"] .card-social-box:hover { transform: scale(1.04); } html[data-box-hover="lift"] .card-social-box:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.14); } html[data-box-hover="glow"] .card-social-box:hover { box-shadow: 0 0 16px rgba(var(--t-primary-rgb, 91,19,236), 0.55); } /* Respect motion preference — keep the visuals, drop the motion. */ @media (prefers-reduced-motion: reduce) { html[data-card-effect] .grid-card, html[data-card-effect] .grid-card::after, html[data-btn-hover] .btn-primary-themed, html[data-btn-hover] .btn-primary-themed::after { animation: none !important; } }