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

html{
  scroll-behavior:smooth;
}

body{
  background:black;
  color:white;
  font-family:'Noto Sans TC',sans-serif;
  overflow-x:hidden;
  cursor:none;
}

#bg-canvas{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}

#bg-canvas canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

#info{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:10;
  text-align:center;
  pointer-events:none;
}

h1{
  font-family:'Noto Sans TC',sans-serif;
  font-size:clamp(48px, 8vw, 140px);
  font-weight:300;
  letter-spacing:0.08em;
  line-height:1;
  mix-blend-mode:difference;
}

nav{
  position:fixed;
  right:60px;
  top:60px;
  z-index:100;
}

nav a{
  color:white;
  text-decoration:none;
  margin-left:28px;
  font-family:'Cinzel',serif;
  font-size:14px;
  letter-spacing:0.14em;
  opacity:0.7;
}

#hint{
  position:fixed;
  left:60px;
  bottom:50px;
  font-family:'Cinzel',serif;
  font-size:12px;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.16em;
  z-index:10;
}

.cursor{
  width:14px;
  height:14px;
  background:white;
  border-radius:50%;
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  transition:width 0.15s, height 0.15s;
  will-change:transform;
}

.cursor.active{
  width:42px;
  height:42px;
}

.menu-btn{
  position:fixed;
  left:60px;
  top:60px;
  z-index:200;
  width:34px;
  height:24px;
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:none;
  opacity:0;
  pointer-events:none;
  transition:0.4s;
}

.menu-btn.show{
  opacity:1;
  pointer-events:auto;
}

.menu-btn span{
  width:100%;
  height:1.5px;
  background:black;
  display:block;
}

.side-menu{
  position:fixed;
  left:60px;
  top:110px;
  z-index:190;
  display:flex;
  flex-direction:column;
  gap:18px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
  transition:0.3s;
  background:white;
  padding:20px 24px;
}

.side-menu.active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.side-menu a{
  color:black;
  text-decoration:none;
  font-family:'Cinzel',serif;
  font-size:14px;
  letter-spacing:0.14em;
}

/* WORKS */

.works-section{
  position:relative;
  z-index:20;
  min-height:100vh;
  margin-top:100vh;
  background:white;
  color:black;
  padding:80px 0 0;
  overflow:hidden;
}

.works-section h2{
  text-align:center;
  font-family:'Cinzel',serif;
  font-size:72px;
  font-weight:400;
  letter-spacing:0.18em;
  margin-bottom:30px;
}

.works-subtitle{
  font-family:'Cinzel',serif;
  font-size:14px;
  letter-spacing:0.22em;
  text-align:center;
  margin-bottom:36px;
  opacity:0.55;
}

.works-row{
  display:flex;
  gap:18px;
  width:100%;
  overflow-x:auto;
  padding:0 8vw 90px;
  scroll-snap-type:none;
  scroll-behavior:auto;
  scrollbar-width:none;
  cursor:grab;
}

.works-row::-webkit-scrollbar{
  display:none;
}

.work-card{
  flex:0 0 28vw;
  min-width:420px;
  position:relative;
  transition:0.35s;
}

.work-card:hover{
  transform:translateY(-8px);
}

.hand-canvas-wrap,
.wave-canvas-wrap,
.jellyfish-canvas-wrap,
.cat-canvas-wrap{
  width:100%;
  height:62vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

.hand-canvas-wrap{
  background:black;
}

.wave-canvas-wrap{
  background:#BAD6E4;
}

.jellyfish-canvas-wrap{
  background:black;
}

.cat-canvas-wrap{
  background:#6481a0;
}

.work-card canvas,
.work-card img{
  width:100% !important;
  height:62vh !important;
  display:block;
}

.work-image{
  object-fit:cover;
  background:black;
}

.work-card h3{
  margin-top:18px;
  font-family:'Noto Sans TC',sans-serif;
  font-size:22px;
  font-weight:400;
}

.work-card p{
  margin-top:8px;
  font-family:'Noto Sans TC',sans-serif;
  color:rgba(0,0,0,0.55);
  font-size:14px;
  line-height:1.8;
}

/* PHOTOGRAPHY */

.photo-wrapper{
  position:relative;
  z-index:40;
  height:700vh;
  background:black;
}

.photo-area{
  position:sticky;
  top:0;
  height:100vh;
  background:black;
  color:white;
  padding:90px 8vw;
  overflow:hidden;
}

.photo-subtitle{
  color:white;
  opacity:0.5;
}

.photo-layout{
  height:calc(100vh - 180px);
  display:flex;
  align-items:center;
  gap:70px;
}

.photo-left{
  width:28%;
  margin-left:-120px;
  position:relative;
  z-index:20;
}

.photo-left h2{
  margin-top:20px;
  font-family:'Cinzel',serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:0.18em;
}

.photo-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  flex:1;
  position:relative;
  z-index:5;
}

.photo-stack{
  width:42vw;
  height:58vh;
  position:relative;
  perspective:1200px;
}

.photo-card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 28px 90px rgba(0,0,0,0.75);
  opacity:0;
  z-index:1;
  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    filter 0.7s ease;
}

.photo-card:nth-child(1){
  transform:translate(-34px,28px) rotate(-7deg) scale(0.92);
}

.photo-card:nth-child(2){
  transform:translate(28px,-22px) rotate(5deg) scale(0.92);
}

.photo-card:nth-child(3){
  transform:translate(42px,30px) rotate(8deg) scale(0.92);
}

.photo-card:nth-child(4){
  transform:translate(-28px,-32px) rotate(-5deg) scale(0.92);
}

.photo-card:nth-child(5){
  transform:translate(18px,38px) rotate(4deg) scale(0.92);
}

.photo-card:nth-child(6){
  transform:translate(-42px,12px) rotate(-8deg) scale(0.92);
}

.photo-card:nth-child(7){
  transform:translate(38px,-14px) rotate(6deg) scale(0.92);
}

.photo-card.behind{
  opacity:0.45;
  filter:brightness(0.65);
}

.photo-card.active{
  opacity:1;
  z-index:10;
  transform:translate(0,0) rotate(0deg) scale(1);
  filter:brightness(1);
}

.photo-info{
  width:150px;
  font-family:'Cinzel',serif;
  font-size:13px;
  letter-spacing:0.1em;
  line-height:2.2;
  color:rgba(255,255,255,0.7);
}

/* VIDEO / GIF */

.video-section{
  position:relative;
  z-index:45;
  min-height:100vh;
  background:black;
  color:white;
  padding:120px 8vw 140px;
  overflow:hidden;
}

.video-title{
  text-align:center;
}

.video-title span{
  font-family:'Cinzel',serif;
  font-size:13px;
  letter-spacing:0.22em;
  opacity:0.5;
}

.video-title h2{
  margin-top:24px;
  font-family:'Cinzel',serif;
  font-size:72px;
  font-weight:400;
  letter-spacing:0.18em;
}

.motion-slider{
  position:relative;
  margin-top:90px;
  height:62vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.motion-stage{
  position:relative;
  width:min(720px, 58vw);
  height:420px;
}

.motion-media{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(0.86);
  filter:brightness(0.55);
  pointer-events:none;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    filter 0.6s ease;
}

.motion-media.active{
  opacity:1;
  transform:scale(1);
  filter:brightness(1);
  pointer-events:auto;
  z-index:5;
}

.motion-media img,
.motion-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:black;
}

.motion-text{
  position:absolute;
  left:-120px;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  color:white;
}

.motion-text h3{
  font-family:'Noto Sans TC',sans-serif;
  font-size:42px;
  font-weight:300;
  margin-bottom:10px;
  text-shadow:0 0 30px rgba(0,0,0,0.7);
}

.motion-text p{
  display:inline-block;
  background:white;
  color:black;
  font-family:'Noto Sans TC',sans-serif;
  font-size:15px;
  padding:5px 14px;
}

.motion-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.2);
  color:white;
  font-size:36px;
  line-height:38px;
  cursor:pointer;
  z-index:30;
}

.motion-prev{
  left:14vw;
}

.motion-next{
  right:14vw;
}

.motion-btn:hover{
  background:white;
  color:black;
}

/* ABOUT */

.about-section{
  position:relative;
  z-index:50;
  min-height:100vh;
  background:black;
  color:white;
  padding:120px 8vw;
  display:flex;
  justify-content:space-between;
  gap:120px;
}

.about-left h2{
  font-family:'Cinzel',serif;
  font-size:72px;
  font-weight:400;
  letter-spacing:0.18em;
}

.about-right{
  max-width:720px;
}

.about-text h2{
  font-family:'Noto Sans TC',sans-serif;
  font-size:36px;
  font-weight:300;
  margin-bottom:24px;
}

.about-text h3{
  font-family:'Noto Sans TC',sans-serif;
  font-size:20px;
  font-weight:300;
  line-height:2;
  color:rgba(255,255,255,0.85);
}

.about-info{
  margin-top:70px;
}

.info-block{
  margin-bottom:36px;
}

.info-block span{
  font-family:'Cinzel',serif;
  font-size:12px;
  letter-spacing:0.16em;
  opacity:0.5;
}

.info-block p{
  font-family:'Noto Sans TC',sans-serif;
  margin-top:10px;
  font-size:18px;
}

/* VIDEO / GIF */

.video-section{
  position:relative;
  z-index:45;
  min-height:100vh;
  background:white;
  color:black;
  padding:120px 8vw 140px;
  overflow:hidden;
}

.video-title{
  text-align:center;
}

.video-title span{
  font-family:'Cinzel',serif;
  font-size:13px;
  letter-spacing:0.22em;
  opacity:0.45;
}

.video-title h2{
  margin-top:24px;
  font-family:'Cinzel',serif;
  font-size:72px;
  font-weight:400;
  letter-spacing:0.18em;
}

.motion-carousel{
  position:relative;
  margin-top:90px;
  height:62vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.motion-view{
  position:relative;
  width:min(760px, 58vw);
  height:430px;
}

.motion-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateX(80px) scale(0.92);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.motion-slide.active{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
  z-index:5;
}

.motion-cover{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#ddd;
}

.motion-cover img,
.motion-cover video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.motion-info{
  position:absolute;
  left:-250px;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  color:black;
  pointer-events:none;
}

.motion-info h3{
  font-family:'Noto Sans TC',sans-serif;
  font-size:44px;
  font-weight:300;
  margin-bottom:12px;
  line-height:1.1;
}

.motion-info p{
  font-family:'Cinzel',serif;
  font-size:13px;
  letter-spacing:0.16em;
  color:rgba(0,0,0,0.55);
}

.motion-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.3);
  background:white;
  color:black;
  font-size:36px;
  line-height:38px;
  cursor:pointer;
  z-index:30;
}

.motion-prev{
  left:16vw;
}

.motion-next{
  right:16vw;
}

.motion-btn:hover{
  background:black;
  color:white;
}

/* MOBILE */

@media screen and (max-width:768px){
  .video-section{
    padding:80px 24px 90px;
  }

  .video-title h2{
    font-size:42px;
  }

  .motion-carousel{
    margin-top:60px;
    height:62vh;
  }

  .motion-view{
    width:82vw;
    height:46vh;
  }

  .motion-info{
    left:20px;
    top:56%;
  }

  .motion-info h3{
    font-size:30px;
  }

  .motion-info p{
    font-size:12px;
  }

  .motion-prev{
    left:8px;
  }

  .motion-next{
    right:8px;
  }
}