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

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

html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}

body{
  background:#000;
  color:#fff;
  overflow-x:hidden;

  font-family:
    "Helvetica Neue",
    "Noto Sans JP",
    sans-serif;
}

/* =========================
GLOBAL
========================= */

section{
  position:relative;
  width:100%;
  height:100vh;

  scroll-snap-align:start;

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

  overflow:hidden;
}

img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
UI
========================= */

.ui-left{
  position:fixed;
  top:24px;
  left:24px;

  z-index:999;

  color:#666;
  font-size:11px;
  letter-spacing:0.4em;
}

.ui-right{
  position:fixed;
  top:24px;
  right:24px;

  z-index:999;

  color:#666;
  font-size:11px;
  letter-spacing:0.4em;
}

/* =========================
OPENING
========================= */

.opening{
  background:#000;
  text-align:center;
}

.opening-sub{
  color:#666;
  letter-spacing:0.6em;
  font-size:12px;
  margin-bottom:30px;
}

.opening h1{
  font-size:10vw;
  font-weight:100;
  letter-spacing:0.25em;
}

.opening-text{
  margin-top:40px;
  color:#888;
  line-height:2;
  font-size:14px;
}

.scroll-line{
  width:1px;
  height:100px;
  background:#333;
  margin:60px auto 0;
}

/* =========================
ROOM
========================= */

.room{

  background:
    radial-gradient(
      circle at center,
      #111 0%,
      #000 70%
    );

  flex-direction:column;
}

/* =========================
ARTWORK
========================= */

.artwork{

  width:min(78vw, 1000px);
  height:min(66vh, 680px);

  background:#050505;

  padding:18px;

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

  box-shadow:

    0 0 80px rgba(255,255,255,0.03),

    0 40px 120px rgba(0,0,0,0.9);

}

.artwork img{
  transition:10s ease;
  transform:scale(1.02);
}

.room:hover .artwork img{
  transform:scale(1);
}

/* =========================
CAPTION
========================= */

.caption-area{

  width:min(78vw, 1000px);

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  margin-top:26px;

  color:#777;
}

.caption-left{
  max-width:420px;
}

.room-number{
  font-size:11px;
  letter-spacing:0.4em;
  margin-bottom:12px;
}

.room-title{
  font-size:22px;
  font-weight:300;
  letter-spacing:0.12em;

  margin-bottom:10px;

  color:#ddd;
}

.room-caption{
  font-size:13px;
  line-height:2;
  color:#888;
}

.caption-right{
  font-size:11px;
  letter-spacing:0.3em;
  color:#555;
}

/* =========================
ENDING
========================= */

.ending{
  text-align:center;
  background:#000;
}

.end-text{
  font-size:clamp(28px, 5vw, 68px);
  font-weight:100;
  letter-spacing:0.2em;
  color:#ddd;
}

/* =========================
FADE
========================= */

.fade{
  opacity:0;
  transform:translateY(40px);

  transition:1.8s ease;
}

.fade.show{
  opacity:1;
  transform:translateY(0);
}

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

@media(max-width:768px){

  .opening h1{
    font-size:18vw;
    letter-spacing:0.15em;
  }

  .artwork{

    width:90vw;
    height:62vh;

    padding:10px;
  }

  .caption-area{

    width:90vw;

    flex-direction:column;

    gap:18px;

    margin-top:20px;
  }

  .room-title{
    font-size:18px;
  }

  .room-caption{
    font-size:12px;
    line-height:1.8;
  }

}