/* ============================================= CraftConnect SA — mascot-styles.css Enablement Section Guide Character Append this file's contents to styles.css OR link it after styles.css in ============================================= */ /* ═══════════════════════════════════════ 1. STACKING CONTEXT SETUP Character walks BEHIND the right text, then stands IN FRONT of the left blocks. enablement-visual z:1 ← behind mascot mascot z:2 ← between columns enablement-content z:4 ← in front of mascot ═══════════════════════════════════════ */ .enablement { overflow: hidden; /* clips mascot while off-screen during walk */ } .enablement-content { position: relative; z-index: 4; } .enablement-visual { position: relative; z-index: 1; } /* ═══════════════════════════════════════ 2. MASCOT WRAPPER (#guide-mascot) ═══════════════════════════════════════ */ #guide-mascot { position: absolute; bottom: 0; left: 0; z-index: 2; pointer-events: none; will-change: transform; } /* ═══════════════════════════════════════ 3. SVG INNER WRAPPER (#mascot-inner) ═══════════════════════════════════════ */ #mascot-inner { width: 110px; filter: drop-shadow(0 8px 28px rgba(0, 154, 178, 0.30)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18)); transform-origin: bottom center; } /* ═══════════════════════════════════════ 4. WALK-IN BOB (up-down while walking) ═══════════════════════════════════════ */ @keyframes mascot-bob { 0% { transform: translateY(0px); } 22% { transform: translateY(-8px); } 44% { transform: translateY(-1px); } 66% { transform: translateY(-6px); } 88% { transform: translateY(-1px); } 100% { transform: translateY(0px); } } /* ═══════════════════════════════════════ 5. IDLE FLOAT (resting animation) ═══════════════════════════════════════ */ @keyframes mascot-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } } /* ═══════════════════════════════════════ 6. EXCITED BOUNCE (on block click) ═══════════════════════════════════════ */ @keyframes mascot-bounce { 0% { transform: translateY(0px) scale(1); } 28% { transform: translateY(-16px) scale(1.06); } 52% { transform: translateY(-4px) scale(0.97); } 72% { transform: translateY(-9px) scale(1.02); } 88% { transform: translateY(-2px) scale(1); } 100% { transform: translateY(0px) scale(1); } } /* ═══════════════════════════════════════ 7. LEG SWINGS (while walking) ═══════════════════════════════════════ */ @keyframes leg-swing-l { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } } @keyframes leg-swing-r { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } } /* ═══════════════════════════════════════ 8. STATE CLASSES ═══════════════════════════════════════ */ #mascot-inner.walking { animation: mascot-bob 0.46s ease-in-out infinite; } #mascot-inner.walking .mascot-leg-l { transform-box: fill-box; transform-origin: top center; animation: leg-swing-l 0.46s ease-in-out infinite; } #mascot-inner.walking .mascot-leg-r { transform-box: fill-box; transform-origin: top center; animation: leg-swing-r 0.46s ease-in-out infinite; } #mascot-inner.idle { animation: mascot-float 3.4s ease-in-out infinite; } #mascot-inner.excited { animation: mascot-bounce 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; } /* ═══════════════════════════════════════ 9. POINTING ARM transform-box + top-center origin means the arm rotates from the shoulder joint regardless of SVG coordinate system. ═══════════════════════════════════════ */ #mascot-arm { transform-box: fill-box; transform-origin: top center; transform: rotate(0deg); transition: transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ═══════════════════════════════════════ 10. POINTING FINGER ═══════════════════════════════════════ */ #mascot-finger { opacity: 0; transition: opacity 0.22s ease; } /* ═══════════════════════════════════════ 11. SPEECH BUBBLE ═══════════════════════════════════════ */ #mascot-bubble { position: absolute; bottom: 252px; /* sits above head */ left: 50%; transform: translateX(-50%) scale(0.82) translateY(8px); background: #ffffff; border: 2px solid #009AB2; border-radius: 12px; padding: 7px 12px; font-family: 'Outfit', sans-serif; font-size: 11.5px; font-weight: 700; color: #009AB2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 30; box-shadow: 0 4px 18px rgba(0, 154, 178, 0.22); } /* Bubble tail */ #mascot-bubble::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top-color: #009AB2; border-bottom: none; } #mascot-bubble.visible { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } /* ═══════════════════════════════════════ 12. BLOCK HIGHLIGHT (on mascot point) ═══════════════════════════════════════ */ .enablement-layer { cursor: pointer; transition: background 0.3s ease, transform 0.32s ease, box-shadow 0.3s ease, border 0.3s ease !important; } .enablement-layer.mascot-highlighted { background: rgba(0, 154, 178, 0.07) !important; transform: translateX(8px) !important; box-shadow: -4px 0 0 #009AB2, 0 6px 24px rgba(0, 154, 178, 0.16) !important; border-left: 2px solid rgba(0, 154, 178, 0.5) !important; } /* ═══════════════════════════════════════ 13. RESPONSIVE — hide mascot on mobile ═══════════════════════════════════════ */ @media (max-width: 900px) { #guide-mascot { display: none !important; } .enablement-content { position: static !important; z-index: auto !important; } .enablement-visual { position: static !important; z-index: auto !important; } .enablement { overflow: visible; } }