/* ===== fullpage 換頁動畫===== */
#footer.active{-webkit-animation:none;}

.section:not(.active) .bg{ opacity: 0.5; transform: scale(1.05); animation: none; }
.section:not(.active) .content{ opacity: 0; transform: translate3d(0, 40px, 0); animation: none; }
.section.active .bg{ animation: bgIn 1.2s ease both; }
.section.active .content{ animation: contentIn .8s cubic-bezier(.22,.61,.36,1) .2s both; }

@keyframes bgIn{
  from{ opacity: 0; transform: scale(1.05); }
  to  { opacity: 1; transform: scale(1); }
}
@keyframes contentIn{
  from{ opacity: 0; transform: translate3d(0, 40px, 0); }
  to  { opacity: 1; transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes scaleA{
	0%{opacity:0;  transform:scale(1.1);}
	100%{opacity:1; transform:scale(1);}
}

@keyframes scaleA{
	0%{opacity:0;  transform:scale(1.1);}
	100%{opacity:1; transform:scale(1);}
}

/* =============================================
 update進場動畫 
 ===================================== */

.update-tabs{ opacity: 1; transform: none; }
.update-tabs .update_btn{ opacity: 1; transform: none; }
.update_box{ position: relative; }
.update_box > div{ position:absolute; }
.update_box:not(.is-active){ opacity: 0; pointer-events: none; }
.update_box.is-active{ opacity: 1; pointer-events: auto; }
.update_box.is-enter .update_char{ animation: u-char-in 1s cubic-bezier(.22,.61,.36,1) both; }
.update_box.is-enter .char_title{ animation: u-title-in .8s cubic-bezier(.22,.61,.36,1) both; animation-delay: .55s; }
.update_box.is-enter .char_content{ animation: u-content-in .6s cubic-bezier(.22,.61,.36,1) both; animation-delay: .8s; }
.update_box.is-enter [class^="char_name"]{ animation: u-name-in .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: 0.8s; }
.update_box.is-enter [class^="char_fly01"]{ animation: u-fly-in 1s cubic-bezier(.22,.61,.36,1) both; animation-delay: 1s; }
.update_box.is-enter [class^="char_fly02"]{ animation: u-fly-in 1s cubic-bezier(.22,.61,.36,1) both; animation-delay: 1.2s; }
.update_box.is-enter [class^="char_fly03"]{ animation: u-fly-in 1s cubic-bezier(.22,.61,.36,1) both; animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce){
  .update_box.is-enter .update_char,
  .update_box.is-enter .char_title,
  .update_box.is-enter .char_content,
  .update_box.is-enter [class^="char_name"],
  .update_box.is-enter [class^="char_fly01"]{
    animation: none; opacity: 1; transform: none; } }

/* keyframes（沿用你原本） */
@keyframes u-char-in{
  from{ opacity:0; transform: translate3d(70px, 20px, 0) scale(.96); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes u-title-in{
  from{ opacity:0; transform: translate3d(0, -28px, 0); }
  to  { opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes u-content-in{
  from{ opacity:0; transform: translate3d(0, 24px, 0); }
  to  { opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes u-name-in{
  from{ opacity:0; transform: translate3d(0, 10px, 0) scale(.9); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes u-fly-in{
  from{ opacity:0; transform: translate3d(0, 18px, 0) scale(.96); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ============================= 
campaign motion 
===================================== */
.section.campaign .camp_btnbox,
.section.campaign .camp_7anlogo,
.section.campaign .camp_title,
.section.campaign .campbg_circle01,
.section.campaign .campbg_circle02{
  opacity: 0; transform: translate3d(0,0,0); will-change: transform, opacity; }

/* btnbox：由下往上 */
.section.campaign.is-enter .camp_btnbox{ animation: campUpIn .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .10s; }
/* 7anlogo：由上掉入 */
.section.campaign.is-enter .camp_7anlogo{ animation: campDownIn .65s cubic-bezier(.22,.61,.36,1) both; animation-delay: .25s; }
/* title：由上滑入 */
.section.campaign.is-enter .camp_title{ animation: campDownIn .65s cubic-bezier(.22,.61,.36,1) both; animation-delay: .38s; }
/* circle01：從中心往左移（你要的效果） */
.section.campaign.is-enter .campbg_circle01{ animation: campCircleLeft .8s cubic-bezier(.22,.61,.36,1) both; animation-delay: 0s; }
/* circle02：從中心往右移 */
.section.campaign.is-enter .campbg_circle02{ animation: campCircleRight .8s cubic-bezier(.22,.61,.36,1) both; animation-delay: 0s; }

/* 只有「還沒播過」才隱藏（0） */
.section.campaign:not(.is-enter) .camp_btnbox,
.section.campaign:not(.is-enter) .camp_7anlogo,
.section.campaign:not(.is-enter) .camp_title,
.section.campaign:not(.is-enter) .campbg_circle01,
.section.campaign:not(.is-enter) .campbg_circle02{
  opacity: 0;
}

@keyframes campUpIn{
  from{ opacity:0; transform: translate3d(0, 30px, 0); }
  to  { opacity:1; transform: translate3d(0, 0, 0); }
}

@keyframes campDownIn{
  from{ opacity:0; transform: translate3d(0, -30px, 0); }
  to  { opacity:1; transform: translate3d(0, 0, 0); }
}

/* 從中心出發：先放在畫面中心附近，再滑到原本位置 */
@keyframes campCircleLeft{
  from{ opacity:0; transform: translate3d(45vw, 0, 0) scale(.95); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes campCircleRight{
  from{ opacity:0; transform: translate3d(-45vw, 0, 0) scale(.95); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}



/* ============================= 
          GALLERY motion 
===================================== */

/* 先把整個 grid 預設為 0（沒進場時） */
.section.gallery:not(.is-enter) .gallery-grid{ opacity: 0; }

/* 8 個按鈕 + title：預設 0 */
.section.gallery:not(.is-enter) .g-item{ opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); }

/* 進場後：依序播放 */
.section.gallery.is-enter .g-item{ animation: g-item-in .65s cubic-bezier(.22,.61,.36,1) both; }
/* Title（中間那格）可給稍微不同的節奏（更穩重） */
.section.gallery.is-enter .g-title{ animation: g-title-in .75s cubic-bezier(.22,.61,.36,1) both; }
@keyframes g-item-in{
  from{ opacity:0; transform: translate3d(0, 14px, 0) scale(.98); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes g-title-in{
  from{ opacity:0; transform: translate3d(0, 18px, 0) scale(.96); }
  to  { opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 依序延遲（3x3：左到右，上到下；中間 title 放第 5 個） */
.section.gallery.is-enter .gallery-grid > :nth-child(1){ animation-delay: .05s; }
.section.gallery.is-enter .gallery-grid > :nth-child(2){ animation-delay: .12s; }
.section.gallery.is-enter .gallery-grid > :nth-child(3){ animation-delay: .19s; }
.section.gallery.is-enter .gallery-grid > :nth-child(4){ animation-delay: .26s; }
.section.gallery.is-enter .gallery-grid > :nth-child(5){ animation-delay: .33s; } /* title */
.section.gallery.is-enter .gallery-grid > :nth-child(6){ animation-delay: .40s; }
.section.gallery.is-enter .gallery-grid > :nth-child(7){ animation-delay: .47s; }
.section.gallery.is-enter .gallery-grid > :nth-child(8){ animation-delay: .54s; }
.section.gallery.is-enter .gallery-grid > :nth-child(9){ animation-delay: .61s; }


/* ============================= 
          光點 motion 
===================================== */
  .fx-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
  .fx-dot{ position: absolute; width: var(--s); height: var(--s); border-radius: 999px; 
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 25%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 75% ); 
    opacity: var(--o); box-shadow: 0 0 6px rgba(255,255,255,.8), 0 0 14px rgba(255,255,255,.6); 
    transform: translate3d(var(--x), var(--y), 0) scale(var(--k)); animation: dot-float var(--d) linear infinite; }

  @keyframes dot-float{ 
    from{ transform: translate3d(var(--x), var(--y), 0) scale(var(--k)); }
    to{ transform: translate3d( calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0 ) scale(var(--k)); } }

  @media (prefers-reduced-motion: reduce){
    .fx-dot{ animation: none !important; }
  }

/* ============================= 
          Loading overlay
===================================== */
.loading{ pointer-events: auto; }         /* 顯示時正常 */
.loading.is-hide{ pointer-events: none; } /* 隱藏後不吃手勢 */
 .loading{ 
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(900px 600px at 50% 40%, rgba(255,210,120,.08), transparent 60%),
    linear-gradient(180deg,#070a14 0%,#03050c 60%,#02030a 100%);
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease;
}
.loading.is-show{opacity:1;visibility:visible;}
.loading.is-hide{opacity:0;visibility:hidden;}

.loading__inner{text-align:center;position:relative;}


.loading__brand{
  font:600 12px system-ui;
  letter-spacing:.55em;
  color:rgba(255,220,140,.7);
  margin-bottom:12px;
  text-transform:uppercase;
}

 /* ✨ 金色閃動 LOADING */
.loading__text{font-family:'Noto Serif JP', sans-serif;
  font-size: 10rem;font-weight: 800;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:transparent;
  background:linear-gradient(90deg,
    #fff 0%,
    #ffe5a6 25%,
    #ffd36a 50%,
    #fff 75%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  animation:
    shine 1.6s linear infinite,
    flicker 3s ease-in-out infinite;
  text-shadow:0 0 20px rgba(255,210,120,.25);
}
@keyframes shine{
  to{background-position:200% center;}
}
@keyframes flicker{
  0%,100%{opacity:.9;filter:brightness(1);}
  20%{opacity:1;filter:brightness(1.3);}
  22%{opacity:.85;}
  60%{opacity:1;filter:brightness(1.15);}
}

 /* 進度條 */
.loading__progress{
  width:min(460px,80vw);
  margin:22px auto 0;
}
.loading__track{
  position:relative;
  height:8px;
  border-radius:999px;
  background:rgba(255,220,140,.15);
  overflow:hidden;
}
.loading__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(255,220,140,.4),
    rgba(255,220,140,.95),
    #fff,
    rgba(255,220,140,.95)
  );
  box-shadow:0 0 16px rgba(255,210,120,.35);
  transition:width .2s ease;
}
.loading__glow{
  position:absolute;
  top:0;
  height:100%;
  width:35%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.8),
    transparent);
  animation:sweep 1.2s infinite;
}
@keyframes sweep{
  to{transform:translateX(320%);}
}

.loading__pct{
  margin-top:8px;
  font:600 12px system-ui;
  letter-spacing:.2em;
  color:rgba(255,220,140,.7);
  text-align:center;
}