/* ===================================================================== HermitMonster - organism.css The "Hermitglass" living cursor: a translucent slime-glass organism that retreats into a shell when calm (Hermit) and mutates into a luminous predator when provoked (Monster). JS (organism.js) drives every position, shape, and particle; this file is the look (glass, refraction, glow, tints) plus all accessibility + performance fallbacks. Visual stack (back to front): .organism__glow - soft ambient halo / contact bloom .organism__lens - frosted-glass refraction bead (backdrop-filter) .organism__svg - blob membrane + satellites + tendrils (goo merge) .organism__fx - bounded pool of click ripples + ejected droplets ALL motion is gated: fine pointers only. Tints follow the persona tokens (Hermit=cool violet glass / Monster=toxic cyan+magenta) from styles.css. ===================================================================== */ :root { /* Hermit (light): cool, frosted, shy glass */ --org-core: rgba(109, 40, 217, 0.10); /* violet glass body */ --org-rim: rgba(109, 40, 217, 0.55); /* refractive edge */ --org-rim-2: rgba(192, 29, 131, 0.40); /* chromatic offset */ --org-spec: rgba(255, 255, 255, 0.85); /* specular glint */ --org-glow: rgba(109, 40, 217, 0.08); /* ambient halo (subtle) */ --org-cell: rgba(140, 90, 230, 0.55); /* internal particles */ --org-blur: 3px; } [data-theme="dark"], [data-mode="monster"] { /* Monster: bioluminescent, toxic, hungry */ --org-core: rgba(45, 226, 230, 0.14); --org-rim: rgba(45, 243, 247, 0.80); --org-rim-2: rgba(255, 79, 166, 0.70); --org-spec: rgba(255, 255, 255, 0.92); --org-glow: rgba(45, 226, 230, 0.12); --org-cell: rgba(120, 255, 246, 0.70); --org-blur: 4px; } /* shared positioning for the floating layers */ .organism__glow, .organism__lens, .organism__svg, .organism__fx { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; will-change: transform, opacity; opacity: 0; transition: opacity .55s ease; } html.has-organism .organism__glow.is-active, html.has-organism .organism__lens.is-active, html.has-organism .organism__svg.is-active { opacity: 1; } /* ---- Ambient halo: suspends the body above the page ----------------- */ .organism__glow { width: 120px; height: 120px; border-radius: 50%; transform: translate3d(-50%, -50%, 0); background: radial-gradient(circle, var(--org-glow), transparent 68%); filter: blur(6px); transition: opacity .6s ease, width .6s var(--ease), height .6s var(--ease); } /* ---- Refraction bead: real glass via backdrop-filter --------------- */ .organism__lens { width: 40px; height: 40px; border-radius: 50%; transform: translate3d(-50%, -50%, 0); -webkit-backdrop-filter: blur(var(--org-blur)) saturate(1.7) brightness(1.06); backdrop-filter: blur(var(--org-blur)) saturate(1.7) brightness(1.06); background: radial-gradient(circle at 36% 30%, var(--org-spec), transparent 40%), radial-gradient(circle at 50% 50%, transparent 46%, var(--org-core) 86%, transparent 100%); box-shadow: inset 0 0 8px rgba(255,255,255,0.42), inset 0 -3px 8px var(--org-rim-2), 0 6px 20px rgba(24,16,48,0.20); } /* ---- SVG membrane (blob + satellites + tendrils) is sized in JS ----- */ .organism__svg { width: 100vw; height: 100vh; overflow: visible; transform: none; } .organism__body { fill: var(--org-core); } .organism__edge { fill: none; stroke: var(--org-rim); stroke-width: 1.4; } .organism__edge2 { fill: none; stroke: var(--org-rim-2); stroke-width: 1; opacity: .6; } .organism__sat { fill: var(--org-core); stroke: var(--org-rim); stroke-width: 1; } .organism__cell { fill: var(--org-cell); } .organism__spec { fill: var(--org-spec); opacity: .8; } /* mycelium tendril reaching toward a hovered target */ .organism__tendril { fill: none; stroke: var(--org-rim); stroke-width: 1.6; opacity: 0; transition: opacity .25s ease; filter: blur(.3px); } /* idle protective shell ring (slowly forms when calm) */ .organism__shell { fill: none; stroke: var(--org-rim); stroke-width: 1; opacity: 0; stroke-dasharray: 3 7; } /* ---- Click + eject pool ------------------------------------------- */ .organism__fx { width: 0; height: 0; opacity: 1; } .org-ripple, .org-drop { position: fixed; pointer-events: none; transform: translate(-50%, -50%); will-change: transform, opacity; } .org-ripple { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--org-rim); animation: org-ripple-out .6s ease-out forwards; } [data-mode="monster"] .org-ripple { box-shadow: 0 0 14px var(--org-rim), inset 0 0 8px var(--org-rim-2); } @keyframes org-ripple-out { 0% { opacity: .75; transform: translate(-50%,-50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.8); } } .org-drop { width: var(--sz, 5px); height: var(--sz, 5px); border-radius: 50%; background: radial-gradient(circle, var(--org-cell), transparent 72%); animation: org-drop-fly .7s cubic-bezier(.22,.61,.36,1) forwards; } [data-mode="monster"] .org-drop { box-shadow: 0 0 7px var(--org-cell); } @keyframes org-drop-fly { 0% { opacity: .95; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.25); } } /* hide the native cursor only while the organism is alive on this device */ html.has-organism, html.has-organism a, html.has-organism button, html.has-organism [role="button"], html.has-organism .btn, html.has-organism summary { cursor: none; } /* keep text/form usability: real caret for typing + selection */ html.has-organism input, html.has-organism textarea, html.has-organism [contenteditable] { cursor: auto; } /* retire every legacy cursor layer when the organism takes over */ html.has-organism .glass-cursor, html.has-organism .glass-cursor__trail, html.has-organism .hm-cur-fx, html.has-organism .cursor-glow { display: none !important; } /* never run on touch or reduced-motion: native cursor returns */ @media (hover: none), (prefers-reduced-motion: reduce) { .organism__glow, .organism__lens, .organism__svg, .organism__fx { display: none !important; } }