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

/* ===== 覆蓋片段：三欄 1:1:3，左中固定，右欄全域滾動 ===== */
:root{
  --colA: 50vw;   /* 左欄 Pnav */
  --colB: 50vw;   /* 中欄 project-text */
  --colC: 100vw;
}

/* 只有在 html 有 use-enter-fade 時，才會套淡入 */
html.use-enter-fade:not(.page-ready) body { opacity: 0; }

@media (prefers-reduced-motion: no-preference){
  html.use-enter-fade body { transition: opacity 360ms ease; }
}


/* 轉場遮罩（離場） */
#pageTransitionOverlay{
  position: fixed; inset: 0;
  background: #070707;         /* 你站的底色 */
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 99999;
}

/* 顯示遮罩 */
html.is-leaving #pageTransitionOverlay,
html.use-enter-fade:not(.page-ready) #pageTransitionOverlay{
  opacity: 1; pointer-events: auto;
}

/* 置中包裹 */
#pageTransitionOverlay .loader-wrap{
  display: grid; place-items: center;
}
/* 你的 GIF/WebP 尺寸（依實際需求調整） */
.loader-gif {
  width: clamp(260px, 70vw, 1200px); /* 依畫面調整尺寸*/
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

/* 預設隱藏靜態備援圖；播放失敗時以 JS 顯示 */
.loader-fallback{ display: none; }

/* 可選：小 Loading 圈 */
#pageTransitionOverlay .loader{
  width: 5rem; height: 5rem;
  animation: breath 1.3s linear infinite;
}
@keyframes breath {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

#pageTransitionOverlay .loader img{
  width: 100%;
  height: auto;
}

/* 若你要讓離場時 header/漢堡以 CSS 強制收合（雙保險） */
html.is-leaving .header-mobile,
html.is-leaving .hamburger-wrap{
  transform: translateY(-200%) !important;
}



@keyframes fadeIn {
  from { transform: translateY(10%); opacity: 0; }
  to { transform: translateY(0%); opacity: 1; }
}


h1{
    font-size: 3rem;
    font-weight: Medium;
    padding-bottom: 2rem;
}


h2{
    font-size: 1rem;
    font-weight: Medium;
}

h3{
    font-size: 0.8rem;
    padding: 1rem 0 0.3rem 0;
}

a{
    text-decoration: none;
}

.content{
  line-height: 1.6rem;
  text-align: justify;
}


html, body { overflow: auto; }

body {
    line-height: 1.6;
    background-color: #070707;
    color: #e6e6e6;
    min-height: 100%;
    font-family: "Parkinsans", sans-serif;
    font-style: normal;
    font-size: 0.8rem;
    cursor: cell;
}


*[onclick],
a, button{
  cursor: n-resize;
}

a,
button,
[role="button"],
label[for],
input[type="button"],
input[type="submit"] {
  cursor: n-resize;
}


/* 左欄固定 */
.Pnav{
  width: var(--colA);
  height: 100vh;
  position: relative;
  padding: 0 3rem;
}

header {
    color: #e6e6e6;
    position: fixed; 
    width: auto;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    min-height: 100vh;       /* fallback：舊瀏覽器 */
    min-height: -webkit-fill-available; /* iOS 13–15 的備援 */
    min-height: 100svh;      /* 小視窗（網址列展開時） */
    height: 100dvh;          /* 動態視窗（網址列收起/展開都貼齊） */
    z-index: 2000;
    pointer-events: none;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    /*
    border-bottom: 2px solid #20271e;   細分隔線（可選） 
    background-color: #000000;*/
}

.header-container{
    width: 100%;
    margin: 0 auto;
    padding: 2rem 3rem;
    color: #e6e6e6;
    display: flex;
    align-items: center; 
    justify-content: space-between;
    pointer-events: auto;
}

.svg-icon{
  width: auto;
  height: 4rem;
}

.svg-icon-mobile{
  display: inline-block;
  width: auto;
  height: 100%;
  filter: invert(100%);
}

.svg-icon-layout{
  display: inline-block;
  width: auto;
  height: 100%;
  filter: invert(100%);
}

.header-container a{
  color: #e6e6e6;
  margin-bottom: 2rem;
}

.header-container a:hover .svg-icon {
  color: #26f3a8;
  transform: translateX(-2px) translateY(2px);
}

/* 使用者偏好 */
@media (prefers-reduced-motion: reduce) {
  .header-container a:hover .svg-icon { animation: none; }
}

header nav{
    display:flex; 
    gap: 20px;
    font-size: 1rem;
    justify-content: space-between;
    width: 20rem;
}

header nav a {
    color: #e6e6e6;
    font-weight: 300;
}

header nav a:hover {
    color: #26f3a8;
    transition: 0.2s;
}

header h1{
    display:flex;
    padding-bottom: 0;
}

header h1 a {
    color: #e6e6e6;
}

header h1 a:hover {
    color: #26f3a8;
    transition: 0.2s;
}

.header-mobile{
  display: none;
}

.marquee-item{
  position: absolute;
  display: none;
  bottom: 3rem;
  left: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.marquee-item img{
  height: 5vh;
  padding: 0 .7rem;
  animation: move-mar 2000ms linear infinite;
  opacity: .7;
}

.marquee-item p{
  width: 80%;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  animation: move-mar-home 20000ms linear infinite;
  opacity: 1;
  pointer-events: auto;
}

.hommepagelayout:hover p{
  color: #26f3a8;
  animation-play-state: paused;
  transition: 0.2s;
}

@keyframes move-mar {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


@keyframes move-mar-home {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.intro{
  font-size: 1.5rem;
  background-color: #000;
  color: #fff;
}

.left{
    position: fixed;
    bottom: 0;
    margin-bottom: 5rem;
    width: 30%;
    text-align: left;
    display: flex;
    flex-direction: column;
}

footer {
    height: 10vh;
    width: 100%;
    color: #565656;
    padding: 0 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: smaller;
    position: absolute;
    bottom: 0;
    z-index: 1100;
}
footer nav {
    font-weight: 300;
}


.hommepagelayout{
    width: 100%;
    height: 5rem;
    position: fixed;
    bottom: 0;
    z-index: 3;
    padding-top: 1rem;
    pointer-events: none;
    display: flex;
}

.hommepagelayout h1{
    font-size: 2.5rem;
    line-height: 4rem;
    font-weight: 600;
    padding-right: 1rem;
    padding-bottom: 0;
    color: #ffffff;
    mix-blend-mode: difference;
}

.homepageblock{
  position: fixed; 
  inset: 0;                 /* 蓋滿視窗 */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column;
  z-index: 2;
  pointer-events: none;                      /* 容器本身不吃滑鼠，讓事件穿透到 canvas */
}

.homepageblock h1{
    color: #e6e6e6;
}

.homepageblock nav {
    padding: 0 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: medium;
}

.homepageblock nav a {
    width: 5rem;
    color: #ffffff;
    margin:0 1rem;
    font-weight:300;
    font-size: 1.5rem;
}


.homepageblock nav a:hover {
    color: #26f3a8;
    transition: 0.2s;
}

/* 只讓互動元素可點（恢復事件） */
.homepageblock nav,
.homepageblock a,
.homepageblock button{
  pointer-events: auto;
}


.aboutpageblock {
    background-color: #0f1312;
    border: 1px solid #2a3430;
    color: #e6e6e6;
    width: 50%;
    padding: 3%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.resume{
    padding: 1rem 0rem;
    margin-top: 2rem;
}

.resume a{
    padding: 1rem 2rem;
    background-color: #222;
    border-radius: .3rem;
    margin-top: 3rem;
    width: 100%;
    height: 100%;
    color: #e6e6e6;
    font-weight: 300;
}

.resume a:hover {
    background-color: #26f3a8;
    color: #0f1312;
    transition: 0.2s;
}

.aboutBG{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.aboutBG img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.right {
    width: 100%;
    display: flex;
    padding: 0 5rem;
    text-align: right;
    align-items: flex-start;
    justify-content: right;
    flex-direction: column;
}

.work-list{
    position: relative;
    display: block;
    list-style-type: none; /* 移除列表默认样式 */
    padding-left: 0; /* 移除默认左内边距 */
}

.work-list li{
    line-height: 2;
    position: relative;
    list-style: none;
}

.work-list li :hover {
    color: #26f3a8;
    transition: 0.1s;
}


.work-list li a{
    color: #e6e6e6;
    position: block;
    width: 100%;
    cursor: n-resize;
    transition: 0.5s;
    /*text-decoration: underline;*/
    text-transform: uppercase;
}

.effect-text {
  display: inline-block;
  white-space: pre;
  vertical-align: bottom;
}

.effect-ellipsis,
.effect-ellipsis .effect-text,
.effect-text.effect-ellipsis {
  display: block;        /* 或 inline-block 也行 */
  width: 100%;           /* 填滿容器，超出才會被截 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scramble-overlay {
    position: fixed; 
    inset: 0;
    pointer-events: none;
}
html, body { margin: 0; overflow-x: hidden; }


/* 讓 hero 高度可調：改這裡就能控制尺寸（例如全螢幕 100vh） */
.hero { 
    position: fixed;
    inset: 0;
    height: 100vh;             /* 原本的 min(100vh) 會被忽略 */
    z-index: 0;                /* 在底層，但高於 page 背景 */
    overflow: hidden;
}

/* p5 畫布鋪滿 hero，不參與排版 */
.p5-host{ position: relative; width:100%; height:100%; overflow:hidden; }
.p5-host canvas.p5Canvas{
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  z-index: 1;
}

/* =========================================
   Project Page – 單欄垂直 + 高度上限 80vh
   （保留 .hero-wrap 的 padding & margin）
   ========================================= */



.project-wrap{
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 15vh 0 9vh 0;
    padding: 0rem 10rem;
    align-items: center;
    justify-content: center;
    min-height: 76vh;
}

.project-left{
  width: var(--colA);
  height: 100%;
  padding:0 13rem 0 3rem;
  right: 0;
  top: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中欄固定 */
.project-text{
    width: 100%;
  overflow: auto;
  text-align: left;
}

/* 右欄隨 body 滾動 */
.hero-wrap{
  position: relative;     /* ✅ 回到文流 */
  margin-right: 50%;
  width: var(--colB);
  display: block;
  overflow: visible;
  padding: 0rem 1vw;
  /* 可調上限（仍保留你的變數） */
  --hero-max-w: 100%;
  --hero-max-h: 76vh;
}

.project-title{
  text-align: left;
  font-size: 1.5rem;
}

.project-subtitle{
  text-align: left;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom:2rem;
  font-weight: 600;
}

  .project-content{
    color: #aaa;
  }

  .links{
    margin-top: .5rem;
  }

  .links a{
    color: #bdbdbd;
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }

   .links a:visited{
    color: #bdbdbd;
   }

  .links a:active{
    color: #26f3a8;
  }

.project-comment-wrap{
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 3rem;  
    color: #bdbdbd;
    font-style: italic;
}

.tent{
  text-align: left;
  margin-bottom: 2rem;
  color: #ffffff;
  text-align: justify;
}

.project-comment-wrap p{
  color: #ffffff;
  font-size: .8rem;
  font-style: normal;
}

.project-date-wrap{
    position: relative;
    flex-direction: column;
    width: 20%;
    margin-right: 1.5rem;
    flex-grow: 1;
}

.project-tags-wrap{
    position: relative;
    flex-direction: column;
    width: 20%;
    margin-right: 1.5rem;
    flex-grow: 1;
}

.project-credits-wrap{
    position: relative;
    flex-direction: column;
    width: 20%;
    margin-right: 1.5rem;
    flex-grow: 1;
}





/* 主視覺中的媒體：預設滿寬；若高度會超過 80vh，則以 80vh 為上限（等比例縮小） */
.project-hero > img,
.project-hero > video,
.project-hero > iframe{
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border: 0;
  margin: 0 auto;
}

/* ===== YouTube 16:9 自適應容器（吃滿寬，最高 80vh） ===== */
.embed-16x9{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 80vh;
}
.embed-16x9 iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.embed-ratio{
  padding-bottom: 100%;
  margin: 0 0;
}

/* ===== 其他媒體列表：強制單欄垂直 ===== */
.media-grid,
.project-media{
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
  width: 100%;
  margin-top: 2rem;
  /* 禁用多欄/自動填滿 */
  grid-template-columns: none !important;
  column-count: 1 !important;
}

/* 列表中每個媒體項也遵守滿寬 + 最高 80vh */
.media-item,
.media-grid > *,
.project-media > *{
  display: block !important;
  width: 100%;
}
.media-item img,
.media-item video,
.media-item iframe,
.media-grid img,
.media-grid video,
.media-grid iframe,
.project-media img,
.project-media video,
.project-media iframe{
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border: 0;
}

/* 單一媒體時一樣滿寬，限制 80vh */
.project-hero:only-child img,
.project-hero:only-child video,
.project-hero:only-child iframe,
.media-item:only-child img,
.media-item:only-child video,
.media-item:only-child iframe{
  width: 100%;
  max-width: 100%;
  max-height: 80vh;
}

/* 保險：避免任何浮動或行內排版造成並排 */
.hero-wrap img,
.hero-wrap video,
.hero-wrap iframe{
  float: none !important;
  display: block !important;
}

/* 導覽箭頭對齊右欄 */
.project-nav{
  position: fixed;
  top: 0; bottom: 0;
  left: 0;
  width: var(--colC);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 1900;
}

.project-nav .backtowork{
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #ffffff;
  opacity: .5;
  padding-top: 4px;
}

.project-nav .backtowork:hover{
  opacity: 1;
}

.project-nav .nav-btn{
  pointer-events: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px; height: 200px;
  color: #fff;
  text-decoration: none;
  font-size: 150px;
  font-weight: 100;
  line-height: 1;
  user-select: none;
  backdrop-filter: saturate(120%) blur(6px);
  transition: transform .15s ease;
  opacity: .2;
}
.project-nav .nav-btn:hover{ transform: scale(1.06); opacity: .5; }
.project-nav .nav-btn:active{ transform: scale(0.98); opacity: .5; }
.project-nav .nav-btn.disabled{
  opacity: .2;
  pointer-events: none;
  transition: transform .15s ease;
}
.project-nav .prev{ margin-left: 8px; }
.project-nav .next{ margin-right: 8px; }


/* ===== 其他小樣式（保持） ===== */
.video-container{
  margin-bottom: 2rem;
  max-height: 80vh;
  overflow: hidden;
  width: 100%;
}

.media-caption{
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #efefef;
  text-align: center;
}

/* ===== Loading Overlay（版本B；含 nav clone）===== */
#loading{
  position: fixed; inset: 0;
  background: #fff;
  z-index: 99999;
  opacity: 1;
  transition: opacity .6s ease;
  pointer-events: auto;
}
#loading.hide{ opacity: 0; pointer-events: none; }

/* overlay 內部容器：對齊感與 homepageblock 類似（置中） */
#loading .loading-clone{
  position: fixed; 
  inset: 0;                 /* 蓋滿視窗 */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column;
  pointer-events: none;   
}

/* h1 閃爍 */
#loading .loading-brand{
    font-size: 3rem;
    font-weight: Medium;
    padding-bottom: 2rem;
    color: #d6d6d6;
    animation: brandBlink .9s ease-in-out infinite alternate;
}
@keyframes brandBlink{
  from{ opacity: 1; } to { opacity: .3; }
}

#loading .loading-nav {
    padding: 0 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: medium;
    contain: layout paint style;
}

/* overlay 版 nav：白底用深色，更清楚；不需要 hover 動畫也可關 */
#loading .loading-nav a{
    width: 5rem;
    color: #b4b4b4;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 1rem;
}

#loading .loading-nav .effect-text { visibility: hidden; }

/* 實際 nav 的顯示時機（底下真正的 nav） */
.homepageblock nav{ visibility: hidden; }
body.nav-ready .homepageblock nav{ visibility: visible; }

/* footer 跟 canvas 一起淡入 */
#footer{ opacity: 0; transition: opacity 0s ease; }
body.app-ready #footer{ opacity: 1; }




@media screen and (max-width: 768px) {
 

  .fade-in {
      opacity: 0;
      animation: fadeIn .4s;
      animation-fill-mode: forwards;
      animation-delay: .3s;
  }

  header{
    padding: 0;
  }

  .header-mobile{
    position: fixed;
    top: env(safe-area-inset-top, 0); /* iOS 瀏海保險 */
    height: 4rem;
    padding: 0 1rem;
    display: block;
    left: 0;
    right: 0;
    background-color: #070707;
    border-bottom: 1.5px solid #2a3430;
    pointer-events: auto;
    overflow: hidden;
  }
  .header-mobile a{
    width: auto;
    display: block;
    padding: .75rem 0;
    height: 100%;
  }

  .svg-icon-mobile{
    margin: 0 auto;
    display: block;
    width: auto;
    height: 100%;
    filter: invert(100%);
  }

  .header-container{
    overflow: hidden;
    position: fixed;
    height: 100vh;
    background-color: #070707;
    max-width: 100%;
    top: 0;
    right: -100vw;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    text-align: center;
    transition: right 0.3s ease-in-out;
    padding: 0 !important;
    pointer-events: auto;
  }


  .header-container h1{
      color: #e6e6e6;
    padding-bottom: 2rem;
  }

  .header-container nav {
      width: auto;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: medium;
      gap: 0px;
  }

  .header-container nav a {
      color: #ffffff;
      margin:0 .8rem;
      font-weight:400;
      font-size: 1.5rem;
  }

  .effect-ellipsis{
    width: auto;
  }



  .header-container nav a:hover {
      color: #26f3a8;
      transition: 0.2s;
  }

  /* 只讓互動元素可點（恢復事件） */
  .header-container nav,
  .header-container a,
  .header-container button{
    pointer-events: auto;
  }

  .header-container.active{
    right: 0;
  }

  .hamburger-wrap{
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    height: 4rem;
    z-index: 2001;
    cursor: n-resize;
    border-radius: 2rem;
    transition: 0.3s;
    background: transparent;
    pointer-events: auto;
  }

  .hamburger-wrap.active{
    transform: translate(0px, 0px)
  }

  .hamburger{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    cursor: n-resize;
    z-index: 2000;
  }


  .bar{
    width: 30px;
    height: 4px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: 0.3s;
    border-radius: 2px;
  }

  .hamburger-wrap.active .hamburger .bar{
    width: 20px;
  }

  .hamburger-wrap.active .hamburger .bar:nth-child(1){
    transform: rotate(40deg) translate(-4px, 8px);
  }

  .hamburger-wrap.active .hamburger .bar:nth-child(2){
    width: 0px;
    opacity: 0;
  }

  .hamburger-wrap.active .hamburger .bar:nth-child(3){
    transform: rotate(-40deg) translate(-4px, -8px);
  }



  .homepageblock nav {
    width: auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: medium;
    gap: 0;
  }

  .homepageblock nav a {
    width: 4rem;
    margin:0 1.6rem 0 0;
    font-weight:400;
    font-size: 1.5rem;
}


#loading .loading-nav {
    width: auto;
    padding: 0;
    gap: 0;
    contain: layout paint style;
}

/* overlay 版 nav：白底用深色，更清楚；不需要 hover 動畫也可關 */
#loading .loading-nav a{
    color: #b4b4b4;
    width: 4rem;
    margin:0 1.6rem 0 0;
    font-weight:400;
    font-size: 1.5rem;
}

  .Pnav{
      display: none;
  }

  .left{
      display: none;
  }

  .right{
    text-align: center;
    justify-content: center;
    padding: 0 !important;
  }

  .project-wrap{
    margin-top: 7rem;
    margin-bottom: 2rem;
  }

  
  .project-comment-wrap{
    flex-wrap: wrap;
    flex-direction: unset;
    gap: 2rem;
  }

  .project-date-wrap{
    margin-top: 2rem;
    color: #bdbdbd;
    font-style: italic;
    width: 100%;
    text-align: center;
  }

  .project-date-wrap p{
    display: none;
  }

  .project-date-wrap, .project-credits-wrap, .project-tags-wrap{
    width: 30%;
  }

  .project-nav{
    position: relative;
    top: auto;
    right: 0;
    width: 100%;
    height: 70px;
    align-items: start;
    padding-top: 1rem;
    background-color: #0c0e0c;
  }
  .project-nav .nav-btn{
    width: 100px; height: 20px;
    font-size: 100px;
    font-weight: 500;
  }

  .project-nav .backtowork{
    display: inline-flex;
    pointer-events: auto;
    width: 40px;
    z-index: 2;
  }


  .links{
    margin-top: 0rem;
    margin-bottom: 2rem;
  }

  .marquee-item{
    display: flex;
  }


.marquee-item img{
  animation: move-mar 3000ms linear infinite;
  opacity: .5;
}

  .aboutpageblock{
    width: 90%;
    padding: 6rem 2rem 3rem 2rem;
    margin: 0 0 0 auto;
    position: relative;
    top:auto;
    left: auto;
    transform: translate(0%, 0%);
    border-left: 0px;
    border-right: 0px;

  }

  .aboutpageblock h1{
    font-size: 1.5rem;
  }


  .embed-ratio{
    padding-bottom: 140%;
    margin: 0 auto;
  }
      
}



/* RWD：小螢幕改單欄 */
@media (max-width: 1024px){
  .project-wrap{
    flex-direction: column;
    padding: 0 0;
  }

  .project-left{
    position: relative;
    width: 100%;
    padding: 0 5% 3rem 5%;
    height: 35%;
    bottom: 0;
    top: auto;
  }

  .hero-wrap{
    margin-right: 0;
    width: 100%;
    padding: 0 0;
    min-height: 0;
    margin-bottom: 2rem;
  }

  .project-content{
    margin-bottom: 2rem;
    font-size: 1rem;
  }

  .project-content-wrap{
    background-color: #ffffff07;
    padding: 1rem;
    border-radius: 10px;
  }

  .project-comment-wrap{
    margin-top: 0;
    gap: 1rem;
    color: #ffffff;
    font-style: normal;
    font-size: 1rem;
  }

  .project-comment-wrap p{
    color: #bdbdbd;
    font-size: .8rem;
  }

}

/*///////////cursor////////////*/


/* 可點元素上縮小：有「鎖定」感（調整數值就能改縮放幅度） */
body.cursor-pointer .xcursor { --s: .6; }

/* 滑到輸入欄位時，隱藏自製游標（改回 I-beam 比較符合預期） */
body.cursor-text .xcursor { opacity: 0; }


:root {
  --cursor-size: 36px;        /* 十字尺寸 */
  --cursor-color: #ffffff;    /* 十字顏色（可調整） */
  --ring-scale: 1;            /* Halo 縮放，JS 可控制 */
  --ring-opacity: .9;         /* Halo 透明度，JS 可控制 */
}

.xcursor {
  position: fixed;
  left: 0; top: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);

  /* ✨ Transform 拆分：位移立即更新，縮放才有動畫 */
  translate: var(--x, 0) var(--y, 0);
  scale: var(--s, 1);
  transition: scale 120ms cubic-bezier(.2, .8, .2, 1);

  pointer-events: none;
  z-index: 9999;
  opacity: 1;

  /* 使用 CSS 變數控制顏色 */
  color: var(--cursor-color);

  /* 十字圖案（用 currentColor 作為描邊顏色） */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
  <g stroke='currentColor' stroke-width='2' stroke-linecap='square' fill='none'>\
    <path d='M16 2V12 M16 20V30 M2 16H12 M20 16H30'/>\
  </g>\
</svg>");

  mix-blend-mode: normal;         /* 可搭配 fx-diff */
  filter: var(--cursor-filter, none);
}

/* ====== 可選特效（用 class 開關） ====== */

/* 反色：任何底色都顯眼 */
.xcursor.fx-diff { mix-blend-mode: difference; }

/* Halo 外環 */
.xcursor.fx-halo::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 4px solid #26b5f3;
  pointer-events: none;
  transform: scale(var(--ring-scale,1));
  opacity: var(--ring-opacity,.9);
  transition: transform 120ms cubic-bezier(.2,.8,.2,1), opacity 120ms;
}

/* 玻璃片背板 */
.xcursor.fx-glass::before {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px) saturate(120%) brightness(.9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset;
  pointer-events: none;
}

/* 點擊漣漪 */
.xcursor.fx-ripple.rippling::after {
  animation: cursorRipple .35s ease-out;
}
@keyframes cursorRipple {
  from { box-shadow: 0 0 0 0 rgba(255,255,255,.95); opacity: 1; }
  to   { box-shadow: 0 0 0 14px rgba(255,255,255,0); opacity: .35; }
}

/* 可點元素時 Boost */
body.cursor-pointer .xcursor.fx-boost {
  transform: scale(1.12);
}

/* 無障礙 */
@media (prefers-reduced-motion: reduce) {
  .xcursor::before,
  .xcursor::after {
    transition: none !important;
    animation: none !important;
  }
}