/* Ankh Cursor - Responsive Update We wrap all custom cursor styles in a `@media (pointer: fine)` query. This query targets devices with a "fine" pointer, like a mouse or stylus. On devices with a "coarse" pointer (like a finger on a touch screen), these styles will be ignored, and the default system behavior will be used. */ :root { /* PHARAONIC: Changed primary color to a pharaonic gold */ --primary-color: rgb(128, 0, 0); --secondary-color-turquoise: rgb(177, 155, 32); } /* By default, set the cursor to 'auto'. This will be the standard for mobile/touch devices. */ * { cursor: auto; } /* --- Apply custom cursor ONLY to mouse/stylus devices --- */ @media (pointer: fine) { * { /* This hides the default system cursor */ cursor: none; } .cursor-wrapper { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transition: transform 0.15s ease-out; } .cursor-ring { width: 0px; height: 0px; border: 0px solid var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* PHARAONIC: Add a pulsing glow for the "spiritual" effect */ box-shadow: 0 0 15px 3px var(--primary-color), 0 0 5px 1px var(--primary-color) inset; animation: pulse-glow 2.5s infinite ease-in-out; } /* PHARAONIC: Keyframes for the pulsing glow */ @keyframes pulse-glow { 0% { box-shadow: 0 0 15px 3px var(--primary-color), 0 0 5px 1px var(--primary-color) inset; } 50% { box-shadow: 0 0 25px 8px var(--primary-color), 0 0 8px 3px var(--primary-color) inset; } 100% { box-shadow: 0 0 15px 3px var(--primary-color), 0 0 5px 1px var(--primary-color) inset; } } .cursor-dot { /* ... */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* This pulls the container back by half its own width/height, perfectly centering it on the 50%/50% point. */ /* ... */ } /* --- EFFECTS --- */ /* 1. The Ripple/Click Effect */ .cursor-wrapper.clicked .cursor-ring { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } /* 2. Hover Effect */ .cursor-wrapper.hovering .cursor-ring { transform: translate(-50%, -50%) scale(1.3); /* PHARAONIC: Change border and glow to turquoise on hover */ border-color: var(--secondary-color-turquoise); box-shadow: 0 0 0px 0px var(--secondary-color-turquoise); animation: none; /* Stop pulsing on hover */ } /* == MODIFICATION START == */ .cursor-wrapper.hovering .cursor-dot { /* PHARAONIC: Transform dot into an Ankh symbol */ width: 30px; /* Changed from 20px */ height: 30px; /* Changed from 20px */ transform: translate(-50%, -50%); background-color: transparent; display: flex; justify-content: center; align-items: center; } /* PHARAONIC: Add the Font Awesome Ankh Icon using ::before */ .cursor-dot::before { /* Use the 'fa-regular' (weight 400) from the 'Font Awesome 6 Free' family */ /* This works because Font Awesome is loaded in the HTML */ font-family: "Font Awesome 6 Free"; font-weight: 900; /* 400 = Regular, 900 = Solid */ /* This is the Unicode for the 'fa-ankh' icon */ content: "\f644"; /* Styling to match */ color: var(--primary-color); font-size: 25px; /* Changed from 20px (Match the container size) */ /* Ensure proper rendering and centering */ display: block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* == MODIFICATION END == */ /* 3. PHARAONIC: "Spirit Dust" Particle Trail */ .particle { position: fixed; pointer-events: none; border-radius: 50%; background-color: var(--primary-color); z-index: 9998; /* Below cursor, above content */ transform: translate(-50%, -50%); animation: particle-fade 1.5s linear forwards; opacity: 0.8; } @keyframes particle-fade { from { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; /* Particles will fade and fly off in a random direction */ transform: translate(calc(-50% + var(--random-x)), calc(-50% + var(--random-y))) scale(0.2); } } } /* --- End of @media (pointer: fine) --- */