/* General */
/* General */
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Thin.woff') format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Light.woff') format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Regular.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Bold.woff') format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Thin_Italic.woff') format("woff");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Light_Italic.woff') format("woff");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Italic.woff') format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'TT_Bells';
  src: url('font/TT_Bells_Bold_Italic.woff') format("woff");
  font-weight: bold;
  font-style: italic;
}
::selection {
  color: #fff;
  background: hotpink;
}
*{
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'TT_Bells';
  font-weight: 300;
  box-sizing: border-box;
  text-decoration: none;
  font-optical-sizing: auto;
}
body, html{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth;

}
img{
  height: 6vh;
}


h1 {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.5;
  /*   backdrop-filter: blur(10px); */
}

h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.3;
}

h3 {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.4;
}

h4, h5, h6 {
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
  line-height: 1.3;
}
h6{
  letter-spacing: 0.05em;
}
p{
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  padding: 1em 0;
}
a{
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
}
a{
  color: #a6a4a4;
  text-decoration: none;
}
a:hover{
  color: #bdbdbd;
}

span{
  letter-spacing: 0.09em;
}
span.underline{
  text-decoration: underline;
  text-decoration-thickness: 50%;
}
button{
  border: none;
  cursor: pointer;
}
footer{
  text-align:center; 
  padding-top: 10vh; 
  padding-bottom: 4vh;
  font-size: 1.1em; 
  letter-spacing: 0.1em;
  color: #999;
  z-index: 50;
}
footer span{
  padding: 20px;
  display: block;
  font-size: 1.2em;
  line-height: 2;
}

.italic{
  font-style: italic;
  font-weight: normal;
}
.pagetitle{
  position: fixed;
  z-index: 200;
  padding: 20px;
  backdrop-filter: blur(5px);
  width: 100%;
}
.pagetitle a{
  font-size: 1.4em;
}
.chapter-intro {
  position: relative;
  padding-top: 8vh;
  text-align: center;
  min-height: 130vw;
}
#goTop {
  position: fixed; 
  width: 3vw;
  min-width: 60px;
  min-height: 60px;
  height: 3vw;
  bottom: 5vh; 
  right: 3vw; 
  margin-top:10px; 
  background: rgba(220, 220, 220, 0.5); 
  color: #9e9d9d; 
  border-radius: 100%; 
  padding: 8px 16px; 
  font-size: 1.6rem; 
  z-index: 10;
}
#goTop:hover{
  color: #b8b8b8;
  background: rgba(220, 220, 220, 1); 

}
.icon-img{
  width: 30px;
  height: 100%;
  margin: 0 10px;
  vertical-align: middle;
}
/* ch1 */
.virus_section{
  position: relative;
  width: 80vw;
  height: 80vh;
}
.image-row {
  position: absolute;
  top: 0px;
  left: 0;
  display: flex;
  width: 80vw;
  min-height:  80vh;
}
.image-row img {
  width: 20%;
  height:  80vh;
  object-fit: cover;
}
#maskCanvas {
  background-color: transparent;
  mix-blend-mode: normal;
  position: absolute;
  height:  80vh;
  width: 80vw;
  top: 0px;
  left: 0;
  z-index: 10;
  pointer-events: none;
}
.image-wrapper {
  position: relative;
  width: 20%;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(255, 0, 0, 0.4);
  mix-blend-mode: multiply;  /* 或 overlay / soft-light 也可以 */
  transition: background-color 0.1s linear;
}

.virus_section {
  position: relative;
  cursor: pointer;
}

.full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: auto;
}

.img-overlay-wrapper {
  position: relative;
  display: inline-block; /* 或 block，看你的佈局需求 */
}

.img-overlay-wrapper img {
  display: block;
  padding: 0;
}

.overlay-mask {
  padding: 0;
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: lighten;
  pointer-events: none; /* 確保不影響點擊圖片 */
}
.color1{
  background: rgba(200, 100, 230, 0.5);
}
.color2{
  background: rgba(120, 100, 240, 0.5);
}
.color3{
  background: rgba(237, 100, 169, 0.5);
}
.color4{
  background: rgba(240, 133, 103, 0.5);
}
.content_img_S{
  width: 50%;
  height: auto;
  margin: 60px auto;
}
.content_img_M{
  width: 70%;
  height: auto;
  margin: 20px auto;
}
.content_img_L{
  width: 100%;
  height: auto;
  margin: 20px auto;
}
.noteNumber{
  vertical-align: top;
  font-size: 0.7em;
  font-weight: bold;
}
.note_Description{
  border-top: 1px solid #fff;
  font-size: 0.7em;
  font-weight: 300;
  line-height: 1.3;
  display: block;
  margin: 5px 0 20px 0;
  padding: 8px 0 15px 0;
}
/* ch1 content*/

#sidebar {
  position: fixed;
  letter-spacing: 0.05em;
  left: 5vw;
  top: 25vh;
  width: 40vw;
  margin-right: 5vw;
  min-width: 400px;
  height: 65vh;
  background: rgba(200, 0, 100, 0.6);
  overflow-y: hidden;
  padding: 0;
  z-index: 100; /* 確保在 canvas 上面 */
}

#sidebar a {
  color: #333;
  text-decoration: underline;
}
#tabs{
  position: absolute;
  bottom: 10vh;
  right: 5vw;
  z-index: 22;
  width: 40%;
  text-align: center;
}
#tabs button {
  font-size: 1.5em;
  font-weight: 400;
  display: inline;
  width: 25%;
  min-width: 200px;
  padding: 10px 0;
  color: #fff;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border-radius: 3px;
}
#tabs button:hover{
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}
#tabs button.active {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}
#pages{
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#pages .page {
  margin: 0;
  padding: 0;
  display: none;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding: 45px;
}

#pages .page.active {
  display: block;
}

#nav-arrows {
  position: fixed;
  bottom: 10vh;
  left: 2.5vw;
  width: 45vw;
  min-width: 450px;
  margin-right: 5vw;
  display: flex;
  justify-content: space-between;
  z-index: 100;
}
.arrow-button {
  background: rgba(255, 255, 255, 0);
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  color: white;
  backdrop-filter: blur(5px);
}

/* ch2 */




.wave_section{
  position: relative;
  width: 100vw;
  min-height:  100vh;
  /* flex-direction: column; */
  padding-top: 5vh;
}
#chapter2-section {
  position: relative;
  overflow: hidden;
}
#chapter2-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#chapter2-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: exclusion;
}
.color-cover{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(200, 100, 100,0.9);
  mix-blend-mode: lighten;
  z-index: 1;
}
.multi-image-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 0;
}

.image-slot {
  width: 25%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image-slot .slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}



/* ch3 */
.behind-the-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(181, 45, 235, 1.0);
  background: url('img/ch3/visual ch3.jpg') center/cover no-repeat;
  z-index: 0;
  cursor: pointer;
}

.mask-layer {
  /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; */
  /* backdrop-filter: blur(10px); */
  /* clip-path: none; */ /* 由 JS 控制 */
}
.spotlight {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 1);
  mix-blend-mode: difference; 
}
.spotlight_section{
  position: relative;
  width: 100%;
  min-height:  100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
  /* flex-direction: column; */
  padding-top: 5vh;
}
/* .blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(181, 45, 235, 0.3);

  mask: url(#spotlight-mask);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask: url(#spotlight-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
  z-index: 4;
  } */
  .hover-layer {
    position: absolute;
    top: 0%; 
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: all;
  }

  .hover-circle {
    cursor: pointer;
    pointer-events: all;
/*   stroke: white;
stroke-width: 2; */
fill: transparent;
transform: translate(10%, 10%);
}

.spotlight-labels {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.spotlight-label {
  position: absolute;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 12px;
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0.5;
  transform: translate(0%, 0%);
  transition: opacity 0.3s ease;
  pointer-events: all;
  text-decoration: none;
}

/* ch3 new */
.chapter3-entry {
  position: relative;
  width:  80vw;
  height: 100vh;
  overflow: hidden;
}
.iframe-background {
  position: absolute;
  top: 0;
  left: 0;
}
.iframe-background iframe {
  width: 80vw;
  height: 100vh;
  border: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}


/* .mask-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
*/
.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  --x: 50%;
  --y: 50%;
  backdrop-filter: none;
  background: radial-gradient(circle 100px at var(--x) var(--y), rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
}

/* ch4 */


.dot-field {
  /* position: absolute;
  width: 60%;
  left: 20%; */
  width: 60%;
  margin: 0 auto;
  height: 120%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, 5px);
  justify-content: center;
  align-content: center;
  gap: 35px;
}

.bacteria-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  transition: transform 0.3s ease, background-color 0.3s ease;
  position: relative;
  display: inline-block;
  cursor: pointer;
  mix-blend-mode: normal;
}

.bacteria-dot:hover {
  cursor: pointer;
}

.bacteria-tooltip {
  width: 16vw;
  height: 16vw;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%;
  padding: 0px;
  color: white;
  font-size: 1.8em;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  pointer-events: auto;
  z-index: 100;
  transition: background-color 0.3s ease;
  vertical-align: center;
  overflow: hidden;
}

.tooltip-text{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
  background-color: rgba(255, 255, 255, 0.2);
}
.bacteria-tooltip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  mix-blend-mode: multiply;
}

/* ch5 */

#quadrant-root {
  position: relative;
  width: 60vw;
  height: 80vh;
  overflow: hidden;
}

.quadrant {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.q1 { top: 0; left: 0; }
.q2 { top: 0; right: 0; }
.q3 { bottom: 0; left: 0; }
.q4 { bottom: 0; right: 0; }

.quadrant img {
  width: auto;
  height: 50%;
  z-index: 1;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
.wiggle {
  animation: rotate-wiggle 0.1s ease-in-out infinite;
}
@keyframes rotate-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1.7); }
  50% { transform: rotate(2deg) scale(1.7); }
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #cc41b5;
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.2s ease;
  mix-blend-mode: darken;
}

.touch-me {
  position: absolute;
  padding: 3vw;
  width: 120px;
  height: 120px;
  color: white;
  border-radius: 50%;
  font-size: 0.8em;
  line-height: 1;
  font-weight: bold;
  display: flex;
  opacity: 0.8;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 100;
  /* animation: rotate-wiggle 0.1s infinite; */
  cursor: pointer;
}

.q1 .touch-me { top: 10px; left: 10px; }
.q2 .touch-me { top: 10px; right: 10px; }
.q3 .touch-me { bottom: 10px; left: 10px; }
.q4 .touch-me { bottom: 10px; right: 10px; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}


/* publication */
.zoom-container {
  width: 40vh;
  height: 40vh;
  margin: 50px auto;
  overflow: hidden;
  position: relative;
}

.zoom-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

.zoom-container:hover .zoom-image {
  transform: scale(2.5); /* 放大倍率可自由調整 */
}

.zoom-container:hover {
  cursor: zoom-in;
}

#publication-entry {
  background-color: transparent;
  width:60vw;
  margin: 0 auto; 
  padding: 15vh 0; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.publication-wrapper {
  width:80vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
  transform: translateX(-2vw);
}

.publication-item {
  width: 6vw;
  position: relative;
  transition: transform 0.5s ease, z-index 0s ease;
  cursor: pointer;
}

.publication-item img {
  width: 12vw;
  height: auto;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: transform 0.5s ease;
}

.publication-item:hover {
  transform: translateX(4vw) translateZ(20px) scale(1.6) rotateY(0deg) !important;
  /* z-index: 10 !important; */
}