/* * Noaptea dintre lumi — local test theme. * Activated only when halloween.js adds .noaptea-dintre-lumi to . */ html.noaptea-dintre-lumi { --between-worlds-ink: rgba(4, 6, 14, 0.6); --between-worlds-violet: rgba(98, 52, 139, 0.48); --between-worlds-blue: rgba(23, 78, 116, 0.44); --between-worlds-ember: rgba(224, 165, 76, 0.72); } html.noaptea-dintre-lumi body { position: relative; isolation: isolate; } .between-worlds-layer { position: fixed; z-index: 9998; inset: 0; overflow: hidden; pointer-events: none; contain: strict; } .between-worlds-threshold-fog { position: absolute; z-index: 10; inset: -18%; background: radial-gradient(ellipse at 12% 30%, rgba(232, 237, 240, .98) 0 12%, rgba(195, 204, 216, .91) 31%, transparent 55%), radial-gradient(ellipse at 46% 63%, rgba(223, 229, 234, .98) 0 16%, rgba(179, 190, 207, .93) 38%, transparent 62%), radial-gradient(ellipse at 83% 29%, rgba(237, 240, 242, .97) 0 14%, rgba(190, 200, 214, .9) 36%, transparent 59%), radial-gradient(ellipse at 76% 78%, rgba(213, 221, 229, .98) 0 18%, rgba(164, 178, 199, .92) 43%, transparent 68%), linear-gradient(115deg, rgba(178, 190, 206, .96), rgba(224, 229, 234, .98) 44%, rgba(160, 173, 194, .95)); filter: blur(16px); opacity: 1; transform: scale(1.08); will-change: opacity, transform, filter; animation: betweenWorldsThresholdClears 7.2s cubic-bezier(.45, .02, .2, 1) .35s forwards; } .between-worlds-threshold-fog::before, .between-worlds-threshold-fog::after { content: ""; position: absolute; inset: -8%; background: radial-gradient(ellipse at 25% 48%, rgba(246, 247, 247, .72) 0 13%, transparent 45%), radial-gradient(ellipse at 72% 46%, rgba(226, 231, 235, .7) 0 17%, transparent 49%); } .between-worlds-threshold-fog::before { transform: translate3d(-5%, -2%, 0); animation: betweenWorldsThresholdDriftLeft 7.2s ease-out .35s forwards; } .between-worlds-threshold-fog::after { transform: translate3d(5%, 3%, 0) scale(1.08); animation: betweenWorldsThresholdDriftRight 7.2s ease-out .35s forwards; } .between-worlds-veil { position: absolute; inset: -8%; background: radial-gradient(circle at 81% 12%, rgba(230, 237, 229, 0.5) 0 2.5%, rgba(142, 161, 184, .18) 7%, transparent 18%), radial-gradient(ellipse at 50% 108%, var(--between-worlds-violet), transparent 63%), linear-gradient(120deg, var(--between-worlds-blue), transparent 34% 62%, var(--between-worlds-ink)); mix-blend-mode: screen; opacity: 0; animation: betweenWorldsReveal 2.8s ease forwards; } .between-worlds-mist { position: absolute; left: -18%; width: 136%; height: 44vh; min-height: 190px; border-radius: 50%; background: radial-gradient(ellipse at 28% 50%, rgba(213, 222, 228, .36), transparent 47%), radial-gradient(ellipse at 67% 58%, rgba(168, 173, 201, .31), transparent 51%); filter: blur(18px); opacity: 1; transform: translate3d(-3%, 0, 0); will-change: transform, opacity; } .between-worlds-mist--far { top: -2%; animation: betweenWorldsMistFar 24s ease-in-out infinite alternate; } .between-worlds-mist--middle { top: 28%; left: -25%; width: 150%; height: 54vh; background: radial-gradient(ellipse at 18% 42%, rgba(226, 232, 235, .42), transparent 38%), radial-gradient(ellipse at 48% 54%, rgba(196, 204, 217, .38), transparent 42%), radial-gradient(ellipse at 78% 38%, rgba(172, 183, 205, .34), transparent 39%); filter: blur(16px); opacity: .96; animation: betweenWorldsMistMiddle 19s ease-in-out infinite alternate; } .between-worlds-mist--near { bottom: -3%; opacity: .92; filter: blur(24px); animation: betweenWorldsMistNear 31s ease-in-out infinite alternate; } .between-worlds-flight { position: absolute; z-index: 2; top: var(--flight-y); left: calc(-1 * var(--flight-width)); width: var(--flight-width); height: auto; filter: brightness(.72) saturate(.72) drop-shadow(0 0 10px rgba(89, 70, 119, .32)); opacity: 0; transform: translate3d(0, 0, 0) scale(.82); will-change: transform, opacity; animation: betweenWorldsFlight var(--flight-time) linear var(--flight-delay) infinite; } .between-worlds-flight--witch { aspect-ratio: 1679 / 937; filter: none; } .between-worlds-flight--bats { aspect-ratio: 2 / 1; filter: none; } .between-worlds-bat { position: absolute; left: var(--bat-x); top: var(--bat-y); width: var(--bat-size); height: auto; opacity: .9; filter: brightness(.76) saturate(.66) drop-shadow(0 0 7px rgba(89, 70, 119, .28)); transform-origin: 50% 58%; will-change: transform; animation: betweenWorldsBatFlap var(--bat-speed) ease-in-out var(--bat-delay) infinite alternate; } .between-worlds-bat--escort { z-index: 1; } .between-worlds-witch-body, .between-worlds-witch-dress, .between-worlds-witch-hair { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(.72) saturate(.72) drop-shadow(0 0 10px rgba(89, 70, 119, .32)); } .between-worlds-witch-body { z-index: 2; } .between-worlds-witch-dress { z-index: 3; opacity: .86; filter: brightness(.88) saturate(.7) drop-shadow(0 0 7px rgba(107, 83, 143, .24)); transform-origin: 68% 53%; will-change: transform; } .between-worlds-witch-dress--outer { clip-path: polygon(29% 40%, 70% 38%, 71% 68%, 51% 84%, 29% 69%); animation: betweenWorldsDressOuter 1.72s ease-in-out -.42s infinite; } .between-worlds-witch-dress--folds { opacity: .7; clip-path: polygon(36% 44%, 69% 38%, 70% 69%, 51% 82%, 35% 67%); animation: betweenWorldsDressFolds 1.39s ease-in-out -.81s infinite; } .between-worlds-witch-dress--hem { opacity: .78; clip-path: polygon(28% 54%, 64% 45%, 66% 74%, 47% 86%, 28% 72%); animation: betweenWorldsDressHem 1.16s ease-in-out -.23s infinite; } .between-worlds-witch-hair { z-index: 4; opacity: .88; filter: brightness(.9) saturate(.72) drop-shadow(0 0 7px rgba(116, 91, 151, .28)); transform-origin: 68% 27%; will-change: transform; } .between-worlds-witch-hair--outer { clip-path: polygon(39% 8%, 69% 10%, 71% 38%, 61% 51%, 39% 45%); animation: betweenWorldsHairOuter 1.55s ease-in-out -.31s infinite; } .between-worlds-witch-hair--middle { opacity: .72; clip-path: polygon(42% 15%, 69% 13%, 69% 42%, 55% 49%, 41% 39%); animation: betweenWorldsHairMiddle 1.28s ease-in-out -.72s infinite; } .between-worlds-witch-hair--tips { opacity: .76; clip-path: polygon(39% 16%, 59% 12%, 60% 45%, 49% 49%, 38% 40%); animation: betweenWorldsHairTips 1.05s ease-in-out -.19s infinite; } @keyframes betweenWorldsReveal { to { opacity: 1; } } @keyframes betweenWorldsThresholdClears { 0%, 12% { opacity: 1; transform: scale(1.08); filter: blur(16px); } 48% { opacity: .78; } 78% { opacity: .28; } 100% { opacity: 0; transform: scale(1.22); filter: blur(30px); visibility: hidden; } } @keyframes betweenWorldsThresholdDriftLeft { to { transform: translate3d(-18%, -7%, 0) scale(1.15); } } @keyframes betweenWorldsThresholdDriftRight { to { transform: translate3d(19%, 8%, 0) scale(1.2); } } @keyframes betweenWorldsMistFar { from { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .68; } to { transform: translate3d(5%, 4%, 0) scale(1.08); opacity: 1; } } @keyframes betweenWorldsMistMiddle { from { transform: translate3d(5%, 1%, 0) scale(1.02); opacity: .72; } to { transform: translate3d(-5%, -3%, 0) scale(1.1); opacity: 1; } } @keyframes betweenWorldsMistNear { from { transform: translate3d(4%, 2%, 0) scale(1.04); opacity: .7; } to { transform: translate3d(-5%, -3%, 0) scale(1.12); opacity: .98; } } @keyframes betweenWorldsFlight { 0% { opacity: 0; transform: translate3d(0, 1vh, 0) scale(.82); } 5% { opacity: .18; } 14% { opacity: .66; } 44% { transform: translate3d(66vw, var(--flight-drift), 0) scale(.94); } 76% { opacity: .58; } 94% { opacity: .2; } 100% { opacity: 0; transform: translate3d(145vw, 1vh, 0) scale(.84); } } @keyframes betweenWorldsBatFlap { 0% { transform: translate3d(0, -2px, 0) rotate(var(--bat-tilt)) scaleY(1); } 42% { transform: translate3d(0, 1px, 0) rotate(var(--bat-tilt)) scaleY(.56); } 100% { transform: translate3d(0, 4px, 0) rotate(var(--bat-tilt)) scaleY(.22); } } @keyframes betweenWorldsHairOuter { 0%, 100% { transform: translate3d(0, -1.8%, 0) rotate(-1.2deg) skewY(-1.8deg); } 25% { transform: translate3d(0, -.3%, 0) rotate(.3deg) skewY(.5deg); } 50% { transform: translate3d(0, 2.2%, 0) rotate(1.7deg) skewY(2.2deg); } 75% { transform: translate3d(0, .4%, 0) rotate(-.2deg) skewY(-.4deg); } } @keyframes betweenWorldsHairMiddle { 0%, 100% { transform: translate3d(0, 1.5%, 0) rotate(1.1deg) skewY(1.5deg); } 25% { transform: translate3d(0, .2%, 0) rotate(-.2deg) skewY(-.4deg); } 50% { transform: translate3d(0, -2%, 0) rotate(-1.8deg) skewY(-2.4deg); } 75% { transform: translate3d(0, -.4%, 0) rotate(.2deg) skewY(.5deg); } } @keyframes betweenWorldsHairTips { 0%, 100% { transform: translate3d(0, -3.5%, 0) rotate(-2.8deg) skewY(-3.5deg); } 25% { transform: translate3d(0, -.7%, 0) rotate(.2deg) skewY(.5deg); } 50% { transform: translate3d(0, 3.8%, 0) rotate(3.2deg) skewY(4deg); } 75% { transform: translate3d(0, .8%, 0) rotate(-.3deg) skewY(-.6deg); } } @keyframes betweenWorldsDressOuter { 0%, 100% { transform: translate3d(0, -1.3%, 0) rotate(-.8deg) skewY(-1deg); } 25% { transform: translate3d(0, -.2%, 0) rotate(.1deg) skewY(.2deg); } 50% { transform: translate3d(0, 1.8%, 0) rotate(1.1deg) skewY(1.4deg); } 75% { transform: translate3d(0, .3%, 0) rotate(-.1deg) skewY(-.2deg); } } @keyframes betweenWorldsDressFolds { 0%, 100% { transform: translate3d(0, 2%, 0) rotate(1.3deg) skewY(1.7deg); } 25% { transform: translate3d(0, .4%, 0) rotate(.2deg) skewY(.3deg); } 50% { transform: translate3d(0, -2.3%, 0) rotate(-1.5deg) skewY(-2deg); } 75% { transform: translate3d(0, -.3%, 0) rotate(.1deg) skewY(.2deg); } } @keyframes betweenWorldsDressHem { 0%, 100% { transform: translate3d(0, -3.3%, 0) rotate(-2deg) skewY(-2.7deg); } 25% { transform: translate3d(0, -.6%, 0) rotate(.2deg) skewY(.4deg); } 50% { transform: translate3d(0, 3.6%, 0) rotate(2.3deg) skewY(3.1deg); } 75% { transform: translate3d(0, .7%, 0) rotate(-.2deg) skewY(-.4deg); } } .between-worlds-test-label { position: absolute; right: 18px; bottom: 18px; padding: 8px 12px; color: rgba(255, 229, 177, .96); border: 1px solid rgba(232, 183, 100, .58); background: rgba(11, 8, 19, .82); box-shadow: 0 0 30px rgba(99, 55, 139, .42); font: 600 10px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; } @media (max-width: 640px) { .between-worlds-mist { height: 27vh; } .between-worlds-flight--witch { --flight-width: clamp(190px, 52vw, 280px) !important; } .between-worlds-flight--bats { --flight-width: clamp(150px, 42vw, 230px) !important; } } @media (prefers-reduced-motion: reduce) { .between-worlds-threshold-fog { display: none; } .between-worlds-mist, .between-worlds-flight, .between-worlds-bat, .between-worlds-witch-dress, .between-worlds-witch-hair { animation: none; } .between-worlds-flight { display: none; } }