/* Base */
.jks2{
  --accent:#7c5cff;
  --radius:28px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  background:#000;
  color:#fff;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.jks2, .jks2 *{
  box-sizing:border-box;
  min-width:0;
}
.jks2 section{
  width:100%;
  margin:0 auto;
  position:relative;
  z-index:1;
}
html,body{
  overflow-x:hidden;
}
.jks2 img{
  max-width:100%;
  display:block;
}

/* Floaters */
.jks2-floaters{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  width:100%;
  height:100%;
  clip-path:inset(0);
  overflow:clip;
}
@supports not (overflow:clip){
  .jks2-floaters{ overflow:hidden; }
}
.jks2-floater{
  position:absolute;
  left:var(--x,50vw);
  top:var(--y,50vh);
  width:var(--size,100px);
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.45));
  animation:jks2-bob var(--bobT,4.6s) ease-in-out infinite alternate;
}
@keyframes jks2-bob{
  from{ transform:translate3d(0,0,0) rotateZ(0); }
  to{   transform:translate3d(0,calc(-1*var(--amp,22px)),0) rotateZ(2deg); }
}
@media (prefers-reduced-motion:reduce){
  .jks2-floaters{ display:none; }
}

/* ======================= Words 區塊 ======================= */

/* Words：上方 / 下方共用的基礎樣式 */
.jks2-words{
  width:100%;
}

.jks2-words-scene{
  position:sticky;
  top:0;
  height:50vh;
  display:grid;
  place-items:center;
  perspective:1200px;
  text-align:center;
}

.jks2-words-line{
  font-size:clamp(40px,10vw,140px);
  font-weight:900;
  line-height:1.2;
  margin:0;
  opacity:0;
  transform:translateY(48px) rotateX(16deg) scale(.9);
  transform-origin:50% 50%;
}

.jks2-words-line--main{
  font-size:clamp(40px,10vw,140px);
}

/* 文字圖片共用的基準寬度 */
.jks2-words-line img{
  display:block;
  width:min(82vw,1080px);
  max-width:100%;
  height:auto;
  margin-inline:auto;
}

/* icon（新手大禮包那張）基準寬度 */
.jks2-words-line--icon img{
  width:min(92vw,1280px);
}

/* 針對每一行的個別大小（桌機版） */
.jks2-words-line--row1 img{  /* 第一行 */
  width:100%;
}
.jks2-words-line--row2 img{  /* 第二行（主標） */
  width:90%;
}
.jks2-words-line--row3 img{  /* 第三行 */
  width:80%;
}
.jks2-words-line--row4 img{  /* 第四行 icon */
  width:80%;
}

/* 上方 words 區塊高度 */
.jks2-words--top{
  height:70vh;
}

/* 下方 words 區塊高度 + 間距 */
.jks2-words--bottom{
  height:120vh;
  margin-top:6vh;
  margin-bottom:10vh;
}

/* 手機 RWD（寬度 <= 640px） */
@media (max-width:640px){

  /* 上方 words：避免黑屏，高度縮短 */
  .jks2-words--top{
    height:50vh;
  }

  /* 下方 words：可視需要調整 */
  .jks2-words--bottom{
    height:55vh;
    margin-top:4vh;
    margin-bottom:8vh;
  }

  /* 手機版行高/姿勢微調 */
  .jks2-words-line{
    line-height:1.0 !important;
    margin:0 !important;
    transform:translateY(16px) rotateX(8deg) scale(.9);
  }

  .jks2-words-line--main{
    font-size:clamp(32px,12.5vw,64px);
  }

  /* 手機版圖片寬度基準 */
  .jks2-words-line img{
    width:min(96vw,720px);
  }

  /* 手機版每一行可再各自縮放 */
  .jks2-words-line--row1 img{
    width:70%;
  }
  .jks2-words-line--row2 img{
    width:40%;
  }
  .jks2-words-line--row3 img{
    width:80%;
  }
  .jks2-words-line--row4 img{
    width:60%;
  }
}

/* 強制讓字幕容器本身沒有任何透明/混色 */
#JKS-2 .jks2-words,
#JKS-2 .jks2-words-scene{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
#JKS-2 .jks2-words-line{
  color:#fff !important;
  text-shadow:none !important;
}

/* ======================= Form 區塊 ======================= */

.jks2-form{
  padding:6vh 0 8vh;
  display:flex;
  justify-content:center;
  perspective:1400px;
}
.jks2-form-frame{
  position:relative;
  z-index:1;
  width:min(100%,880px);
  margin-inline:auto;
  border-radius:clamp(16px,2.2vw,32px);
  background:#fff;
  color:#111;
  box-shadow:var(--shadow);
  transform:perspective(1400px) translateY(80px) scale(.96);
  opacity:0;
  transition:
    transform .85s cubic-bezier(.22,.61,.36,1),
    opacity   .75s ease;
  padding:30px 26px;
  overflow:visible;
}
.jks2-form-frame.from-left{
  transform:perspective(1400px) translateY(80px) translateX(-6vw) scale(.96);
}
.jks2-form-frame.from-right{
  transform:perspective(1400px) translateY(80px) translateX( 6vw) scale(.96);
}
.jks2-form-frame.is-in{
  transform:perspective(1400px) translateY(0) translateX(0) scale(1);
  opacity:1;
}
@media (max-width:640px){
  .jks2-form{
    padding:4vh 0 6vh;
  }
  .jks2-form-frame{
    width:92vw;
    padding:24px 18px;
    border-radius:16px;
  }
}
#jks2-hs-form,
#jks2-hs-form form,
#jks2-hs-form .hs-form{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

/* ======================= Gallery 區塊 ======================= */

.jks2-gallery{
  padding:4vh 4vw 6vh;
  margin-top:4vh;
}
.jks2-gallery--mob{ display:none; }

@media (max-width:640px){
  .jks2-gallery{
    margin-top:4vh !important;
    padding:2vh 4vw 4vh !important;
  }
  .jks2-gallery--desk{ display:none; }
  .jks2-gallery--mob{ display:block; }
}

@media (min-width:1200px){
  .jks2 section{ max-width:1280px; }
}
.jks2-gallery-main{ position:relative; }
.jks2-stack{
  position:relative;
  height:min(72vh,760px);
  border-radius:var(--radius);
  overflow:visible;
  perspective:1400px;
}
.jks2 .jks2-card{
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#000;
  transform:translateY(30px) rotateX(12deg) translateZ(-260px) scale(.985);
  opacity:0;
  display:none;
  pointer-events:none;
}
.jks2 .jks2-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.jks2 .jks2-card.is-active{
  z-index:40;
  opacity:1;
  display:block;
  transform:translateY(0) rotateX(0) translateZ(0) scale(1);
  pointer-events:auto;
}
.jks2 .jks2-card.is-behind-1{
  z-index:30;
  opacity:.88;
  display:block;
  transform:translateY(8px) rotateX(7deg) translateZ(-90px) scale(.996);
}
.jks2 .jks2-card.is-behind-2{
  z-index:20;
  opacity:.66;
  display:block;
  transform:translateY(14px) rotateX(10deg) translateZ(-150px) scale(.992);
}
.jks2 .jks2-card.is-behind-3{
  z-index:10;
  opacity:.45;
  display:block;
  transform:translateY(20px) rotateX(12deg) translateZ(-210px) scale(.988);
}

/* Controls */
.jks2 .jks2-controls{
  position:relative;
  z-index:99;
  margin:26px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:min(880px,92vw);
  pointer-events:auto;
}
.jks2 .jks2-ctrl{
  -webkit-appearance:none;
  appearance:none;
  background:#1a1a1a;
  color:#fff;
  border:0;
  width:46px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:22px;
  cursor:pointer;
}
.jks2 .jks2-ctrl:hover{
  background:#2a2a2a;
  transform:translateY(-2px);
}
.jks2 .jks2-thumbs-wrap{
  flex:1 1 auto;
  overflow:hidden;
  border-radius:18px;
  padding:6px 4px;
  background:linear-gradient(180deg,#0f0f0f,#0b0b0b);
}
.jks2 .jks2-thumbs-rail{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding:2px 6px;
  scrollbar-width:none;
}
.jks2 .jks2-thumbs-rail::-webkit-scrollbar{ display:none; }
.jks2 .jks2-thumb{
  background:#111;
  border:2px solid transparent;
  width:88px;
  height:68px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  cursor:pointer;
  opacity:.66;
}
.jks2 .jks2-thumb.is-active{
  border-color:var(--accent);
  opacity:1;
}
.jks2 .jks2-thumb>img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:640px){
  .jks2 .jks2-controls{
    width:100%;
    padding-inline:12px;
    margin-top:18px;
  }
  .jks2 .jks2-thumb{
    width:76px;
    height:58px;
  }
  .jks2 .jks2-stack{
    height:min(56vh,520px);
  }
}

/* ======================= No-JS fallback ======================= */

.jks2.nojs .jks2-words-line,
.jks2.nojs .jks2-card,
.jks2.nojs .jks2-form-frame{
  opacity:1 !important;
  transform:none !important;
  display:block !important;
  pointer-events:auto;
  z-index:1;
}

/* 保險：祖先層也不要有透明 */
#JKS-2,
#JKS-2 section{
  opacity:1 !important;
  filter:none !important;
}