/* 
 * Looking for a frontend developer who can  
 * realize ideas (like this one) into sleek, 
 * responsive designs? I've a strong knowledge of 
 * modern code and a keen eye for detail, a11y,
 * optimization and performance.
 *
 * https://www.linkedin.com/in/fabriziocalderan/
 * 
 * This demo is an attempt to code a CSS-only replica 
 * of the scroll effects on https://www.alpenite.com/en/
 */


 *,*::before,*::after { box-sizing: border-box; }

 :root { 
    --items: min(30rem, 80vw);
    --color-base: #181213;
    scroll-timeline: --page block;  
    
    @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
    }
 }
 

 body {
   font-family: 'Noto Sans TC', 'Helvetica', sans-serif;
   font-weight: 300;
   font-size: 1rem;
   line-height: 1.6;
   color: var(--color-base);
   display: grid;
   overflow-x: hidden;
 }
 
 
 img {
    max-inline-size: 100%;
    block-size: auto;
 }
 
 hr[id] {
    border: 0;
    margin: 0;
 }
 
 
 /* animations */
 
 @keyframes clip {  
    to { transform: scale(1.75); } 
 }
 @keyframes scroll { 
    to { translate: calc((var(--items) * -3) + 15vw) 0; }
 }
 @keyframes moveup {
     to { transform: translateY(var(--moveup)); }
 }
 @keyframes reveal {
     85%, 100% { opacity: 1 }
     100% { transform: translateY(0);  }
 }
 
 
 body > svg {
    block-size: 0;
    inline-size: 0;
 
    clipPath {
       transform-origin: 
          calc(50vw * var(--dpr, 1)) 
          calc(50vh * var(--dpr, 1));
       
       /* On retina displays the transform-origin 
        * for the clipPath is bugged (opened an issue on
        * https://issues.chromium.org/issues/366293477)
        * so I need to approximately detect your pixel 
        * density with a list of "common" values.
        */
       @media (min-resolution: 1.5dppx)  { --dpr: 1.5;  }
       @media (min-resolution: 2dppx)    { --dpr: 2;    }
       @media (min-resolution: 2.4dppx)  { --dpr: 2.4;  }
       @media (min-resolution: 2.75dppx) { --dpr: 2.75; }
       @media (min-resolution: 3dppx)    { --dpr: 3;    }
       @media (min-resolution: 3.5dppx)  { --dpr: 3.5;  }
       @media (min-resolution: 4dppx)    { --dpr: 4;    }
       
       transform: scale(0);
       animation: linear clip 1 forwards;
       animation-timeline: --page;
       animation-range: entry 10dvb exit 100dvb;   
    }
 }
 
 .arrow-link:hover svg {
   fill: #fff; 
 }
 
 /* header */
 
 header {
    position: fixed;
    z-index: 1;
    inset: 0 0 auto 0;
    background: #fff;
    
    > div {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 1rem 2rem;
       margin: 0 10vw;
       border-bottom: 1px solid #999;
       padding-block: 2rem;
    }
    
    svg {
       inline-size: 8rem;
    }
 
    ul {
       display: flex;
       gap: 2.5rem;
       
       @media (width < 48rem) {
          display: none;
       }
       
       :any-link {
          font-weight: 300;
          /* font-size: 1.25rem; */
          color: inherit;
          text-decoration: none;
       }
    }
 }
 
 

 /* general sections style */
 section {
    padding-block: 7dvb;
 }
 h2 {
   font-size: 2.5rem!important;
   font-weight: 320;
   letter-spacing: .1em;
}
#innovation-trends h2{
   color: rgb(55, 55, 55);
}

h3 {
   margin-block: 2rem;
   font-size: clamp(1.6rem, 3vw, 3rem);
   font-weight: 400;
   letter-spacing: .1em;
}

nav{
   font-size: 16px;
   font-weight: 400;
   letter-spacing: .2em;
}

p {
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: .05em;
}   

.hero__content a{
   letter-spacing: .2em;
}
 
 /* general hero style */
    
 .hero {
    min-block-size: 100dvb;
    
    
    @supports (animation-timeline: view()) {  
       block-size: 100dvb;
       inline-size: 100vw;
       position: sticky;
       top: 0;
       grid-area: 1 / 1;
       
       --moveup: -100dvb;
       animation: linear moveup 1 forwards;
       animation-timeline: --page;
       animation-range: entry 200dvb entry 300dvb;  
       
       /* give enough room to run scroll-animations
        * so the main element is not hidden
        */
       ~ main {
          margin-block-start: 200dvb;
          min-block-size: 100dvb;
       }
    }
 
    
    
 
 
    > div  {
       block-size: 100%;
       display: grid;
       align-items: center;     
       margin-inline: 10vw;
    }
    
    
    :any-link {
       --hover: 0;
       background-color: rgba(207, 207, 207, var(--hover));
       transition: all .33s;
       &:hover {
          color: #fff;
          border-color: transparent;
          --hover: 1;
       }
    }
    
    
    [href^="#"] {
       
       position: absolute;
       border-radius: 50%;
       border: 0;
       bottom: 3rem;
       left: calc(50% - 2rem);
       block-size: 4rem;
       padding: .75rem;
       aspect-ratio: 1;
       color: inherit;
       
       @media (prefers-reduced-motion: no-preference) {
          --moveup: -1rem;
          animation: moveup 1s 
             cubic-bezier(.5,0,1,.5) infinite alternate;
          
          &:hover {
             animation-play-state: paused;
          }
       }
       @supports (not (animation-timeline: view())) { 
          display: none;      
       }
 
    }
    
 
    svg {
       transform: rotateZ(.25turn);
       inline-size: 100%;
       aspect-ratio: 1;
       fill: rgb(55, 55, 55);
    }
    
    
    .hero__content {
       display: flex;
       align-items: start;
       flex-direction: column;
       gap: 2rem;
    }
 
    :where(:any-link) {
       --hover: 0;
       color: inherit;
       text-decoration: none;
       border-radius: 1.5rem;
       padding: .75rem 2rem;
       letter-spacing: 0;
       border: 1px solid #999;
    }
 }
 
    
 
 /* 2nd hero hidden */   
 #shape-the-future {
 
    color: #fff;
    background: linear-gradient(125deg, 
       rgb(0, 0, 0),rgb(68, 68, 68),rgb(0, 0, 0));
    
    @supports (animation-timeline: view()) {  
       clip-path: url("#blob");
    }
 
    > div {
       gap: 10vw;
       
       @supports (animation-timeline: view()) {  
          grid-template-columns: 55vw auto;
       
          translate: 0 0;
          will-change: translate;
          animation: ease-out scroll 1 forwards;
          animation-timeline: --page;
          animation-range: entry 100dvb entry 200dvb;  
       }
    } 
 
    ul {
       display: flex;
       block-size: calc(100dvb - 10rem);
       
       @supports (not (animation-timeline: view())) {  
          border-inline-end: 1px #fff solid;
          block-size: auto;
          
          @media (width < 40rem) {
             flex-direction: column;
             border-inline: 0;
          }
       }
    }
    
    li {
       
       flex: 1;
       display: flex;
       align-items: center;
       padding-inline: 2.5rem;
       border-inline-start: 1px #fff solid;
       inline-size: var(--items);
       
       h3, p { text-align: left; }
       
       span:has(img), img {  
          max-block-size: 30dvmin;
       }
       
       @media (width < 48rem) {
          span:has(img), img { display: none; }
       }
       
       @supports (not (animation-timeline: view())) {
          inline-size: auto;
          h3, p { text-align: left; }
          
          @media (width < 40rem) {
             border-inline: 0;
             
             &:not(:last-child) {
                padding-block-end: 3rem;
                border-block-end: 1px #fff solid;
             }
          }
       }
    }  
 }
 
 
 main {
  
    section {
       min-block-size: 100dvb;
       
       @media (prefers-reduced-motion: no-preference) {
          opacity: 0;
          transform: translateY(6rem);
          animation: ease-out reveal 1 forwards;
          animation-timeline: view();
          animation-range: cover 10% cover 30%;
       }      
       
       > div {
          padding-inline: 10vw;
       }
    }
 
    .portfolio {
       margin-block-start: 5dvb;
    
       li {
          padding-block: 2dvb;
          border-bottom: 1px solid #999;
          container: article / inline-size;
          --hover: 0;
          &:hover {
             --hover: 1;
          }
       }
 
       article {
          position: relative;
          display: grid;
          grid-template-columns: minmax(15vw, 22rem) auto;
          @container article (width <= 48rem) {
             grid-template-columns: 1fr;
          }
          
          align-items: center;
          gap: 2rem;
          opacity: calc(0.7 + (var(--hover) * 0.3));
          transition: opacity .33s;
 
       }
 
       div {
          aspect-ratio: 1.8 / 1;
          overflow: hidden;
          border-radius: 1rem;
          inline-size: 100%;
          
          @container article (width <= 48rem) {
             display: none;
          }
 
          img {
             object-fit: cover;
             block-size: 100%;
             inline-size: 100%;
          }
       }
 
       :any-link {
          display: grid;
          grid-template: auto auto / 1fr minmax(2.5rem, 6cqi);
          gap: 1rem min(5vw, 5rem);
          justify-content: space-between;
          align-items: center;
          color: inherit;
          text-decoration: none;
       }
          [itemprop="author"] {
             grid-area: 1 / 1 / 2 / 3;
             font-size: 1rem;
             /* color: #847c79; */
             flex: 1 0 100%;
             line-height: 1.5;
             letter-spacing: .1em;

          }
 
          [itemprop="name"] {
             grid-area: 2 / 1 / 3 / 2;
             flex-wrap: nowrap;
             font-size: 1.5rem;
             line-height: 1.33;
             letter-spacing: .1em;
          }
 
          &:hover [itemprop="name"] {
             text-decoration: underline;
          }
 
          &::before {
             content: "";
             position: absolute;
             inset: 0;
          }
       }
 
       svg {
          grid-area: 1 / 2 / 3 / 3;
          aspect-ratio: 1;
          padding: .75rem;
          inline-size: 100%;
          border-radius: 50%;
          border: 2px solid;
          clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%);
          color: #645c59;
          fill: currentColor;
          transition: transform .33s;
          transform: rotateZ(calc(var(--hover) * .25turn));
       }
    }
 }
 
 
 
 
 /* show header on scrollup and hide on scrolldown  
  * original demo: https://codepen.io/fcalderan/pen/LYKwyyd
  */
 
 @property --scroll-direction {
     syntax: "<number>";
     inherits: true;
     initial-value: 0;
 }
 
 @property --scroll {
     syntax: "<number>";
     inherits: true;
     initial-value: 0;
 }
 
 @property --scroll-delayed {
     syntax: "<number>";
     inherits: true;
     initial-value: 0;
 }
 
 
 @keyframes adjust-pos {
     to {
         --scroll: 10000;
         --scroll-delayed: 10000;
     }
 }
 
 :root {
     animation: adjust-pos linear both;
     animation-timeline: scroll(root);
    
 }
 
 body {
    transition: --scroll-delayed .55s linear;
    --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
    --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
    --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
 }
 
 header {
    transition: transform .5s 0s;
    transform: translateY(var(--translate));
    background: rgb(255, 255, 255);
 
    
    @container style(--scroll-direction: 0) {
       transition-delay: calc(infinity * 1s);  
    }
 
    @container style(--scroll-direction: -1) {
       --translate: 0;
    }
 
    @container style(--scroll-direction: 1) { 
       --translate: calc(-100% - 2px);
    }    
 }
 
 
 
 
 
 
 
 
 
 
 
 
 

 /* show warning */
 
 .warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-content: center;
    font-size: 2rem;
    
    p {
       position: relative;
       background: #fff;
       padding: 3rem;
       font-weight: 400;
       border: 3px rgba(223, 151,132) solid;
       border-radius: 1rem;
       inline-size: min(45rem, 85vw);
       box-shadow: 0 0 0 50vmax rgba(131, 163, 172, .7);
       -webkit-background-clip: text;
       color: transparent;
       background-image:  linear-gradient(125deg, 
       rgb(131, 163, 172), rgba(223, 151,132));
       
       &::before {
          content: "⚠️" / "warning!";
          position: absolute;
          inset: 0;
          z-index: -1;
          background: #fff;
       }
    }
 
 }
 
 body:hover .warning {
    @supports (not (animation-timeline: view())) {
       display: grid;
    } 
 }
 
 
 /* fix images */
 span:has(> img) {
    aspect-ratio: 86 / 100;
    display: block;
 
    img {
       /* inline-size: 115%; */
       /* max-inline-size: 115%; */
       margin-top: 100px;
    }
 }


 /* --導覽列-- */

header .nav ul li:hover{
   /* background: #fff; */
   opacity: .65;/* 透明度會影響區塊內的所有內容 */
   /* border: solid 1px #777; */
   
   }

   header ul li:hover {
      font-size: 1.2em;  /* 變大 */
      transition: font-size 0.3s ease-in-out; /* 平滑過渡 */
  }
   
 b.before,b.after{
   transition: all 300ms ease-out; /*600ms 是變化的時間 ms毫秒 s秒*/
   text-align: center;
   top: 0;
   right: 0;
   z-index: 1;
   position: absolute;
   font-size: 18px;
   font-weight: normal;
 }
 b.before{
   color: #000;
 }
 b.after {
   z-index: 2; 
   opacity: 0; /*一開始 透明*/
   color: #000;
 }
 .a:hover b.before,   /*hover 是滑鼠滑入*/
 .a:focus b.before,
 .sidebar-anchor:hover b.before,
 .sidebar-anchor:focus b.before{   /*focus 是鍵盤tab鍵 tab到*/
   opacity: 0; /*變 透明*/
 }
 .a:hover b.after,
 .a:focus b.after,
 .sidebar-anchor:hover b.after,
 .sidebar-anchor:focus b.after{
   opacity: 1; /*變 不透明*/
 }
 .sidebar {
   height: 100%;
   width: 100vw;
   position: fixed;
   top: 0;
   z-index: 99;
   background-color: #fff;
   transform: translateX(100vw);
   transition: all .7s .2s ease-in-out;
   opacity: 0;
 }

 
 .nav-right {
   position: fixed;
   right: 30px;
   top: 30px;
 }
 
 .nav-right.visible-xs {
   z-index: 999;
 }
 
 .hidden-xs {
   display: none;
 }
 
 .middle {
   margin: 0 auto;
 }
 
 .bar {
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;
 }
 
 .nav-right.visible-xs .active .bar {
   background-color: #FFF;
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;
 }
 
 .button.active .top {
   -webkit-transform: translateY(0px) rotateZ(45deg);
   -moz-transform: translateY(0px) rotateZ(45deg);
   -ms-transform: translateY(0px) rotateZ(45deg);
   -o-transform: translateY(0px) rotateZ(45deg);
   transform: translateY(0px) rotateZ(45deg);
 }
 
 .button.active .bottom {
   -webkit-transform: translateY(-15px) rotateZ(-45deg);
   -moz-transform: translateY(-15px) rotateZ(-45deg);
   -ms-transform: translateY(-15px) rotateZ(-45deg);
   -o-transform: translateY(-15px) rotateZ(-45deg);
   transform: translateY(-15px) rotateZ(-45deg);
 }
 
 .button.active .middle {
   width: 0;
 }
 
 .move-to-left {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -ms-transform: translateX(0px);
   -o-transform: translateX(0px);
   transform: translateX(0px);
   opacity: 1;
 }
 
 
 .sidebar-list {
   list-style: none;
   position: relative;
   margin-top: 30vh;
   text-align: center;
 }
 
 .sidebar-item {
   margin: 30px auto;
   opacity: 0;
   height: 30px;
   -webkit-transform: translateY(-20px);
   -moz-transform: translateY(-20px);
   -ms-transform: translateY(-20px);
   -o-transform: translateY(-20px);
   transform: translateY(-20px);
 }
 
 .sidebar-item:first-child {
   -webkit-transition: all .7s .2s ease-in-out;
   -moz-transition: all .7s .2s ease-in-out;
   -ms-transition: all .7s .2s ease-in-out;
   -o-transition: all .7s .2s ease-in-out;
   transition: all .7s .2s ease-in-out;
 }
 
 .sidebar-item:nth-child(2) {
   -webkit-transition: all .7s .4s ease-in-out;
   -moz-transition: all .7s .4s ease-in-out;
   -ms-transition: all .7s .4s ease-in-out;
   -o-transition: all .7s .4s ease-in-out;
   transition: all .7s .4s ease-in-out;
 }
 
 .sidebar-item:nth-child(3) {
   -webkit-transition: all .7s .6s ease-in-out;
   -moz-transition: all .7s .6s ease-in-out;
   -ms-transition: all .7s .6s ease-in-out;
   -o-transition: all .7s .6s ease-in-out;
   transition: all .7s .6s ease-in-out;
 }
 
 .sidebar-item:nth-child(4) {
   -webkit-transition: all .7s .8s ease-in-out;
   -moz-transition: all .7s .8s ease-in-out;
   -ms-transition: all .7s .8s ease-in-out;
   -o-transition: all .7s .8s ease-in-out;
   transition: all .7s .8s ease-in-out;
 }
 
 .sidebar-item:last-child {
   -webkit-transition: all .7s 1s ease-in-out;
   -moz-transition: all .7s 1s ease-in-out;
   -ms-transition: all .7s 1s ease-in-out;
   -o-transition: all .7s 1s ease-in-out;
   transition: all .7s 1s ease-in-out;
 }
 
 .sidebar-item.active {
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
   transform: translateY(0px);
 }
 
 .sidebar-anchor {
   color: #FFF;
   text-decoration: none;
   font-size: 1.2em;
   text-transform: uppercase;
   position: relative;
   padding-bottom: 7px;
   text-align: center;
     display: inline-block;
     width: 100px;
     height: 22px;
 }
 
 .sidebar-anchor:before {
   content: "";
   /* width: 0; */
   height: 2px;
   position: absolute;
   /* bottom: 0; */
   /* left: 0; */
   /* background-color: #FFF; */
   -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;
 }
 
 .sidebar-anchor:hover:before {
   width: 100%;
 }
 
 
 
 .w-100{
   height: 100vh;
   width: 100vw;
   object-fit: cover;
 }
 





 

 ul {
   list-style: none;
}


.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }

/* 滾動後的 header 縮小樣式 */
header.scrolled {
   background-color: rgba(255, 255, 255, 0); /* 半透明白底 */
   backdrop-filter: blur(10px);               /* 模糊背景，增加質感 */
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);     /* 輕微陰影 */
   transition: all 0.3s ease;
   color: rgb(126, 126, 126);
 }

header.scrolled > div {
   padding-block: 0.05rem; /* 上下內距變小 */
   transition: padding 0.3s ease;
   border-bottom:none;
}

header.scrolled svg {
   inline-size: 5rem; /* logo 縮小 */
   transition: inline-size 0.3s ease;
}

header.scrolled nav ul {
   font-size: 0.9rem; /* 導覽字變小 */
}

footer{
   color: rgb(126, 126, 126);
   padding: 50px 0;
}

footer a{
   text-decoration: none;
}
   
footer .social-media a:hover img {
   transform: scale(1.2);
}

/* 手機版顯示漢堡按鈕 */
@media (max-width: 768px) {
   .nav-toggle {
     width: 30px;
     height: 22px;
     cursor: pointer;
     position: relative;
     z-index: 999;
   }
 
   .nav-toggle .bar {
     display: block;
     height: 2px;      
     width: 100%;
     background-color: #999;
     margin: 4px 0;
     transition: all 0.3s ease;
   }
 
   .nav-toggle.active .bar:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
   }
 
   .nav-toggle.active .bar:nth-child(2) {
     opacity: 0;
   }
 
   .nav-toggle.active .bar:nth-child(3) {
     transform: translateY(-6px) rotate(-45deg);
   }
 }
 
/* 手機版選單樣式 */
.mobile-menu {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center; 
   background-color: #fff;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100dvh;
   z-index: 998;
   overflow: hidden;
   gap: 1.5rem;
 }
 
 .mobile-menu a {
   padding: 0.8rem 0;
   font-weight: 300 ;
   letter-spacing: .2em;
   text-decoration: none;
   color: #333;
   width: 100%;
   text-align: center;
 }
 
 /* 桌機與大平板 */
 @media (min-width: 769px) {
   .mobile-menu {
     display: none !important;
   }
   .nav-toggle {
      display: none !important;
      position: absolute !important; /* ✅ 確保它不佔任何空間 */
      top: auto;
      left: auto;
    }
 }

/* 手機與小平板 */
 @media (max-width: 768px) {
   ul {
      padding-left: 0px !important;
      }
   div {
      padding-left: 0px !important;
      }
   #news {
      padding-bottom: 0px !important;
      padding-left: 40px !important;
   }
   li{
      padding-left: 0px !important;
      padding-right: 0px !important;
   }
 }


/* 預設桌面版不換行 */
.mobile-break {
   display: none;
 }
 
 /* 手機版顯示換行 */
 @media screen and (max-width: 768px) {
   .mobile-break {
     display: inline;
   }
 }