/* ========================================================= EXCERPT — Spiral Rune Overlay ========================================================= */ .book-excerpt-wrapper{ position: relative; isolation: isolate; } .rune-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; overflow: hidden; } .rune-svg{ width: clamp(300px, 42vw, 560px); height: auto; opacity: 0.08; transform-origin: center; animation: rune-rotate 25s linear infinite; filter: drop-shadow(0 0 14px rgba(30, 77, 47, 0.18)); } .book-page-design{ position: relative; z-index: 2; } @keyframes rune-rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } /* ========================================================= EXCERPT — Triskele fringe (4 tiers) COMPACTED + 20s one-shot: flicker in -> HOLD yellow -> ember red -> slow fade -> STAY OFF + Viewport gated (paused until #excerpt gains .is-inview) Fix: RIGHT-side mirroring no longer breaks animation transforms ========================================================= */ #excerpt{ position:relative; overflow:hidden; isolation:isolate; } #excerpt .excerpt-side-marks{ position:absolute; inset:0; pointer-events:none; z-index:0; } #excerpt .container, #excerpt .section-title, #excerpt .book-excerpt-wrapper{ position:relative; z-index:1; } /* --------------------------------------------------------- BASE MARK (mask = SVG linework, “ink” animated) --------------------------------------------------------- */ #excerpt .triskele-mark{ position:absolute; width:120px; height:120px; --mark-src: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAuMDAgMC4wMCAzOTcuMDAgMzcxLjAwIj4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxLjAwIiBzdHJva2U9IiMxZTRkMmYiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iCiAgTSAxODAuODIgMjQ1LjY1CiAgQyAxODAuODIgMjQ1LjE4IDE4MC4yOCAyNDQuOTIgMTc5LjkxIDI0NS4yMAogIEMgMTY1LjMzIDI1Ni4xNiAxNDkuMDIgMjY0LjI3IDEzMC4yNiAyNjQuMTcKICBDIDExNy41NCAyNjQuMTEgMTEwLjkzIDI2NC4zOSAxMDAuNzUgMjYyLjAyCiAgUSA4Ny43MCAyNTguOTkgNzUuNTAgMjUzLjk1CiAgUSA0Ni4wOCAyNDEuODAgMjcuNzYgMjE1LjE3CiAgUSAxNS4xNyAxOTYuODggMTAuNDEgMTc2LjMxCiAgUSA4LjIzIDE2Ni45MCA4LjI4IDE1My45MgogIFEgOC4zMiAxNDIuMzMgMTEuMzYgMTMxLjgxCiAgQyAyMy4xNiA5MS4xMyA2MC41MSA2Ny43MyAxMDIuMjUgNzIuOTkKICBRIDEyNC4yNSA3NS43NiAxNDMuNDkgODcuNTIKICBDIDE2NC4zNiAxMDAuMjcgMTgyLjMzIDEyMC4xOSAxODkuNjQgMTQzLjgwCiAgQyAxOTQuNzQgMTYwLjMwIDE5My43MyAxODAuMTcgMTgzLjk0IDE5NC44MAogIEMgMTc0Ljk3IDIwOC4yMiAxNjIuNjggMjE4LjMyIDE0Ni43NSAyMjEuNzEKICBRIDEzNy4xMiAyMjMuNzYgMTI0Ljc2IDIyMi45NQogIEMgMTAwLjMwIDIyMS4zNSA3OS40MiAyMDYuODggNjUuMzYgMTg3LjYzCiAgUSA1OC42NiAxNzguNDcgNTcuMDEgMTY4LjAwCiAgUSA1Ni4wMCAxNjEuNTUgNTYuNDYgMTUzLjA2CiAgUSA1Ni44MiAxNDYuNDAgNTkuNDUgMTQwLjc5CiAgQyA2Ny45OCAxMjIuNjIgODUuMzcgMTExLjk5IDEwNS41MSAxMTIuMTcKICBRIDExMy4zNCAxMTIuMjQgMTIxLjIwIDExNC45NQogIFEgMTQ1LjA5IDEyMy4xOCAxNTIuNTUgMTQ4LjM4CiAgUSAxNTUuOTkgMTYwLjAyIDE1MC4xMiAxNzAuMzUKICBDIDE0NC43NiAxNzkuNzggMTM2LjA0IDE4NC43MCAxMjQuOTMgMTg0LjU4CiAgUSAxMDkuNDMgMTg0LjQxIDk5LjM4IDE3Mi4wOQogIFEgOTUuMDQgMTY2Ljc2IDk1LjIyIDE1OS42OAogIFEgOTUuMzkgMTUzLjM2IDk5LjIyIDE1MC4wOAogIFEgMTAzLjM4IDE0Ni41MyAxMDkuMjIgMTQ3LjMxCiAgUSAxMTUuMTcgMTQ4LjEwIDExNy42OCAxNTMuNzQKICBDIDExNy44NCAxNTQuMDkgMTE3LjkxIDE1NC40NyAxMTcuODggMTU0Ljg1CiAgUSAxMTcuNzggMTU2LjY0IDExNS42NyAxNTguNTIKICBDIDExNS4yNCAxNTguOTAgMTE1LjE2IDE1OS41NSAxMTUuNDkgMTYwLjAyCiAgQyAxMTkuMzIgMTY1LjY0IDEyNS4zMCAxNjMuMTggMTI2LjkwIDE1Ny40NQogIFEgMTI3LjA3IDE1Ni44MyAxMjYuOTkgMTUyLjI2CiAgQyAxMjYuOTggMTUxLjkxIDEyNi45MyAxNTEuNTggMTI2Ljg0IDE1MS4yNQogIEMgMTI0LjMyIDE0Mi44MiAxMTcuMDcgMTM4LjM5IDEwOC41OCAxMzcuODcKICBDIDEwMC4zNSAxMzcuMzYgOTMuMzIgMTQxLjI4IDg4Ljk3IDE0OC4xNwogIEMgODQuMjQgMTU1LjY2IDg1LjM2IDE2NS43MCA4OS43MCAxNzMuMjkKICBDIDk5LjgwIDE5MC45MyAxMjUuMjQgMTk5LjU2IDE0My42MiAxOTAuNDEKICBDIDE1OS4wNyAxODIuNzIgMTY1LjcwIDE2NS45MiAxNjEuOTQgMTQ4Ljk2CiAgQyAxNTYuODggMTI2LjA3IDEzOC4yNSAxMDguODMgMTE1LjUxIDEwMy43MQogIEMgMTAzLjAxIDEwMC44OSA5MC4yNSAxMDEuNTggNzguMjkgMTA2LjE0CiAgUSA1Ni40MiAxMTQuNDkgNDcuMjggMTM3LjI0CiAgUSA0NC45NSAxNDMuMDUgNDQuNTYgMTQ4LjM1CiAgUSA0NC4xNyAxNTMuNTcgNDQuMzggMTU5LjkwCiAgUSA0NC45MCAxNzYuMTEgNTMuODIgMTkwLjA1CiAgQyA2Ni42MiAyMTAuMDUgODguODkgMjI3LjQyIDExMi43NiAyMzIuNDQKICBRIDEyMi42NCAyMzQuNTMgMTM1Ljc0IDIzMy44NAogIEMgMTU3LjI0IDIzMi43MiAxNzMuOTUgMjIwLjM3IDE4Ni4wNSAyMDMuMDUKICBRIDE5My4xMyAxOTIuOTIgMTk3Ljk4IDE4Ni43NAogIFEgMjEwLjE2IDE3MS4yMiAyMjguMzIgMTYzLjk2CiAgQyAyMjguOTEgMTYzLjcyIDIyOC45OCAxNjIuOTEgMjI4LjQzIDE2Mi41OAogIFEgMjAxLjY0IDE0Ni41MiAxOTEuNTAgMTE3LjcwCiAgUSAxODguNjcgMTA5LjY2IDE4OC4xMCAxMDEuMTEKICBDIDE4Ny40MiA5MC45MCAxODcuNTUgNzkuNDkgMTkxLjQwIDY5LjUwCiAgQyAxOTUuOTUgNTcuNzIgMjAyLjU1IDQ0Ljg0IDIxMS44MiAzNi4yOQogIFEgMjMyLjM3IDE3LjM0IDI2MC4yNyAxMi45MQogIEMgMjY2LjI3IDExLjk2IDI3Mi43MCAxMS4yNiAyNzguOTIgMTEuNTYKICBDIDMyNC43NCAxMy43OSAzNjUuNDggNDEuNzMgMzc1LjcwIDg3Ljk1CiAgUSAzNzguNDkgMTAwLjU2IDM3Ny4wMyAxMTUuMDEKICBRIDM3Ni4wNyAxMjQuNDcgMzcyLjE3IDEzNC4zMgogIEMgMzY2Ljk4IDE0Ny40NyAzNTUuNzEgMTU4Ljg2IDM0My40NCAxNjUuMjcKICBDIDM0Mi43OSAxNjUuNjEgMzQyLjc0IDE2Ni41MiAzNDMuMzQgMTY2LjkzCiAgQyAzNjYuNTcgMTgyLjg0IDM4Mi4yMSAyMDUuNjEgMzg3LjY0IDIzMy44MgogIFEgMzkyLjU2IDI1OS40NCAzODYuNTkgMjg2LjExCiAgUSAzODEuMTggMzEwLjI1IDM2NS44MyAzMjkuNTcKICBRIDM0Ny43MyAzNTIuMzUgMzE3LjI3IDM2MS43OAogIFEgMzE0LjkyIDM2Mi41MSAzMDYuNTAgMzYzLjcxCiAgUSAzMDMuNzcgMzY0LjExIDI5MS4yNiAzNjQuODYKICBDIDI4NS44OSAzNjUuMTggMjgyLjQ1IDM2NC43MSAyNzcuMDkgMzY0LjI2CiAgUSAyNzQuMTYgMzY0LjAyIDI3MS40NiAzNjMuNTMKICBRIDI0Ni4wMSAzNTguOTMgMjI1LjA5IDM0My40MQogIEMgMjA2LjM2IDMyOS41MiAxOTEuNDggMzA5LjUwIDE4NS4yNiAyODYuOTgKICBDIDE4MS42MiAyNzMuODIgMTgwLjk1IDI1OS41OCAxODAuODIgMjQ1LjY1CiAgWgogIE0gMTg4LjE1IDIyOC4wOQogIFEgMTg3LjI3IDIzOS4wOSAxODcuMzUgMjQzLjc2CiAgQyAxODcuNDQgMjQ4Ljk2IDE4Ny44MyAyNTMuMjkgMTg3LjkwIDI1Ni43MgogIFEgMTg4LjAxIDI2MS44NCAxODguOTggMjY2LjM3CiAgQyAxOTYuODcgMzAzLjE2IDIxOC44NiAzMzEuNDkgMjU0LjE2IDM0Ni4xMQogIFEgMjY1Ljg5IDM1MC45NyAyNzAuODMgMzUxLjU5CiAgUSAyODcuNTUgMzUzLjY4IDMwNC4wOCAzNTIuMzIKICBRIDMwOC44MSAzNTEuOTMgMzEyLjM0IDM1MS4wMwogIEMgMzQ2LjExIDM0Mi4zOCAzNzAuMjQgMzE0Ljc2IDM3Ny45NCAyODEuMjUKICBRIDM4MS43MSAyNjQuODggMzgwLjg4IDI1MC4yMwogIFEgMzc4Ljg4IDIxNC44NiAzNTYuNTEgMTg4LjI5CiAgQyAzNTAuNDkgMTgxLjE0IDM0My4zMSAxNzUuMDQgMzM1LjQwIDE3MC4zNQogIFEgMzI5LjkyIDE2Ny4xMCAzMjQuMzcgMTY0LjA0CiAgQyAzMjQuMDAgMTYzLjgzIDMyNC4xMSAxNjMuMjcgMzI0LjU0IDE2My4yMgogIFEgMzI4Ljk1IDE2Mi43NCAzMzQuNTcgMTYwLjMyCiAgQyAzNDMuNzIgMTU2LjM5IDM1MS44NyAxNTAuODUgMzU3LjY4IDE0Mi45NgogIFEgMzY1LjU3IDEzMi4yNCAzNjcuOTEgMTE4LjUyCiAgUSAzNjguODQgMTEzLjEyIDM2OS4wMiAxMDMuNjkKICBRIDM2OS4xNSA5Ny4xOCAzNjcuNTcgOTEuNDMKICBRIDM2NS4zNCA4My4zMiAzNjMuOTIgNzkuNTcKICBDIDM0OS45NyA0Mi44MCAzMTUuNzQgMjEuOTAgMjc3LjAzIDIxLjk0CiAgQyAyNzIuNTQgMjEuOTQgMjY3LjA2IDIyLjc3IDI2Mi45OSAyMy40OAogIEMgMjI3LjA0IDI5LjcyIDE5OS40MyA1Ni43MiAxOTguODggOTQuMjkKICBRIDE5OC44MCA5OS41NCAxOTkuMDggMTA1LjI4CiAgUSAxOTkuMzYgMTEwLjk5IDIwMi42MSAxMTkuNzAKICBDIDIxMC4zMyAxNDAuNDYgMjI2LjgzIDE1NS4zMCAyNDUuOTMgMTY2LjI0CiAgQyAyNDYuMjMgMTY2LjQxIDI0Ni4xMyAxNjYuODYgMjQ1Ljc5IDE2Ni44OQogIFEgMjQzLjQ4IDE2Ny4xMSAyNDIuNzQgMTY3LjI2CiAgQyAyMjYuMDYgMTcwLjcwIDIxMi40MyAxODAuNjYgMjAyLjE4IDE5NC42NwogIEMgMTkwLjc2IDIxMC4yNyAxODAuMzYgMjI2Ljg5IDE2Mi4yMyAyMzUuNjkKICBRIDE1Mi41NCAyNDAuMzkgMTQxLjI2IDI0Mi4wNgogIFEgMTM3Ljc3IDI0Mi41NyAxMzYuOTMgMjQyLjc4CiAgQyAxMzYuODIgMjQyLjgxIDEzNi43MCAyNDIuODMgMTM2LjU4IDI0Mi44NAogIFEgMTIyLjYxIDI0My41OSAxMTMuMDUgMjQxLjcwCiAgQyA3Ny4yOCAyMzQuNjMgNDYuNTkgMjA5LjMxIDM1LjI4IDE3NC4yMAogIEMgMzUuMjIgMTc0LjAyIDM1LjE4IDE3My44NCAzNS4xNiAxNzMuNjYKICBRIDM0Ljg4IDE3MS4xNyAzNC4zMiAxNjkuMzcKICBDIDM0LjE3IDE2OC45MSAzNC4wOSAxNjguNDQgMzQuMDYgMTY3Ljk2CiAgUSAzMy4zNCAxNTQuNjIgMzQuMzMgMTQ1LjMwCiAgQyAzNS44OSAxMzAuNTIgNDQuMjEgMTE4Ljc3IDU0Ljk3IDEwOC4yMgogIFEgNTkuNDIgMTAzLjg2IDYzLjA0IDEwMS43OAogIFEgNzIuMzIgOTYuNDYgODQuMzAgOTQuMzEKICBRIDg2LjQ0IDkzLjkzIDg4LjIyIDkzLjkxCiAgQyA5MS42MCA5My44OSA5NC41MSA5Mi44NCA5OC4wMyA5My4xMQogIFEgMTA1Ljk0IDkzLjcxIDExMC40MyA5NC4zOQogIFEgMTMxLjY4IDk3LjYyIDE0Ny4yMCAxMTAuOTcKICBDIDE1Ny41OSAxMTkuOTAgMTY1LjYzIDEzMC4yNiAxNjkuNjIgMTQzLjM0CiAgQyAxNzAuMTQgMTQ1LjA1IDE3MC4wMyAxNDYuNTcgMTcwLjcyIDE0OC4yOQogIEMgMTcwLjk4IDE0OC45MyAxNzEuMTIgMTQ5LjYxIDE3MS4xMiAxNTAuMzAKICBMIDE3MS4xMiAxNzEuNDIKICBDIDE3MS4xMiAxNzEuODEgMTcxLjA3IDE3Mi4yMSAxNzAuOTYgMTcyLjU5CiAgQyAxNjYuMTYgMTg5LjQwIDE1My43NSAyMDAuNzAgMTM2LjI3IDIwMi4xMgogIFEgMTMyLjgxIDIwMi40MCAxMjkuNTMgMjAyLjcwCiAgQyAxMjguMDIgMjAyLjgzIDEyNi41MCAyMDIuODEgMTI0Ljk5IDIwMi42MgogIFEgMTIyLjkxIDIwMi4zNyAxMjAuNDcgMjAyLjEzCiAgUSAxMTcuMjcgMjAxLjgyIDExMy42MiAyMDAuODMKICBDIDk3LjE4IDE5Ni4zNyA3Ny4xNiAxNzkuNzMgNzYuODIgMTYxLjI1CiAgUSA3Ni43MSAxNTUuMDYgNzcuMTggMTUzLjExCiAgUSA3OS42NSAxNDIuNzcgODguNDMgMTM1LjkxCiAgQyA5NC45NiAxMzAuODEgMTAyLjQ3IDEyOS4yNSAxMTAuNjMgMTI5LjkwCiAgQyAxMTguODQgMTMwLjU1IDEyNi4xNyAxMzYuMDcgMTMwLjk4IDE0Mi41NQogIFEgMTM0LjQwIDE0Ny4xNyAxMzUuMDkgMTUyLjk3CiAgUSAxMzYuMjggMTYzLjEwIDEyOC43NSAxNjcuNTcKICBRIDEyNi4wMiAxNjkuMTkgMTIyLjQ3IDE2OS41NQogIFEgMTE5LjMyIDE2OS44NiAxMTUuOTkgMTY4LjQ5CiAgUSAxMDguNTAgMTY1LjM5IDExMS44NSAxNTguMDAKICBDIDExMS45MyAxNTcuODMgMTExLjk3IDE1Ny42NCAxMTEuOTggMTU3LjQ2CiAgUSAxMTIuMTMgMTU0LjcxIDExMC40NCAxNTQuMjEKICBRIDEwNS4zNyAxNTIuNzMgMTAzLjE2IDE1Ny40NwogIEMgMTAzLjA2IDE1Ny42OCAxMDMuMDEgMTU3LjkxIDEwMy4wMSAxNTguMTQKICBMIDEwMy4wMSAxNjIuODYKICBDIDEwMy4wMSAxNjIuOTUgMTAzLjAzIDE2My4wNCAxMDMuMDYgMTYzLjEzCiAgUSAxMDYuNTQgMTcyLjI4IDExNi4wNyAxNzUuNDYKICBRIDEyNy43NSAxNzkuMzUgMTM3LjU0IDE3MS43MgogIEMgMTQzLjcwIDE2Ni45MiAxNDQuMzMgMTU4LjQ5IDE0My42NyAxNTEuMjkKICBDIDE0Mi40NyAxMzguMzAgMTMxLjgzIDEyNy42MiAxMjAuMDIgMTIzLjU0CiAgQyAxMDEuMDEgMTE2Ljk4IDgxLjE4IDEyNC4yMSA3MC42MyAxNDEuNTYKICBDIDY2LjU2IDE0OC4yNSA2Ni41NiAxNTYuNDcgNjcuMDkgMTY0LjAwCiAgQyA2Ny44MiAxNzQuMDggNzQuMjggMTg0Ljc5IDgxLjMxIDE5MS45NQogIFEgOTkuMDIgMjA5Ljk3IDEyMy41NyAyMTIuNjUKICBRIDEzNC43MCAyMTMuODcgMTQ0LjA2IDIxMS41MwogIFEgMTcwLjQzIDIwNC45NSAxNzkuNjYgMTc5LjQ0CiAgUSAxODQuOTggMTY0LjczIDE4MS40NCAxNDkuNTMKICBDIDE3My4xMyAxMTMuOTQgMTM3LjQxIDg1Ljc2IDEwMS43NSA4My4wNQogIFEgODcuMTkgODEuOTQgNzYuMzEgODQuMDkKICBRIDU3LjAyIDg3LjkwIDQwLjUyIDEwMi41NQogIEMgNDAuMzIgMTAyLjczIDQwLjA4IDEwMi44NiAzOS44MyAxMDIuOTUKICBRIDM4LjY2IDEwMy4zNyAzOC4xNCAxMDMuOTUKICBRIDE2LjU2IDEyOC4xOSAxOS4yOCAxNjEuMjIKICBDIDE5LjQwIDE2Mi43NSAxOS45MiAxNjMuODQgMTkuOTQgMTY1LjA3CiAgUSAxOS45NyAxNjYuNTggMjAuMjUgMTY3Ljk1CiAgUSAyNC4wNyAxODcuMjEgMzMuODEgMjAyLjQxCiAgUSA1OC4xNSAyNDAuNDAgMTAyLjA1IDI1Mi4zNwogIFEgMTAyLjk1IDI1Mi42MiAxMDUuNTAgMjUyLjk2CiAgUSAxMDcuMzIgMjUzLjIxIDEwOC44NCAyNTMuNzQKICBDIDEwOS4yOCAyNTMuOTAgMTA5Ljc1IDI1My45NyAxMTAuMjIgMjUzLjk1CiAgUSAxMTIuMzAgMjUzLjg3IDExNC45OSAyNTQuNjEKICBDIDExNS42NSAyNTQuNzkgMTE2LjMyIDI1NC44OSAxMTcuMDAgMjU0LjkwCiAgUSAxMjYuNTggMjU1LjE3IDEzNS42MyAyNTQuOTEKICBDIDEzNy4xNSAyNTQuODYgMTM4LjkwIDI1NC4yMiAxNDAuMDcgMjU0LjEzCiAgUSAxNDEuNzcgMjUzLjk5IDE0My40MSAyNTMuNjgKICBDIDE2MS4wOCAyNTAuMjcgMTc1LjQ4IDI0MC44NiAxODcuNjIgMjI3Ljg1CiAgQyAxODcuODIgMjI3LjY0IDE4OC4xNyAyMjcuODAgMTg4LjE1IDIyOC4wOQogIFoiCi8+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMS4wMCIgc3Ryb2tlPSIjMWU0ZDJmIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIGQ9IgogIE0gMjk0LjA4IDEwMi4xNwogIFEgMjk0LjU2IDk5LjU5IDI5Mi44MiA5OC4yNgogIEMgMjkyLjU2IDk4LjA2IDI5Mi4yNCA5Ny45NSAyOTEuOTEgOTcuOTUKICBMIDI4OC41NiA5Ny45NQogIEMgMjg4LjI0IDk3Ljk1IDI4Ny45MiA5OC4wMiAyODcuNjIgOTguMTUKICBDIDI4MS4yMCAxMDAuOTQgMjgwLjU0IDEwNy4zOCAyODMuOTcgMTEyLjc5CiAgUSAyODcuMTIgMTE3Ljc5IDI5Mi4wMSAxMjAuOTAKICBDIDI5OC42NCAxMjUuMTIgMzA4LjQxIDEyNS4zNiAzMTUuMzcgMTIxLjgxCiAgQyAzMjcuOTYgMTE1LjQwIDMzMC40MCAxMDEuNDMgMzI1Ljk2IDg4Ljc3CiAgQyAzMjMuMjAgODAuOTEgMzE3LjU5IDc0LjA2IDMxMC40NyA2OS41MgogIFEgMjkyLjI5IDU3Ljk0IDI3MS41NiA2NC41NQogIEMgMjU3Ljg1IDY4LjkyIDI0Ny42MiA3OS4xMCAyNDQuMDMgOTMuMTAKICBDIDI0Mi43MyA5OC4xNyAyNDEuODggMTAxLjU5IDI0Mi4wMyAxMDYuMzUKICBRIDI0Mi4xMSAxMDguODEgMjQyLjY1IDExMS4xOQogIFEgMjQ2LjM3IDEyNy4zOCAyNTguOTYgMTM5LjExCiAgUSAyNzAuOTEgMTUwLjI0IDI4NS4zNyAxNTUuOTAKICBRIDMwNC4wNiAxNjMuMjEgMzEzLjI0IDE2Ny4wMQogIEMgMzQ0LjU4IDE4MC4wMCAzNjUuNTIgMjA5LjY5IDM2OC45NiAyNDMuMjYKICBRIDM2OS4yMCAyNDUuNTUgMzY5LjA3IDI1NC45MgogIFEgMzY4Ljk5IDI2MS4xNyAzNjguMTYgMjY2LjUzCiAgUSAzNjYuMDAgMjgwLjQ4IDM1OC42OSAyOTQuNzEKICBRIDM0Ny41NyAzMTYuMzQgMzI1LjM4IDMyNy4xNgogIFEgMzE2LjMyIDMzMS41OSAzMDcuNzggMzMzLjM0CiAgUSAzMDQuNDIgMzM0LjA0IDMwMC42NiAzMzQuMTgKICBDIDI5Ny43OSAzMzQuMjkgMjk0LjYwIDMzNC44NCAyOTEuMTIgMzM0LjYyCiAgUSAyODMuOTkgMzM0LjE2IDI4MC4yNyAzMzMuOTEKICBRIDI3MS42MCAzMzMuMzMgMjYxLjA2IDMyOS42MgogIFEgMjQ1LjEyIDMyNC4wMSAyMzAuODggMzEyLjIxCiAgUSAyMDQuOTYgMjkwLjc0IDE5OC4xMSAyNTguNjgKICBRIDE5Ny40OCAyNTUuNzQgMTk2LjIyIDI0Mi43MAogIEMgMTk1Ljc5IDIzOC4yMyAxOTYuOTIgMjM0LjkwIDE5Ni45NyAyMzAuNjYKICBRIDE5Ni45OSAyMjguNTggMTk3Ljc2IDIyNS43NwogIFEgMjA1LjAxIDE5OS4xNiAyMjcuMjcgMTg0LjIxCiAgUSAyMzUuMjkgMTc4LjgzIDI0Ni43MCAxNzYuNzUKICBRIDI1MS4zNiAxNzUuODkgMjU3LjMzIDE3Ni4zNAogIFEgMjYyLjg5IDE3Ni43NSAyNjcuOTkgMTc3LjMwCiAgUSAyNzAuMDUgMTc3LjUyIDI3NS43NSAxNzguOTkKICBRIDI5OC4wOCAxODQuNzUgMzEzLjE5IDIwMS4yOAogIFEgMzI1LjkwIDIxNS4xOSAzMjcuNzEgMjM0LjAwCiAgUSAzMjguMzEgMjQwLjE0IDMyNy4wMCAyNDcuMjkKICBRIDMyMi45MSAyNjkuNjIgMzAyLjMyIDI3OC41NQogIFEgMjk5LjEyIDI3OS45NCAyOTQuODAgMjgwLjc0CiAgUSAyOTEuMjAgMjgxLjQxIDI4Ni45OCAyODEuOTEKICBRIDI4My45NiAyODIuMjggMjc5LjUwIDI4MS42MwogIFEgMjc0LjIyIDI4MC44NiAyNzIuMDcgMjgwLjM0CiAgUSAyNjAuODkgMjc3LjYyIDI1Mi43NiAyNjkuNzYKICBDIDI0NS40OCAyNjIuNzEgMjM4Ljk2IDI1Mi43NiAyMzguNzEgMjQyLjMzCiAgUSAyMzguNDcgMjMyLjUzIDI0Mi4xNyAyMjUuNjgKICBDIDI0OC41MCAyMTMuOTQgMjY0LjI5IDIwNi45MiAyNzcuNDMgMjEyLjk5CiAgUSAyODYuMTcgMjE3LjAzIDI4OS44NSAyMjQuNzgKICBRIDI5Mi42NyAyMzAuNzQgMjkwLjkxIDIzOS40MgogIEMgMjkwLjg0IDIzOS43OCAyOTAuNzIgMjQwLjEzIDI5MC41NCAyNDAuNDUKICBRIDI4Ni4xMSAyNDguNDggMjc2LjQ4IDI0Ny4wMAogIFEgMjcyLjg4IDI0Ni40NSAyNzAuNjUgMjQzLjMzCiAgQyAyNjguODQgMjQwLjc3IDI3MC40OSAyMzcuOTEgMjcxLjc5IDIzNS4zMQogIEMgMjcyLjE3IDIzNC41NCAyNzIuMDkgMjMzLjYyIDI3MS41OSAyMzIuOTMKICBRIDI2OS44MSAyMzAuNDYgMjY2LjczIDIzMC45NgogIEMgMjYwLjc0IDIzMS45MyAyNjAuNjkgMjM3LjI0IDI2MS4wNyAyNDIuNjYKICBDIDI2MS4xMCAyNDMuMDAgMjYxLjE3IDI0My4zMyAyNjEuMjkgMjQzLjY2CiAgQyAyNjQuNzEgMjUyLjgxIDI3My43OCAyNTcuMjUgMjgzLjI0IDI1NS43OQogIFEgMjk1LjA5IDI1My45NiAzMDAuNjkgMjQyLjgzCiAgQyAzMDAuNzggMjQyLjYzIDMwMC44NiAyNDIuNDIgMzAwLjkyIDI0Mi4yMQogIFEgMzAyLjIxIDIzNy4xOCAzMDEuNzAgMjI5LjkwCiAgUSAzMDEuMjUgMjIzLjMyIDI5OC4wMiAyMTguMjIKICBDIDI4OS4zMiAyMDQuNDcgMjcyLjQ1IDE5Ny44MyAyNTYuNDggMjAxLjU0CiAgQyAyNDIuNjcgMjA0Ljc1IDIzMC45MiAyMTYuNzAgMjI4LjA3IDIzMC43NAogIFEgMjIzLjU1IDI1My4wMyAyMzcuNzQgMjcxLjMwCiAgQyAyNDkuNjIgMjg2LjU5IDI2Ny4yNCAyOTYuNjAgMjg2LjQ2IDI5Ny4wMAogIFEgMzAwLjgwIDI5Ny4yOSAzMTMuMDkgMjkwLjg1CiAgUSAzMzEuNTUgMjgxLjE3IDMzOC41MSAyNTkuNDgKICBRIDMzOS4yMyAyNTcuMjUgMzM5Ljg2IDI1Mi4wMQogIFEgMzQwLjIwIDI0OS4yNCAzNDAuMTAgMjQwLjQ5CiAgQyAzMzkuODEgMjEzLjcwIDMyMC4xOSAxODkuNjYgMjk2LjU5IDE3OS4yMAogIFEgMjg0LjY2IDE3My45MSAyNjkuMzkgMTY4Ljg2CiAgUSAyNjcuNjAgMTY4LjI3IDI1Ny40NyAxNjMuNzQKICBRIDI0Ny4xOSAxNTkuMTUgMjM4LjAzIDE1MC43OQogIEMgMjI1LjA1IDEzOC45NCAyMTYuMTggMTI2LjI3IDIxMy4zMCAxMDguOTgKICBDIDIxMi4wNiAxMDEuNTcgMjExLjE2IDkyLjAxIDIxMi40NSA4NC42OQogIFEgMjEzLjYyIDc4LjA3IDIxNi45MyA3MS4wNQogIFEgMjI4LjMxIDQ2Ljk5IDI1NC4zMiAzNi43NwogIEMgMjYwLjIwIDM0LjQ1IDI2Ni40NSAzMi43OCAyNzMuNDEgMzIuODAKICBRIDI4OS4yNiAzMi44MyAyOTEuNTAgMzMuMDQKICBDIDI5NC42OSAzMy4zMyAzMDAuMjQgMzMuOTEgMzA0LjAzIDM1LjExCiAgQyAzMjguMzUgNDIuODAgMzQ3LjMxIDYxLjIxIDM1NC44NyA4NS42NwogIFEgMzU3Ljc1IDk0Ljk5IDM1Ny4wNiAxMDQuMDYKICBRIDM1Ni41MyAxMTAuOTcgMzU1LjQ5IDExNi40MgogIEMgMzUyLjk2IDEyOS42NiAzNDUuMzEgMTQwLjE2IDMzMy42MCAxNDcuMTUKICBRIDMyNi4zNyAxNTEuNDYgMzE4LjIzIDE1MS45OAogIEMgMzEyLjU4IDE1Mi4zNCAzMDUuMzAgMTUyLjQ2IDI5OS40MyAxNTEuMDIKICBRIDI3OC4xNiAxNDUuNzggMjY0LjM4IDEyOS44MgogIEMgMjU1Ljc1IDExOS44MiAyNTMuMTUgMTA5LjE5IDI1NC4xMCA5Ni41MAogIEMgMjU0LjEzIDk2LjExIDI1NC4yMCA5NS43NCAyNTQuMzEgOTUuMzcKICBDIDI1Ny4xMSA4Ni4xNyAyNjQuNTQgNzguMzIgMjczLjIwIDc0LjI2CiAgQyAyNzkuMjIgNzEuNDQgMjg1Ljk2IDcxLjUyIDI5Mi4zMCA3MS44MAogIEMgMjk5LjQ3IDcyLjExIDMwNi4zOSA3Ni4zNSAzMTEuMTcgODEuMzQKICBRIDMxNS4zOSA4NS43NSAzMTcuNDUgOTEuNDEKICBDIDMxOC4wNyA5My4xMSAzMTguMTEgOTUuMjIgMzE4LjYzIDk3LjIzCiAgQyAzMTguOTIgOTguMzcgMzE4LjkzIDk5LjU3IDMxOC42NSAxMDAuNzEKICBDIDMxOC4xMyAxMDIuODcgMzE4LjE1IDEwNS4yOSAzMTcuMDMgMTA3LjYwCiAgUSAzMTQuMjQgMTEzLjMyIDMwNy43NiAxMTQuOTYKICBRIDMwNy41NiAxMTUuMDEgMzAxLjM4IDExNS43NwogIEMgMzAxLjExIDExNS44MCAzMDAuODMgMTE1Ljc4IDMwMC41NyAxMTUuNzEKICBMIDI5Ny45MSAxMTQuOTgKICBDIDI5Ny42NiAxMTQuOTEgMjk3LjQyIDExNC43OSAyOTcuMjEgMTE0LjYzCiAgQyAyOTQuNDQgMTEyLjQ2IDI4OS45NSAxMDkuNTAgMjkyLjMzIDEwNS4yOQogIFEgMjkzLjcwIDEwMi44NyAyOTMuODAgMTAyLjc1CiAgQyAyOTMuOTQgMTAyLjU5IDI5NC4wNCAxMDIuMzkgMjk0LjA4IDEwMi4xNwogIFoKICBNIDMwMS43OSAxMDguOTMKICBRIDMwNi4wOSAxMDkuNTQgMzA5LjU4IDEwNS44MgogIEMgMzEyLjIwIDEwMy4wMiAzMTAuOTQgOTYuMjMgMzA5LjczIDkzLjE5CiAgUSAzMDguMDUgODguOTcgMzA0LjcwIDg2LjE0CiAgQyAyOTMuMTYgNzYuMzkgMjc4LjMxIDc5LjAzIDI2OC41NSA4OS44NwogIEMgMjY2LjI4IDkyLjQwIDI2NC4zNSA5Ni45NyAyNjQuMTEgMTAwLjA4CiAgQyAyNjMuMjUgMTExLjI2IDI2NS44NCAxMjAuNTkgMjc0LjM2IDEyOC40MQogIFEgMjg1Ljc4IDEzOC45MSAzMDAuMzggMTQyLjQxCiAgQyAzMjguNTIgMTQ5LjE2IDM0OC45NyAxMjguMDcgMzQ3LjkzIDEwMC43MgogIFEgMzQ3LjU3IDkxLjA1IDM0My41MiA4MC45OAogIFEgMzQwLjMwIDcyLjk3IDMzMy43MiA2NS41NgogIFEgMzE4LjUyIDQ4LjQzIDI5Ni42OSA0My41OQogIFEgMjg4LjU3IDQxLjc5IDI3Ny4wMyA0Mi4xMwogIEMgMjU4LjQyIDQyLjY2IDI0MS4zNSA1My4wNSAyMzEuMDEgNjguMjAKICBDIDIyMy4zMyA3OS40NCAyMjAuNTUgOTEuMDYgMjIxLjY2IDEwNC41MgogIEMgMjI0LjI3IDEzNi4xMCAyNDguODAgMTU1LjYwIDI3Ni40MiAxNjUuODEKICBDIDI4Ni4wMCAxNjkuMzUgMjk2LjM2IDE3Mi40NyAzMDYuMjUgMTc3LjY5CiAgUSAzMzQuMzUgMTkyLjUyIDM0NS4yMiAyMjIuNzQKICBRIDM1MS40MiAyMzkuOTcgMzQ4LjY4IDI1Ni45NQogIEMgMzQ0LjUyIDI4Mi42OCAzMjcuNDIgMzAwLjk5IDMwMS44NiAzMDYuOTEKICBDIDMwMS44MSAzMDYuOTIgMzAxLjc1IDMwNi45MyAzMDEuNzAgMzA2Ljk0CiAgTCAyODcuNTYgMzA4LjAwCiAgQyAyODcuNDggMzA4LjAxIDI4Ny40MCAzMDguMDEgMjg3LjMzIDMwOC4wMAogIFEgMjc5LjI0IDMwNy40NiAyNzYuMjcgMzA2Ljg5CiAgUSAyNTQuNDYgMzAyLjcxIDIzOC4xMiAyODcuMTUKICBRIDIyMi45NSAyNzIuNzAgMjE4LjM5IDI1My42OQogIFEgMjE2LjQyIDI0NS40NyAyMTYuOTEgMjM2LjAwCiAgUSAyMTcuMzcgMjI3LjAxIDIyMS41MiAyMTguOTYKICBDIDIzMC4zMyAyMDEuODcgMjQ4Ljc1IDE5MC4wMyAyNjguNTAgMTkyLjk5CiAgQyAyODkuMTMgMTk2LjA5IDMwNy43MiAyMDkuMjggMzA5Ljk3IDIzMC45OQogIFEgMzExLjYxIDI0Ni44NSAyOTkuNzIgMjU3LjI2CiAgQyAyOTMuNzggMjYyLjQ2IDI4Ni4xOCAyNjMuMDAgMjc4LjY3IDI2Mi41NQogIFEgMjcxLjk5IDI2Mi4xNCAyNjcuNDcgMjU5LjI4CiAgUSAyNTkuNzAgMjU0LjM3IDI1Ni4xNiAyNDYuMzgKICBDIDI1NC42NyAyNDMuMDMgMjU0LjI3IDIzOC4yMyAyNTUuMTMgMjM1LjEwCiAgQyAyNTcuMDYgMjI4LjA1IDI2NC42NiAyMjMuNzMgMjcxLjcxIDIyNi44MgogIFEgMjc1LjQ1IDIyOC40NiAyNzYuNjQgMjMyLjYxCiAgQyAyNzYuNzYgMjMzLjAwIDI3Ni43NCAyMzMuNDMgMjc2LjU4IDIzMy44MQogIFEgMjc2LjA3IDIzNS4wNCAyNzUuMjggMjM1Ljk0CiAgQyAyNzMuNDYgMjM3Ljk5IDI3My43MiAyNDAuNDQgMjc2LjI5IDI0MS40NwogIFEgMjgxLjQ5IDI0My41NSAyODQuMTggMjM4LjUxCiAgUSAyODYuNDggMjM0LjE5IDI4NS44OSAyMzIuMDEKICBRIDI4My44OCAyMjQuNjMgMjc4LjUyIDIyMC44NgogIFEgMjczLjQ5IDIxNy4zMyAyNjUuNDYgMjE4LjEyCiAgUSAyNTEuNDIgMjE5LjQ4IDI0Ny4yOCAyMzQuNDkKICBDIDI0Ny4xOSAyMzQuODAgMjQ3LjE1IDIzNS4xMiAyNDcuMTQgMjM1LjQ1CiAgUSAyNDYuOTIgMjQzLjAzIDI0Ny4xMiAyNDQuMTIKICBRIDI1MC4xOSAyNjAuNjYgMjY0Ljg4IDI2OC4zNgogIEMgMjgzLjc5IDI3OC4yNyAzMDYuNjEgMjcyLjA1IDMxNS44NCAyNTIuNDEKICBRIDMxOS44OSAyNDMuODAgMzE5LjYyIDIzNS4xNwogIEMgMzE4Ljc3IDIwNy45MyAyOTYuODggMTkwLjQ3IDI3MS44NSAxODQuODIKICBDIDI1My41MSAxODAuNjcgMjM2LjI1IDE4NS4zMiAyMjIuODkgMTk4LjYzCiAgUSAyMDcuODAgMjEzLjY3IDIwNi4xMCAyMzQuNzIKICBRIDIwNC4yMyAyNTguMDMgMjE1Ljg5IDI3OC4zNQogIEMgMjI4LjcyIDMwMC42OSAyNDkuNDAgMzE2LjQ3IDI3NC42NiAzMjEuOTQKICBRIDI4My44MyAzMjMuOTIgMjg2LjI4IDMyMy44NwogIFEgMjk1LjA2IDMyMy42OSAzMDMuNDQgMzIyLjQxCiAgUSAzMTkuMzQgMzE5Ljk5IDMzMS45NiAzMDkuNzIKICBDIDMzOC42MSAzMDQuMzEgMzQ1LjkyIDI5Ny4xOCAzNTAuMTUgMjg5LjQxCiAgQyAzNTUuMjYgMjgwLjAxIDM1OC43NyAyNzAuNzkgMzU5LjQ2IDI1OS41MgogIFEgMzYwLjA5IDI0OS4zMSAzNTkuNjIgMjQwLjQ2CiAgUSAzNTkuMTQgMjMxLjIyIDM1Ni40MSAyMjMuMzMKICBDIDM0OC40NiAyMDAuMzAgMzMxLjE0IDE4MC43MSAzMDguMjggMTcxLjIyCiAgUSAyOTkuNDIgMTY3LjUzIDI4NS4zNCAxNjIuNjEKICBRIDI3NC43MCAxNTguOTAgMjY3LjQ2IDE1NC44MQogIEMgMjU2LjI1IDE0OC40OCAyNDUuOTggMTM4LjQ3IDIzOS4zMiAxMjcuODIKICBRIDIzNC42MiAxMjAuMzAgMjMzLjA1IDExMC45OQogIFEgMjMyLjAyIDEwNC45MiAyMzIuNDYgOTYuMTQKICBRIDIzMi44MyA4OC42NiAyMzUuNTcgODIuNzMKICBDIDI0NS4yOCA2MS43OSAyNjguMDMgNDkuNzUgMjkwLjUyIDUyLjA5CiAgUSAzMTQuNjggNTQuNjAgMzI5LjA4IDc0LjM2CiAgQyAzMzQuNzkgODIuMjAgMzM3LjU5IDkxLjUyIDMzOC41NSAxMDEuMDEKICBRIDMzOS4wMiAxMDUuNjAgMzM3LjU1IDExMC43NwogIFEgMzMyLjQxIDEyOC44MyAzMTUuMTIgMTMyLjUxCiAgQyAzMTEuNjggMTMzLjI1IDMwNi4zOCAxMzMuMzkgMzAzLjUyIDEzMy4wNQogIFEgMjg4LjQxIDEzMS4yNSAyNzkuNTEgMTIwLjA2CiAgQyAyNzYuMDEgMTE1LjY1IDI3NC4wNSAxMDkuNjggMjc0LjIyIDEwNC41MgogIEMgMjc0LjUxIDk1Ljg2IDI4MC44MSA5MC41MSAyODkuMjcgOTAuMDYKICBRIDI5NS41NiA4OS43MyAyOTkuMTMgOTQuNjEKICBDIDMwMS43MCA5OC4xMyAzMDEuMjEgMTAwLjUzIDI5OC40MCAxMDQuMTAKICBDIDI5OC4xNSAxMDQuNDIgMjk4LjAxIDEwNC44MSAyOTguMDAgMTA1LjIyCiAgUSAyOTcuOTUgMTA4LjM4IDMwMS43OSAxMDguOTMKICBaIgovPgo8L3N2Zz4K"); -webkit-mask: var(--mark-src) center/contain no-repeat; mask: var(--mark-src) center/contain no-repeat; /* per-mark control */ --jx: translateX(0px); --flip: 1; /* RIGHT marks set this to -1 */ --d: 0s; /* stagger delay */ --op: 0.14; /* glow strengths (tier overrides these) */ --gY: 0.55; /* yellow */ --gO: 0.30; /* orange */ --gR: 0.22; /* red */ background-color:#ffe95a; opacity:0; /* IMPORTANT: keep all transforms in ONE place so animation doesn't wipe mirroring */ transform: translateZ(0) var(--jx) scaleX(var(--flip)); /* ONE-SHOT */ animation: triskeleInk20 20s linear 1 both; animation-delay: var(--d); } #excerpt .triskele-mark::before{ content:""; position:absolute; inset:0; -webkit-mask: var(--mark-src) center/contain no-repeat; mask: var(--mark-src) center/contain no-repeat; background-color:#ffe95a; opacity:0; pointer-events:none; transform: translateZ(0) var(--jx) scaleX(var(--flip)); animation: triskeleGlow20 20s linear 1 both; animation-delay: var(--d); } /* Left/right anchoring (kept), mirroring via --flip (no transform override) */ #excerpt .triskele-left{ left: clamp(92px, 7.2vw, 210px); } #excerpt .triskele-right{ right: clamp(140px, 14vw, 420px); --flip: -1; } /* --------------------------------------------------------- KEYFRAMES (20s) - Flicker-in: 0–10% - HOLD yellow: 10–60% - Shift to ember: 60–80% - Slow fade: 80–100% (ends OFF) --------------------------------------------------------- */ @keyframes triskeleInk20{ 0% { opacity:0; background-color:#ffe95a; } 3% { opacity: calc(var(--op) * 0.35); background-color:#ffe95a; } 6% { opacity: calc(var(--op) * 0.85); background-color:#ffe95a; } 8% { opacity: calc(var(--op) * 0.55); background-color:#ffe95a; } 10% { opacity: var(--op); background-color:#ffe95a; } 60% { opacity: var(--op); background-color:#ffe95a; } 70% { opacity: calc(var(--op) * 0.95); background-color:#ff9a2a; } 80% { opacity: calc(var(--op) * 0.85); background-color:#ff2a1a; } 100% { opacity:0; background-color:#ff2a1a; } } @keyframes triskeleGlow20{ 0% { opacity:0; filter:none; } 3%{ opacity:0.35; filter: drop-shadow(0 0 10px rgba(255,235,90, calc(var(--gY) * 0.55))) drop-shadow(0 0 20px rgba(255,160,45, calc(var(--gO) * 0.35))) drop-shadow(0 0 28px rgba(255,60,20, calc(var(--gR) * 0.22))); } 6%{ opacity:0.85; filter: drop-shadow(0 0 12px rgba(255,235,90, var(--gY))) drop-shadow(0 0 26px rgba(255,160,45, var(--gO))) drop-shadow(0 0 36px rgba(255,60,20, var(--gR))); } 8%{ opacity:0.55; filter: drop-shadow(0 0 10px rgba(255,235,90, calc(var(--gY) * 0.75))) drop-shadow(0 0 22px rgba(255,160,45, calc(var(--gO) * 0.60))) drop-shadow(0 0 32px rgba(255,60,20, calc(var(--gR) * 0.55))); } 10%{ opacity:0.95; filter: drop-shadow(0 0 12px rgba(255,235,90, var(--gY))) drop-shadow(0 0 26px rgba(255,160,45, var(--gO))) drop-shadow(0 0 36px rgba(255,60,20, var(--gR))); } 60%{ opacity:0.95; filter: drop-shadow(0 0 12px rgba(255,235,90, var(--gY))) drop-shadow(0 0 26px rgba(255,160,45, var(--gO))) drop-shadow(0 0 36px rgba(255,60,20, var(--gR))); } 70%{ opacity:0.80; filter: drop-shadow(0 0 10px rgba(255,160,45, calc(var(--gO) * 1.05))) drop-shadow(0 0 20px rgba(255,120,30, calc(var(--gR) * 0.95))) drop-shadow(0 0 28px rgba(255,40,15, calc(var(--gR) * 0.70))); } 80%{ opacity:0.70; filter: drop-shadow(0 0 8px rgba(255,60,20, calc(var(--gR) * 1.10))) drop-shadow(0 0 16px rgba(255,120,30, calc(var(--gR) * 0.85))) drop-shadow(0 0 22px rgba(255,40,15, calc(var(--gR) * 0.60))); } 100%{ opacity:0; filter:none; } } /* --------------------------------------------------------- BASELINE ANCHORS (unchanged positions) --------------------------------------------------------- */ #excerpt .triskele-big{ top:14%; width:clamp(190px, 18vw, 280px); height:clamp(190px, 18vw, 280px); --op: 0.64; --gY: 0.85; --gO: 0.55; --gR: 0.34; } #excerpt .triskele-med{ top:30%; width:clamp(110px, 10vw, 170px); height:clamp(110px, 10vw, 170px); --op: 0.34; --gY: 1.00; --gO: 0.80; --gR: 0.55; } /* --------------------------------------------------------- 4 TIERS --------------------------------------------------------- */ #excerpt .tier-big{ width:clamp(170px, 14vw, 230px); height:clamp(170px, 14vw, 230px); --op: 0.46; --gY: 0.70; --gO: 0.48; --gR: 0.30; } #excerpt .tier-medium{ width:clamp(130px, 11vw, 175px); height:clamp(130px, 11vw, 175px); --op: 0.30; --gY: 0.55; --gO: 0.38; --gR: 0.24; } #excerpt .tier-mediumsmall{ width:clamp(110px, 9.5vw, 150px); height:clamp(110px, 9.5vw, 150px); --op: 0.22; --gY: 0.42; --gO: 0.28; --gR: 0.18; } #excerpt .tier-small{ width:clamp(86px, 7.8vw, 120px); height:clamp(86px, 7.8vw, 120px); --op: 0.14; --gY: 0.30; --gO: 0.20; --gR: 0.12; } /* Optional clump knob */ #excerpt .excerpt-side-marks.is-clumped{ transform: scaleY(0.78); transform-origin: top; } /* Right-top balance positions (lowered; rt1 is big like left) */ #excerpt .rt1{ top: 14%; --jx: translateX(-22px); } /* big */ #excerpt .rt2{ top: 20%; --jx: translateX( 18px); } #excerpt .rt3{ top: 26%; --jx: translateX( -8px); } #excerpt .rt4{ top: 32%; --jx: translateX( 26px); } /* --------------------------------------------------------- VIEWPORT GATE (default paused; runs only when #excerpt.is-inview) --------------------------------------------------------- */ #excerpt:not(.is-inview) .excerpt-side-marks .triskele-mark, #excerpt:not(.is-inview) .excerpt-side-marks .triskele-mark::before{ animation-play-state: paused !important; } /* Reduced motion + mobile */ @media (prefers-reduced-motion: reduce){ #excerpt .triskele-mark, #excerpt .triskele-mark::before{ animation:none !important; opacity:0.25; } } @media (max-width:576px){ #excerpt .excerpt-side-marks{ display:none; } } /* ========================================================= EXCERPT — Force true dark background (kill accidental grey) Put this AFTER template/theme CSS so it wins. ========================================================= */ #excerpt.excerpt.section{ background: #000 !important; /* true black */ background-color: #000 !important; } /* If your template paints section backgrounds via CSS variables */ #excerpt{ --background-color: #000; --surface-color: transparent; } /* Ensure your marks layer isn't tinting the whole section */ #excerpt .excerpt-side-marks{ background: transparent !important; } /* If any template overlay/pseudo-element is causing haze, kill it */ #excerpt::before, #excerpt::after{ content: none !important; display: none !important; } /* (Optional) If the wrapper around excerpt is applying a grey wash */ #excerpt .container{ background: transparent !important; } /* ========================================================= EXCERPT SECTION Inline section styles for background control and excerpt toggle ========================================================= */ /* Section background reset */ #excerpt.excerpt.section{ background: #000 !important; background-color: #000 !important; } #excerpt{ --background-color: #000; --surface-color: transparent; } #excerpt::before, #excerpt::after{ content: none !important; display: none !important; } #excerpt .container, #excerpt .excerpt-side-marks{ background: transparent !important; } /* --------------------------------------------------------- Excerpt disclosure Uses a wrapper state class instead of fragile sibling logic --------------------------------------------------------- */ #excerpt [data-excerpt] .excerpt-extra{ display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.55s ease, opacity 0.25s ease; } #excerpt [data-excerpt] .excerpt-extra-inner{ min-height: 0; overflow: hidden; } #excerpt [data-excerpt].is-open .excerpt-extra{ grid-template-rows: 1fr; opacity: 1; } /* Toggle control */ #excerpt .btn-read-more[data-toggle="excerpt"]{ cursor: pointer; font: inherit; } /* Toggle icon motion */ #excerpt .btn-read-more[data-toggle="excerpt"] i{ display: inline-block; transition: transform 0.25s ease; } #excerpt [data-excerpt].is-open .btn-read-more[data-toggle="excerpt"] i{ transform: rotate(180deg); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ #excerpt [data-excerpt] .excerpt-extra, #excerpt .btn-read-more[data-toggle="excerpt"] i{ transition: none !important; } } /* --------------------------------------------------------- Excerpt disclosure Uses a wrapper state class instead of fragile sibling logic --------------------------------------------------------- */ #excerpt [data-excerpt] .excerpt-extra{ display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 0.55s ease, opacity 0.25s ease; } #excerpt [data-excerpt] .excerpt-extra-inner{ min-height: 0; overflow: hidden; } #excerpt [data-excerpt].is-open .excerpt-extra{ grid-template-rows: 1fr; opacity: 1; } /* ========================================================= EXCERPT — disclosure / accordion behavior ========================================================= */ #excerpt .book-page-design { position: relative; } #excerpt .excerpt-content, #excerpt .excerpt-preview, #excerpt .excerpt-extra, #excerpt .excerpt-extra-inner { position: relative; z-index: 2; } #excerpt .page-decoration { position: absolute; inset: auto 0 0 0; z-index: 0; pointer-events: none; } #excerpt [data-excerpt] .excerpt-extra { max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height 0.6s ease, opacity 0.25s ease, visibility 0s linear 0.6s; } #excerpt [data-excerpt].is-open .excerpt-extra { opacity: 1; visibility: visible; transition: max-height 0.6s ease, opacity 0.25s ease, visibility 0s linear 0s; } #excerpt [data-excerpt] .excerpt-extra-inner { display: block; overflow: visible; padding-top: 1rem; color: inherit; } #excerpt [data-excerpt] .excerpt-extra-inner > * { display: block; color: inherit; } #excerpt [data-excerpt] .excerpt-extra-inner > *:first-child { margin-top: 0; } #excerpt [data-excerpt] .excerpt-extra-inner > *:last-child { margin-bottom: 0; } #excerpt .btn-read-more[data-toggle="excerpt"] { cursor: pointer; } #excerpt .btn-read-more[data-toggle="excerpt"] i { display: inline-block; transition: transform 0.25s ease; } #excerpt [data-excerpt].is-open .btn-read-more[data-toggle="excerpt"] i { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { #excerpt [data-excerpt] .excerpt-extra, #excerpt .btn-read-more[data-toggle="excerpt"] i { transition: none !important; } } /*============================================================== Excerpt Section — Readable Literary Pass Safe version: - Keeps existing HTML - Keeps existing JS toggle behavior - Leaves decorative side marks and rune systems alone ==============================================================*/ .excerpt { padding: var(--section-pad-y, clamp(3rem, 2.6rem + 2vw, 4.5rem)) 0; background-color: var(--background-color); overflow: hidden; .book-excerpt-wrapper { position: relative; } /*------------------------------------------------------------ # Page container ------------------------------------------------------------*/ .book-page-design { background-color: #e7e1d8; padding: clamp(1.25rem, 1rem + 1vw, 2.5rem); border-radius: var(--radius-lg, 1rem); border: 1px solid rgba(15, 22, 17, 0.12); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42); position: relative; overflow: hidden; max-width: min(72ch, 100%); margin-inline: auto; &::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 0.3125rem; background: linear-gradient( 90deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), transparent 20%) 100% ); } .page-number { position: absolute; top: 0.95rem; right: 1.1rem; font-family: var(--heading-font); font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem); font-weight: 650; letter-spacing: 0.04em; color: rgba(15, 22, 17, 0.5); } .chapter-title { text-align: center; text-wrap: balance; font-family: var(--heading-font); color: #101713; font-size: clamp(1.125rem, 1.02rem + 0.55vw, 1.5rem); font-weight: 700; line-height: 1.2; margin-bottom: clamp(1rem, 0.85rem + 0.6vw, 1.5rem); padding-top: clamp(0.5rem, 0.42rem + 0.2vw, 0.75rem); position: relative; &::after { content: ""; position: absolute; bottom: -0.55rem; left: 50%; transform: translateX(-50%); width: 3.5rem; height: 0.125rem; background-color: color-mix(in srgb, var(--accent-color), transparent 20%); } } /*---------------------------------------------------------- # Excerpt typography ----------------------------------------------------------*/ .excerpt-content { font-family: "Lora", Georgia, "Times New Roman", serif; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.72; color: rgba(15, 22, 17, 0.86); font-optical-sizing: auto; p { margin-bottom: clamp(0.95rem, 0.82rem + 0.45vw, 1.25rem); text-align: left; text-wrap: pretty; overflow-wrap: anywhere; hyphens: auto; } .first-letter { &::first-letter, &:first-letter { font-size: clamp(3rem, 2.4rem + 1.9vw, 4.25rem); float: left; line-height: 0.84; margin-right: 0.55rem; margin-top: 0.08rem; color: #111814; font-family: var(--heading-font); font-weight: 800; } } .dialogue { margin-block: clamp(0.95rem, 0.8rem + 0.4vw, 1.2rem); padding-left: clamp(0.9rem, 0.82rem + 0.35vw, 1.2rem); border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 58%); font-style: italic; color: rgba(15, 22, 17, 0.94); } } .page-decoration { position: absolute; bottom: 0.9rem; left: 0; width: 100%; display: flex; justify-content: center; &::after { content: "✦"; font-size: 1.05rem; color: color-mix(in srgb, var(--accent-color), transparent 35%); } } } /*------------------------------------------------------------ # CTA button ------------------------------------------------------------*/ .cta-wrapper { margin-top: clamp(1.1rem, 1rem + 0.5vw, 1.75rem); .btn-read-more { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; background-color: #e7e1d8; color: var(--accent-color); padding: clamp(0.72rem, 0.66rem + 0.24vw, 0.88rem) clamp(1.2rem, 1.06rem + 0.65vw, 1.75rem); border-radius: 999px; border: 2px solid color-mix(in srgb, var(--accent-color), transparent 68%); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); font-size: clamp(0.95rem, 0.91rem + 0.2vw, 1rem); font-weight: 600; letter-spacing: 0.01em; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; i { transition: transform 0.25s ease; } &:hover { background-color: var(--accent-color); color: var(--contrast-color); border-color: var(--accent-color); transform: translateY(-2px); i { transform: translateX(4px); } } &:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-color), white 25%); outline-offset: 3px; } } } /*------------------------------------------------------------ # Existing toggle compatibility # Keep this simple so it works with your current JS: # JS uses hidden + aria-expanded + .is-open ------------------------------------------------------------*/ .excerpt-extra[hidden] { display: none !important; } .excerpt-extra { margin-top: 0; } .excerpt-extra-inner { padding-top: 1rem; } .book-excerpt-wrapper.is-open { .btn-read-more i.bi-arrow-up { transform: none; } } /*------------------------------------------------------------ # Responsive tuning ------------------------------------------------------------*/ @media (max-width: 992px) { .book-page-design { max-width: min(70ch, 100%); } } @media (max-width: 768px) { .book-page-design { max-width: 100%; padding: clamp(1.2rem, 1.05rem + 0.8vw, 1.7rem); } .page-number { top: 0.9rem; right: 0.95rem; } .book-page-design .excerpt-content { font-size: clamp(1.05rem, 1rem + 0.28vw, 1.125rem); line-height: 1.7; } .book-page-design .excerpt-content .dialogue { padding-left: 0.9rem; } } @media (max-width: 480px) { .book-page-design { border-radius: 0.85rem; padding: 1.15rem 1rem 1.35rem; } .book-page-design .chapter-title { margin-bottom: 1rem; } .book-page-design .excerpt-content { font-size: 1.0625rem; line-height: 1.68; } .book-page-design .excerpt-content .first-letter { &::first-letter, &:first-letter { font-size: 3rem; margin-right: 0.45rem; } } .book-page-design .page-number { font-size: 0.8125rem; } } @media (prefers-reduced-motion: reduce) { .cta-wrapper .btn-read-more, .cta-wrapper .btn-read-more i { transition: none !important; } .cta-wrapper .btn-read-more:hover { transform: none; } } }