/** * AINNA Team profile — shared Masli-style lofi theme (day/night). * Replicates the Masli Yahaya profile design for team member pages. * Per-person accent: set --profile-accent on . */ /* ── Day: white lofi futuristic ── */ html[data-theme="day"], body.masli-day { --bg-primary: #FAFAF8; --bg-secondary: #FFFFFF; --bg-card: rgba(240, 242, 246, 0.9); --text-primary: #1A1A1E; --text-secondary: #5C5C66; --accent-cyan: #2A7A70; --accent-blue: #3A6FA8; --accent-purple: #6A53B0; --accent-pink: #A64E26; --glow-cyan: 0 8px 32px rgba(42, 122, 112, 0.20); --glow-blue: 0 8px 28px rgba(58, 111, 168, 0.18); --border-glass: rgba(0, 0, 0, 0.12); --gradient-1: linear-gradient(135deg, #6A53B0 0%, #2A7A70 100%); --gradient-2: linear-gradient(135deg, #A64E26 0%, #3A6FA8 100%); --ms-lofi-lavender: #6A53B0; --ms-lofi-sage: #3D7A6E; --ms-lofi-dusty: #4A7196; --ms-lofi-coral: #A64E26; --ms-gradient-progress: linear-gradient(90deg, var(--ms-lofi-coral), var(--accent-cyan)); --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ms-font-mono: 'JetBrains Mono', monospace; } /* ── Night: dark lofi futuristic ── */ html[data-theme="night"], body.masli-night { --bg-primary: #12141A; --bg-secondary: #1A1D26; --bg-card: rgba(26, 28, 36, 0.82); --text-primary: #E8E8ED; --text-secondary: #A8A8B3; --accent-cyan: #7EC8BE; --accent-blue: #7A9FD4; --accent-purple: #9B8EC4; --accent-pink: #C9A07A; --glow-cyan: 0 0 36px rgba(126, 200, 190, 0.22); --glow-blue: 0 0 32px rgba(122, 159, 212, 0.18); --border-glass: rgba(255, 255, 255, 0.12); --gradient-1: linear-gradient(135deg, #9B8EC4 0%, #7EC8BE 100%); --gradient-2: linear-gradient(135deg, #C9A07A 0%, #7A9FD4 100%); --ms-lofi-lavender: #9B8EC4; --ms-lofi-sage: #7A9E8E; --ms-lofi-dusty: #6B8FA8; --ms-lofi-coral: #C9A07A; --ms-gradient-progress: linear-gradient(90deg, var(--ms-lofi-lavender), var(--accent-cyan)); --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ms-font-mono: 'JetBrains Mono', monospace; } body.masli-theme { font-family: var(--ms-font-sans, Inter, sans-serif); -webkit-font-smoothing: antialiased; transition: background 0.45s ease, color 0.45s ease; } body.masli-theme.profile-page { background: var(--bg-primary) !important; color: var(--text-primary) !important; } /* Scroll progress */ .masli-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--ms-gradient-progress); z-index: 2147483641; box-shadow: 0 0 12px rgba(126, 200, 190, 0.45); transition: opacity 0.3s; } /* Ambient grid */ .masli-grid-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; } html[data-theme="day"] .masli-grid-bg, body.masli-day .masli-grid-bg { background: radial-gradient(ellipse 70% 50% at 15% 20%, rgba(196, 181, 232, 0.14) 0%, transparent 55%), radial-gradient(ellipse 60% 45% at 85% 75%, rgba(155, 181, 206, 0.1) 0%, transparent 55%); } html[data-theme="night"] .masli-grid-bg, body.masli-night .masli-grid-bg { background: radial-gradient(ellipse 65% 48% at 18% 22%, rgba(155, 142, 196, 0.12) 0%, transparent 55%), radial-gradient(ellipse 55% 42% at 82% 72%, rgba(126, 200, 190, 0.08) 0%, transparent 55%); } .masli-grid-bg::before { content: ''; position: absolute; inset: 0; background-size: 48px 48px; mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 12%, transparent 78%); animation: masliGridDrift 24s linear infinite; } html[data-theme="day"] .masli-grid-bg::before, body.masli-day .masli-grid-bg::before { background-image: linear-gradient(rgba(155, 181, 206, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 181, 206, 0.07) 1px, transparent 1px); } html[data-theme="night"] .masli-grid-bg::before, body.masli-night .masli-grid-bg::before { background-image: linear-gradient(rgba(126, 200, 190, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 200, 190, 0.05) 1px, transparent 1px); } @keyframes masliGridDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 6px); } } /* Floating orbs */ .masli-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(55px); animation: masliOrbFloat 20s ease-in-out infinite; } html[data-theme="day"] .masli-orb, body.masli-day .masli-orb { opacity: 0.42; } html[data-theme="night"] .masli-orb, body.masli-night .masli-orb { opacity: 0.28; } .masli-orb-1 { width: 280px; height: 280px; top: 18%; left: -5%; } html[data-theme="day"] .masli-orb-1, body.masli-day .masli-orb-1 { background: rgba(196, 181, 232, 0.28); } html[data-theme="night"] .masli-orb-1, body.masli-night .masli-orb-1 { background: rgba(155, 142, 196, 0.22); } .masli-orb-2 { width: 240px; height: 240px; bottom: 10%; right: -4%; animation-delay: -8s; } html[data-theme="day"] .masli-orb-2, body.masli-day .masli-orb-2 { background: rgba(168, 197, 181, 0.22); } html[data-theme="night"] .masli-orb-2, body.masli-night .masli-orb-2 { background: rgba(126, 200, 190, 0.16); } .masli-orb-3 { width: 180px; height: 180px; top: 55%; right: 12%; animation-delay: -14s; animation-duration: 26s; } html[data-theme="day"] .masli-orb-3, body.masli-day .masli-orb-3 { background: rgba(232, 168, 124, 0.18); } html[data-theme="night"] .masli-orb-3, body.masli-night .masli-orb-3 { background: rgba(201, 160, 122, 0.12); } @keyframes masliOrbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -14px); } } /* Scan line (night subtle) */ .masli-scanline { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(126, 200, 190, 0.015) 2px, rgba(126, 200, 190, 0.015) 4px ); animation: masliScanPulse 8s ease-in-out infinite; } html[data-theme="night"] .masli-scanline, body.masli-night .masli-scanline { opacity: 1; } @keyframes masliScanPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } } /* ── F1 HERO — Operator Mode ──────────────────────────────────────────────── */ .hero { position: relative; overflow-x: clip; overflow-y: visible; } .masli-synapse-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; } .hero .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero .hero-overlay { z-index: 1; } /* Avatar ring pair — must wrap the avatar precisely, not the whole hero */ .hero-avatar { position: relative; display: inline-block; } .hero-avatar-ring { position: absolute; inset: -16px; pointer-events: none; z-index: 0; } .hero-avatar img { position: relative; z-index: 1; } .masli-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; } .masli-ring--outer { background: conic-gradient(from 0deg, rgba(78,205,196,0) 0deg, rgba(78,205,196,.85) 60deg, rgba(78,205,196,0) 130deg, rgba(0,170,255,0) 180deg, rgba(0,170,255,.7) 250deg, rgba(78,205,196,0) 320deg) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: masliRingSpin 14s linear infinite; } .masli-ring--inner { inset: 6px; background: conic-gradient(from 200deg, rgba(255,107,157,0) 0deg, rgba(255,107,157,.9) 50deg, rgba(255,107,157,0) 120deg, rgba(255,107,157,0) 180deg, rgba(139,92,246,.7) 260deg, rgba(255,107,157,0) 330deg) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: masliRingSpin 9s linear infinite reverse; } @keyframes masliRingSpin { to { transform: rotate(360deg); } } /* Shared current-role spotlight used by team profiles other than Masli and TC. */ .timeline-item--current { width:100%; max-width:900px; margin:0 auto 32px !important; padding:0 !important; justify-content:center !important; } .timeline-item--current .timeline-dot { display:none; } .current-role-card { width:100%; max-width:none; padding:28px 30px !important; border:1px solid color-mix(in srgb,var(--profile-accent) 42%,var(--profile-border)) !important; border-radius:22px !important; background:linear-gradient(125deg,color-mix(in srgb,var(--profile-accent) 12%,var(--profile-surface)),var(--profile-surface) 62%) !important; box-shadow:0 20px 55px color-mix(in srgb,var(--profile-accent) 12%,transparent); } .current-role-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .current-role-status { color:var(--profile-accent); font:800 10px/1 var(--ms-font-mono,monospace); letter-spacing:.16em; } .current-role-status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.13),0 0 16px rgba(34,197,94,.55); animation:profileLivePulse 2s ease-in-out infinite; } .current-role-year { color:var(--profile-muted); font-size:11px; font-weight:800; letter-spacing:.1em; } .current-role-main { display:flex; align-items:center; gap:16px; } .current-role-icon { display:grid; width:56px; height:56px; flex:0 0 56px; place-items:center; color:var(--profile-accent); border:1px solid color-mix(in srgb,var(--profile-accent) 40%,transparent); border-radius:17px; background:color-mix(in srgb,var(--profile-accent) 13%,transparent); } .current-role-icon svg { width:28px; height:28px; } .current-role-main .timeline-title { margin:0 0 5px; color:var(--profile-text); font-size:clamp(21px,3vw,30px); } .current-role-main .timeline-company { margin:0; color:var(--profile-accent); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .current-role-card .timeline-desc { max-width:70ch; margin:22px 0 20px; font-size:14px; line-height:1.7; } .current-role-track { display:flex; align-items:center; gap:10px; color:var(--profile-muted); font:800 10px/1.3 var(--ms-font-mono,monospace); letter-spacing:.05em; text-transform:uppercase; } .current-role-track b { width:28px; height:1px; background:linear-gradient(90deg,var(--profile-accent),transparent); } @keyframes profileLivePulse { 0%,100%{opacity:.65;transform:scale(.9)} 50%{opacity:1;transform:scale(1.12)} } @media (max-width:560px) { .current-role-card { padding:22px 20px !important; } .current-role-top { align-items:flex-start; flex-direction:column; } .current-role-track { align-items:flex-start; flex-direction:column; gap:7px; } .current-role-track b { width:1px; height:15px; margin-left:4px; } } /* LIVE badge */ .masli-live-badge { position: absolute; bottom: 4px; right: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(8,15,25,.78); border: 1px solid rgba(74,222,128,.5); border-radius: 999px; backdrop-filter: blur(6px); } .masli-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: masliLiveBlink 2s ease-out infinite; } @keyframes masliLiveBlink { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } /* Status ticker */ .masli-status-ticker { display: block; max-width: 540px; margin: 8px auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .masli-status-ticker-track { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary, #94a3b8); animation: masliTicker 32s linear infinite; } @keyframes masliTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .masli-ticker-link { display: inline-block; color: var(--text-secondary, #94a3b8); text-decoration: none; transition: color .2s ease; } .masli-ticker-link:hover { color: var(--profile-accent, #10b981); } .masli-ticker-sep { display: inline-block; margin: 0 .55em; color: var(--text-secondary, #94a3b8); } /* Hero CTA pair */ .hero-cta { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 22px 0 14px; } .hero-info { display: flex; justify-content: center; align-items: center; gap: 16px 22px; flex-wrap: wrap; } .masli-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; border: 1.5px solid transparent; } .masli-cta--primary { color: #042225; background: linear-gradient(135deg, #4ecdc4, #00aaff); box-shadow: 0 6px 22px rgba(78,205,196,.35); } .masli-cta--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(78,205,196,.5); } .masli-cta--secondary { color: var(--text-primary, #fff); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.04); } .masli-cta--secondary:hover { border-color: rgba(255,107,157,.6); background: rgba(255,107,157,.08); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255,107,157,.18); } [data-theme="day"] .masli-cta--secondary { color: #1e293b; border-color: rgba(0,0,0,.15); background: rgba(0,0,0,.03); } /* ── F2 OWNERSHIP — Numbered premium cards ──────────────────────────────── */ .ownership-card { position: relative; padding: 28px 24px 24px !important; overflow: hidden; } .own-num { position: absolute; top: 12px; right: 16px; font-size: 11px; font-weight: 900; letter-spacing: .18em; color: var(--text-secondary, #94a3b8); opacity: .6; } .own-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px; color: var(--profile-accent, #00aaff); background: linear-gradient(135deg, rgba(78,205,196,.14), rgba(139,92,246,.14)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); } .own-icon svg { width: 24px; height: 24px; } .ownership-card[data-focus="primary"] .own-icon { background: linear-gradient(135deg, rgba(78,205,196,.22), rgba(0,170,255,.22)); border-color: rgba(78,205,196,.4); } .ownership-card:hover .own-icon { transform: translateY(-2px); } .own-icon { transition: transform .25s ease; } .ownership-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(78,205,196,.7), rgba(0,170,255,.4) 40%, rgba(139,92,246,.7)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s ease; pointer-events: none; } .ownership-card[data-focus="primary"]::before { background: linear-gradient(135deg, rgba(78,205,196,.95), rgba(0,170,255,.6) 40%, rgba(255,107,157,.8)); } .ownership-card.masli-reveal.masli-visible::before, .ownership-card:hover::before { opacity: .55; } .own-meter { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; } .own-meter em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary, #94a3b8); order: 2; } .own-meter i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; order: 1; } .own-meter i::after { content: ''; position: absolute; inset: 0; width: var(--own-fill, 70%); background: linear-gradient(90deg, #4ecdc4, #00aaff 55%, #ff6b9d); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.4,0,.2,1) .25s; } .ownership-card.masli-reveal.masli-visible .own-meter i::after { transform: scaleX(1); } .ownership-card:hover .own-meter i::after { transform: scaleX(1); box-shadow: 0 0 14px rgba(78,205,196,.4); } [data-theme="day"] .own-meter i { background: rgba(0,0,0,.08); } /* ── F3 JOURNEY ARC ──────────────────────────────────────────────────────── */ .journey-arc { position: relative; max-width: 1180px; margin: 0 auto 32px; padding: 6px 8px 0; } .journey-arc-svg { display: block; width: 100%; height: auto; } .journey-arc-path { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1); } .journey-arc[data-arc-drawn="1"] .journey-arc-path { stroke-dashoffset: 0; } .journey-arc-node { transform-origin: center; transform-box: fill-box; transition: r .2s ease; cursor: pointer; } .journey-arc-node:hover { r: 9; } .journey-arc-node--live { filter: drop-shadow(0 0 6px rgba(255,107,157,.7)); } .journey-arc-halo { animation: masliArcHalo 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes masliArcHalo { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } } .journey-arc-labels { position: absolute; inset: 0; pointer-events: none; } .journey-node { position: absolute; transform: translate(-50%, 0); pointer-events: auto; background: none; border: 0; padding: 8px 12px; text-align: center; cursor: pointer; font: inherit; color: var(--profile-text, #fff); transition: transform .25s ease; } .journey-node strong { display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--profile-accent, #00aaff); } .journey-node span { display: block; font-size: 11px; font-weight: 600; color: var(--profile-muted, #94a3b8); margin-top: 2px; max-width: 160px; } .journey-node:hover { transform: translate(-50%, -4px); } .journey-node--live i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #ff6b9d; margin: 6px auto 0; box-shadow: 0 0 0 0 rgba(255,107,157,.7); animation: masliLiveBlink 2s ease-out infinite; } .journey-node[data-era="1"] { top: 76%; left: 5%; } .journey-node[data-era="2"] { top: 44%; left: 27%; } .journey-node[data-era="3"] { top: 56%; left: 49.5%; } .journey-node[data-era="4"] { top: 22%; left: 72%; } .journey-node[data-era="5"] { top: 28%; left: 95%; } @media (max-width: 900px) { .journey-arc-labels { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; } .journey-node { position: relative; top: auto !important; left: auto !important; transform: none; margin: 0; } .journey-node span { max-width: none; } } @media (max-width: 480px) { .journey-arc-labels { grid-template-columns: 1fr 1fr; } } /* ── F4 SKILLS — Categorized with ringed tags ───────────────────────────── */ .skill-category { position: relative; padding: 24px !important; } .skill-category-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 16px !important; } .skill-cat-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 900; letter-spacing: 0; color: #042225; background: linear-gradient(135deg, #4ecdc4, #00aaff); flex-shrink: 0; transform: translateY(2px); } .skill-category--core .skill-cat-num { background: linear-gradient(135deg, #4ecdc4, #00aaff); } .skill-category--systems .skill-cat-num { background: linear-gradient(135deg, #00aaff, #8b5cf6); } .skill-category--emerging .skill-cat-num { background: linear-gradient(135deg, #8b5cf6, #ff6b9d); } .skill-category-title em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary, #94a3b8); flex-basis: 100%; margin-top: -2px; } .skill-tag { position: relative; display: inline-flex !important; align-items: center; gap: 8px; padding-left: 12px !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .skill-tag .skill-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); flex-shrink: 0; } .skill-tag[data-active="true"] .skill-dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: masliLiveBlink 2.4s ease-out infinite; } .skill-tag[data-level="core"] { border-color: rgba(78,205,196,.4); } .skill-tag[data-level="systems"] { border-color: rgba(139,92,246,.4); } .skill-tag[data-level="emerging"] { border-color: rgba(255,107,157,.4); } .skill-tag[data-level="core"]::after, .skill-tag[data-level="systems"]::after, .skill-tag[data-level="emerging"]::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 1px; pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; } .skill-tag[data-level="core"]::after { background: linear-gradient(135deg, rgba(78,205,196,.85), rgba(0,170,255,.6)); } .skill-tag[data-level="systems"]::after { background: linear-gradient(135deg, rgba(0,170,255,.85), rgba(139,92,246,.6)); } .skill-tag[data-level="emerging"]::after { background: linear-gradient(135deg, rgba(139,92,246,.85), rgba(255,107,157,.7)); } .skill-tag:hover { transform: translateY(-2px); } .skill-tag:hover::after { opacity: .85; } [data-theme="day"] .skill-tag[data-level="core"] { border-color: rgba(13,148,136,.45); } [data-theme="day"] .skill-tag[data-level="systems"] { border-color: rgba(99,102,241,.45); } [data-theme="day"] .skill-tag[data-level="emerging"] { border-color: rgba(219,39,119,.45); } /* ── F5 BEYOND — Illustrated SVG panels ─────────────────────────────────── */ .explore-card { position: relative; overflow: hidden; } .explore-viz { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .explore-viz svg { width: 130px; height: 130px; } .viz-globe { animation: none; } .viz-globe .viz-globe-arc { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .15s; } .viz-globe .viz-globe-plane { offset-path: path("M 32 130 Q 100 40 168 110"); offset-distance: 0%; } .explore-card.masli-reveal.masli-visible .viz-globe-arc { stroke-dashoffset: 0; } .explore-card.masli-reveal.masli-visible .viz-globe-plane { animation: masliPlaneFly 4s linear infinite; } @keyframes masliPlaneFly { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } .viz-mountain .viz-mnt-gauge-fill { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s; } .explore-card.masli-reveal.masli-visible .viz-mnt-gauge-fill { stroke-dashoffset: 0; } .viz-mnt-flag { animation: masliMntFlagWave 3s ease-in-out infinite; transform-origin: 188px 40px; } @keyframes masliMntFlagWave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } } .viz-route .viz-route-path { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .15s; } .explore-card.masli-reveal.masli-visible .viz-route-path { stroke-dashoffset: 0; } .viz-route .viz-route-pt { transform-origin: center; transform-box: fill-box; } .explore-card.masli-reveal.masli-visible .viz-route-pt { animation: masliRoutePtPop .4s cubic-bezier(.34,1.6,.3,1) backwards; } .explore-card.masli-reveal.masli-visible .viz-route-pt:nth-of-type(1) { animation-delay: .5s; } .explore-card.masli-reveal.masli-visible .viz-route-pt:nth-of-type(2) { animation-delay: .8s; } .explore-card.masli-reveal.masli-visible .viz-route-pt:nth-of-type(3) { animation-delay: 1.1s; } @keyframes masliRoutePtPop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Articles in hero area should mirror the Masli card proportions */ .hero-articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .hero-articles .article-card { height: 100%; display: flex; flex-direction: column; } .hero-articles .article-card-body { flex: 1; display: flex; flex-direction: column; } .hero-articles .article-card-excerpt { flex: 1; } .hero-articles .article-card-img { width: 100%; height: 160px; object-fit: cover; } .articles-all-link-wrap { text-align: center; } /* ── Reveal on scroll ───────────────────────────────────────────────────── */ .masli-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .masli-reveal.masli-visible { opacity: 1; transform: translateY(0); } /* Hero stagger */ .masli-hero-in { opacity: 0; transform: translateY(18px); animation: masliHeroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .masli-hero-in:nth-child(1) { animation-delay: 0.05s; } .masli-hero-in:nth-child(2) { animation-delay: 0.15s; } .masli-hero-in:nth-child(3) { animation-delay: 0.25s; } .masli-hero-in:nth-child(4) { animation-delay: 0.35s; } .masli-hero-in:nth-child(5) { animation-delay: 0.45s; } .masli-hero-in:nth-child(6) { animation-delay: 0.55s; } @keyframes masliHeroIn { to { opacity: 1; transform: translateY(0); } } /* Count-up numbers */ .masli-count-up { display: inline-block; font-variant-numeric: tabular-nums; } .masli-count-active { color: var(--accent-cyan); } .masli-count-done { transition: color 0.4s ease; } .masli-count-infinity { animation: masliInfinityPulse 3s ease-in-out infinite; } @keyframes masliInfinityPulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* Stat number glow */ .stat-number { animation: masliStatGlow 4s ease-in-out infinite; font-variant-numeric: tabular-nums; } @keyframes masliStatGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* Timeline pulse dot */ .timeline-dot { animation: masliDotPulse 2.5s ease-in-out infinite; } @keyframes masliDotPulse { 0%, 100% { box-shadow: var(--glow-cyan); transform: translateY(-50%) scale(1); } 50% { box-shadow: 0 0 20px var(--accent-cyan); transform: translateY(-50%) scale(1.15); } } /* Section titles shimmer */ html[data-theme="day"] .section-title, html[data-theme="night"] .section-title, body.masli-day .section-title, body.masli-night .section-title { background-size: 200% auto; animation: masliTitleShimmer 6s ease-in-out infinite; } @keyframes masliTitleShimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Tech icons float */ html[data-theme="day"] .tech-icon, html[data-theme="night"] .tech-icon, body.masli-day .tech-icon, body.masli-night .tech-icon { animation: masliTechFloat 4s ease-in-out infinite; } .tech-icon:nth-child(2n) { animation-delay: -0.6s; } .tech-icon:nth-child(3n) { animation-delay: -1.2s; } .tech-icon:nth-child(5n) { animation-delay: -2s; } @keyframes masliTechFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .tech-icon:hover { animation: none; } /* Pan & zoom images */ .hero-avatar img, .article-card-img, .article-small-img { transform-origin: center center; will-change: transform; animation: masliPanZoom 20s ease-in-out infinite alternate; } .hero-avatar img { animation-name: masliPanZoomPortrait; animation-duration: 16s; } @keyframes masliPanZoom { 0% { transform: scale(1) translate3d(0, 0, 0); } 50% { transform: scale(1.08) translate3d(-1%, 0.5%, 0); } 100% { transform: scale(1.14) translate3d(1%, -0.5%, 0); } } @keyframes masliPanZoomPortrait { 0% { transform: scale(1) translate3d(0, 0, 0); } 50% { transform: scale(1.06) translate3d(-0.5%, 0.8%, 0); } 100% { transform: scale(1.1) translate3d(0.5%, -1%, 0); } } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .masli-grid-bg::before, .masli-orb, .masli-scanline, .tech-icon, .section-title, .timeline-dot, .stat-number, .masli-hero-in, .masli-ring--outer, .masli-ring--inner, .masli-status-ticker-track, .masli-live-badge i, .skill-tag[data-active="true"] .skill-dot, .journey-arc-halo, .viz-mnt-flag, .viz-globe-plane, .viz-route-pt { animation: none !important; } .hero-avatar img, .article-card-img, .article-small-img { animation: none !important; transform: none !important; } .masli-count-up, .masli-count-infinity { animation: none !important; } .masli-reveal { opacity: 1; transform: none; } .journey-arc-path, .viz-globe-arc, .viz-route-path, .viz-mnt-gauge-fill { stroke-dashoffset: 0 !important; transition: none !important; } .own-meter i::after { transform: scaleX(1) !important; transition: none !important; } .ownership-card::before { opacity: .35 !important; transition: none !important; } } /* ── Mobile responsive ──────────────────────────────────────────────────── */ @media (max-width: 900px) { body.profile-page .hero, body.masli-theme .hero { min-height: auto !important; padding: 56px 16px 28px !important; overflow: visible !important; } .masli-synapse-canvas { opacity: .32; } .hero .hero-content { text-align: center; } body.profile-page .hero-avatar, body.masli-theme .hero-avatar { width: 132px !important; height: 132px !important; margin: 4px auto 14px !important; } .hero-avatar-ring { inset: -12px; } .masli-live-badge { bottom: -4px; right: -4px; padding: 3px 8px 3px 6px; font-size: 9.5px; } .masli-status-ticker { max-width: 92vw; margin-top: 10px; } .masli-status-ticker-track { font-size: 10px; letter-spacing: .13em; animation-duration: 24s; } body.profile-page .hero h1, body.masli-theme .hero h1 { font-size: clamp(34px, 9vw, 48px) !important; line-height: 1.06 !important; letter-spacing: -0.03em !important; margin-top: 10px; } body.profile-page .hero .title, body.masli-theme .hero .title { font-size: clamp(15px, 3.4vw, 19px) !important; margin-top: 6px; } body.profile-page .hero .tagline, body.masli-theme .hero .tagline { font-size: clamp(13.5px, 3vw, 16px) !important; line-height: 1.55 !important; margin-top: 12px; } .hero-summary { font-size: 13px; line-height: 1.55; margin-top: 10px; } .hero-support { font-size: 10.5px; letter-spacing: .05em; margin-top: 12px; } .hero-cta { margin-top: 20px; gap: 10px; flex-direction: column; } .masli-cta { width: min(320px, 88vw); padding: 13px 22px; font-size: 12px; justify-content: center; } .hero-info { gap: 12px 18px; margin-top: 18px; font-size: 13px; } .stats, .ownership-section, .architecture-section, .experience, .education, .skills, .hero-articles, .explore-section { padding: 38px 16px !important; } .ownership-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .ownership-card { padding: 20px 18px !important; } .own-icon { width: 40px; height: 40px; margin-bottom: 12px; } .own-icon svg { width: 20px; height: 20px; } .own-num { font-size: 10px; top: 10px; right: 12px; } .journey-arc { padding: 4px 4px 0; } .journey-arc-svg { width: 100%; height: 84px; } .journey-arc-labels { gap: 6px; } .journey-node strong { font-size: 11.5px; } .journey-node span { font-size: 10px; } .skill-category { padding: 18px !important; } .skill-tag { padding: 8px 14px !important; font-size: 12.5px !important; } .skill-cat-num { width: 24px; height: 24px; font-size: 11.5px; } .explore-viz { height: 108px; } .explore-viz svg { width: 96px; height: 96px; } .explore-number { font-size: 34px !important; } .explore-label { font-size: 14px !important; } .explore-desc { font-size: 12px !important; } .stats-grid { gap: 10px !important; } .stat-card { padding: 14px !important; } } @media (max-width: 480px) { body.profile-page .hero, body.masli-theme .hero { padding: 52px 14px 24px !important; } body.profile-page .hero-avatar, body.masli-theme .hero-avatar { width: 112px !important; height: 112px !important; margin: 4px auto 12px !important; } .hero-avatar-ring { inset: -10px; } .masli-live-badge { font-size: 9px; padding: 2px 7px 2px 5px; bottom: -2px; right: -2px; } .masli-status-ticker-track { animation-duration: 18s; font-size: 9.5px; } body.profile-page .hero h1, body.masli-theme .hero h1 { font-size: clamp(28px, 9.5vw, 36px) !important; } .masli-cta { width: min(300px, 100%); padding: 12px 18px; } .ownership-grid { gap: 10px !important; } .journey-arc-svg { height: 64px; } .journey-node { padding: 6px 8px; } .explore-viz { height: 92px; } .explore-viz svg { width: 82px; height: 82px; } } @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { body.profile-page .hero, body.masli-theme .hero { padding: 56px 18px 24px !important; } body.profile-page .hero-avatar, body.masli-theme .hero-avatar { width: 96px !important; height: 96px !important; } .hero-cta { flex-direction: row; } .masli-cta { width: auto; } }