:root.wl-test {
  --wl-accent: #ef5d4f;
  --wl-accent-hot: #ff765f;
  --wl-ink: #08090b;
  --wl-surface: rgba(19, 20, 22, .72);
  --wl-line: rgba(255, 255, 255, .14);
  --wl-ease: cubic-bezier(.22, .61, .36, 1);
  background: var(--wl-ink);
  scroll-behavior: smooth;
}

.wl-test body {
  background:
    radial-gradient(circle at 82% 8%, rgba(239, 93, 79, .08), transparent 34rem),
    #08090b;
}

.wl-test #appRoot {
  position: relative;
  isolation: isolate;
}

.wl-test :is(
  #about, #proj, #how, #gal, #mainform,
  a[name="about"], a[name="proj"], a[name="how"], a[name="gal"], a[name="mainform"]
) {
  scroll-margin-top: 112px;
}

.wl-test .page__noise {
  opacity: .065 !important;
  background-position: center !important;
  mix-blend-mode: soft-light;
}

.wl-test .wl-scroll-progress {
  position: fixed;
  z-index: 10050;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #d94539 0%, #ff7b63 62%, #ffd1c7 100%);
  box-shadow: 0 0 16px rgba(239, 93, 79, .78);
  pointer-events: none;
  will-change: transform;
}

.wl-test .wl-pointer-glow {
  position: fixed;
  z-index: 10020;
  left: 0;
  top: 0;
  width: 430px;
  height: 430px;
  margin: -215px 0 0 -215px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 106, 85, .11) 0%, rgba(239, 93, 79, .045) 36%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate3d(-500px, -500px, 0);
  transition: opacity .35s ease;
  will-change: transform;
}

.wl-test .wl-pointer-glow.is-active { opacity: 1; }

.wl-test #blk8521413076 {
  z-index: 10000;
  transition: filter .35s ease;
}

.wl-test #blk8521413076 .bx012__carrier {
  background-color: rgba(24, 17, 17, .62) !important;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.wl-test #blk8521413076::after {
  content: '';
  position: absolute;
  z-index: 8;
  left: 3%;
  right: 3%;
  bottom: 0;
  height: 1px;
  opacity: .38;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34) 18%, rgba(239, 93, 79, .38) 76%, transparent);
  pointer-events: none;
}

.wl-test #blk8521413076.wl-header-scrolled {
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .28));
}

.wl-test #blk8014358615 {
  position: relative;
  isolation: isolate;
  background: #050608;
}

.wl-test #blk8014358615 .bx012__filter {
  background:
    linear-gradient(90deg, rgba(2, 3, 5, .88) 0%, rgba(2, 3, 5, .66) 37%, rgba(2, 3, 5, .08) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .4)) !important;
}

.wl-test .wl-hero-effects {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.wl-test .wl-cosmos-stars,
.wl-test .wl-cosmos-haze,
.wl-test .wl-cosmos-orbit {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.wl-test .wl-cosmos-stars {
  inset: -12%;
  opacity: .55;
  background-image:
    radial-gradient(circle at 11% 23%, rgba(255, 255, 255, .9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 28% 71%, rgba(255, 221, 214, .85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 18%, rgba(255, 255, 255, .78) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 81% 63%, rgba(255, 139, 116, .72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 47% 42%, rgba(255, 255, 255, .76) 0 .7px, transparent 1.5px);
  background-size: 190px 170px, 260px 230px, 310px 290px, 370px 350px, 430px 390px;
  animation: wlStarsDrift 34s linear infinite;
}

.wl-test .wl-cosmos-haze {
  inset: 0;
  opacity: .78;
  background:
    radial-gradient(circle at 79% 44%, rgba(245, 104, 80, .2), transparent 23%),
    radial-gradient(circle at 88% 16%, rgba(255, 189, 171, .11), transparent 18%),
    linear-gradient(115deg, transparent 38%, rgba(239, 93, 79, .035) 58%, transparent 76%);
  transform: translate3d(var(--wl-hero-x, 0), var(--wl-hero-y, 0), 0) scale(1.06);
  transition: transform 1.1s var(--wl-ease);
}

.wl-test .wl-cosmos-orbit {
  right: -13vw;
  top: -41vw;
  width: 91vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 148, 128, .2);
  border-radius: 50%;
  box-shadow:
    0 0 90px rgba(239, 93, 79, .08),
    inset 0 0 70px rgba(255, 255, 255, .025);
  transform: rotate(-19deg) scale(1);
  animation: wlOrbitBreathe 9s var(--wl-ease) infinite alternate;
}

.wl-test .wl-cosmos-orbit::before,
.wl-test .wl-cosmos-orbit::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .075);
}

.wl-test .wl-cosmos-orbit::before { inset: 8%; }
.wl-test .wl-cosmos-orbit::after { inset: 17%; border-color: rgba(239, 93, 79, .1); }

.wl-test #blk8014358615 .node-elem[data-node-id="844312931354615104"] .node-atom,
.wl-test #blk8014358615 .node-elem[data-node-id="847141215081140151"] .node-atom {
  text-shadow: 0 9px 34px rgba(0, 0, 0, .46);
}

.wl-test #blk8014358615 .node-elem[data-node-id="882111162252102941"] {
  opacity: 1 !important;
}

.wl-test #blk8014358615 :is(
  .node-elem[data-node-id="811363155143015118"],
  .node-elem[data-node-id="891113511239613881"],
  .node-elem[data-node-id="877012151018013311"]
) {
  opacity: 1 !important;
}

.wl-test #blk8014358615 .node-elem[data-node-id="882111162252102941"] .node-atom {
  opacity: 1 !important;
}

.wl-test #blk8014358615 :is(
  .node-elem[data-node-id="811363155143015118"],
  .node-elem[data-node-id="891113511239613881"],
  .node-elem[data-node-id="877012151018013311"]
) .node-atom {
  opacity: 1 !important;
}

.wl-test a[href="#mainform"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 15px 48px rgba(239, 93, 79, .18);
  transition: transform .3s var(--wl-ease), box-shadow .3s ease, filter .3s ease !important;
  will-change: transform;
}

.wl-test a[href="#mainform"]::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -120%;
  bottom: -120%;
  left: -28%;
  width: 18%;
  transform: rotate(17deg) translateX(-240%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transition: transform .75s var(--wl-ease);
  pointer-events: none;
}

.wl-test a[href="#mainform"]:hover {
  box-shadow: 0 18px 58px rgba(239, 93, 79, .31);
  filter: saturate(1.08) brightness(1.04);
}

.wl-test a[href="#mainform"]:hover::after { transform: rotate(17deg) translateX(850%); }

.wl-test :is(#blk8891390124, #blk8101421105) {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(239, 93, 79, .075), transparent 26rem),
    radial-gradient(circle at 86% 72%, rgba(255, 255, 255, .025), transparent 32rem),
    #111315;
}

.wl-test :is(#blk8891390124, #blk8101421105)::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 31%, rgba(255,164,145,.48) 0 1px, transparent 1.9px),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.055) 49.8%, transparent 50.2%),
    radial-gradient(ellipse at 50% 30%, transparent 0 27%, rgba(239,93,79,.15) 27.15%, transparent 27.45%);
  background-size: 310px 280px, 430px 390px, 1200px 900px, 1500px 1000px;
  transform: translate3d(0, var(--wl-section-shift, 0), 0);
  pointer-events: none;
  will-change: transform;
}

.wl-test .wl-premium-card {
  --wl-card-x: 50%;
  --wl-card-y: 50%;
  position: relative !important;
  isolation: isolate;
  transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform .42s var(--wl-ease), filter .42s ease, box-shadow .42s ease !important;
  will-change: transform;
  box-shadow: 0 36px 82px rgba(0, 0, 0, .29), 0 0 48px rgba(239, 93, 79, .045);
}

.wl-test .wl-premium-card:hover {
  filter: brightness(1.025) saturate(1.035);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .34), 0 0 45px rgba(239, 93, 79, .075);
}

.wl-test .wl-card-shine {
  position: absolute;
  z-index: 90;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(circle at var(--wl-card-x) var(--wl-card-y), rgba(255,255,255,.18), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.15), transparent 19%, transparent 78%, rgba(239,93,79,.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .3s ease;
}

.wl-test .wl-premium-card:hover > .wl-card-shine { opacity: .72; }

.wl-test #blk8515715939 {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 -1px rgba(255,255,255,.035);
}

.wl-test #blk8515715939::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .55;
  background:
    radial-gradient(circle at 84% 45%, rgba(239,93,79,.11), transparent 27%),
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.024), transparent 72%);
  pointer-events: none;
}

.wl-test #blk8515715939 .wl-brand-list > span {
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.045);
  transition: background-color .25s ease, border-color .25s ease, transform .25s var(--wl-ease);
}

.wl-test #blk8515715939 .wl-brand-list > span:hover {
  transform: translateY(-2px);
  border-color: rgba(239,93,79,.34);
  background: rgba(239,93,79,.12);
}

.wl-test #blk8351149141 {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 9%, rgba(239,93,79,.065), transparent 25rem),
    #121416;
}

.wl-test .wl-gallery-tile {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 48px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.04);
  transition: transform .45s var(--wl-ease), border-color .35s ease, box-shadow .45s ease;
}

.wl-test .wl-gallery-tile img,
.wl-test .wl-gallery-tile svg {
  transition: transform .6s var(--wl-ease), filter .45s ease;
}

.wl-test .wl-gallery-tile:hover {
  transform: translateY(-7px);
  border-color: rgba(239,93,79,.38);
  box-shadow: 0 34px 70px rgba(0,0,0,.33), 0 0 34px rgba(239,93,79,.07);
}

.wl-test .wl-gallery-tile:hover img,
.wl-test .wl-gallery-tile:hover svg {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.025);
}

.wl-test a:focus-visible,
.wl-test button:focus-visible,
.wl-test [tabindex]:focus-visible,
.wl-test input:focus-visible,
.wl-test textarea:focus-visible {
  outline: 3px solid rgba(255, 123, 99, .95) !important;
  outline-offset: 4px !important;
}

@keyframes wlStarsDrift {
  from { transform: translate3d(-1.2%, -.7%, 0) scale(1.01); }
  to { transform: translate3d(1.6%, 1.1%, 0) scale(1.04); }
}

@keyframes wlOrbitBreathe {
  from { opacity: .55; transform: rotate(-19deg) scale(.985); }
  to { opacity: 1; transform: rotate(-17deg) scale(1.025); }
}

@media (max-width: 1199px) {
  .wl-test .wl-pointer-glow { display: none; }
  .wl-test .wl-cosmos-orbit { right: -35vw; top: -20vw; width: 128vw; }
  .wl-test .wl-premium-card,
  .wl-test .wl-premium-card:hover { transform: none !important; }
  .wl-test .wl-card-shine { display: none; }
}

@media (max-width: 639px) {
  :root.wl-test { scroll-behavior: auto; }
  .wl-test #blk8521413076 .bx012__carrier {
    backdrop-filter: blur(13px) saturate(118%);
    -webkit-backdrop-filter: blur(13px) saturate(118%);
  }
  .wl-test .wl-cosmos-stars { opacity: .38; background-size: 150px 140px, 210px 190px, 260px 230px, 320px 290px, 370px 340px; }
  .wl-test .wl-cosmos-haze { opacity: .56; }
  .wl-test .wl-cosmos-orbit { right: -50vw; top: -9vw; width: 154vw; opacity: .5; }
  .wl-test a[href="#mainform"] { box-shadow: 0 12px 34px rgba(239,93,79,.16); }
  .wl-test .wl-gallery-tile:hover { transform: none; }
  .wl-test .wl-gallery-tile:hover img,
  .wl-test .wl-gallery-tile:hover svg { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root.wl-test { scroll-behavior: auto; }
  .wl-test *,
  .wl-test *::before,
  .wl-test *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wl-test .wl-pointer-glow { display: none; }
  .wl-test .wl-premium-card { transform: none !important; }
}
