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

body{
  background:#000;
  color:#fff;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.splash{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

/* ── Carousel ── */
.carousel-wrap{
  position:absolute;
  inset:0;
  top:15%;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:2400px;
  touch-action:none;
  cursor:grab;
  z-index:1;
}
.carousel-wrap:active{cursor:grabbing}

.carousel__tilt{
  transform-style:preserve-3d;
}
.carousel__ring{
  position:relative;
  transform-style:preserve-3d;
}
.carousel__card{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.carousel__face{
  position:absolute;
  inset:0;
  border-radius:6px;
  overflow:hidden;
  backface-visibility:hidden;
  background-size:cover;
  background-position:center;
}
.carousel__face--front{
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.carousel__face--back{
  transform:rotateY(180deg);
}

/* ── Vignette over carousel ── */
.splash::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 30% at 50% 35%,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.35) 60%,transparent 100%);
  z-index:5;
  pointer-events:none;
}

/* ── Content overlay ── */
.splash__content{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.5rem;
  pointer-events:none;
  margin-top:-18vh;
}

/* ── Name ── */
.splash__name{
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.4rem,7vw,5.5rem);
  font-weight:400;
  letter-spacing:0.06em;
  line-height:1;
  color:#fff;
  text-shadow:0 0 80px rgba(255,255,255,0.2),0 2px 40px rgba(0,0,0,0.8);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.splash__letter{
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  animation:letterIn 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
.splash__space{
  width:0.3em;
}

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

.splash__letter:nth-child(1){animation-delay:0.3s}
.splash__letter:nth-child(2){animation-delay:0.36s}
.splash__letter:nth-child(3){animation-delay:0.42s}
.splash__letter:nth-child(4){animation-delay:0.48s}
.splash__letter:nth-child(5){animation-delay:0.54s}
.splash__letter:nth-child(6){animation-delay:0.6s}
/* space is child 7 */
.splash__letter:nth-child(8){animation-delay:0.8s}
.splash__letter:nth-child(9){animation-delay:0.86s}
.splash__letter:nth-child(10){animation-delay:0.92s}
.splash__letter:nth-child(11){animation-delay:0.98s}
.splash__letter:nth-child(12){animation-delay:1.04s}
.splash__letter:nth-child(13){animation-delay:1.1s}
.splash__letter:nth-child(14){animation-delay:1.16s}

/* ── ENTER ── */
.splash__enter{
  pointer-events:auto;
  text-decoration:none;
  color:rgba(255,255,255,0.6);
  font-family:'Inter',sans-serif;
  font-size:0.8rem;
  font-weight:300;
  letter-spacing:0.35em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:color 0.4s;
  opacity:0;
  animation:fadeUp 0.8s 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
.splash__enter:hover{
  color:rgba(255,255,255,1);
}

.splash__enter-line{
  display:block;
  width:32px;
  height:1px;
  background:rgba(255,255,255,0.3);
  transition:width 0.4s cubic-bezier(0.22,1,0.36,1),background 0.4s;
}
.splash__enter:hover .splash__enter-line{
  width:56px;
  background:rgba(255,255,255,0.7);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Mobile ── */
@media(max-width:600px){
  .splash__content{gap:2rem}
}