@font-face{font-family:"Inter";src:url("fonts/inter-latin-var.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-var.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}

*{box-sizing:border-box}
body.wcc-splash{margin:0;min-height:100vh;background:#eaf6fb;color:#17313f;overflow-x:hidden}
.wcc-stage{
  position:relative;isolation:isolate;min-height:100svh;overflow:hidden;
  padding:48px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  background:radial-gradient(ellipse at 50% 24%,#fff8e8aa,transparent 48%),linear-gradient(165deg,#e0f3fa 0%,#edf8fb 48%,#fff5e6 100%);
}
.wcc-stage::after{content:"";position:absolute;z-index:-1;inset:auto -10% -160px;height:320px;border-radius:50% 50% 0 0;background:#fffaf2aa;box-shadow:0 -28px 0 #ffffff35;transform:rotate(-4deg)}
.wcc-console{position:relative;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0 44px}
.wcc-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.wcc-rings{position:absolute;z-index:-1;width:min(120vw,1350px);aspect-ratio:1;top:44%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.wcc-rings i{position:absolute;inset:0;margin:auto;border:1px solid #5d9bb212;border-radius:50%}
.wcc-rings i:nth-child(1){width:62%;height:62%}
.wcc-rings i:nth-child(2){width:82%;height:82%}
.wcc-rings i:nth-child(3){width:100%;height:100%}
.wcc-illustration{position:relative;width:clamp(280px,37vh,390px);aspect-ratio:1;margin-bottom:32px}
.wcc-halo{position:absolute;inset:5%;border-radius:50%;background:linear-gradient(145deg,#fffaf3cc,#ffffff18 75%);border:1px solid #ffffffd9;box-shadow:inset 0 0 65px #ffffff80,0 22px 60px #67a7bf0c}
.wcc-halo i{position:absolute;inset:-14px;border:1px dashed #79adc133;border-radius:50%;transform:rotate(-18deg)}
.wcc-halo i:nth-child(2){inset:24px;border-style:solid;border-color:#ffffffa8}
.wcc-halo i:nth-child(3){inset:47px;border-style:solid;border-color:#ffffff70}
.wcc-mark{position:absolute;inset:-3% -3% 3%;filter:drop-shadow(0 16px 14px #396f8624)}
.wcc-mark svg{display:block;width:100%;height:100%;overflow:visible}
.wcc-orbit{position:absolute;z-index:1}
.wcc-orbit-one{top:19%;right:7%;font-size:34px;color:#ddad4c;transform:rotate(12deg)}
.wcc-orbit-two{left:11%;bottom:23%;width:13px;height:13px;border:2px solid #ed987d;border-radius:50%}
.wcc-cloud,.wcc-little-cloud{position:absolute;border-radius:100px;background:linear-gradient(#fff,#ffffffad);box-shadow:0 12px 26px #6a9aad0a}
.wcc-cloud::before,.wcc-cloud::after,.wcc-little-cloud::before,.wcc-little-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.wcc-cloud::before,.wcc-little-cloud::before{width:45%;height:160%;left:15%;bottom:5%}
.wcc-cloud::after,.wcc-little-cloud::after{width:36%;height:125%;right:14%;bottom:16%}
.wcc-cloud{width:180px;height:48px;opacity:.65;animation:wcc-drift 12s ease-in-out infinite alternate}
.wcc-cloud-one{top:25%;left:7%;transform:rotate(-5deg)}
.wcc-cloud-two{top:19%;right:-3%;width:240px;height:62px;opacity:.5;animation-delay:-7s}
.wcc-cloud-three{bottom:20%;left:-5%;width:230px;height:60px;opacity:.45;animation-delay:-4s}
.wcc-little-cloud{width:112px;height:30px;animation:wcc-drift 8s ease-in-out infinite alternate}
.wcc-little-cloud-one{left:-7%;bottom:23%;transform:rotate(-5deg)}
.wcc-little-cloud-two{right:-7%;bottom:39%;width:93px;height:25px;animation-delay:-5s}
.wcc-flight{position:absolute;width:clamp(190px,26vw,380px);right:5%;top:38%;opacity:.64;transform:rotate(-8deg)}
.wcc-flight-trail{stroke:#6b9fae;stroke-width:1.3;stroke-dasharray:4 8;stroke-linecap:round}
.wcc-plane{animation:wcc-bob 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wcc-spark{position:absolute;color:#d4a650;animation:wcc-twinkle 6s ease-in-out infinite alternate}
.wcc-spark-one{left:22%;top:16%;font-size:25px}
.wcc-spark-two{right:20%;bottom:24%;font-size:30px;animation-delay:-3s}
.wcc-spark-three{left:16%;bottom:33%;font-size:15px;color:#71adbd;animation-delay:-4s}
.wcc-confetti{position:absolute;width:7px;height:17px;background:#efaa8f;border-radius:4px;transform:rotate(28deg);opacity:.6}
.wcc-confetti-one{right:22%;top:12%}
.wcc-confetti-two{left:29%;bottom:21%;background:#8cbbc3;transform:rotate(-32deg);height:11px}
.wcc-confetti-three{right:9%;bottom:38%;width:8px;height:8px;background:#e6bc67;border-radius:50%}
.wcc-console h1{position:relative;z-index:1;margin:0;color:#17313f;font-family:"Space Grotesk","Manrope",Inter,system-ui,sans-serif;font-weight:700;font-size:clamp(2.3rem,6.4vw,5.6rem);letter-spacing:-.065em;line-height:1.12}
.wcc-console h1 span{color:#bd5940;font-weight:400;letter-spacing:-.055em}
.wcc-tag{position:relative;z-index:1;margin:24px 0 0;color:#4a6472;font-size:clamp(1rem,2.5vw,1.3rem);font-weight:400;line-height:1.5;letter-spacing:.015em}
.wcc-tag strong{position:relative;color:#17313f;font-weight:650;white-space:nowrap}
.wcc-tag strong::after{content:"";position:absolute;z-index:-1;left:-2px;right:-3px;bottom:-5px;height:7px;border-top:3px solid #f2b18a;border-radius:50%;transform:rotate(-2deg)}
.wcc-flourish{display:flex;gap:7px;margin-top:31px;align-items:center}
.wcc-flourish i{width:5px;height:5px;background:#77baca;border-radius:50%}
.wcc-flourish i:nth-child(2){background:#ef9b7b;width:20px;border-radius:5px}
.wcc-flourish i:nth-child(3){background:#e2b75e}
.wcc-motion{position:absolute;z-index:3;right:24px;top:22px;display:flex;align-items:center;gap:7px;min-height:36px;padding:8px 12px;border:1px solid #91b6c34d;border-radius:30px;background:#ffffff69;color:#486571;font:500 .7rem/1 Inter,system-ui,sans-serif;cursor:pointer}
.wcc-motion[hidden]{display:none}
.wcc-motion svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.wcc-motion:hover{background:#fff9}
.wcc-motion:focus-visible{outline:2px solid #486571;outline-offset:4px}
@keyframes wcc-drift{to{translate:14px -7px}}
@keyframes wcc-twinkle{from{opacity:.4;scale:.9}to{opacity:.8;scale:1.1}}
/* Each balloon bobs on its own clock, and sways from where its string is held. */
.wcc-bob,.wcc-sway,.wcc-bub{transform-box:view-box;will-change:transform}
.wcc-bob{animation:wcc-bob 5.4s ease-in-out infinite}
.wcc-bob-a{animation-duration:5.4s}
.wcc-bob-b{animation-duration:4.3s;animation-delay:-1.6s}
.wcc-bob-c{animation-duration:6.1s;animation-delay:-2.9s}

.wcc-sway{animation:wcc-sway 7s ease-in-out infinite}
.wcc-sway-a{transform-origin:120px 204px;animation-duration:7s}
.wcc-sway-b{transform-origin:70px 206px;animation-duration:5.8s;animation-delay:-2.1s}
.wcc-sway-c{transform-origin:172px 200px;animation-duration:6.4s;animation-delay:-3.4s}

.wcc-bub{opacity:0;animation:wcc-rise 7.5s ease-in-out infinite}
.wcc-bub-1{animation-duration:7.5s}
.wcc-bub-2{animation-duration:9s;animation-delay:-3s}
.wcc-bub-3{animation-duration:8.2s;animation-delay:-5.5s}

@keyframes wcc-bob{
  0%,100%{transform:translateY(4px)}
  50%{transform:translateY(-9px)}
}
@keyframes wcc-sway{
  0%,100%{transform:rotate(-2.6deg)}
  50%{transform:rotate(2.6deg)}
}
@keyframes wcc-rise{
  0%{transform:translateY(6px);opacity:0}
  18%{opacity:.5}
  70%{opacity:.32}
  100%{transform:translateY(-104px);opacity:0}
}

/* Footer: one row, the line and the mark, in flow */
.wcc-foot{
  align-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;
  padding:22px 24px clamp(18px,3vh,34px);
}

.jl-foot{
  --jl-foot-ink:#627a86;
  --jl-foot-rule:#cfdde4;
  --jl-foot-mark:#6f8b99;
  --jl-foot-mark-opacity:.82;
  display:flex;align-items:center;justify-content:center;gap:11px;
  color:var(--jl-foot-ink);
  font:500 .63rem/1.7 Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;
}
.jl-foot i{width:1px;height:17px;background:var(--jl-foot-rule)}

/* The mark links to joshlejeune.com. The hit area is grown to the 24px WCAG 2.2
   minimum without moving the row, since the capsule itself is only 11px tall. */
.jl-foot a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;min-height:24px;
  margin:-6px -5px;padding:0 5px;
  border-radius:6px;
  text-decoration:none;
  transition:opacity .18s;
}
.jl-foot a:hover .jl-mark{opacity:1}
.jl-foot a:focus-visible{outline:2px solid var(--jl-foot-mark);outline-offset:2px}
.jl-foot .jl-mark{
  /* Brand Kit capsule at its own 1.981:1. Height is the one knob here;
     width follows it so the JL is never stretched. */
  --jw-mark-h:1.2em;
  display:block;height:var(--jw-mark-h);width:calc(var(--jw-mark-h) * 1.9811);
  background:currentColor;
  -webkit-mask:url('brand/joshworks-capsule.svg') center/contain no-repeat;
  mask:url('brand/joshworks-capsule.svg') center/contain no-repeat;
  color:var(--jl-foot-mark);
  opacity:var(--jl-foot-mark-opacity);
}


@media(min-width:1000px) and (min-height:850px){.wcc-illustration{width:min(43vh,460px);margin-bottom:35px}}
@media(max-width:600px){
  .wcc-stage{padding:58px 18px 0}
  .wcc-console{padding-bottom:28px}
  .wcc-illustration{width:min(70vw,320px);margin-bottom:30px}
  .wcc-console h1{font-size:clamp(2rem,8vw,3rem)}
  .wcc-tag{margin-top:20px;font-size:1rem}
  .wcc-cloud-one{left:-20%;top:20%;scale:.7}
  .wcc-cloud-two{right:-35%;top:28%;scale:.7}
  .wcc-cloud-three{left:-32%;bottom:17%;scale:.7}
  .wcc-flight{width:150px;right:-32px;top:auto;bottom:15%;opacity:.4}
  .wcc-spark-one{left:13%;top:16%;font-size:19px}
  .wcc-spark-two{right:11%;bottom:32%;font-size:21px}
  .wcc-confetti-one{right:17%;top:20%}
  .wcc-confetti-two{left:19%;bottom:20%}
  .wcc-motion{top:16px;right:16px}
}
@media(max-width:560px){.jl-foot{flex-direction:column;gap:7px}.jl-foot i{width:80px;height:1px}}
@media(max-height:700px){
  .wcc-stage{padding-top:50px}
  .wcc-illustration{width:clamp(190px,34vh,260px);margin-bottom:20px}
  .wcc-console{padding-bottom:16px}
  .wcc-console h1{font-size:clamp(2rem,6vw,3.6rem)}
  .wcc-tag{margin-top:18px}
  .wcc-flourish{margin-top:21px}
  .jl-foot{font-size:.58rem;letter-spacing:.22em}
}
@media(max-height:480px) and (min-width:600px){
  .wcc-console{display:grid;grid-template-columns:190px max-content;grid-template-rows:1fr auto auto 1fr;column-gap:38px;width:auto;padding:0 0 10px}
  .wcc-illustration{grid-column:1;grid-row:1/5;width:180px;margin:0}
  .wcc-console h1{grid-column:2;grid-row:2;font-size:2.3rem}
  .wcc-tag{grid-column:2;grid-row:3;margin-top:14px;font-size:.95rem}
  .wcc-flourish{display:none}
  .wcc-cloud-one{left:-10%}
  .wcc-flight{right:-10%;top:25%;opacity:.3}
}
/* No motion without JavaScript; the visible control can pause every animation. */
.wcc-splash:not(.wcc-motion-ready) *, .wcc-splash.wcc-motion-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .wcc-splash:not(.wcc-motion-enabled) *{animation:none!important;transition:none!important}
  .wcc-bub{opacity:.32}
}