/* ===== 共用 / 版面 canvas ===== */
.canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: top left;
    background-color: #fffefa;
}
.canvas::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;   /* 不要擋住底下元素的點擊 */
    z-index: 300;          /* 蓋在最上層，但比選單(9999)低 */
    filter: url(#grain);
    opacity: 0.3;          /* 顆粒感的濃淡，數字愈小愈不明顯 */
    mix-blend-mode: multiply;
}
.menu {
    position: fixed;
    stroke:#E3BC45;
    top: 20px;    /* 距離畫面頂端 20px */
    right: 20px;  /* 距離畫面右側 20px */
    z-index: 9999; /* 確保顯示在其他元素上方 */
}
.menu.active {
    stroke:#fff;
}
.me-happy {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -40%);
    z-index: 5000;
    pointer-events: none
}

p {
    line-height: 1.3; font-family: "kiwi maru"
}
/* ===== 側邊選單 ===== */
.side-bar {
    position: fixed;
    width:492px;
    height:1080px;
    overflow-y: auto;
    background:#E3BC45;
    right:-492px;
    z-index:9997;
    visibility:hidden;
    transition: right 0.3s ease, visibility 0s linear 0.3s;
}
.side-bar p {
    color:#fff;
    z-index:9998;
    white-space: nowrap;
}
.side-bar img {
    width:374px;
    padding-top:10px;
    opacity:0;
    transition:0.3s ease;
}

.side-bar.open {
    right:0;
    visibility:visible;
    transition:right 0.3s ease, visibility 0s linear 0s;
}
.side-bar-option {
    display:flex;
    flex-direction:column;
    padding-top:132px;
    padding-left:68px;
    gap:29px;
}

.side-item {
    width: 328px;
    height: 66px;
    transition: 0.3s ease;
}

.side-item:hover {
    width:374px;
    height:146px;
    padding:10px;
    background-color:#fff;
    transform:translate(0,-10px)
}

.side-item:hover p {
    color:#E3BC45;
}

.side-item:hover img {
    opacity:1;
}
.language {
    position:absolute;
    bottom: 40px;
    left:60px;
    display: flex;
}
.lang-btn {
    background:none; 
    border:none; padding-left:10px; padding-right: 10px; margin:0; 
    font:inherit; 
    cursor:pointer; 
    appearance:none; 
    -webkit-appearance:none;
    font-size: 16px;
    color:#fff;
    opacity: 0.5;
}
.lang-btn.active {
    opacity: 1;
}

.lang-btn + .lang-btn {
    border-left: 1px solid #fff;
}

/* ===== scroll ===== */
.scroll-animation {
    position: relative;
    width: 1920px;
    height:1080px;
    transition: 0.3s ease;
}
.text-card p {
    font-size: 26px;
    font-weight: 600;
    white-space: nowrap;
}
.greeting {
    font-family: helvetica;
    font-weight: 900;
    font-size: 250px;
    position: absolute;
    color:#E3BC45;
    white-space: nowrap;
}
.horizontal-track-front {
    z-index: 501;
}
.horizontal-track-back {
    z-index: 498;
}

.scroll-animation div, .scroll-animation img {
    position: absolute;
}
.scroll-animation div {
    background:#E3BC45;
    padding-left: 20px;
    padding-right: 20px;
}
.scroll-animation.disappear {
    opacity: 0;
}

@keyframes scroll-line-in {
    from{transform:translate(-1750px,-1500px)}
    to{transform: translate(0,0);}
}

.scroll-background svg{
    position: absolute;
    animation-name: scroll-line-in;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.s01{top:1691px;left:1876px; animation-duration: 5s;}
.s02{top:1500px;left:1850px; animation-duration: 9s;}
.s03{top:1183px;left:1726px; animation-duration: 15s;}
.s04{top:1559px;left:2151px; animation-duration: 5s;}
.s05{top:1243px;left:1977px; animation-duration: 7s;}
.s06{top:1080px;left:2005px; animation-duration: 15s;}
.s07{top:1216px;left:2308px; animation-duration: 9s;}
.s08{top:1243px;left:2570px; animation-duration: 7s;}
.s09{top:1080px;left:2570px; animation-duration: 10s;}

/* ===== 背景paint ===== */
.paint {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1920px;   /* 你 Figma 畫布的寬 */
    height: 1080px;   /* 你 Figma 畫布的高 */
    transform: translate(-50%, -50%);
    z-index: 4999;
}

.biggest-paint {
    position: absolute;
    top: 38px;      /* ← 換成 Figma 上這個 svg 相對畫布左上角的實際 y */
    left: 179.81px;     /* ← 換成 Figma 上這個 svg 相對畫布左上角的實際 x */
}
.paint-01 {
    position: absolute;
    top:750px;
    left:1350px;
}

.paint-02 {
    position: absolute;
    top:148.65px;
    left:1684.27px;
}

.paint-03 {
    position: absolute;
    top:107.51px;
    left:1548.99px;
}

.paint-04 {
    position: absolute;
    top:264px;
    left:0px;
}

.background-text {
  position: fixed;
    z-index: 5000; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.background-text span {
    position: absolute;
    color: white;
    font-style: italic;
    font-weight: 900;
    font-size: 255px;
    white-space: nowrap; /* 避免文字自己換行 */
}

.lai {
    top: 381px;    /* ← 換成 Figma Inspect 給的實際 y */
    left: 393px;  /* ← 換成 Figma Inspect 給的實際 x */
    transform: rotate(-5deg);
    transform-origin: top left;
}

.chieh {
    top: 628px;   /* ← 換成 Figma Inspect 給的實際 y */
    left: 213px;   /* ← 換成 Figma Inspect 給的實際 x */
    transform: rotate(-5deg);
    transform-origin: top left;
}

.lu {
    top: 468px;    /* ← 換成 Figma Inspect 給的實際 y */
    left: 1242px; /* ← 換成 Figma Inspect 給的實際 x */
    transform: rotate(-5deg);
    transform-origin: top left;
}

/* ===== 作品選單 main-menu ===== */
.menu-background {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1920px;   /* 你 Figma 畫布的寬 */
    height: 1080px;   /* 你 Figma 畫布的高 */
    transform: translate(-50%, -50%);
    z-index: 4998;
}

.menu-background svg {
    position: absolute;
}

.menu-background path {
    transition: stroke 0.5s ease;
}

.line01 { top: 141px; left: 1293px;}
.line02 { top: 454px; left: 1536px;}
.line03 { top: 88px; left: 996px;}
.line04 { top: 204px; left: 906px;}
.line05 { top: 64px; left: 535px;}
.line06 { top: 517px; left: 1092px;}
.line07 { top: 348px; left: 660px;}
.line08 { top: 508px; left: 701px;}
.line09 { top: 458px; left: 455px;}
.line10 { top: 448px; left: 282px;}
.line11 { top: 739px; left: 677px;}
.line12 { top: 739px; left: 392px;}

.menu-option {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1920px;   /*  Figma 畫布的寬 */
    height: 1080px;   /*  Figma 畫布的高 */
    transform: translate(-50%, -50%);
    z-index: 5001;
}

.menu-option a {
    position: absolute;
    transition:transform 0.3s ease;
}

.menu-option div {
    position: absolute;
}
/* ===== toki ===== */
.menu-toki {
    top:150px;
    left:141px;
}

.menu-toki:hover {
    transform:scale(1.2);
}

.menu-background.highlight01 path{
    stroke: #529D7F;
}

.menu-toki-title {
    top:134PX;
    left:99PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-toki-text {
    top:230PX;
    left:331PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-toki:hover ~ .menu-toki-title, 
.menu-toki:hover ~ .menu-toki-text {
    opacity: 1
}
/* ===== web ===== */
.menu-web {
    top:344px;
    left:440px;
}
.menu-web:hover {
    transform:scale(1.2);
}

.menu-background.highlight02 path{
    stroke: #C93AA1;
}

.menu-web-title {
    top:458PX;
    left:322PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-web-text {
    top:269PX;
    left:492PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-web:hover ~ .menu-web-title, 
.menu-web:hover ~ .menu-web-text {
    opacity: 1
}
/* ===== ice ===== */
.menu-ice {
    top:583px;
    left:141px;
}
.menu-ice:hover {
    transform:scale(1.2);
}

.menu-background.highlight03 path{
    stroke: #586796;
}

.menu-ice-title {
    top:563PX;
    left:402PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-ice-text {
    top:610PX;
    left:423PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-ice:hover ~ .menu-ice-title, 
.menu-ice:hover ~ .menu-ice-text {
    opacity: 1
}
/* ===== slime ===== */
.menu-slime {
    top:767px;
    left:440px;
}
.menu-slime:hover {
    transform:scale(1.2);
}

.menu-background.highlight04 path{
    stroke: #B94342;
}

.menu-slime-title {
    top:891PX;
    left:217PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-slime-text {
    top:938PX;
    left:268PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-slime:hover ~ .menu-slime-title, 
.menu-slime:hover ~ .menu-slime-text {
    opacity: 1
}
/* ===== eraser ===== */
.menu-eraser {
    top:186px;
    left:1381px;
}
.menu-eraser:hover {
    transform:scale(1.2);
}

.menu-background.highlight05 path{
    stroke: #888888;
}

.menu-eraser-title {
    top:323PX;
    left:1471PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-eraser-text {
    top:370PX;
    left:1562PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-eraser:hover ~ .menu-eraser-title, 
.menu-eraser:hover ~ .menu-eraser-text {
    opacity: 1
}
/* ===== illustration ===== */
.menu-illustration {
    top:479px;
    left:1614px;
}
.menu-illustration:hover {
    transform:scale(1.2);
}

.menu-background.highlight06 path{
    stroke: #ADC8C3;
}

.menu-illustration-title {
    top:418PX;
    left:1406PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-illustration-text {
    top:463PX;
    left:1327PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-illustration:hover ~ .menu-illustration-title, 
.menu-illustration:hover ~ .menu-illustration-text {
    opacity: 1
}
/* ===== graphic ===== */
.menu-graphic {
    top:766px;
    left:1431px;
}
.menu-graphic:hover {
    transform:scale(1.2);
}

.menu-background.highlight07 path{
    stroke: #919A5C;
}

.menu-graphic-title {
    top:693PX;
    left:1256PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-graphic-text {
    top:913PX;
    left:1530PX;
    opacity:0;
    transition:opacity 0.8s ease 0.1s/* 最後指延遲時間 */
}

.menu-graphic:hover ~ .menu-graphic-title, 
.menu-graphic:hover ~ .menu-graphic-text {
    opacity: 1
}
/* ===== about me===== */
.menu-aboutme-fake {
    top: 285px;
    left: 900px;
    z-index: 5002;
    opacity:0
}
.menu-aboutme-title span {
    position: absolute;
    color: white;
    font-style: italic;
    font-weight: 900;
    font-size: 255px;
    white-space: nowrap; 
    opacity:0;
    transition:0.3s ease;
    z-index:5001;
}
.about {
    top:597px;
    left:250px;
    transform: rotate(-5deg);
    transform-origin: top left;
}
.me {
    top:530px;
    left:1044px;
    transform: rotate(-5deg);
    transform-origin: top left;
}
.menu-aboutme-text {
    position:absolute;
    top: 225px;
    left: 1168px;
    opacity:0;
    transition: 0.1s ease
}
.main-menu:has(.menu-aboutme-fake:hover) .menu-aboutme-title span,
.main-menu:has(.menu-aboutme-fake:hover) .menu-aboutme-text {
    opacity:1;
    transition-delay: 0.5s;
}
.main-menu:has(.menu-aboutme-fake:hover) .menu-background {
    opacity:0;
    transition-delay: 0.5s;
}
.main-menu:has(.menu-aboutme-fake:hover) .menu-option img {
    opacity:0;
    pointer-events:none;
    transition-delay: 0.5s;
}
.canvas:has(.menu-aboutme-fake:hover) .paint.fade-out {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    transition:opacity 0.1s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.5s;
}

/* ===== guide ===== */
.menu-guide {
    position: absolute;
    top:88px;
    left:481px;
    z-index: 4999;
    transition: opacity 0.8s ease 0.1s
}
.main-menu:has(.menu-option img:hover) .menu-guide {
    opacity:0
}
.main-menu:has(.menu-aboutme-fake:hover) .menu-guide {
    opacity:0
}
/* ===== 開場動畫 scroll-finish ===== */
.scroll-finish {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.scroll-finish.reveal {
    opacity: 1;
    pointer-events: auto;
}

.paint,
.background-text {
    opacity:1;
    transition: opacity 1s ease;
}

.paint.fade-out,
.background-text.fade-out {
    opacity: 0;
    pointer-events: none;
    transform:translate(-50%,-50%) scale(0.8);
}

.menu-background,
.menu-option {
    opacity: 0;
    transform: translate(-50%, -50%) translate(-1920px, -1080px);
    transition: transform 1s ease, opacity 0.1s ease;
    pointer-events: none;
}


.menu-background.in-view,
.menu-option.in-view {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.1s ease;
    pointer-events: auto;
}

.menu-guide {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.menu-guide.fade-in {
    opacity: 1;
}

/* ===== 跳過動畫 ===== */
.no-transition, .no-transition * {
    transition: none !important;
    animation: none !important;
}