/* Shared interactive/animation layer for every page. All colours come from the --hp-* tokens, so light/dark follows the browser. Everything that moves is switched off under prefers-reduced-motion. */ html { scroll-behavior: smooth; } /* Draggable, variable-speed auto-scrolling card rows (position is JS-driven, see hp-enhance.js's setupMarquee — no CSS @keyframes animation here). */ .hp-marquee-track { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .hp-marquee-track.hp-dragging { cursor: grabbing; } /* Reading progress bar */ .hp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; background: linear-gradient(90deg, #2F7BF5, #8B46E8); } /* Header gets a soft shadow once the page is scrolled */ header.hp-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } @media (prefers-color-scheme: light) { header.hp-scrolled { box-shadow: 0 6px 24px rgba(30, 20, 80, 0.12); } } /* Nav underline that grows from the left */ .navlink { position: relative; padding-bottom: 4px; } .navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2F7BF5, #8B46E8); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s ease; } .navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); } /* Cards: 3D tilt driven by the pointer (variables set in hp-enhance.js) */ @media (hover: hover) and (pointer: fine) { .glass-card, .role-card, .platform-card { transform: perspective(800px) rotateX(var(--hp-rx, 0deg)) rotateY(var(--hp-ry, 0deg)); transition: transform .12s ease-out, border-color .15s, background .15s !important; will-change: transform; } .glass-card.hp-tilt-off, .role-card.hp-tilt-off, .platform-card.hp-tilt-off { transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .15s, background .15s !important; } .role-card:hover { transform: perspective(800px) rotateX(var(--hp-rx, 0deg)) rotateY(var(--hp-ry, 0deg)) translateY(-3px); } } /* Cards pop in one after another once their section is revealed */ @keyframes hp-pop { from { opacity: 0; translate: 0 22px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } } .hp-in .glass-card, .hp-in .role-card, .hp-in li.hp-step { animation: hp-pop .65s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--hp-i, 0) * 70ms); } /* Pulse line draws itself */ @keyframes hp-draw { to { stroke-dashoffset: 0; } } path.hp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hp-draw 1.8s .25s ease-out forwards; } /* Heartbeat: every 5 s a bright pulse runs along the divider line, flaring as it passes the spike (a clone of the line, dashed to a short segment). */ @keyframes hp-run { 0% { stroke-dashoffset: .18; opacity: 1; } 34% { stroke-dashoffset: -1; opacity: 1; } 34.1%, 100% { stroke-dashoffset: -1; opacity: 0; } } path.hp-glow { stroke: var(--hp-accent-2); stroke-width: 3.2; stroke-dasharray: .18 1.3; stroke-dashoffset: .18; opacity: 0; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px var(--hp-accent)) drop-shadow(0 0 14px var(--hp-accent)); animation: hp-run 5s linear 2.4s infinite; } /* Dot field behind the hero. The canvas sits in at z-index -1, so the page wrapper (normally painted with the background colour) is made transparent and the body paints the background instead. */ #dc-root, #dc-root > .sc-host > div { background: transparent !important; } canvas.hp-dots { position: absolute; z-index: -1; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } /* Interactive "text -> HEX" demo */ .hp-hexdemo { display: flex; flex-direction: column; gap: 14px; } .hp-hexdemo label { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--hp-accent-2); } .hp-hexdemo input { font: 500 18px 'IBM Plex Mono', monospace; color: var(--hp-text); background: var(--hp-panel-3); border: 1px solid var(--hp-border-2); border-radius: 12px; padding: 12px 16px; outline: none; width: 100%; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; } .hp-hexdemo input:focus { border-color: var(--hp-accent); box-shadow: 0 0 0 4px var(--hp-badge-bg); } .hp-hexdemo .hp-hexout { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; } .hp-hexdemo .hp-byte { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border: 1px solid var(--hp-border); border-radius: 10px; background: var(--hp-panel); font-family: 'IBM Plex Mono', monospace; transition: transform .15s, border-color .15s, background .15s; animation: hp-byte-in .3s ease-out both; } .hp-hexdemo .hp-byte b { font-size: 17px; color: var(--hp-accent); letter-spacing: 1px; } .hp-hexdemo .hp-byte span { font-size: 12px; color: var(--hp-text-5); } .hp-hexdemo .hp-byte:hover { transform: translateY(-3px) scale(1.06); border-color: var(--hp-border-hover); background: var(--hp-panel-hover); } .hp-hexdemo .hp-note { margin: 0; font-size: 13px; color: var(--hp-text-5); } @keyframes hp-byte-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hp-progress { display: none; } .glass-card, .role-card, .platform-card { transform: none !important; } .hp-in .glass-card, .hp-in .role-card, .hp-in li.hp-step { animation: none; } path.hp-draw { animation: none; stroke-dashoffset: 0; } path.hp-glow { display: none; } canvas.hp-dots { display: none; } .hp-hexdemo .hp-byte { animation: none; } } /* ---- Sapphire accents (landing page) ---------------------------------------- */ .hp-sapphire-text { background: linear-gradient(100deg, #4F8DFF 0%, #7B5CF0 45%, #B08CFF 60%, #4F8DFF 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hp-sheen 7s ease-in-out infinite; } @keyframes hp-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Faceted gem in the empty right half of the hero */ .hp-gem { position: absolute; right: clamp(8px, 1.5vw, 24px); top: 50%; width: min(27vw, 330px); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; z-index: 0; } .hp-gem-svg { position: relative; width: 100%; height: 100%; display: block; transform: translate3d(calc(var(--hp-px, 0) * 14px), calc(var(--hp-py, 0) * 10px), 0) rotate(calc(var(--hp-px, 0) * 4deg)); transition: transform .25s ease-out; animation: hp-float 6s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(80, 70, 230, .45)); } @keyframes hp-float { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 8px; } } .hp-gem-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(80, 100, 255, .38), rgba(140, 70, 232, .18) 55%, transparent); animation: hp-breathe 5s ease-in-out infinite; } @keyframes hp-breathe { 0%, 100% { opacity: .55; scale: .94; } 50% { opacity: 1; scale: 1.06; } } .hp-gem-shine { animation: hp-glint 5s ease-in-out 1.5s infinite; } @keyframes hp-glint { 0% { translate: 0 0; } 30%, 100% { translate: 620px 0; } } @media (max-width: 1000px) { .hp-gem { width: 30vw; opacity: .8; } } @media (max-width: 860px) { .hp-gem { width: 40vw; right: 0; top: 4%; translate: 0 0; opacity: .32; } } @media (max-width: 520px) { .hp-gem { opacity: .22; } } /* Cards, chips and role tiles glow sapphire on hover */ @media (hover: hover) { .glass-card:hover, .role-card:hover, .platform-card:hover { border-color: rgba(96, 112, 245, .7) !important; box-shadow: 0 0 0 1px rgba(96, 112, 245, .28), 0 14px 44px -14px rgba(96, 80, 240, .55), inset 0 1px 0 rgba(160, 170, 255, .18); } } /* Hero chips: soft sapphire lift */ .hp-chip-glow { transition: transform .2s, box-shadow .2s, border-color .2s; } @media (prefers-reduced-motion: reduce) { .hp-sapphire-text, .hp-gem-svg, .hp-gem-glow, .hp-gem-shine { animation: none; } } .hp-spark { transform-box: fill-box; opacity: 0; animation: hp-twinkle 4.8s ease-in-out infinite; } @keyframes hp-twinkle { 0%, 60%, 100% { opacity: 0; scale: .3; } 72% { opacity: 1; scale: 1.15; } 84% { opacity: 0; scale: .5; } } @media (prefers-reduced-motion: reduce) { .hp-spark { animation: none; opacity: .6; } } .hp-gem picture { display: block; width: 100%; height: 100%; } .hp-gem-svg { object-fit: contain; }