html,
body{

  margin:0;
  padding:0;

  background:black;

  color:white;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x:hidden;
}

#mage-container{

  position:fixed;

  inset:0;

  overflow:hidden;

  z-index:0;
}

#mage-container canvas{

  width:100%;
  height:100%;

  display:block;

  filter:
    brightness(.75)
    contrast(1.1);
}

main{

  position:relative;

  z-index:10;
}

section{

  min-height:220vh;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    10vh
    10vw;
}

section:nth-child(even){

  align-items:flex-end;
}

section:nth-child(odd){

  align-items:flex-start;
}

.hero{

  min-height:180vh;

  align-items:center !important;

  text-align:center;
}

.content-card{

  position:relative;

  max-width:850px;

  padding:
    2rem
    0;
}

.content-card::before{

  content:"";

  position:absolute;

  left:-120px;
  right:-120px;

  top:-120px;
  bottom:-120px;

  z-index:-1;

  background:
    radial-gradient(

      ellipse at center,

      rgba(0,0,0,.72),

      rgba(0,0,0,.45) 45%,

      rgba(0,0,0,.18) 70%,

      transparent 100%

    );

  pointer-events:none;
}

.hero-card::before{

  left:-220px;
  right:-220px;

  top:-220px;
  bottom:-220px;
}

.final-card{

  text-align:center;
}

.eyebrow{

  margin-bottom:1rem;

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

  font-size:.85rem;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.3em;

  text-shadow:
    0 0 20px rgba(0,0,0,.95);
}

h1{

  margin:0;

  font-size:
    clamp(
      7rem,
      18vw,
      18rem
    );

  line-height:.82;

  letter-spacing:.08em;

  font-weight:800;

  text-shadow:

    0 0 30px rgba(0,0,0,.95),

    0 0 80px rgba(0,0,0,.95),

    0 0 140px rgba(0,0,0,.95);
}

h2{

  margin:
    0
    0
    1.5rem;

  font-size:
    clamp(
      3rem,
      7vw,
      6.5rem
    );

  line-height:.95;

  letter-spacing:-.05em;

  font-weight:750;

  text-shadow:

    0 0 30px rgba(0,0,0,.95),

    0 0 80px rgba(0,0,0,.95);
}

p{

  max-width:760px;

  margin:
    0
    0
    1.4rem;

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

  font-size:
    clamp(
      1.15rem,
      2vw,
      1.45rem
    );

  line-height:1.8;

  text-shadow:

    0 2px 15px rgba(0,0,0,.95),

    0 0 40px rgba(0,0,0,.95);
}

.subtitle{

  margin-top:1rem;

  font-size:
    clamp(
      1.4rem,
      3vw,
      2.5rem
    );

  text-transform:uppercase;

  letter-spacing:.12em;
}

.scroll-note{

  margin-top:2.5rem;

  font-size:.95rem;

  opacity:.65;

  text-transform:uppercase;

  letter-spacing:.2em;
}

.spec-grid{

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:1rem;

  margin-top:2rem;
}

.spec-grid span{

  padding:
    .8rem
    1rem;

  border-left:
    2px solid
    rgba(255,255,255,.35);

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

  font-size:1rem;

  text-shadow:
    0 0 20px rgba(0,0,0,.9);
}

/* ==========================================
   ANIMATION
========================================== */

.fade,
.slide-left,
.slide-right{

  opacity:0;

  transition:

    opacity 1.4s ease,

    transform 1.4s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    );
}

.fade{

  transform:

    translateY(180px)

    scale(.95);
}

.slide-left{

  transform:

    translateX(-450px)

    rotate(-5deg)

    scale(.9);
}

.slide-right{

  transform:

    translateX(450px)

    rotate(5deg)

    scale(.9);
}

.visible{

  opacity:1;

  transform:

    translateX(0)

    translateY(0)

    rotate(0)

    scale(1);
}

@media (max-width:900px){

  section,
  section:nth-child(even),
  section:nth-child(odd){

    align-items:center;

    min-height:180vh;

    padding:
      8vh
      7vw;
  }

  .content-card{

    max-width:100%;
  }

  .content-card::before{

    left:-40px;
    right:-40px;

    top:-60px;
    bottom:-60px;
  }

  .spec-grid{

    grid-template-columns:1fr;
  }
}

#loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at center, #111827, #000 70%);
  color:white;
  transition:
    opacity 1.4s ease,
    visibility 1.4s ease;
}

#loader.hidden{
  opacity:0;
  visibility:hidden;
}

.loader-inner{
  text-align:center;
}

.loader-mark{
  font-size:clamp(4rem,12vw,10rem);
  font-weight:800;
  letter-spacing:.12em;
  text-shadow:
    0 0 40px rgba(255,255,255,.25),
    0 0 120px rgba(255,255,255,.12);
}

.loader-line{
  width:260px;
  height:1px;
  margin:2rem auto;
  background:rgba(255,255,255,.25);
  overflow:hidden;
  position:relative;
}

.loader-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:white;
  transform:translateX(-100%);
  animation:loaderSweep 10s ease forwards;
}

.loader-text{
  font-size:.8rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

@keyframes loaderSweep{
  to{
    transform:translateX(0);
  }
}