/* The Veil (js/veil.js): the games' star-tile scene change. The script sets the
   star, lattice and hills as custom properties (SVG data URIs); these rules
   only place and paint the layers. */

:root {
    /* The shamsa: a great forest eight-point star with a gold rim, the calm
       centre the stars bloom around (the homepage intro and the arcade band). */
    --veil-lattice-static: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22116%22%20height%3D%22116%22%20viewBox%3D%220%200%20152%20152%22%3E%20%3Cpath%20d%3D%22M76%2022.3L91.7%2038L114%2038L114%2060.3L129.7%2076L114%2091.7L114%20114L91.7%20114L76%20129.7L60.3%20114L38%20114L38%2091.7L22.3%2076L38%2060.3L38%2038L60.3%2038ZM0%20-53.7L15.7%20-38L38%20-38L38%20-15.7L53.7%200L38%2015.7L38%2038L15.7%2038L0%2053.7L-15.7%2038L-38%2038L-38%2015.7L-53.7%200L-38%20-15.7L-38%20-38L-15.7%20-38ZM152%20-53.7L167.7%20-38L190%20-38L190%20-15.7L205.7%200L190%2015.7L190%2038L167.7%2038L152%2053.7L136.3%2038L114%2038L114%2015.7L98.3%200L114%20-15.7L114%20-38L136.3%20-38ZM0%2098.3L15.7%20114L38%20114L38%20136.3L53.7%20152L38%20167.7L38%20190L15.7%20190L0%20205.7L-15.7%20190L-38%20190L-38%20167.7L-53.7%20152L-38%20136.3L-38%20114L-15.7%20114ZM152%2098.3L167.7%20114L190%20114L190%20136.3L205.7%20152L190%20167.7L190%20190L167.7%20190L152%20205.7L136.3%20190L114%20190L114%20167.7L98.3%20152L114%20136.3L114%20114L136.3%20114Z%22%20fill%3D%22none%22%20stroke%3D%22%23e3a340%22%20stroke-opacity%3D%220.14%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    --veil-shamsa: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M100.00%203.00L128.21%2031.89L168.59%2031.41L168.11%2071.79L197.00%20100.00L168.11%20128.21L168.59%20168.59L128.21%20168.11L100.00%20197.00L71.79%20168.11L31.41%20168.59L31.89%20128.21L3.00%20100.00L31.89%2071.79L31.41%2031.41L71.79%2031.89Z%22%20fill%3D%22%2312362f%22%20stroke%3D%22%23e3a340%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M100.00%209.50L126.32%2036.46L163.99%2036.01L163.54%2073.68L190.50%20100.00L163.54%20126.32L163.99%20163.99L126.32%20163.54L100.00%20190.50L73.68%20163.54L36.01%20163.99L36.46%20126.32L9.50%20100.00L36.46%2073.68L36.01%2036.01L73.68%2036.46Z%22%20fill%3D%22none%22%20stroke%3D%22%23fbeed6%22%20stroke-opacity%3D%220.38%22%20stroke-width%3D%220.8%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M100.00%2016.00L124.43%2041.02L159.40%2040.60L158.98%2075.57L184.00%20100.00L158.98%20124.43L159.40%20159.40L124.43%20158.98L100.00%20184.00L75.57%20158.98L40.60%20159.40L41.02%20124.43L16.00%20100.00L41.02%2075.57L40.60%2040.60L75.57%2041.02Z%22%20fill%3D%22none%22%20stroke%3D%22%23e3a340%22%20stroke-opacity%3D%220.22%22%20stroke-width%3D%220.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}

.veil { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.veil.is-on { pointer-events: auto; }
.veil-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        var(--veil-hills) left bottom / 100% 110px no-repeat,
        var(--veil-lattice) center / 116px 116px,
        linear-gradient(180deg, #12362f, #081c18);
}
.veil-stars { position: absolute; inset: 0; }
.veil-stars i {
    position: absolute;
    background: var(--veil-star) center / contain no-repeat;
    transform: scale(0);
    will-change: transform, opacity;
}

/* A full-screen veil for leaving the page (veilTo): above everything. */
.veil-screen { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }