/* Thynk Cloud — Signature FX styles. transform/opacity only; GPU-composited. */ /* ── Cursor depth-parallax layers (transforms set DIRECTLY by JS — engine-safe, no calc/var) ── */ .tc-px { transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .tc-px { transition: none !important; } } /* ── Secondary CTA hover reaction (lift + green glow + sheen sweep) ── */ .btn-outline-react { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; } .btn-outline-react::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,0.18) 50%,transparent 65%); transform:translateX(-130%); transition:transform .6s ease; pointer-events:none; } .btn-outline-react:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(45,184,75,0.35); } .btn-outline-react:hover::after { transform: translateX(130%); } @media (prefers-reduced-motion: reduce) { .btn-outline-react:hover { transform: none; } .btn-outline-react::after { display: none; } } /* ── Ambient cursor glow (additive, never replaces native cursor) ── */ #tc-cursor-glow { position: fixed; top: 0; left: 0; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; z-index: 2147483000; opacity: 0; will-change: transform; contain: strict; background: radial-gradient(circle, rgba(45,184,75,0.22) 0%, rgba(45,184,75,0.08) 35%, transparent 68%); transition: opacity .35s ease, width .25s cubic-bezier(0.16,1,0.3,1), height .25s cubic-bezier(0.16,1,0.3,1); } #tc-cursor-glow.tc-active { width: 420px; height: 420px; } #tc-cursor-glow.tc-press { width: 240px; height: 240px; } #tc-cursor-dot { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; z-index: 2147483001; opacity: 0; will-change: transform; contain: strict; background: radial-gradient(circle, rgba(61,220,127,0.9) 0%, rgba(61,220,127,0.35) 45%, transparent 72%); border: 1.5px solid rgba(61,220,127,0.85); box-shadow: 0 0 12px rgba(61,220,127,0.85), 0 0 26px rgba(61,220,127,0.45); transition: opacity .3s ease, width .2s cubic-bezier(0.16,1,0.3,1), height .2s cubic-bezier(0.16,1,0.3,1); } #tc-cursor-glow.tc-active ~ #tc-cursor-dot, #tc-cursor-dot.tc-on { } /* ── Card spotlight that tracks the cursor inside the card ── */ .card, .pp-card, .glass-card, .industry-card, .pillar-card { position: relative; } .card::before, .pp-card::before, .glass-card::before, .industry-card::before, .pillar-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s ease; will-change: opacity; background: radial-gradient(380px circle at var(--tc-mx, 50%) var(--tc-my, 0%), rgba(150,245,195,0.16), rgba(45,184,75,0.07) 34%, transparent 64%); } .tc-spot::before { opacity: 1; } /* keep card content above the spotlight */ .card > *, .pp-card > *, .glass-card > *, .industry-card > *, .pillar-card > * { position: relative; z-index: 1; } /* ── 3D tilt on the spotlighted card (FULL tier only; rotation vars set by JS) ── Scoped under .tc-fx-full (on ) so it out-specifies .glass-card:hover's !important transform. Lite / reduced-motion / coarse devices never get .tc-fx-full, so they keep the flat static card automatically. */ .tc-fx-full .card.tc-spot, .tc-fx-full .pp-card.tc-spot, .tc-fx-full .glass-card.tc-spot, .tc-fx-full .industry-card.tc-spot, .tc-fx-full .pillar-card.tc-spot { transform: perspective(900px) rotateX(var(--tc-ry, 0deg)) rotateY(var(--tc-rx, 0deg)) translateY(-5px) !important; transition: transform .13s ease-out, box-shadow .3s ease !important; transform-origin: center center; box-shadow: 0 22px 56px rgba(0,0,0,0.45), 0 0 36px rgba(45,184,75,0.16), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(134,239,172,0.08) !important; } /* ── LITE tier — lower-end / 60Hz devices (set by signature-fx.js) ── Smaller, lighter glow; the per-frame card-spotlight layer is removed entirely so weak GPUs stay smooth. */ .tc-fx-lite #tc-cursor-glow { width: 200px; height: 200px; background: radial-gradient(circle, rgba(45,184,75,0.20) 0%, rgba(45,184,75,0.07) 38%, transparent 66%); transition: opacity .3s ease; } .tc-fx-lite #tc-cursor-glow.tc-active { width: 200px; height: 200px; } .tc-fx-lite #tc-cursor-glow.tc-press { width: 200px; height: 200px; } .tc-fx-lite #tc-cursor-dot { box-shadow: 0 0 10px rgba(61,220,127,0.7); transition: opacity .3s ease; } .tc-fx-lite .card::before, .tc-fx-lite .pp-card::before, .tc-fx-lite .glass-card::before, .tc-fx-lite .industry-card::before, .tc-fx-lite .pillar-card::before { display: none !important; } /* ── Premium reveal easing refinement ── */ .reveal, .pp-reveal { transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1) !important; } .stagger-child { transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1) !important; } @media (prefers-reduced-motion: reduce) { #tc-cursor-glow, #tc-cursor-dot { display: none !important; } .card::before, .pp-card::before, .glass-card::before, .industry-card::before, .pillar-card::before { display: none !important; } } @media (pointer: coarse) { #tc-cursor-glow, #tc-cursor-dot { display: none !important; } } /* ── Scroll-progress beam (top of viewport; green → gold) ── */ #tc-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 2147483002; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; will-change: transform; background: linear-gradient(90deg, #15915a 0%, #2db84b 45%, #3ddc7f 70%, #d4af37 100%); box-shadow: 0 0 10px rgba(45,184,75,0.55), 0 0 22px rgba(45,184,75,0.25); } /* ── Magnetic CTA easing (set by JS while a button is engaged) ── */ .tc-magnetic { transition: transform .22s cubic-bezier(0.16,1,0.3,1) !important; } /* ── Living sheen on brand-gradient emphasis words ── */ .grad-d, .grad-text, .pp-grad-dark { background-size: 220% auto; animation: tc-shimmer 7.5s linear infinite; } @keyframes tc-shimmer { to { background-position: 220% center; } } @media (prefers-reduced-motion: reduce) { .grad-d, .grad-text, .pp-grad-dark { animation: none !important; background-size: auto !important; } }