:root{
  --intro-ink:#17483e;
  --intro-green:#087866;
  --intro-mist:#dcebdc;
  --intro-cream:#f5f3e8;
}

body.intro-preview-active{overflow:hidden}
body.intro-preview-active>#container,
body.intro-preview-active>.skip{opacity:0;pointer-events:none}
body>#container,body>.skip{transition:opacity .82s cubic-bezier(.22,.7,.25,1)}

.intro-preview{
  position:fixed;inset:0;z-index:1000;overflow:hidden;
  display:grid;place-items:center;
  background:transparent;
  color:var(--intro-ink);
  transition:opacity .7s ease,visibility .7s;
}
.intro-preview::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(132,183,158,.24),transparent 36%),
    radial-gradient(circle at 80% 76%,rgba(176,198,132,.25),transparent 34%),
    linear-gradient(135deg,#f7f6ef 0%,#edf4ed 47%,#f7f4e9 100%);
  opacity:1;transition:opacity .9s cubic-bezier(.22,.7,.25,1);
}
.intro-preview[hidden]{display:none}
.intro-preview.is-leaving{pointer-events:none}
.intro-preview.is-leaving::before{opacity:0}
.intro-preview__glow{
  position:absolute;z-index:1;border-radius:50%;filter:blur(18px);opacity:.48;
  will-change:transform;
}
.intro-preview__glow--one{width:42vw;height:42vw;left:-12vw;top:-15vw;background:#9acbb8;animation:intro-drift-one 28s ease-in-out infinite}
.intro-preview__glow--two{width:36vw;height:36vw;right:-7vw;bottom:-14vw;background:#d7d7a4;animation:intro-drift-two 34s ease-in-out infinite}
.intro-preview__glow--three{width:25vw;height:25vw;right:24vw;top:8vh;background:#c2ded4;opacity:.26;animation:intro-drift-three 30s ease-in-out infinite}
.intro-preview__contours{position:absolute;z-index:1;inset:-3%;width:106%;height:106%;opacity:.25;will-change:transform}
.intro-preview__contours path{fill:none;stroke:#5b8f7e;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:2 7}
.intro-preview__particles{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}
.intro-preview__center{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:22px;transform:translateY(-20px)}
.intro-preview__logo{
  width:128px;height:128px;object-fit:contain;display:block;
  filter:drop-shadow(0 14px 24px rgba(18,91,74,.1));
  transition:opacity .58s ease,transform .58s ease;
}
.intro-preview__title{
  margin:0;color:var(--intro-green);font-family:Arial,sans-serif;font-weight:700;
  font-size:clamp(60px,8vw,118px);line-height:.95;letter-spacing:-.075em;
  white-space:nowrap;transform-origin:center center;will-change:left,top,font-size,letter-spacing,transform;
}
.intro-preview__button{
  min-width:132px;padding:13px 25px;border:1px solid rgba(0,110,95,.48);border-radius:999px;
  background:rgba(255,255,255,.48);backdrop-filter:blur(12px);color:var(--intro-green);
  font:700 11px/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 12px 38px rgba(23,72,62,.08);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.intro-preview__button:hover,.intro-preview__button:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.82);box-shadow:0 18px 40px rgba(23,72,62,.14)}
.intro-preview__hint{position:absolute;bottom:28px;left:50%;translate:-50% 0;margin:0;color:rgba(32,60,52,.56);font:10px/1.5 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.intro-preview.is-leaving .intro-preview__button,.intro-preview.is-leaving .intro-preview__hint{opacity:0;transform:translateY(8px);transition:opacity .24s ease,transform .24s ease}
.intro-preview.is-leaving .intro-preview__logo{opacity:0;transform:scale(.96)}
.intro-preview.is-leaving .intro-preview__glow,.intro-preview.is-leaving .intro-preview__contours,.intro-preview.is-leaving canvas{opacity:0;transition:opacity .68s ease}

@keyframes intro-drift-one{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(13vw,10vh,0) scale(1.12)}
}
@keyframes intro-drift-two{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-10vw,-8vh,0) scale(.94)}
}
@keyframes intro-drift-three{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-7vw,12vh,0) scale(1.18)}
}

@media(max-width:600px){
  .intro-preview__logo{width:86px;height:86px}
  .intro-preview__title{font-size:clamp(34px,11vw,54px);letter-spacing:-.065em;width:max-content;max-width:none}
  .intro-preview__center{gap:18px;transform:translateY(-12px)}
  .intro-preview__button{min-width:118px;padding:12px 21px}
  .intro-preview__hint{width:100%;text-align:center;bottom:20px}
}
@media(prefers-reduced-motion:reduce){
  .intro-preview__glow{animation:none}
  .intro-preview__contours{display:none}
}