@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@font-face{
  font-family:"Area51 Built Titling";
  src:url("https://area51asbestos.com.au/wp-content/uploads/2026/09/built-titling-sb.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   AREA 51 — SITE INTRO
========================================================= */

#a51-site-intro,
#a51-site-intro *{
  box-sizing:border-box;
}

#a51-site-intro{
  --green:#39B54A;
  --lime:#A8D94F;
  --black:#0B0D0C;

  position:fixed;
  z-index:2147483000;

  inset:0;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:#070908;
  color:#FFFFFF;

  font-family:"Inter",Arial,sans-serif;

  opacity:1;
  visibility:visible;

  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    visibility .72s ease;
}

#a51-site-intro.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#a51-site-intro::before{
  content:"";

  position:absolute;

  width:min(65vw,920px);
  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(57,181,74,.11) 0%,
      rgba(57,181,74,.04) 30%,
      rgba(57,181,74,0) 70%
    );

  filter:blur(18px);

  opacity:0;

  animation:a51IntroGlow 1.7s ease .12s forwards;
}

.a51-intro__grid{
  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:0;

  background:
    linear-gradient(rgba(57,181,74,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,181,74,.035) 1px,transparent 1px);

  background-size:54px 54px;

  animation:a51IntroGrid .65s ease .05s forwards;
}

.a51-intro__line{
  position:absolute;

  left:50%;

  width:min(760px,72vw);
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(57,181,74,.25) 16%,
      var(--green) 50%,
      rgba(57,181,74,.25) 84%,
      transparent
    );

  transform:translateX(-50%) scaleX(0);

  opacity:.82;
}

.a51-intro__line--top{
  top:24%;
  animation:a51IntroLine .72s cubic-bezier(.22,1,.36,1) .18s forwards;
}

.a51-intro__line--bottom{
  bottom:24%;
  animation:a51IntroLine .72s cubic-bezier(.22,1,.36,1) .30s forwards;
}

.a51-intro__content{
  position:relative;
  z-index:2;

  width:min(760px,calc(100% - 44px));

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.a51-intro__icon-wrap{
  position:relative;

  width:132px;
  height:132px;

  display:grid;
  place-items:center;

  opacity:0;

  transform:
    translateY(14px)
    scale(.86);

  filter:blur(6px);

  animation:
    a51IntroIconIn
    .74s
    cubic-bezier(.16,1,.3,1)
    .12s
    forwards;
}

.a51-intro__icon-wrap::before{
  content:"";

  position:absolute;

  inset:-18px;

  border:1px solid rgba(57,181,74,.22);
  border-radius:50%;

  opacity:0;

  transform:scale(.72);

  animation:
    a51IntroRing
    1.1s
    cubic-bezier(.16,1,.3,1)
    .28s
    forwards;
}

.a51-intro__icon-wrap::after{
  content:"";

  position:absolute;

  inset:-8px;

  border-radius:50%;

  border-top:1px solid rgba(168,217,79,.75);
  border-right:1px solid transparent;
  border-bottom:1px solid rgba(57,181,74,.16);
  border-left:1px solid transparent;

  opacity:0;

  animation:
    a51IntroOrbitIn .45s ease .34s forwards,
    a51IntroOrbit 3.8s linear .34s infinite;
}

.a51-intro__icon{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  filter:
    drop-shadow(0 0 18px rgba(57,181,74,.12));
}

.a51-intro__title{
  margin:27px 0 0;

  overflow:hidden;

  font-family:"Area51 Built Titling",Impact,sans-serif;
  font-size:clamp(46px,5vw,72px);
  font-weight:600;
  line-height:.85;
  letter-spacing:.04em;
  text-transform:uppercase;

  color:#FFFFFF;
}

.a51-intro__title span{
  display:block;

  opacity:0;

  transform:translateY(100%);

  animation:
    a51IntroTextUp
    .62s
    cubic-bezier(.16,1,.3,1)
    .52s
    forwards;
}

.a51-intro__sub{
  margin-top:12px;

  opacity:0;
  transform:translateY(8px);

  font-size:7px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(255,255,255,.42);

  animation:
    a51IntroFadeUp
    .5s
    ease
    .72s
    forwards;
}

.a51-intro__progress{
  position:relative;

  width:min(330px,70vw);
  height:2px;

  margin-top:28px;

  overflow:hidden;

  background:rgba(255,255,255,.08);

  opacity:0;

  animation:a51IntroFade .25s ease .74s forwards;
}

.a51-intro__progress::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--lime)
    );

  transform:translateX(-100%);

  animation:
    a51IntroProgress
    1.08s
    cubic-bezier(.4,0,.2,1)
    .78s
    forwards;
}

.a51-intro__status{
  margin-top:9px;

  opacity:0;

  font-size:5.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:rgba(255,255,255,.25);

  animation:a51IntroFade .3s ease .84s forwards;
}

.a51-intro__wipe{
  position:absolute;
  z-index:4;

  left:-10%;
  right:-10%;
  top:0;

  height:138%;

  pointer-events:none;

  transform:translateY(104%);

  background:
    linear-gradient(
      180deg,
      rgba(57,181,74,0) 0%,
      rgba(57,181,74,.20) 7%,
      rgba(57,181,74,.72) 18%,
      #39B54A 34%,
      #39B54A 68%,
      rgba(57,181,74,.70) 84%,
      rgba(57,181,74,0) 100%
    );

  filter:blur(1px);

  will-change:transform;
}

#a51-site-intro.is-wiping .a51-intro__content{
  animation:
    a51IntroContentOut
    .38s
    cubic-bezier(.4,0,.2,1)
    forwards;
}

#a51-site-intro.is-wiping .a51-intro__line{
  animation:
    a51IntroLineOut
    .34s
    ease
    forwards;
}

#a51-site-intro.is-wiping .a51-intro__grid{
  animation:
    a51IntroGridOut
    .52s
    ease
    forwards;
}

#a51-site-intro.is-wiping::before{
  animation:
    a51IntroGlowOut
    .54s
    ease
    forwards;
}

#a51-site-intro.is-wiping .a51-intro__wipe{
  animation:
    a51IntroWipeSmooth
    .92s
    cubic-bezier(.65,0,.35,1)
    forwards;
}

@keyframes a51IntroGrid{
  from{opacity:0}
  to{opacity:1}
}

@keyframes a51IntroGlow{
  from{
    opacity:0;
    transform:scale(.85);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes a51IntroLine{
  from{
    transform:translateX(-50%) scaleX(0);
  }
  to{
    transform:translateX(-50%) scaleX(1);
  }
}

@keyframes a51IntroIconIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.86);
    filter:blur(6px);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes a51IntroRing{
  0%{
    opacity:0;
    transform:scale(.72);
  }

  45%{
    opacity:.70;
  }

  100%{
    opacity:.18;
    transform:scale(1.06);
  }
}

@keyframes a51IntroOrbitIn{
  from{opacity:0}
  to{opacity:.72}
}

@keyframes a51IntroOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes a51IntroTextUp{
  from{
    opacity:0;
    transform:translateY(100%);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes a51IntroFadeUp{
  from{
    opacity:0;
    transform:translateY(8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes a51IntroFade{
  from{opacity:0}
  to{opacity:1}
}

@keyframes a51IntroProgress{
  from{transform:translateX(-100%)}
  to{transform:translateX(0)}
}

@keyframes a51IntroContentOut{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }

  to{
    opacity:0;
    transform:translateY(-8px) scale(.985);
    filter:blur(2px);
  }
}

@keyframes a51IntroLineOut{
  from{
    opacity:.82;
  }

  to{
    opacity:0;
  }
}

@keyframes a51IntroGridOut{
  from{
    opacity:1;
  }

  to{
    opacity:0;
  }
}

@keyframes a51IntroGlowOut{
  from{
    opacity:1;
  }

  to{
    opacity:0;
  }
}

@keyframes a51IntroWipeSmooth{
  0%{
    transform:translateY(104%);
  }

  50%{
    transform:translateY(-12%);
  }

  100%{
    transform:translateY(-112%);
  }
}

@media(max-width:767px){

  .a51-intro__line{
    width:78vw;
  }

  .a51-intro__line--top{
    top:20%;
  }

  .a51-intro__line--bottom{
    bottom:20%;
  }

  .a51-intro__icon-wrap{
    width:105px;
    height:105px;
  }

  .a51-intro__title{
    margin-top:24px;
    font-size:clamp(46px,14vw,62px);
  }

  .a51-intro__sub{
    max-width:300px;
    font-size:6px;
    line-height:1.6;
  }

}

@media(prefers-reduced-motion:reduce){

  #a51-site-intro{
    display:none!important;
  }

}