/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter', sans-serif;

  overflow-x:hidden;

  background:#000;

  color:#fff;

}

img{
  width:100%;
  display:block;
}

button{
  border:none;
  background:none;
  cursor:pointer;
}

/* =========================
   INTRO
========================= */

.intro{

  position:fixed;
  inset:0;

  width:100%;
  min-height:100vh;

  overflow-y:auto;

  z-index:9999;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  padding-top:24px;

}

/* =========================
   VIDEO
========================= */

.intro-video{

  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.01);

  filter:
  blur(2px)
  brightness(0.72)
  contrast(1.08)
  saturate(1.08);

}

/* =========================
   OVERLAY
========================= */

.intro-overlay{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
  180deg,
  rgba(0,0,0,0.18),
  rgba(0,0,0,0.42)
  );

}

/* =========================
   CONTENT
========================= */

.intro-content{

  position:relative;

  z-index:5;

  width:100%;

  display:flex;
  flex-direction:column;

  align-items:center;

  padding:
  10px 20px 40px;

}

/* =========================
   LOGO
========================= */

.logo-wrap{

  width:180px;
  height:180px;

  border-radius:50%;

  overflow:hidden;

  margin-bottom:26px;

  box-shadow:
  0 20px 80px rgba(0,0,0,0.45);

  animation:
  floatLogo 8s ease-in-out infinite;

  flex-shrink:0;

}

.logo{

  width:100%;
  height:100%;

  object-fit:cover;

}

/* =========================
   GLASS CARD
========================= */

.glass-card{

  position:relative;

  width:560px;

  padding:
  30px 36px;

  border-radius:34px;

  background:
  rgba(255,255,255,0.06);

  backdrop-filter:
  blur(24px);

  border:
  1px solid rgba(255,255,255,0.12);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.24);

  text-align:center;

  margin-bottom:26px;

}

.glass-card::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  padding:1px;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.18),
  rgba(255,255,255,0.02)
  );

  -webkit-mask:
  linear-gradient(#fff 0 0) content-box,
  linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

  pointer-events:none;

}

/* =========================
   WELCOME
========================= */

.welcome-text{

  font-size:0.9rem;

  font-weight:400;

  letter-spacing:7px;

  color:
  rgba(255,255,255,0.78);

  margin-bottom:20px;

}

/* =========================
   LINE
========================= */

.line{

  width:100%;

  max-width:220px;

  height:1px;

  margin:0 auto 24px;

  background:
  rgba(255,255,255,0.18);

  position:relative;

}

.line::after{

  content:"";

  position:absolute;

  top:50%;
  left:50%;

  width:7px;
  height:7px;

  border-radius:50%;

  background:
  rgba(255,220,160,0.9);

  transform:
  translate(-50%,-50%);

}

/* =========================
   TITLE
========================= */

.main-title{

  font-size:5rem;

  font-weight:300;

  letter-spacing:4px;

  color:
  rgba(255,255,255,0.98);

  margin-bottom:10px;

  text-shadow:
  0 4px 30px rgba(0,0,0,0.25);

}

/* =========================
   SUB TITLE
========================= */

.sub-title{

  font-size:2rem;

  font-weight:300;

  line-height:1.2;

  color:
  rgba(255,255,255,0.94);

}

/* =========================
   BUTTON
========================= */

.enter-btn{

  position:relative;

  overflow:hidden;

  width:260px;

  height:72px;

  border-radius:999px;

  display:flex;
  justify-content:center;
  align-items:center;

  gap:12px;

  font-size:1.08rem;

  font-weight:500;

  letter-spacing:0.3px;

  color:#fff;

  background:
  linear-gradient(
  135deg,
  rgba(255,120,40,0.96),
  rgba(255,80,20,0.92)
  );

  border:
  1px solid rgba(255,255,255,0.12);

  backdrop-filter:
  blur(20px);

  box-shadow:

  0 14px 44px rgba(255,90,20,0.28),

  inset 0 1px 1px rgba(255,255,255,0.18),

  inset 0 -8px 18px rgba(0,0,0,0.22);

  transition:
  0.45s ease;

}

.enter-btn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,0.22),
  transparent
  );

  transform:skewX(-20deg);

  transition:1s;

}

.enter-btn:hover::before{

  left:140%;

}

.enter-btn:hover{

  transform:
  translateY(-4px) scale(1.02);

  box-shadow:

  0 18px 60px rgba(255,90,20,0.34),

  inset 0 1px 1px rgba(255,255,255,0.2),

  inset 0 -8px 18px rgba(0,0,0,0.24);

}

/* =========================
   SVG
========================= */

.enter-btn svg{

  opacity:0.82;

}

/* =========================
   WEBSITE
========================= */

.hero{

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  background:#111;

}

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

@keyframes floatLogo{

  0%{

    transform:
    translateY(0px);

  }

  50%{

    transform:
    translateY(-6px);

  }

  100%{

    transform:
    translateY(0px);

  }

}

/* =========================
   HIDE INTRO
========================= */

.intro.hide{

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:
  1s cubic-bezier(.77,0,.18,1);

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .intro{

    padding-top:16px;

  }

  .logo-wrap{

    width:150px;
    height:150px;

    margin-bottom:24px;

  }

  .glass-card{

    width:90vw;

    padding:28px 22px;

    border-radius:30px;

  }

  .welcome-text{

    font-size:0.78rem;

    letter-spacing:5px;

  }

  .main-title{

    font-size:3.6rem;

    letter-spacing:4px;

  }

  .sub-title{

    font-size:1.6rem;

  }

  .enter-btn{

    width:220px;
    height:68px;

    font-size:1rem;

  }

}

@media(max-width:768px){

  .enter-btn{

    animation:
    mobileGlow 3s ease-in-out infinite;

  }

}

@keyframes mobileGlow{

  0%{

    box-shadow:
    0 12px 40px rgba(255,90,20,0.20);

  }

  50%{

    box-shadow:
    0 16px 54px rgba(255,90,20,0.34);

  }

  100%{

    box-shadow:
    0 12px 40px rgba(255,90,20,0.20);

  }

}