/*! FamilyHub beam.css — generated from border-beam 1.4.0 `generateBeamCSS` (MIT © Jakub Antalik, https://beam.jakubantalik.com). * Do not hand-edit: regenerate with the recipe in design/README.md. Host:
…
* Presets: fh-md-sunset | fh-md-ocean | fh-md-colorful (24px cards, light) · fh-md-sunset-dark · fh-pulse-sunset / fh-pulse-sunset-dark (breathing, need beam.js) · * fh-line-ocean (bottom line, 18px fields) · fh-sm-sunset (32px pills). */ @property --beam-angle-fh-md-sunset { syntax: ""; initial-value: 0deg; inherits: true; } @property --beam-opacity-fh-md-sunset { syntax: ""; initial-value: 0; inherits: true; } [data-beam="fh-md-sunset"] { position: relative; border-radius: 24px; overflow: hidden; } [data-beam="fh-md-sunset"][data-active] { animation: beam-spin-fh-md-sunset 1.96s linear infinite, beam-fade-in-fh-md-sunset 0.6s ease forwards; } [data-beam="fh-md-sunset"][data-fading] { animation: beam-spin-fh-md-sunset 1.96s linear infinite, beam-fade-out-fh-md-sunset 0.5s ease forwards; } [data-beam="fh-md-sunset"][data-active]::after, [data-beam="fh-md-sunset"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 23px; padding: 1px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-sunset), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100% ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 80, 50), transparent), radial-gradient(ellipse 60px 35px at 12% -5%, rgb(255, 160, 40), transparent), radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(255, 120, 60), transparent), radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(255, 200, 50), transparent), radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(255, 100, 80), transparent), radial-gradient(ellipse 85px 26px at 55% 100%, rgb(255, 180, 60), transparent), radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 60, 60), transparent), radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(255, 140, 50), transparent), radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(255, 90, 70), transparent); -webkit-mask: conic-gradient( from var(--beam-angle-fh-md-sunset), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-in, xor; mask: conic-gradient( from var(--beam-angle-fh-md-sunset), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-fh-md-sunset) * 0.12 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-md-sunset 12s ease-in-out infinite; } [data-beam="fh-md-sunset"][data-active]::before, [data-beam="fh-md-sunset"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 80, 50, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(255, 160, 40, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(255, 120, 60, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(255, 200, 50, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(255, 100, 80, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(255, 180, 60, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 60, 60, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(255, 140, 50, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(255, 90, 70, 0.45), transparent); box-shadow: inset 0 0 9px 1px rgba(0, 0, 0, 0.14); -webkit-mask-image: conic-gradient( from var(--beam-angle-fh-md-sunset), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-in, source-over; mask-image: conic-gradient( from var(--beam-angle-fh-md-sunset), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: intersect, add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-fh-md-sunset) * 0.26 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); clip-path: inset(0 round 24px); animation: beam-hue-shift-fh-md-sunset 12s ease-in-out infinite; } [data-beam="fh-md-sunset"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 23px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-sunset), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; filter: blur(8px) brightness(1.30) saturate(1.50); pointer-events: none; z-index: 3; opacity: 0; } [data-beam="fh-md-sunset"][data-active] [data-beam-bloom], [data-beam="fh-md-sunset"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-md-sunset) * 0.34 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); } @keyframes beam-spin-fh-md-sunset { to { --beam-angle-fh-md-sunset: 360deg; } } @keyframes beam-fade-in-fh-md-sunset { to { --beam-opacity-fh-md-sunset: 1; } } @keyframes beam-fade-out-fh-md-sunset { from { --beam-opacity-fh-md-sunset: 1; } to { --beam-opacity-fh-md-sunset: 0; } } @keyframes beam-hue-shift-fh-md-sunset { 0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); } 50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.50); } 100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); } } [data-beam="fh-md-sunset"][data-paused], [data-beam="fh-md-sunset"][data-paused]::after, [data-beam="fh-md-sunset"][data-paused]::before, [data-beam="fh-md-sunset"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @property --beam-angle-fh-md-ocean { syntax: ""; initial-value: 0deg; inherits: true; } @property --beam-opacity-fh-md-ocean { syntax: ""; initial-value: 0; inherits: true; } [data-beam="fh-md-ocean"] { position: relative; border-radius: 24px; overflow: hidden; } [data-beam="fh-md-ocean"][data-active] { animation: beam-spin-fh-md-ocean 1.96s linear infinite, beam-fade-in-fh-md-ocean 0.6s ease forwards; } [data-beam="fh-md-ocean"][data-fading] { animation: beam-spin-fh-md-ocean 1.96s linear infinite, beam-fade-out-fh-md-ocean 0.5s ease forwards; } [data-beam="fh-md-ocean"][data-active]::after, [data-beam="fh-md-ocean"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 23px; padding: 1px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-ocean), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100% ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(100, 80, 220), transparent), radial-gradient(ellipse 60px 35px at 12% -5%, rgb(60, 120, 255), transparent), radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(80, 100, 200), transparent), radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(50, 140, 220), transparent), radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(120, 80, 255), transparent), radial-gradient(ellipse 85px 26px at 55% 100%, rgb(70, 130, 255), transparent), radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(140, 100, 240), transparent), radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(90, 110, 230), transparent), radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(130, 70, 255), transparent); -webkit-mask: conic-gradient( from var(--beam-angle-fh-md-ocean), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-in, xor; mask: conic-gradient( from var(--beam-angle-fh-md-ocean), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-fh-md-ocean) * 0.12 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-md-ocean 12s ease-in-out infinite; } [data-beam="fh-md-ocean"][data-active]::before, [data-beam="fh-md-ocean"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(100, 80, 220, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(60, 120, 255, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(80, 100, 200, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(50, 140, 220, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(70, 130, 255, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(140, 100, 240, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(90, 110, 230, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(130, 70, 255, 0.45), transparent); box-shadow: inset 0 0 9px 1px rgba(0, 0, 0, 0.14); -webkit-mask-image: conic-gradient( from var(--beam-angle-fh-md-ocean), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-in, source-over; mask-image: conic-gradient( from var(--beam-angle-fh-md-ocean), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: intersect, add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-fh-md-ocean) * 0.26 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); clip-path: inset(0 round 24px); animation: beam-hue-shift-fh-md-ocean 12s ease-in-out infinite; } [data-beam="fh-md-ocean"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 23px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-ocean), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; filter: blur(8px) brightness(1.30) saturate(1.50); pointer-events: none; z-index: 3; opacity: 0; } [data-beam="fh-md-ocean"][data-active] [data-beam-bloom], [data-beam="fh-md-ocean"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-md-ocean) * 0.34 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); } @keyframes beam-spin-fh-md-ocean { to { --beam-angle-fh-md-ocean: 360deg; } } @keyframes beam-fade-in-fh-md-ocean { to { --beam-opacity-fh-md-ocean: 1; } } @keyframes beam-fade-out-fh-md-ocean { from { --beam-opacity-fh-md-ocean: 1; } to { --beam-opacity-fh-md-ocean: 0; } } @keyframes beam-hue-shift-fh-md-ocean { 0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); } 50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.50); } 100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); } } [data-beam="fh-md-ocean"][data-paused], [data-beam="fh-md-ocean"][data-paused]::after, [data-beam="fh-md-ocean"][data-paused]::before, [data-beam="fh-md-ocean"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @property --beam-angle-fh-md-colorful { syntax: ""; initial-value: 0deg; inherits: true; } @property --beam-opacity-fh-md-colorful { syntax: ""; initial-value: 0; inherits: true; } [data-beam="fh-md-colorful"] { position: relative; border-radius: 24px; overflow: hidden; } [data-beam="fh-md-colorful"][data-active] { animation: beam-spin-fh-md-colorful 1.96s linear infinite, beam-fade-in-fh-md-colorful 0.6s ease forwards; } [data-beam="fh-md-colorful"][data-fading] { animation: beam-spin-fh-md-colorful 1.96s linear infinite, beam-fade-out-fh-md-colorful 0.5s ease forwards; } [data-beam="fh-md-colorful"][data-active]::after, [data-beam="fh-md-colorful"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 23px; padding: 1px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-colorful), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100% ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 50, 100), transparent), radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40, 140, 255), transparent), radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50, 200, 80), transparent), radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30, 185, 170), transparent), radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100, 70, 255), transparent), radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40, 140, 255), transparent), radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 120, 40), transparent), radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 50, 180), transparent), radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180, 40, 240), transparent); -webkit-mask: conic-gradient( from var(--beam-angle-fh-md-colorful), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-in, xor; mask: conic-gradient( from var(--beam-angle-fh-md-colorful), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-fh-md-colorful) * 0.12 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-md-colorful 12s ease-in-out infinite; } [data-beam="fh-md-colorful"][data-active]::before, [data-beam="fh-md-colorful"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent); box-shadow: inset 0 0 9px 1px rgba(0, 0, 0, 0.14); -webkit-mask-image: conic-gradient( from var(--beam-angle-fh-md-colorful), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-in, source-over; mask-image: conic-gradient( from var(--beam-angle-fh-md-colorful), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: intersect, add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-fh-md-colorful) * 0.26 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); clip-path: inset(0 round 24px); animation: beam-hue-shift-fh-md-colorful 12s ease-in-out infinite; } [data-beam="fh-md-colorful"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 23px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-colorful), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; filter: blur(8px) brightness(1.30) saturate(1.50); pointer-events: none; z-index: 3; opacity: 0; } [data-beam="fh-md-colorful"][data-active] [data-beam-bloom], [data-beam="fh-md-colorful"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-md-colorful) * 0.34 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); } @keyframes beam-spin-fh-md-colorful { to { --beam-angle-fh-md-colorful: 360deg; } } @keyframes beam-fade-in-fh-md-colorful { to { --beam-opacity-fh-md-colorful: 1; } } @keyframes beam-fade-out-fh-md-colorful { from { --beam-opacity-fh-md-colorful: 1; } to { --beam-opacity-fh-md-colorful: 0; } } @keyframes beam-hue-shift-fh-md-colorful { 0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); } 50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.50); } 100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); } } [data-beam="fh-md-colorful"][data-paused], [data-beam="fh-md-colorful"][data-paused]::after, [data-beam="fh-md-colorful"][data-paused]::before, [data-beam="fh-md-colorful"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @property --beam-angle-fh-md-sunset-dark { syntax: ""; initial-value: 0deg; inherits: true; } @property --beam-opacity-fh-md-sunset-dark { syntax: ""; initial-value: 0; inherits: true; } [data-beam="fh-md-sunset-dark"] { position: relative; border-radius: 24px; overflow: hidden; } [data-beam="fh-md-sunset-dark"][data-active] { animation: beam-spin-fh-md-sunset-dark 1.96s linear infinite, beam-fade-in-fh-md-sunset-dark 0.6s ease forwards; } [data-beam="fh-md-sunset-dark"][data-fading] { animation: beam-spin-fh-md-sunset-dark 1.96s linear infinite, beam-fade-out-fh-md-sunset-dark 0.5s ease forwards; } [data-beam="fh-md-sunset-dark"][data-active]::after, [data-beam="fh-md-sunset-dark"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 23px; padding: 1px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-sunset-dark), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100% ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 80, 50), transparent), radial-gradient(ellipse 60px 35px at 12% -5%, rgb(255, 160, 40), transparent), radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(255, 120, 60), transparent), radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(255, 200, 50), transparent), radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(255, 100, 80), transparent), radial-gradient(ellipse 85px 26px at 55% 100%, rgb(255, 180, 60), transparent), radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 60, 60), transparent), radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(255, 140, 50), transparent), radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(255, 90, 70), transparent); -webkit-mask: conic-gradient( from var(--beam-angle-fh-md-sunset-dark), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-in, xor; mask: conic-gradient( from var(--beam-angle-fh-md-sunset-dark), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-fh-md-sunset-dark) * 0.26 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-md-sunset-dark 12s ease-in-out infinite; } [data-beam="fh-md-sunset-dark"][data-active]::before, [data-beam="fh-md-sunset-dark"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 80, 50, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(255, 160, 40, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(255, 120, 60, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(255, 200, 50, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(255, 100, 80, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(255, 180, 60, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 60, 60, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(255, 140, 50, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(255, 90, 70, 0.45), transparent); box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.27); -webkit-mask-image: conic-gradient( from var(--beam-angle-fh-md-sunset-dark), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-in, source-over; mask-image: conic-gradient( from var(--beam-angle-fh-md-sunset-dark), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: intersect, add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-fh-md-sunset-dark) * 0.42 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); clip-path: inset(0 round 24px); animation: beam-hue-shift-fh-md-sunset-dark 12s ease-in-out infinite; } [data-beam="fh-md-sunset-dark"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 23px; clip-path: inset(0 round 24px); background: conic-gradient( from var(--beam-angle-fh-md-sunset-dark), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; filter: blur(8px) brightness(1.30) saturate(1.20); pointer-events: none; z-index: 3; opacity: 0; } [data-beam="fh-md-sunset-dark"][data-active] [data-beam-bloom], [data-beam="fh-md-sunset-dark"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-md-sunset-dark) * 0.24 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); } @keyframes beam-spin-fh-md-sunset-dark { to { --beam-angle-fh-md-sunset-dark: 360deg; } } @keyframes beam-fade-in-fh-md-sunset-dark { to { --beam-opacity-fh-md-sunset-dark: 1; } } @keyframes beam-fade-out-fh-md-sunset-dark { from { --beam-opacity-fh-md-sunset-dark: 1; } to { --beam-opacity-fh-md-sunset-dark: 0; } } @keyframes beam-hue-shift-fh-md-sunset-dark { 0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); } 50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.20); } 100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); } } [data-beam="fh-md-sunset-dark"][data-paused], [data-beam="fh-md-sunset-dark"][data-paused]::after, [data-beam="fh-md-sunset-dark"][data-paused]::before, [data-beam="fh-md-sunset-dark"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @property --bw1-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bh1-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bw2-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bh2-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bw3-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bh3-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bgh-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bop-tl-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bop-tr-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bop-bl-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bop-br-fh-pulse-sunset { syntax: ""; initial-value: 1; inherits: true; } @property --bx1-fh-pulse-sunset { syntax: ""; initial-value: 0px; inherits: true; } @property --by1-fh-pulse-sunset { syntax: ""; initial-value: 0px; inherits: true; } @property --bx2-fh-pulse-sunset { syntax: ""; initial-value: 0px; inherits: true; } @property --by2-fh-pulse-sunset { syntax: ""; initial-value: 0px; inherits: true; } @property --bx3-fh-pulse-sunset { syntax: ""; initial-value: 0px; inherits: true; } @property --by3-fh-pulse-sunset { syntax: ""; initial-value: 0px; inherits: true; } @property --beam-opacity-fh-pulse-sunset { syntax: ""; initial-value: 0; inherits: true; } @property --beam-hue-fh-pulse-sunset { syntax: ""; initial-value: 0deg; inherits: true; } [data-beam="fh-pulse-sunset"] { position: relative; border-radius: 24px; overflow: hidden; isolation: isolate; } [data-beam="fh-pulse-sunset"][data-active] { animation: beam-fade-in-fh-pulse-sunset 0.6s ease forwards; } [data-beam="fh-pulse-sunset"][data-fading] { animation: beam-fade-out-fh-pulse-sunset 0.5s ease forwards; } [data-beam="fh-pulse-sunset"][data-active]::after, [data-beam="fh-pulse-sunset"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px; clip-path: inset(0 round 24px); background: radial-gradient(ellipse calc(70px * var(--bw1-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(40px * var(--bh1-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(33% + var(--bx1-fh-pulse-sunset)) calc(-7.4% + var(--by1-fh-pulse-sunset)), rgba(255, 80, 50, var(--bop-tl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(60px * var(--bw2-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh2-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(12% + var(--bx2-fh-pulse-sunset)) calc(-5% + var(--by2-fh-pulse-sunset)), rgba(255, 160, 40, var(--bop-tl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(40px * var(--bw3-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(70px * var(--bh3-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx3-fh-pulse-sunset)) calc(68.3% + var(--by3-fh-pulse-sunset)), rgba(255, 120, 60, var(--bop-bl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(20px * var(--bw1-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh1-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx1-fh-pulse-sunset)) calc(68.3% + var(--by1-fh-pulse-sunset)), rgba(255, 200, 50, var(--bop-bl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(180px * var(--bw2-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh2-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(74.4% + var(--bx2-fh-pulse-sunset)) calc(100% + var(--by2-fh-pulse-sunset)), rgba(255, 100, 80, var(--bop-br-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(85px * var(--bw3-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(26px * var(--bh3-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(55% + var(--bx3-fh-pulse-sunset)) calc(100% + var(--by3-fh-pulse-sunset)), rgba(255, 180, 60, var(--bop-br-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(74px * var(--bw1-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh1-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(93.9% + var(--bx1-fh-pulse-sunset)) calc(0% + var(--by1-fh-pulse-sunset)), rgba(255, 60, 60, var(--bop-tr-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(26px * var(--bw2-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(42px * var(--bh2-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx2-fh-pulse-sunset)) calc(27.1% + var(--by2-fh-pulse-sunset)), rgba(255, 140, 50, var(--bop-tr-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(52px * var(--bw3-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(48px * var(--bh3-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-fh-pulse-sunset)) calc(27.1% + var(--by3-fh-pulse-sunset)), rgba(255, 90, 70, var(--bop-tr-fh-pulse-sunset)), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; will-change: opacity, filter; opacity: calc(var(--beam-opacity-fh-pulse-sunset) * 0.32 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-fh-pulse-sunset))) brightness(1.30) saturate(0.75); } [data-beam="fh-pulse-sunset"][data-active]::before, [data-beam="fh-pulse-sunset"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 24px; clip-path: inset(0 round 24px); background: radial-gradient(ellipse calc(65px * var(--bw1-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh1-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(33% + var(--bx1-fh-pulse-sunset)) calc(-7.4% + var(--by1-fh-pulse-sunset)), rgba(255, 80, 50, var(--bop-tl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(55px * var(--bw2-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--bh2-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(12% + var(--bx2-fh-pulse-sunset)) calc(-5% + var(--by2-fh-pulse-sunset)), rgba(255, 160, 40, var(--bop-tl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(35px * var(--bw3-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(65px * var(--bh3-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx3-fh-pulse-sunset)) calc(68.3% + var(--by3-fh-pulse-sunset)), rgba(255, 120, 60, var(--bop-bl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(15px * var(--bw1-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--bh1-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx1-fh-pulse-sunset)) calc(68.3% + var(--by1-fh-pulse-sunset)), rgba(255, 200, 50, var(--bop-bl-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(173px * var(--bw2-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(28px * var(--bh2-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(74.4% + var(--bx2-fh-pulse-sunset)) calc(100% + var(--by2-fh-pulse-sunset)), rgba(255, 100, 80, var(--bop-br-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(80px * var(--bw3-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(22px * var(--bh3-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(55% + var(--bx3-fh-pulse-sunset)) calc(100% + var(--by3-fh-pulse-sunset)), rgba(255, 180, 60, var(--bop-br-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(69px * var(--bw1-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(28px * var(--bh1-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(93.9% + var(--bx1-fh-pulse-sunset)) calc(0% + var(--by1-fh-pulse-sunset)), rgba(255, 60, 60, var(--bop-tr-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(22px * var(--bw2-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--bh2-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx2-fh-pulse-sunset)) calc(27.1% + var(--by2-fh-pulse-sunset)), rgba(255, 140, 50, var(--bop-tr-fh-pulse-sunset)), transparent), radial-gradient(ellipse calc(47px * var(--bw3-fh-pulse-sunset) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(44px * var(--bh3-fh-pulse-sunset) * var(--bgh-fh-pulse-sunset) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-fh-pulse-sunset)) calc(27.1% + var(--by3-fh-pulse-sunset)), rgba(255, 90, 70, var(--bop-tr-fh-pulse-sunset)), transparent), radial-gradient(ellipse 60px 60px at 0% 0%, rgba(0, 0, 0, calc(0.08 * var(--bop-tl-fh-pulse-sunset))), transparent 70%), radial-gradient(ellipse 60px 60px at 100% 0%, rgba(0, 0, 0, calc(0.08 * var(--bop-tr-fh-pulse-sunset))), transparent 70%), radial-gradient(ellipse 60px 60px at 0% 100%, rgba(0, 0, 0, calc(0.08 * var(--bop-bl-fh-pulse-sunset))), transparent 70%), radial-gradient(ellipse 60px 60px at 100% 100%, rgba(0, 0, 0, calc(0.08 * var(--bop-br-fh-pulse-sunset))), transparent 70%); -webkit-mask-image: linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-over; mask-image: linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: add; pointer-events: none; z-index: 1; will-change: opacity, filter; opacity: calc(var(--beam-opacity-fh-pulse-sunset) * 0.40 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-fh-pulse-sunset))) brightness(1.30) saturate(0.75); } [data-beam="fh-pulse-sunset"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 24px; clip-path: inset(0 round 24px); background: radial-gradient(ellipse calc(84px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(48px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 33% -7.4%, rgba(255, 80, 50, 0.775), transparent), radial-gradient(ellipse calc(72px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(42px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 12% -5%, rgba(255, 160, 40, 0.775), transparent), radial-gradient(ellipse calc(48px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(84px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 2.1% 68.3%, rgba(255, 120, 60, 0.775), transparent), radial-gradient(ellipse calc(216px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 74.4% 100%, rgba(255, 100, 80, 0.775), transparent), radial-gradient(ellipse calc(102px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(31px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 55% 100%, rgba(255, 180, 60, 0.775), transparent), radial-gradient(ellipse calc(89px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 93.9% 0%, rgba(255, 60, 60, 0.775), transparent), radial-gradient(ellipse calc(62px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(58px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 100% 27.1%, rgba(255, 90, 70, 0.775), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; pointer-events: none; z-index: 3; will-change: opacity; opacity: 0; } [data-beam="fh-pulse-sunset"][data-active] [data-beam-bloom], [data-beam="fh-pulse-sunset"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-pulse-sunset) * 0.80 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-fh-pulse-sunset))) brightness(1.30) saturate(0.75); } @keyframes beam-fade-in-fh-pulse-sunset { to { --beam-opacity-fh-pulse-sunset: 1; } } @keyframes beam-fade-out-fh-pulse-sunset { from { --beam-opacity-fh-pulse-sunset: 1; } to { --beam-opacity-fh-pulse-sunset: 0; } } [data-beam="fh-pulse-sunset"][data-paused], [data-beam="fh-pulse-sunset"][data-paused]::after, [data-beam="fh-pulse-sunset"][data-paused]::before, [data-beam="fh-pulse-sunset"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { [data-beam="fh-pulse-sunset"][data-active], [data-beam="fh-pulse-sunset"][data-fading], [data-beam="fh-pulse-sunset"][data-active]::after, [data-beam="fh-pulse-sunset"][data-fading]::after, [data-beam="fh-pulse-sunset"][data-active]::before, [data-beam="fh-pulse-sunset"][data-fading]::before, [data-beam="fh-pulse-sunset"][data-active] [data-beam-bloom], [data-beam="fh-pulse-sunset"][data-fading] [data-beam-bloom] { animation: none !important; } } @property --bw1-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bh1-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bw2-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bh2-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bw3-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bh3-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bgh-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bop-tl-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bop-tr-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bop-bl-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bop-br-fh-pulse-sunset-dark { syntax: ""; initial-value: 1; inherits: true; } @property --bx1-fh-pulse-sunset-dark { syntax: ""; initial-value: 0px; inherits: true; } @property --by1-fh-pulse-sunset-dark { syntax: ""; initial-value: 0px; inherits: true; } @property --bx2-fh-pulse-sunset-dark { syntax: ""; initial-value: 0px; inherits: true; } @property --by2-fh-pulse-sunset-dark { syntax: ""; initial-value: 0px; inherits: true; } @property --bx3-fh-pulse-sunset-dark { syntax: ""; initial-value: 0px; inherits: true; } @property --by3-fh-pulse-sunset-dark { syntax: ""; initial-value: 0px; inherits: true; } @property --beam-opacity-fh-pulse-sunset-dark { syntax: ""; initial-value: 0; inherits: true; } @property --beam-hue-fh-pulse-sunset-dark { syntax: ""; initial-value: 0deg; inherits: true; } [data-beam="fh-pulse-sunset-dark"] { position: relative; border-radius: 24px; overflow: hidden; isolation: isolate; } [data-beam="fh-pulse-sunset-dark"][data-active] { animation: beam-fade-in-fh-pulse-sunset-dark 0.6s ease forwards; } [data-beam="fh-pulse-sunset-dark"][data-fading] { animation: beam-fade-out-fh-pulse-sunset-dark 0.5s ease forwards; } [data-beam="fh-pulse-sunset-dark"][data-active]::after, [data-beam="fh-pulse-sunset-dark"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px; clip-path: inset(0 round 24px); background: radial-gradient(ellipse calc(70px * var(--bw1-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(40px * var(--bh1-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(33% + var(--bx1-fh-pulse-sunset-dark)) calc(-7.4% + var(--by1-fh-pulse-sunset-dark)), rgba(255, 80, 50, var(--bop-tl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(60px * var(--bw2-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh2-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(12% + var(--bx2-fh-pulse-sunset-dark)) calc(-5% + var(--by2-fh-pulse-sunset-dark)), rgba(255, 160, 40, var(--bop-tl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(40px * var(--bw3-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(70px * var(--bh3-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx3-fh-pulse-sunset-dark)) calc(68.3% + var(--by3-fh-pulse-sunset-dark)), rgba(255, 120, 60, var(--bop-bl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(20px * var(--bw1-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh1-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx1-fh-pulse-sunset-dark)) calc(68.3% + var(--by1-fh-pulse-sunset-dark)), rgba(255, 200, 50, var(--bop-bl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(180px * var(--bw2-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh2-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(74.4% + var(--bx2-fh-pulse-sunset-dark)) calc(100% + var(--by2-fh-pulse-sunset-dark)), rgba(255, 100, 80, var(--bop-br-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(85px * var(--bw3-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(26px * var(--bh3-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(55% + var(--bx3-fh-pulse-sunset-dark)) calc(100% + var(--by3-fh-pulse-sunset-dark)), rgba(255, 180, 60, var(--bop-br-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(74px * var(--bw1-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(32px * var(--bh1-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(93.9% + var(--bx1-fh-pulse-sunset-dark)) calc(0% + var(--by1-fh-pulse-sunset-dark)), rgba(255, 60, 60, var(--bop-tr-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(26px * var(--bw2-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(42px * var(--bh2-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx2-fh-pulse-sunset-dark)) calc(27.1% + var(--by2-fh-pulse-sunset-dark)), rgba(255, 140, 50, var(--bop-tr-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(52px * var(--bw3-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(48px * var(--bh3-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-fh-pulse-sunset-dark)) calc(27.1% + var(--by3-fh-pulse-sunset-dark)), rgba(255, 90, 70, var(--bop-tr-fh-pulse-sunset-dark)), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; will-change: opacity, filter; opacity: calc(var(--beam-opacity-fh-pulse-sunset-dark) * 1.54 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-fh-pulse-sunset-dark))) brightness(0.75) saturate(1.20); } [data-beam="fh-pulse-sunset-dark"][data-active]::before, [data-beam="fh-pulse-sunset-dark"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 24px; clip-path: inset(0 round 24px); background: radial-gradient(ellipse calc(65px * var(--bw1-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(35px * var(--bh1-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(33% + var(--bx1-fh-pulse-sunset-dark)) calc(-7.4% + var(--by1-fh-pulse-sunset-dark)), rgba(255, 80, 50, var(--bop-tl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(55px * var(--bw2-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--bh2-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(12% + var(--bx2-fh-pulse-sunset-dark)) calc(-5% + var(--by2-fh-pulse-sunset-dark)), rgba(255, 160, 40, var(--bop-tl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(35px * var(--bw3-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(65px * var(--bh3-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx3-fh-pulse-sunset-dark)) calc(68.3% + var(--by3-fh-pulse-sunset-dark)), rgba(255, 120, 60, var(--bop-bl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(15px * var(--bw1-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(30px * var(--bh1-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(2.1% + var(--bx1-fh-pulse-sunset-dark)) calc(68.3% + var(--by1-fh-pulse-sunset-dark)), rgba(255, 200, 50, var(--bop-bl-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(173px * var(--bw2-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(28px * var(--bh2-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(74.4% + var(--bx2-fh-pulse-sunset-dark)) calc(100% + var(--by2-fh-pulse-sunset-dark)), rgba(255, 100, 80, var(--bop-br-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(80px * var(--bw3-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(22px * var(--bh3-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(55% + var(--bx3-fh-pulse-sunset-dark)) calc(100% + var(--by3-fh-pulse-sunset-dark)), rgba(255, 180, 60, var(--bop-br-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(69px * var(--bw1-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(28px * var(--bh1-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(93.9% + var(--bx1-fh-pulse-sunset-dark)) calc(0% + var(--by1-fh-pulse-sunset-dark)), rgba(255, 60, 60, var(--bop-tr-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(22px * var(--bw2-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--bh2-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx2-fh-pulse-sunset-dark)) calc(27.1% + var(--by2-fh-pulse-sunset-dark)), rgba(255, 140, 50, var(--bop-tr-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse calc(47px * var(--bw3-fh-pulse-sunset-dark) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(44px * var(--bh3-fh-pulse-sunset-dark) * var(--bgh-fh-pulse-sunset-dark) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(100% + var(--bx3-fh-pulse-sunset-dark)) calc(27.1% + var(--by3-fh-pulse-sunset-dark)), rgba(255, 90, 70, var(--bop-tr-fh-pulse-sunset-dark)), transparent), radial-gradient(ellipse 60px 60px at 0% 0%, rgba(255, 255, 255, calc(0.18 * var(--bop-tl-fh-pulse-sunset-dark))), transparent 70%), radial-gradient(ellipse 60px 60px at 100% 0%, rgba(255, 255, 255, calc(0.18 * var(--bop-tr-fh-pulse-sunset-dark))), transparent 70%), radial-gradient(ellipse 60px 60px at 0% 100%, rgba(255, 255, 255, calc(0.18 * var(--bop-bl-fh-pulse-sunset-dark))), transparent 70%), radial-gradient(ellipse 60px 60px at 100% 100%, rgba(255, 255, 255, calc(0.18 * var(--bop-br-fh-pulse-sunset-dark))), transparent 70%); -webkit-mask-image: linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-over; mask-image: linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: add; pointer-events: none; z-index: 1; will-change: opacity, filter; opacity: calc(var(--beam-opacity-fh-pulse-sunset-dark) * 0.44 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-fh-pulse-sunset-dark))) brightness(0.75) saturate(1.20); } [data-beam="fh-pulse-sunset-dark"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 24px; clip-path: inset(0 round 24px); background: radial-gradient(ellipse calc(84px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(48px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 33% -7.4%, rgba(255, 80, 50, 0.76), transparent), radial-gradient(ellipse calc(72px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(42px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 12% -5%, rgba(255, 160, 40, 0.76), transparent), radial-gradient(ellipse calc(48px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(84px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 2.1% 68.3%, rgba(255, 120, 60, 0.76), transparent), radial-gradient(ellipse calc(216px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 74.4% 100%, rgba(255, 100, 80, 0.76), transparent), radial-gradient(ellipse calc(102px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(31px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 55% 100%, rgba(255, 180, 60, 0.76), transparent), radial-gradient(ellipse calc(89px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(38px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 93.9% 0%, rgba(255, 60, 60, 0.76), transparent), radial-gradient(ellipse calc(62px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(58px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at 100% 27.1%, rgba(255, 90, 70, 0.76), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; pointer-events: none; z-index: 3; will-change: opacity; opacity: 0; } [data-beam="fh-pulse-sunset-dark"][data-active] [data-beam-bloom], [data-beam="fh-pulse-sunset-dark"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-pulse-sunset-dark) * 0.66 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-fh-pulse-sunset-dark))) brightness(0.75) saturate(1.20); } @keyframes beam-fade-in-fh-pulse-sunset-dark { to { --beam-opacity-fh-pulse-sunset-dark: 1; } } @keyframes beam-fade-out-fh-pulse-sunset-dark { from { --beam-opacity-fh-pulse-sunset-dark: 1; } to { --beam-opacity-fh-pulse-sunset-dark: 0; } } [data-beam="fh-pulse-sunset-dark"][data-paused], [data-beam="fh-pulse-sunset-dark"][data-paused]::after, [data-beam="fh-pulse-sunset-dark"][data-paused]::before, [data-beam="fh-pulse-sunset-dark"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { [data-beam="fh-pulse-sunset-dark"][data-active], [data-beam="fh-pulse-sunset-dark"][data-fading], [data-beam="fh-pulse-sunset-dark"][data-active]::after, [data-beam="fh-pulse-sunset-dark"][data-fading]::after, [data-beam="fh-pulse-sunset-dark"][data-active]::before, [data-beam="fh-pulse-sunset-dark"][data-fading]::before, [data-beam="fh-pulse-sunset-dark"][data-active] [data-beam-bloom], [data-beam="fh-pulse-sunset-dark"][data-fading] [data-beam-bloom] { animation: none !important; } } @property --beam-x-fh-line-ocean { syntax: ""; initial-value: 0; inherits: true; } @property --beam-w-fh-line-ocean { syntax: ""; initial-value: 1; inherits: true; } @property --beam-h-fh-line-ocean { syntax: ""; initial-value: 1; inherits: true; } @property --beam-spike-fh-line-ocean { syntax: ""; initial-value: 1; inherits: true; } @property --beam-spike2-fh-line-ocean { syntax: ""; initial-value: 1; inherits: true; } @property --beam-edge-fh-line-ocean { syntax: ""; initial-value: 1; inherits: true; } @property --beam-opacity-fh-line-ocean { syntax: ""; initial-value: 0; inherits: true; } [data-beam="fh-line-ocean"] { position: relative; border-radius: 18px; overflow: hidden; } [data-beam="fh-line-ocean"][data-active] { animation: beam-travel-fh-line-ocean 3.1s linear infinite, beam-edge-fade-fh-line-ocean 3.1s linear infinite, beam-breathe-fh-line-ocean 4.0s ease-in-out infinite, beam-spike-fh-line-ocean 4.1s ease-in-out infinite, beam-spike2-fh-line-ocean 5.3s ease-in-out infinite, beam-fade-in-fh-line-ocean 0.6s ease forwards; } [data-beam="fh-line-ocean"][data-fading] { animation: beam-travel-fh-line-ocean 3.1s linear infinite, beam-edge-fade-fh-line-ocean 3.1s linear infinite, beam-breathe-fh-line-ocean 4.0s ease-in-out infinite, beam-spike-fh-line-ocean 4.1s ease-in-out infinite, beam-spike2-fh-line-ocean 5.3s ease-in-out infinite, beam-fade-out-fh-line-ocean 0.5s ease forwards; } [data-beam="fh-line-ocean"][data-active]::after, [data-beam="fh-line-ocean"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 17px; padding: 1px; clip-path: inset(0 round 18px); background: radial-gradient( ellipse calc(35px * var(--beam-w-fh-line-ocean)) calc(28px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70% ), radial-gradient(ellipse calc(45px * var(--beam-w-fh-line-ocean)) calc(36px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) calc(100% + 2px), rgb(80, 60, 200), transparent), radial-gradient(ellipse calc(35px * var(--beam-w-fh-line-ocean)) calc(32px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 65px) calc(100%), rgb(50, 100, 220), transparent), radial-gradient(ellipse calc(40px * var(--beam-w-fh-line-ocean)) calc(28px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 60px) calc(100% + 2px), rgb(70, 90, 190), transparent), radial-gradient(ellipse calc(35px * var(--beam-w-fh-line-ocean)) calc(34px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 90px) calc(100%), rgb(110, 60, 220), transparent), radial-gradient(ellipse calc(38px * var(--beam-w-fh-line-ocean)) calc(30px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 85px) calc(100% - 1px), rgb(60, 110, 230), transparent), radial-gradient(ellipse calc(50px * var(--beam-w-fh-line-ocean)) calc(24px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 240), transparent), radial-gradient(ellipse calc(40px * var(--beam-w-fh-line-ocean)) calc(22px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 35px) calc(100%), rgb(80, 100, 210), transparent), radial-gradient(ellipse calc(35px * var(--beam-w-fh-line-ocean)) calc(28px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 110px) calc(100% + 1px), rgb(90, 80, 225), transparent), radial-gradient(ellipse calc(30px * var(--beam-w-fh-line-ocean)) calc(30px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 110px) calc(100% - 1px), rgb(120, 90, 245), transparent); -webkit-mask: radial-gradient( ellipse calc(78px * var(--beam-w-fh-line-ocean)) calc(60px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-in, xor; mask: radial-gradient( ellipse calc(78px * var(--beam-w-fh-line-ocean)) calc(60px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-fh-line-ocean) * var(--beam-edge-fh-line-ocean) * 0.16 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-line-ocean 12s ease-in-out infinite; } [data-beam="fh-line-ocean"][data-active]::before, [data-beam="fh-line-ocean"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(ellipse calc(33px * var(--beam-w-fh-line-ocean)) calc(30px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) calc(100%), rgba(100, 80, 220, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w-fh-line-ocean)) calc(26px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 39px) calc(100% - 3px), rgba(60, 120, 255, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w-fh-line-ocean)) calc(24px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 36px) calc(100%), rgba(80, 100, 200, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w-fh-line-ocean)) calc(28px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 54px) calc(100% - 2px), rgba(130, 70, 255, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w-fh-line-ocean)) calc(24px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 51px) calc(100% - 1px), rgba(70, 130, 255, 0.50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w-fh-line-ocean)) calc(20px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 21px) calc(100%), rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w-fh-line-ocean)) calc(18px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 21px) calc(100% - 2px), rgba(90, 110, 230, 0.40), transparent), radial-gradient(ellipse calc(21px * var(--beam-w-fh-line-ocean)) calc(24px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% + 66px) calc(100%), rgba(110, 90, 240, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w-fh-line-ocean)) calc(26px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100% - 66px) calc(100% - 1px), rgba(140, 100, 255, 0.52), transparent); box-shadow: inset 0 0 9px 1px rgba(0, 0, 0, 0.14); -webkit-mask-image: radial-gradient( ellipse calc(78px * var(--beam-w-fh-line-ocean)) calc(60px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); -webkit-mask-composite: source-in, source-over; mask-image: radial-gradient( ellipse calc(78px * var(--beam-w-fh-line-ocean)) calc(60px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100% ), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: intersect, add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-fh-line-ocean) * var(--beam-edge-fh-line-ocean) * 0.32 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); clip-path: inset(0 round 18px); animation: beam-hue-shift-fh-line-ocean 12s ease-in-out infinite; } [data-beam="fh-line-ocean"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 17px; clip-path: inset(0 round 18px); padding: 0; -webkit-mask: radial-gradient( ellipse calc(84px * var(--beam-w-fh-line-ocean)) calc(110px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100% ); -webkit-mask-composite: source-over; mask: radial-gradient( ellipse calc(84px * var(--beam-w-fh-line-ocean)) calc(110px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100% ); mask-composite: add; background: radial-gradient(ellipse calc(0.8px * var(--beam-spike-fh-line-ocean)) calc(92px * var(--beam-h-fh-line-ocean)) at 8% calc(100% - 2px), rgb(60, 60, 180), rgba(60, 60, 180, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2-fh-line-ocean)) calc(35px * var(--beam-h-fh-line-ocean)) at 22% calc(100% - 4px), rgb(80, 100, 200), rgba(80, 100, 200, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-fh-line-ocean))) calc(72px * var(--beam-h-fh-line-ocean)) at 36% calc(100% - 3px), rgb(50, 40, 180), rgba(50, 40, 180, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2-fh-line-ocean)) calc(28px * var(--beam-h-fh-line-ocean)) at 50% calc(100% - 2px), rgba(40, 80, 200, 0.7), rgba(40, 80, 200, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-fh-line-ocean))) calc(85px * var(--beam-h-fh-line-ocean)) at 64% calc(100% - 4px), rgb(30, 50, 190), rgba(30, 50, 190, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike-fh-line-ocean)) calc(45px * var(--beam-h-fh-line-ocean)) at 78% calc(100% - 2px), rgb(60, 90, 180), rgba(60, 90, 180, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike-fh-line-ocean))) calc(60px * var(--beam-h-fh-line-ocean)) at 92% calc(100% - 3px), rgb(70, 60, 200), rgba(70, 60, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w-fh-line-ocean)) calc(32px * var(--beam-h-fh-line-ocean)) at calc(var(--beam-x-fh-line-ocean) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%); pointer-events: none; z-index: 3; opacity: 0; } [data-beam="fh-line-ocean"][data-active] [data-beam-bloom], [data-beam="fh-line-ocean"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-line-ocean) * var(--beam-edge-fh-line-ocean) * 0.30 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-bloom-fh-line-ocean 8s ease-in-out infinite; } @keyframes beam-travel-fh-line-ocean { 0% { --beam-x-fh-line-ocean: 0.06; --beam-w-fh-line-ocean: 0.5; } 10% { --beam-x-fh-line-ocean: 0.15; --beam-w-fh-line-ocean: 0.8; } 20% { --beam-x-fh-line-ocean: 0.25; --beam-w-fh-line-ocean: 1.1; } 30% { --beam-x-fh-line-ocean: 0.35; --beam-w-fh-line-ocean: 1.3; } 40% { --beam-x-fh-line-ocean: 0.44; --beam-w-fh-line-ocean: 1.45; } 50% { --beam-x-fh-line-ocean: 0.5; --beam-w-fh-line-ocean: 1.5; } 60% { --beam-x-fh-line-ocean: 0.56; --beam-w-fh-line-ocean: 1.45; } 70% { --beam-x-fh-line-ocean: 0.65; --beam-w-fh-line-ocean: 1.3; } 80% { --beam-x-fh-line-ocean: 0.75; --beam-w-fh-line-ocean: 1.1; } 90% { --beam-x-fh-line-ocean: 0.85; --beam-w-fh-line-ocean: 0.8; } 100% { --beam-x-fh-line-ocean: 0.94; --beam-w-fh-line-ocean: 0.5; } } @keyframes beam-edge-fade-fh-line-ocean { 0% { --beam-edge-fh-line-ocean: 0; } 12.5% { --beam-edge-fh-line-ocean: 0; } 32.5% { --beam-edge-fh-line-ocean: 1; } 67.5% { --beam-edge-fh-line-ocean: 1; } 87.5% { --beam-edge-fh-line-ocean: 0; } 100% { --beam-edge-fh-line-ocean: 0; } } @keyframes beam-breathe-fh-line-ocean { 0%, 100% { --beam-h-fh-line-ocean: 0.8; } 25% { --beam-h-fh-line-ocean: 1.25; } 55% { --beam-h-fh-line-ocean: 0.85; } 80% { --beam-h-fh-line-ocean: 1.3; } } @keyframes beam-spike-fh-line-ocean { 0% { --beam-spike-fh-line-ocean: 0.8; } 25% { --beam-spike-fh-line-ocean: 1.3; } 50% { --beam-spike-fh-line-ocean: 0.9; } 75% { --beam-spike-fh-line-ocean: 1.4; } 100% { --beam-spike-fh-line-ocean: 0.8; } } @keyframes beam-spike2-fh-line-ocean { 0% { --beam-spike2-fh-line-ocean: 1.2; } 25% { --beam-spike2-fh-line-ocean: 0.7; } 50% { --beam-spike2-fh-line-ocean: 1.4; } 75% { --beam-spike2-fh-line-ocean: 0.8; } 100% { --beam-spike2-fh-line-ocean: 1.2; } } @keyframes beam-fade-in-fh-line-ocean { to { --beam-opacity-fh-line-ocean: 1; } } @keyframes beam-fade-out-fh-line-ocean { from { --beam-opacity-fh-line-ocean: 1; } to { --beam-opacity-fh-line-ocean: 0; } } @keyframes beam-hue-shift-fh-line-ocean { 0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 13deg)) brightness(1.30) saturate(1.95); } 50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 13deg)) brightness(1.30) saturate(1.95); } 100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 13deg)) brightness(1.30) saturate(1.95); } } @keyframes beam-hue-shift-bloom-fh-line-ocean { 0% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 23deg)) brightness(1.30) saturate(1.95); } 50% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + 23deg)) brightness(1.30) saturate(1.95); } 100% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 23deg)) brightness(1.30) saturate(1.95); } } [data-beam="fh-line-ocean"][data-paused], [data-beam="fh-line-ocean"][data-paused]::after, [data-beam="fh-line-ocean"][data-paused]::before, [data-beam="fh-line-ocean"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; } @property --beam-angle-fh-sm-sunset { syntax: ""; initial-value: 0deg; inherits: true; } @property --beam-opacity-fh-sm-sunset { syntax: ""; initial-value: 0; inherits: true; } [data-beam="fh-sm-sunset"] { position: relative; border-radius: 32px; overflow: hidden; } [data-beam="fh-sm-sunset"][data-active] { animation: beam-spin-fh-sm-sunset 1.96s linear infinite, beam-fade-in-fh-sm-sunset 0.6s ease forwards; } [data-beam="fh-sm-sunset"][data-fading] { animation: beam-spin-fh-sm-sunset 1.96s linear infinite, beam-fade-out-fh-sm-sunset 0.5s ease forwards; } [data-beam="fh-sm-sunset"][data-active]::after, [data-beam="fh-sm-sunset"][data-fading]::after { content: ""; position: absolute; inset: 0; border-radius: 31px; padding: 1px; clip-path: inset(0 round 32px); background: conic-gradient( from var(--beam-angle-fh-sm-sunset), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100% ),radial-gradient(ellipse 9px 18px at 2% 68%, rgb(255, 180, 50), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(255, 150, 40), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 80, 60), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(255, 100, 80), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(255, 60, 80), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(255, 120, 60), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(255, 200, 50), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 90, 70), transparent); -webkit-mask: conic-gradient( from var(--beam-angle-fh-sm-sunset), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-in, xor; mask: conic-gradient( from var(--beam-angle-fh-sm-sunset), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100% ), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-fh-sm-sunset) * 0.12 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-sm-sunset 12s ease-in-out infinite; } [data-beam="fh-sm-sunset"][data-active]::before, [data-beam="fh-sm-sunset"][data-fading]::before { content: ""; position: absolute; inset: 0; border-radius: 32px; clip-path: inset(0 round 32px); background: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(255, 180, 50, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(255, 150, 40, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 80, 60, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(255, 100, 80, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(255, 60, 80, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(255, 120, 60, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(255, 200, 50, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 90, 70, 0.3), transparent); box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.14); -webkit-mask-image: conic-gradient( from var(--beam-angle-fh-sm-sunset), transparent 0%, transparent 22%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%, white 46%, white 82%, rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%, transparent 97%, transparent 100% ); -webkit-mask-composite: source-over; mask-image: conic-gradient( from var(--beam-angle-fh-sm-sunset), transparent 0%, transparent 22%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%, white 46%, white 82%, rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%, transparent 97%, transparent 100% ); mask-composite: add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-fh-sm-sunset) * 0.30 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); animation: beam-hue-shift-fh-sm-sunset 12s ease-in-out infinite; } [data-beam="fh-sm-sunset"] [data-beam-bloom] { display: none; position: absolute; inset: 0; border-radius: 31px; clip-path: inset(0 round 32px); background: conic-gradient( from var(--beam-angle-fh-sm-sunset), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; filter: blur(8px) brightness(1.30) saturate(1.80); pointer-events: none; z-index: 3; opacity: 0; } [data-beam="fh-sm-sunset"][data-active] [data-beam-bloom], [data-beam="fh-sm-sunset"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-fh-sm-sunset) * 0.16 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); } @keyframes beam-spin-fh-sm-sunset { to { --beam-angle-fh-sm-sunset: 360deg; } } @keyframes beam-fade-in-fh-sm-sunset { to { --beam-opacity-fh-sm-sunset: 1; } } @keyframes beam-fade-out-fh-sm-sunset { from { --beam-opacity-fh-sm-sunset: 1; } to { --beam-opacity-fh-sm-sunset: 0; } } @keyframes beam-hue-shift-fh-sm-sunset { 0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.80); } 50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.80); } 100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.80); } } [data-beam="fh-sm-sunset"][data-paused], [data-beam="fh-sm-sunset"][data-paused]::after, [data-beam="fh-sm-sunset"][data-paused]::before, [data-beam="fh-sm-sunset"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; }