{"id":4076,"date":"2023-06-06T15:58:18","date_gmt":"2023-06-06T20:58:18","guid":{"rendered":"https:\/\/mysticinvestigations.com\/supernatural\/?page_id=4076"},"modified":"2026-06-01T11:17:57","modified_gmt":"2026-06-01T16:17:57","slug":"moon-phase","status":"publish","type":"page","link":"https:\/\/mysticinvestigations.com\/supernatural\/moon-phase\/","title":{"rendered":"Current Moon Phase"},"content":{"rendered":"<div style=\"text-align: left;\"><div class=\"werewolf-widget-container\">\r\n  <div class=\"widget-header\">LUNAR THREAT TRACKER<\/div>\r\n  \r\n  <!-- Dynamic Moon Visualization -->\r\n  <div class=\"moon-wrapper\">\r\n    <div id=\"widget-moon\" class=\"widget-moon\"><\/div>\r\n  <\/div>\r\n  \r\n  <!-- Phase Info -->\r\n  <div id=\"phase-name\" class=\"phase-name\">Calculating...<\/div>\r\n  <div id=\"phase-percent\" class=\"phase-percent\">0% Illumination<\/div>\r\n  \r\n  <!-- Threat Alert Box -->\r\n  <div id=\"threat-box\" class=\"threat-status safe\">\r\n    <div id=\"alert-icon\"><\/div>\r\n    <div id=\"threat-text\">SCANNING SKIES...<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  \/* Container forced to your exact requested dimensions *\/\r\n  .werewolf-widget-container {\r\n    width: 300px;\r\n    height: 375px;\r\n    background-color: #0b0e14;\r\n    border: 3px solid #1a2233;\r\n    border-radius: 12px;\r\n    box-sizing: border-box;\r\n    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n    color: #e2e8f0;\r\n    padding: 18px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    box-shadow: 0 8px 24px rgba(0,0,0,0.5);\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .widget-header {\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    letter-spacing: 2px;\r\n    color: #718096;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  \/* CSS Moon Sphere styling *\/\r\n  .moon-wrapper {\r\n    width: 90px;\r\n    height: 90px;\r\n    position: relative;\r\n  }\r\n  \r\n  .widget-moon {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    background-color: #2d3748;\r\n    position: relative;\r\n    overflow: hidden;\r\n    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 10px rgba(255,255,255,0.05);\r\n  }\r\n  \r\n  .widget-moon::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    transition: all 0.5s ease;\r\n  }\r\n\r\n  .phase-name {\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin-top: 4px;\r\n    text-align: center;\r\n  }\r\n\r\n  .phase-percent {\r\n    font-size: 14px;\r\n    color: #a0aec0;\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* Threat Status Banner Styling *\/\r\n  .threat-status {\r\n    width: 100%;\r\n    padding: 12px;\r\n    border-radius: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    box-sizing: border-box;\r\n    transition: background 0.3s ease;\r\n  }\r\n  \r\n  .threat-text-main {\r\n    font-weight: 800;\r\n    font-size: 13px;\r\n    letter-spacing: 0.5px;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  \/* Safe State *\/\r\n  .threat-status.safe {\r\n    background-color: rgba(21, 128, 61, 0.15);\r\n    border: 1px solid #16a34a;\r\n    color: #4ade80;\r\n  }\r\n  \r\n  \/* Danger State (80%+) *\/\r\n  .threat-status.danger {\r\n    background-color: rgba(153, 27, 27, 0.25);\r\n    border: 1px solid #dc2626;\r\n    color: #ef4444;\r\n    animation: pulse-border 2s infinite linear;\r\n  }\r\n\r\n  @keyframes pulse-border {\r\n    0% { border-color: #dc2626; }\r\n    50% { border-color: #ef4444; }\r\n    100% { border-color: #dc2626; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  \/\/ Simple, efficient moon phase algorithm based on current date\r\n  function getMoonPhase() {\r\n    const lp = 2551443; \r\n    const now = new Date();\r\n    const newMoonRef = new Date(1970, 0, 7, 20, 35, 0);\r\n    let phase = ((now.getTime() - newMoonRef.getTime()) \/ 1000) % lp;\r\n    if (phase < 0) phase += lp;\r\n    \r\n    \/\/ Normalized age of the moon cycle (0 to 1)\r\n    const ageNormalized = phase \/ lp; \r\n    \r\n    \/\/ Calculate precise illumination percentage\r\n    let illumination = (1 - Math.cos(ageNormalized * 2 * Math.PI)) \/ 2;\r\n    \r\n    return {\r\n      age: ageNormalized,\r\n      percent: Math.round(illumination * 100)\r\n    };\r\n  }\r\n\r\n  function updateWidget() {\r\n    const moon = getMoonPhase();\r\n    const percent = moon.percent;\r\n    const age = moon.age;\r\n    \r\n    let phaseText = \"\";\r\n    let moonStyle = \"\";\r\n\r\n    \/\/ Map the 0-1 age to distinct astronomical phase names\r\n    if (age < 0.03 || age > 0.97) {\r\n      phaseText = \"New Moon\";\r\n      moonStyle = \"linear-gradient(90deg, #2d3748 50%, #2d3748 50%)\";\r\n    } else if (age >= 0.03 && age < 0.22) {\r\n      phaseText = \"Waxing Crescent\";\r\n      moonStyle = \"linear-gradient(90deg, #2d3748 50%, transparent 50%), linear-gradient(90deg, #fff 50%, transparent 50%)\";\r\n    } else if (age >= 0.22 && age < 0.28) {\r\n      phaseText = \"First Quarter\";\r\n      moonStyle = \"linear-gradient(90deg, #2d3748 50%, transparent 50%)\";\r\n    } else if (age >= 0.28 && age < 0.47) {\r\n      phaseText = \"Waxing Gibbous\";\r\n      moonStyle = \"linear-gradient(90deg, transparent 50%, #fff 50%), linear-gradient(90deg, #2d3748 50%, transparent 50%)\";\r\n    } else if (age >= 0.47 && age < 0.53) {\r\n      phaseText = \"Full Moon\";\r\n      moonStyle = \"linear-gradient(90deg, #fff 50%, #fff 50%)\";\r\n    } else if (age >= 0.53 && age < 0.72) {\r\n      phaseText = \"Waning Gibbous\";\r\n      moonStyle = \"linear-gradient(90deg, transparent 50%, #2d3748 50%), linear-gradient(90deg, #fff 50%, transparent 50%)\";\r\n    } else if (age >= 0.72 && age < 0.78) {\r\n      phaseText = \"Third Quarter\";\r\n      moonStyle = \"linear-gradient(90deg, transparent 50%, #2d3748 50%)\";\r\n    } else {\r\n      phaseText = \"Waning Crescent\";\r\n      moonStyle = \"linear-gradient(90deg, #fff 50%, transparent 50%), linear-gradient(90deg, transparent 50%, #2d3748 50%)\";\r\n    }\r\n\r\n    \/\/ Apply lighting styles to the dynamic moon element\r\n    const moonElem = document.getElementById(\"widget-moon\");\r\n    if(moonElem) {\r\n      \/\/ Base layer acts as lit side, pseudo-element filters the shadow\r\n      moonElem.style.backgroundColor = (age > 0.25 && age < 0.75) ? \"#ffffff\" : \"#2d3748\";\r\n      \/\/ Inject standard shadow overrides via dynamic sheet rules if preferred, \r\n      \/\/ or cleaner inline fallback trick:\r\n      if (age < 0.5) {\r\n        moonElem.style.background = `linear-gradient(90deg, #2d3748 50%, #fff 50%)`;\r\n      } else {\r\n        moonElem.style.background = `linear-gradient(90deg, #fff 50%, #2d3748 50%)`;\r\n      }\r\n      \/\/ Precise curve layering via mask values can be tricky; a unified standard layout:\r\n      let pctLeft = 100 - (percent * 2);\r\n      if (percent >= 50) {\r\n         moonElem.style.background = `radial-gradient(circle at ${100 - (percent - 50) * 2}% 50%, #ffffff 50%, #2d3748 55%)`;\r\n      } else {\r\n         moonElem.style.background = `radial-gradient(circle at ${percent * 2}% 50%, #2d3748 50%, #ffffff 55%)`;\r\n      }\r\n      \r\n      \/\/ Simple visual baseline fallback for phase rendering consistency\r\n      if(percent > 95) moonElem.style.background = \"#ffffff\";\r\n      if(percent < 5) moonElem.style.background = \"#2d3748\";\r\n    }\r\n\r\n    document.getElementById(\"phase-name\").innerText = phaseText;\r\n    document.getElementById(\"phase-percent\").innerText = percent + \"% Illumination\";\r\n\r\n    const threatBox = document.getElementById(\"threat-box\");\r\n    const alertIcon = document.getElementById(\"alert-icon\");\r\n    const threatText = document.getElementById(\"threat-text\");\r\n\r\n    \/\/ Dynamic Threat Handling (80% or higher threshold)\r\n    if (percent >= 80) {\r\n      threatBox.className = \"threat-status danger\";\r\n      \/\/ Inline clean SVG markup of a howling werewolf profile\r\n      alertIcon.innerHTML = `\r\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ef4444\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M4 14c1.5-1 2.5-2.5 3-4 .5-1.5.5-3.5 0-5 2 1.5 4 1.5 5 0 .5 1.5 1.5 2.5 3 3 1.5.5 3.5.5 5 0-1.5 2-1.5 4 0 5-.5.5-1 1.5-1 2.5 0 2 1 3.5 2.5 4-2-.5-3.5-.5-5 0-.5-1.5-1.5-2.5-3-3-1.5-.5-3.5-.5-5 0 .5-1.5.5-3 0-4.5z\"\/>\r\n          <path d=\"M11 6s1 .5 1.5 1.5\" \/>\r\n        <\/svg>\r\n      `;\r\n      threatText.innerHTML = `<div class=\"threat-text-main\">WARNING: WEREWOLF TRANSFORMATION RISK ACTIVE<\/div>`;\r\n    } else {\r\n      threatBox.className = \"threat-status safe\";\r\n      \/\/ Standard shield security icon\r\n      alertIcon.innerHTML = `\r\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ade80\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n        <\/svg>\r\n      `;\r\n      threatText.innerHTML = `<div class=\"threat-text-main\">ALL SAFE<br><span style=\"font-size:11px; font-weight:400; color:#a0aec0;\">Activity unlikely.<\/span><\/div>`;\r\n    }\r\n  }\r\n\r\n  \/\/ Initialize immediately on load\r\n  document.addEventListener(\"DOMContentLoaded\", updateWidget);\r\n  \/\/ Fail-safe in case DOMContentLoaded already fired\r\n  if (document.readyState === \"interactive\" || document.readyState === \"complete\") {\r\n    updateWidget();\r\n  }\r\n})();\r\n<\/script><\/div>\n<p>Werewolf Threat Ends At Below 80% Of Full!\ud83d\udc3a<br \/>\n\ud83c\udf17<a href=\"https:\/\/www.farmersalmanac.com\/calendar\/moon-phases\">Percentage Of Full Calendar<\/a><br \/>\n<a href=\"https:\/\/www.moongiant.com\/fullmoons\/\">More Information On This Years Full And New Moons&#8230;<\/a> (<a href=\"https:\/\/www.space.com\/16830-full-moon-calendar.html\">Also See Space.Com<\/a>)[<a href=\"https:\/\/mysticinvestigations.com\/moon-phase\/\">Visual Phase<\/a>]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Werewolf Threat Ends At Below 80% Of Full!\ud83d\udc3a \ud83c\udf17Percentage Of Full Calendar More Information On This Years Full And New Moons&#8230; (Also See Space.Com)[Visual Phase]<\/p>\n","protected":false},"author":263,"featured_media":2527,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4076","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/pages\/4076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/users\/263"}],"replies":[{"embeddable":true,"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/comments?post=4076"}],"version-history":[{"count":8,"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/pages\/4076\/revisions"}],"predecessor-version":[{"id":4542,"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/pages\/4076\/revisions\/4542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/media\/2527"}],"wp:attachment":[{"href":"https:\/\/mysticinvestigations.com\/supernatural\/wp-json\/wp\/v2\/media?parent=4076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}