#banner {position: relative;height: 100vh;overflow: hidden;cursor: grab;user-select: none;}
#banner:active { cursor: grabbing; }
#banner .slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1s var(--ease-elegant); }
#banner .slide.active { opacity: 1; z-index: 10; }
#banner .slide.leaving { opacity: 1; z-index: 5; }
#banner .fan-mask { width: 87%; height: 100%; margin: auto; clip-path: ellipse(0% 0% at 50% 100%); transition: clip-path var(--fan-speed) var(--ease-elegant); }
#banner .slide.active .fan-mask {clip-path: ellipse(50% 84% at 50% 100%);}
#banner .fan-mask:before {content: '';position: absolute;width: 100%;height: 30%;background: linear-gradient(to top, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));top: 0;left: 0;z-index: 2;opacity: .4;}
#banner .fan-mask:after {position: absolute;bottom: 0;left: 0;z-index: 1;content: "";width: 100%;height: 40%;display: block;background: linear-gradient(to bottom, rgb(0 0 0 / 0%), #0b1317);pointer-events: none;opacity: .8;}



/* ----- Background Image ----- */
#banner .fan-image {width: 100%;height: 100%;background-size: cover;background-position: 50% 100%;transform: scale(1.3);transition: transform 12s linear;pointer-events: none;}
#banner .slide.active .fan-image { transform: scale(1); }

/* ----- Text Animation ----- */
#banner .slide-text {position: absolute;bottom: 12%;left: 0;right: 0;padding: 0 110px;text-align: center;z-index: 20;pointer-events: none;}
#banner .text-mask { overflow: hidden; text-align: center; }
#banner .sub-title {font-size: clamp(1.8rem,8vw,6rem);letter-spacing: 0.05em;color: var(--secondary);opacity: 0;transform: translateY(110%);transition: all var(--text-speed) var(--ease-elegant);text-align: center;text-transform: uppercase;font-weight: 200;line-height: 1;}
#banner .title-animation {font-family: serif;font-size: clamp(1.2rem,8vw,1.3rem);line-height: 1.2;font-weight: 300;letter-spacing: 14px;opacity: 0;transform: translateY(110%) rotate(2deg);transform-origin: left bottom;transition: all var(--text-speed) var(--ease-elegant);color: var(--secondary);margin-top: 10px;}
#banner .slide.active .sub-title { opacity: 1; transform: translateY(0); transition-delay: 1s; }
#banner .slide.active .title-animation { opacity: 1; transform: translateY(0) rotate(0); transition-delay: 1.2s; }
#banner .slide.active .title-animation.delay-1 { transition-delay: 1.35s; }


/* ----- Controls ----- */
#banner .slider-controls {position: absolute;bottom: 30px;left: 10%;right: 10%;display: flex;justify-content: space-between;align-items: center;z-index: 50;opacity: 0;transition: opacity 1s ease 2s;}
#banner .slider-controls { opacity: 1; }
#banner .progress-container { width: 100px; height: 1px; background: rgba(255,255,255,0.15); }
#banner .progress-fill { height: 100%; width: 0; background: var(--secondary); }
#banner .nav-arrows button {background: none;border: none;color: var(--secondary);font-size: 10px;letter-spacing: 0.2em;cursor: pointer;opacity: 0.8;margin-left: 40px;}

/* ----- Side SNS ----- */
#banner .side-sns {position: absolute;left: 3%;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;gap: 5px;z-index: 100;opacity: 0;transition: opacity 0.8s ease 0.8s;font-weight: 400;}
body.is-ready #banner .side-sns { opacity: 1; }
#banner .side-sns p{color: var(--secondary);margin-bottom: 10px;}
#banner .side-sns a {color: var(--secondary);letter-spacing: 0px;font-size: .9rem;text-decoration: none;line-height: 1;font-weight: 300;}
#banner .side-sns a:hover svg{ transform: translate(3px,-3px); }
#banner .side-sns a svg { fill: #fff; width: 20px; height: 20px; margin: 0 5px; }
#banner .slide-link { position: absolute; inset: 0; z-index: 30; display: block; text-indent: -9999px; }
#banner .slider-controls,#banner .side-sns { pointer-events: auto; }
#banner .slide-text { z-index: 40;}

#banner .downtxt{
    position: absolute;
    bottom: 30px;
    left: 10%;
    right: 10%;
    text-align: center;
    z-index: 100;
    margin: auto;
    width: 40%;
}
#banner #scrollBtn {position: relative;display: inline-flex;align-items: center;gap: 30px;text-decoration: none;font-size: 12px;letter-spacing: 2px;color: var(--secondary);transition: 1s ease 2s;text-align: center;font-weight: 300;}
#banner #scrollBtn::before {content: "";position: absolute;right: 30%;top: -140%;width: 45px;height: 40px;background: url(/images/01/img-scrollBtn.png);background-size: contain;animation: scrollDot 1.6s ease-in-out infinite;}
/*圓圈呼吸動畫*/
@keyframes scrollDot {
	0% { transform: translateY(-50%) scale(1); opacity: 0.2; }
	50% { transform: translateY(-50%) scale(1.2); opacity: 1; }
	100% { transform: translateY(-50%) scale(1); opacity: 0.2; }
}


#banner .bannerbnt {position: absolute;right: 7%;top: 30%;transform: translateY(-50%);display: flex;flex-direction: column;gap: 5px;z-index: 100;opacity: 0;transition: opacity 0.8s ease 0.8s;font-weight: 400;}
body.is-ready #banner .bannerbnt { opacity: 1; }
#banner .bannerbnt .shop-button {display: inline-flex;align-items: center;justify-content: center;text-decoration: none;padding: 20px 35px 14px;border: 1px solid rgba(211,203,184,0.5);border-radius: 50%/50%;position: relative;background: transparent;overflow: visible;transition: all 0.4s ease;}
#banner .bannerbnt .line-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#banner .bannerbnt .line-rect { width: 100%; height: 100%; fill: transparent; stroke: var(--secondary); stroke-width: 0.8px; rx: 50%; ry: 50%; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
#banner .bannerbnt .shop-button span { color: var(--secondary); font-weight: 300; font-size: 16px; letter-spacing: 0.5px; z-index: 2; }
#banner .bannerbnt .arrow {width: 16px;height: 16px;margin-left: 10px;transition: transform 0.3s ease;fill: var(--secondary);stroke: var(--secondary);z-index: 2;}
#banner .bannerbnt .shop-button:hover {background-color: var(--info);}
#banner .bannerbnt .shop-button:hover .line-rect { stroke-dashoffset: 0; }
#banner .bannerbnt .shop-button:hover .arrow { transform: translate(3px,-3px); }
#banner .bannerbnt .shop-button:active { transform: scale(0.97); }

@media (max-width:1280px) {
  #banner { height: 75vh; }
  #banner .sub-title { font-size: 7.2vw; }
}
@media (max-width:1140px) {
  #banner { height: 80vh; }
}
@media (min-width:1024px) {
  #banner .slide.active .fan-mask { clip-path: ellipse(50% 84% at 50% 100%); }
}
@media (max-width:1023px) {
  #banner .slide-text { bottom: 16%; padding: 0 50px; }
  #banner .side-sns,#banner .downtxt,#banner .bannerbnt { display: none; }
  #banner .slider-controls { bottom: 30px; }
}
@media (max-width:768px) {
  #banner { height: 60vh; }
  #banner .slider-controls { display: flex; flex-direction: column; align-items: center; bottom: 0px; gap: 10px; }
  #banner .nav-arrows button { margin-left: 0; }
  #banner .nav-arrows { display: flex; gap: 14px; }
  #banner .slide.active .fan-mask { clip-path: ellipse(55% 70% at 50% 100%); }
  #banner .title-animation { font-size: 1.2rem; letter-spacing: 8px; }
}
@media (max-width:540px) {
  #banner .slide-text { bottom: 0; }
  #banner .slider-controls { display: none; }
  #banner {height: 32vh;}
  #banner .slide.active .fan-mask {clip-path: ellipse(54% 70% at 50% 100%);}
}