/* Shared night presentation. Each public theme retains its own palette. */ :root:is([data-theme="dusk"], [data-theme="halloween"]) { color-scheme: dark; --page: #211f32; --paper: #302a41; --ink: #fff1e6; --soft: #d5c7d5; --line: #79657e; --accent: #ffb79d; --blue: #c2b6ff; --chip: #302a41; --leaf: #a9cbb4; } :root:is([data-theme="dusk"], [data-theme="halloween"]) body { background: var(--page); color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header { color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header .v7-logo em { color: var(--accent); } :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header .v7-nav a { color: inherit; } :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header .v7-nav a:is(:hover,[aria-current]) { border-color: var(--accent); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(a,button):focus-visible { outline-color: var(--accent); } /* Recolour the live SVG sky itself, preserving the animated artwork. */ :root:is([data-theme="dusk"], [data-theme="halloween"]) #skyGrad stop:nth-child(1) { stop-color: #292940; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #skyGrad stop:nth-child(2) { stop-color: #6d526f; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #skyGrad stop:nth-child(3) { stop-color: #e8a58e; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #sunGlow stop { stop-color: #ffbd91; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world rect[fill="#8FC0D8"] { fill: #292940; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.stage, .hero, .security .hero, .offer-page .hero) { background: #292940; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .hero-copy { background: transparent; color: var(--ink); text-shadow: 0 1px 14px #211f32; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.caption h2, .caption #capP, .endcard h2, .endcard p, .brand) { color: var(--ink); text-shadow: 0 1px 14px #211f3280; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .brand em { color: var(--accent); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.card, .platform-plan, .security-panel, .booking-panel, .site-cookie-consent, .site-cookie-settings) { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 5px 7px 0 #16132130; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.contact, .booking-placeholder, .plan-banner) { background: #3c334b; color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.detail-band, .security-panel__item, .booking-panel-heading) { border-color: var(--line); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.offer .number, .plan-saving) { color: var(--accent); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.plan-tax, .plan-monthly-equivalent, .platform-plans-intro) { color: var(--soft); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .recommend { background: #474059; color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.button, .btn.primary, .hero-copy .button, .contact .button, .platform-plan .button) { background: var(--accent); color: #292337; border-color: var(--accent); text-shadow: none; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.btn.ghost, .stagebtn, .animation-refresh, .plan-toggle, .site-cookie-consent button) { background: var(--paper); color: var(--ink); border-color: var(--line); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .plan-toggle button { color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .plan-toggle button[aria-pressed="true"] { background: var(--accent); color: #292337; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .platform-plan button:disabled { background: #484052; color: #d5c7d5; border-color: var(--line); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .footer { background: #211b2d; color: var(--ink); border-color: #79657e; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .booking-page { background-image: radial-gradient(ellipse at 85% 0%, #77536a 0, transparent 60%), linear-gradient(#292940, #211f32); background-size: 100% 100%; } @media (max-width: 900px) { :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header.navigation-ready .v7-nav { background: var(--paper); color: var(--ink); border-color: var(--line); } :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header.navigation-ready .v7-nav a:is(:hover,[aria-current]) { background: #474059; color: var(--ink); } } /* The garden after sunset: indigo shade, peach light and luminous details. */ .dusk-atmosphere { display: none; } :root:is([data-theme="dusk"], [data-theme="halloween"]) { --page: #17172b; --paper: #29263f; --line: #67536e; --accent: #ffc09c; background: var(--page); } :root:is([data-theme="dusk"], [data-theme="halloween"]) body { background: radial-gradient(ellipse at 100% 15%, #74435a30, transparent 45%), var(--page); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .dusk-atmosphere { display: block; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #skyGrad stop:nth-child(1) { stop-color: #12172f; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #skyGrad stop:nth-child(2) { stop-color: #3b315a; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #skyGrad stop:nth-child(3) { stop-color: #ab667a; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world rect[fill="#8FC0D8"] { fill: #12172f; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.stage, .hero, .security .hero, .offer-page .hero) { background: #171a33; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="sky"] ellipse[fill="#FFFFFF"] { fill: #bc96b8; opacity: .34; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #solutionsDraftGrid path, :root:is([data-theme="dusk"], [data-theme="halloween"]) #solutionsDraftMajor path { stroke: #ddabde; stroke-opacity: .035; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="sun"] { filter: drop-shadow(0 0 16px #b8bdff50); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="sun"] [fill="#F6C453"] { fill: #ffbf8c; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="sun"] rect { opacity: .3; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="far"] > path:first-child { fill: #595677; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="far"] > g { fill: #393d5c; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="far"] > path:last-child { fill: #454866; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="soil"] > rect[fill="#4B2F3D"] { fill: #282039; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#40283A"] { fill: #211b31; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#33202C"] { fill: #191629; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#5A3B4A"] { fill: #43304e; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#2A1A24"] { fill: #151424; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#5FA463"] { fill: #4b696e; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#4E9455"] { fill: #374e5a; } /* Grade complete object layers, including skin, clothing, tools and SVG icons. */ :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="fig"], :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="can"], :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="plant"], :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="bg"] { filter: url(#duskLight); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) rect[fill="#FFFFFF"] { fill: #efe1eb; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="water"] { filter: drop-shadow(0 0 3px #9daaff80); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="agents"] { filter: drop-shadow(0 0 5px #ffd09590); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [stroke="#8EF0C2"] { stroke: #b8a1ee; filter: drop-shadow(0 0 3px #a48dea70); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [fill="#8EF0C2"] { fill: #d3bbff; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .offer-tree > svg { filter: brightness(.8) sepia(.2) hue-rotate(325deg) drop-shadow(0 0 7px #c594b22b); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .tree-line { stroke: #a2a2be; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .tree-leaf { fill: #7b8b96; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .dusk-star { opacity: var(--star-opacity); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .dusk-firefly { opacity: .7; } @media (prefers-reduced-motion: no-preference) { :root:is([data-theme="dusk"], [data-theme="halloween"]) .dusk-star { animation: dusk-glimmer var(--glimmer) ease-in-out var(--delay) infinite alternate; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .dusk-firefly { animation: dusk-drift var(--glimmer) ease-in-out var(--delay) infinite alternate; } } @keyframes dusk-glimmer { from { opacity: .15; } to { opacity: var(--star-opacity); } } @keyframes dusk-drift { from { opacity: .15; transform: translate(0, 3px); } to { opacity: .9; transform: translate(9px, -12px); } } :root:is([data-theme="dusk"], [data-theme="halloween"]) .visual-paused .dusk-atmosphere * { animation-play-state: paused; } /* Carry the same reflected light through the rest of the public interface. */ :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.card,.platform-plan,.security-panel,.booking-panel,.documentation-dialog) { background: linear-gradient(135deg, #4e354a60, transparent 55%), var(--paper); border-color: #aa7d9466; box-shadow: inset 0 1px 0 #ffcda31c, 0 15px 45px #080b2338; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.button,.btn.primary,.documentation-copy) { box-shadow: inset 0 1px 0 #fff4dc80, 0 4px 24px #ffae782b; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .contact { background: radial-gradient(ellipse at 95% 0, #8c4e674d, transparent 65%), #30273e; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .footer { background: linear-gradient(#201a30, #141426); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .documentation-dialog { color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .documentation-dialog::backdrop { background: #101326aa; } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.documentation-toolbar,.documentation-text,.documentation-close,.documentation-retry) { border-color: var(--line); } :root:is([data-theme="dusk"], [data-theme="halloween"]) :is(.documentation-text,.documentation-retry) { background: #1d1c30; color: var(--ink); scrollbar-color: #a38cad #1d1c30; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .documentation-close { color: var(--ink); } :root:is([data-theme="dusk"], [data-theme="halloween"]) .documentation-copy { background: var(--accent); color: #292337; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .documentation-advice { background: #43334a; color: #f5d2b0; border-color: #ac7d76; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .booking-page { background-image: radial-gradient(ellipse at 85% 0%, #97557070 0, transparent 55%), linear-gradient(#20223d, #17172b); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="bees"], :root:is([data-theme="dusk"], [data-theme="halloween"]) #world [data-scene-layer="fx"] { filter: drop-shadow(0 0 4px #ffc78b66); } :root:is([data-theme="dusk"], [data-theme="halloween"]) #stormGrad stop:first-child { stop-color: #17182f; } :root:is([data-theme="dusk"], [data-theme="halloween"]) #stormGrad stop:last-child { stop-color: #494361; } :root:is([data-theme="dusk"], [data-theme="halloween"]) header.v7-header .v7-logo svg { filter: sepia(.15) drop-shadow(0 0 6px #df96b733); } /* Dusk's moon inherits the existing sunrise motion, including service scenes. */ .dusk-moon { display: none; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .daylight-sun { display: none; } :root:is([data-theme="dusk"], [data-theme="halloween"]) .dusk-moon { display: block; } .scene-host #finaleBirds.manual-flight, body.visual-only #finaleBirds.manual-flight { display: block !important; } /* Decorative storm layers must not intercept the soil logo's hit target. Scene-wide lightning still receives clicks on the enclosing SVG. */ #world { pointer-events: none; } #world [data-soil-brand] { pointer-events: all; } /* Depth feedback appears only after clicking the hidden trigger. */ [data-soil-brand-face] { transform-box: fill-box; transform-origin: center; pointer-events: none; } /* Halloween extends the night scene; daylight and Dusk remain independent. */ :root[data-theme="halloween"] { --page: #281b20; --paper: #3b2929; --ink: #fff3df; --soft: #e3cbbb; --line: #956954; --accent: #ffb15c; --blue: #ebc187; --chip: #3b2929; --leaf: #d2b575; } :root[data-theme="halloween"] #skyGrad stop:nth-child(1) { stop-color: #29202c; } :root[data-theme="halloween"] #skyGrad stop:nth-child(2) { stop-color: #79504b; } :root[data-theme="halloween"] #skyGrad stop:nth-child(3) { stop-color: #e6a360; } :root[data-theme="halloween"] #world rect[fill="#8FC0D8"] { fill: #29202c; } :root[data-theme="halloween"] :is(.stage,.hero,.security .hero,.offer-page .hero) { background: #29202c; } :root[data-theme="halloween"] #duskMoonSurface stop:nth-child(1) { stop-color: #fff3c4; } :root[data-theme="halloween"] #duskMoonSurface stop:nth-child(2) { stop-color: #ffc572; } :root[data-theme="halloween"] #duskMoonSurface stop:nth-child(3) { stop-color: #e18b48; } :root[data-theme="halloween"] #duskMoonHalo stop { stop-color: #ffaf55; } :root[data-theme="halloween"] #world [data-scene-layer="sun"] { filter: drop-shadow(0 0 20px #ffac5550); } :root[data-theme="halloween"] #world [data-scene-layer="far"] > g { fill: #734a3a; } /* Halloween soil: copper topsoil, burnt umber depth and cocoa stones. */ :root[data-theme="halloween"] #world [data-scene-layer="soil"] > rect[fill="#4B2F3D"] { fill: #583522; } :root[data-theme="halloween"] #world [data-scene-layer="soil"] [fill="#40283A"] { fill: #3f281d; } :root[data-theme="halloween"] #world [data-scene-layer="soil"] [fill="#33202C"] { fill: #291d17; } :root[data-theme="halloween"] #world [data-scene-layer="soil"] [fill="#5A3B4A"] { fill: #855132; } :root[data-theme="halloween"] #world [data-scene-layer="soil"] [fill="#2A1A24"] { fill: #21160f; } :root[data-theme="halloween"] #world [fill="#5FA463"] { fill: #9e684b; } :root[data-theme="halloween"] #world [fill="#4E9455"] { fill: #76503f; } :root[data-theme="halloween"] .tree-leaf { fill: #ca914f; } :root[data-theme="halloween"] .booking-page { background-image: radial-gradient(ellipse at 85% 0%, #ab643a55, transparent 55%), linear-gradient(#443039, #281b20); } .halloween-decorations { display: none; } :root[data-theme="halloween"] .halloween-decorations { display: block; } :root[data-theme="halloween"] .pumpkin-face { filter: drop-shadow(0 0 5px #ffcf69); } /* Copper, ochre and russet carry autumn through the living garden. */ :root[data-theme="halloween"] #world [data-scene-layer="far"] > path:first-child { fill: #a77a56; } :root[data-theme="halloween"] #world [data-scene-layer="far"] > path:last-child { fill: #8b5b43; } :root[data-theme="halloween"] #world path[fill="#58B26E"] { fill: #df9b42; } :root[data-theme="halloween"] #world path[stroke="#3F8F55"] { stroke: #985537; } :root[data-theme="halloween"] #world [stroke="#2E7D4F"] { stroke: #876443; } :root[data-theme="halloween"] #world [data-scene-layer="bg"] path[fill="#58B26E"]:nth-child(even) { fill: #c56d3d; } :root[data-theme="halloween"] #duskMist stop:first-child { stop-color: #edc18d; } :root[data-theme="halloween"] #duskHorizon stop:nth-child(2) { stop-color: #dc924f; } :root[data-theme="halloween"] :is(.card,.platform-plan,.security-panel,.booking-panel,.documentation-dialog) { background: linear-gradient(135deg, #b47b3530, transparent 55%), var(--paper); border-color: #b6885d80; } :root[data-theme="halloween"] .contact { background: radial-gradient(ellipse at 95% 0, #c68b4940, transparent 65%), #3b2929; } :root[data-theme="halloween"] .footer { background: linear-gradient(#302225, #211b20); } /* Faux perspective: narrow to an edge, turn over, then catch the light. */ .autumn-leaf-tumble { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { :root[data-theme="halloween"] .autumn-leaf-fall { animation: autumn-fall var(--fall-duration) linear var(--fall-delay) infinite; } :root[data-theme="halloween"] .autumn-leaf-tumble { animation: autumn-tumble var(--tumble-duration) ease-in-out var(--fall-delay) infinite; } } @keyframes autumn-fall { 0% { opacity: 0; transform: translate(-35px, -270px) scale(.7); } 12% { opacity: .9; } 30% { transform: translate(38px, -205px) scale(.9); } 55% { transform: translate(-24px, -125px) scale(1.12); } 78% { opacity: .9; transform: translate(44px, -58px) scale(.95); } 100% { opacity: 0; transform: translate(5px, 0) scale(.8); } } @keyframes autumn-tumble { 0%, 100% { transform: rotate(-25deg) scale(1, .85) skewY(8deg); filter: brightness(1.12); } 25% { transform: rotate(35deg) scale(.12, 1) skewY(-12deg); filter: brightness(.78); } 50% { transform: rotate(100deg) scale(-1, .8) skewY(8deg); filter: brightness(.9); } 75% { transform: rotate(195deg) scale(-.12, 1) skewY(-12deg); filter: brightness(1.2); } } :root[data-theme="halloween"] .visual-paused :is(.autumn-leaf-fall,.autumn-leaf-tumble) { animation-play-state: paused; } /* Friendly spirits replace both the main bees and distant bee silhouettes. */ .halloween-ghost { display: none; } :root[data-theme="halloween"] .bee-artwork { display: none; } :root[data-theme="halloween"] .halloween-ghost { display: block; } :root[data-theme="halloween"] .bee-trail circle { fill: #e8d7ff; } :root[data-theme="halloween"] #world [data-scene-layer="bees"] { filter: drop-shadow(0 0 4px #e5caff80); } /* Autumn screens keep warm paper colours instead of Dusk's rose lighting. */ :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) { filter: brightness(.94) sepia(.12); } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) rect[fill="#FFFFFF"] { fill: #fff0cc; } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) [fill="#EEF4F1"] { fill: #ecd7ae; } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) [fill="#DDE8E2"] { fill: #d9bd8e; } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) [fill="#1F4D3A"] { fill: #50351f; } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) [stroke="#1F4D3A"] { stroke: #805735; } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) [fill="#3A4BA0"] { fill: #ac592b; } :root[data-theme="halloween"] #world :is([data-scene-layer="plant"],[data-scene-layer="bg"]) [fill="#8EF0C2"] { fill: #dfb858; } /* Underground connections and junctions glow amber against the cocoa soil. */ :root[data-theme="halloween"] #world [data-scene-layer="soil"] [stroke="#8EF0C2"] { stroke: #edb45d; filter: drop-shadow(0 0 3px #d6813670); } :root[data-theme="halloween"] #world [data-scene-layer="soil"] [fill="#8EF0C2"] { fill: #f5ca7b; } /* Small, asynchronous candle fluctuations; faces never blink off. */ :root[data-theme="halloween"] [data-scene-layer="pumpkins"] > g:nth-child(1) { --candle-duration: 4.7s; --candle-delay: -1.3s; } :root[data-theme="halloween"] [data-scene-layer="pumpkins"] > g:nth-child(2) { --candle-duration: 5.9s; --candle-delay: -3.7s; } :root[data-theme="halloween"] [data-scene-layer="pumpkins"] > g:nth-child(3) { --candle-duration: 5.3s; --candle-delay: -2.1s; } :root[data-theme="halloween"] [data-scene-layer="pumpkins"] > g:nth-child(4) { --candle-duration: 6.7s; --candle-delay: -5.2s; } @media (prefers-reduced-motion: no-preference) { :root[data-theme="halloween"] .pumpkin-face { animation: pumpkin-candle var(--candle-duration, 5s) ease-in-out var(--candle-delay, 0s) infinite; } } @keyframes pumpkin-candle { 0%, 100% { opacity: .95; filter: drop-shadow(0 0 5px #ffcf69); } 18%, 45%, 76% { opacity: 1; filter: drop-shadow(0 0 6px #ffcf69); } 24%, 63% { opacity: .88; filter: drop-shadow(0 0 3.8px #ffc35a); } 31%, 69%, 88% { opacity: .97; filter: drop-shadow(0 0 5.3px #ffcf69); } } :root[data-theme="halloween"] .visual-paused .pumpkin-face { animation-play-state: paused; } /* Rounded autumn clouds drift independently; the moon stays unveiled. */ .halloween-cloud { display: none; } :root[data-theme="halloween"] .daylight-cloud { display: none; } :root[data-theme="halloween"] .halloween-cloud { display: block; } @media (prefers-reduced-motion: no-preference) { :root[data-theme="halloween"] .halloween-cloud { animation: halloween-cloud-drift var(--cloud-duration, 35s) ease-in-out var(--cloud-delay, 0s) infinite alternate; } } @keyframes halloween-cloud-drift { from { transform: translate(-30px, -5px); } to { transform: translate(35px, 6px); } } :root[data-theme="halloween"] .visual-paused .halloween-cloud { animation-play-state: paused; }