/* =========================================================
   ✅ 全部加上 fu- 命名空間 + 用 .fu-root 做 CSS 範圍
   這樣丟到大專案也不會跟別的樣式/ID 打架
========================================================= */
.copyright {
  width: 100%;
  padding: 5vw 3vw;
  background-color: #66696b;
  display: none;
  box-sizing: border-box;
}

:root {
  --fu-vw-base: calc(100vw / 1920);
  --fu-card-r: 60px;

  /* OFF（反應前） */
  --fu-bg-outer: #66696b;
  --fu-card-bg: #96989a;
  --fu-card-edge: #8a8683;

  /* ON（反應後） */
  --fu-card-bg-on: #515152;

  /* 文字/資訊 */
  --fu-txt: rgba(255, 255, 255, 1);
  --fu-txt-soft: rgba(255, 255, 255, 1);
  --fu-muted: rgba(248, 239, 224, 0.5);

  --fu-txt-on: rgba(255, 255, 255, .88);
  --fu-txt-soft-on: rgba(255, 255, 255, .65);

  /* UNIQUE 底色（字的基底灰） */
  --fu-unique-off-fill: #96989a;
  --fu-unique-on-fill: #515152;

  /* 水（遮色片） */
  --fu-water-off: #7b7876;
  --fu-water-on: #979898;

  /* 外框 */
  --fu-outline-off: #7b7876;
  --fu-outline-on: #979898;

  /* ============= NEW WATER CONTROL ============= */
  --fu-level: 0;
  /* 進場從 0 → level-target */
  --fu-level-target: 0.72;
  /* 最終水位（0~1） */
  --fu-water-level: 40%;
  /* 波面位置（%） */
  --fu-wave-speed: 3.2s;
  /* 波速 */

  /* ============= MOCK LAMP LIGHT CONTROL ============= */
  --fu-light: 0;
  /* 0/1 */
  --fu-glow: 226 171 45;
  /* rgb */
  --fu-breath-dur: 3.2s;
  --fu-breath-ease: ease-in-out;
}

.fu-root,
.fu-root * {
  box-sizing: border-box;
}

.fu-root {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  overflow-x: hidden;
  color: var(--fu-txt);
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans TC", sans-serif;
  user-select: none;
  touch-action: none;
}

.fu-page {
  width: 100%;
}

.fu-card {
  width: 100%;
  height: 30vw;
  position: relative;
  border-radius: var(--fu-card-r);
  padding: 0;
  overflow: hidden;
  background: var(--fu-card-bg);

  transition: background .8s ease, filter .45s ease;
  filter: brightness(calc(.96 + var(--fu-light) * .08));
}

.fu-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .10;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.fu-card.fu-is-light-on {
  background: var(--fu-card-bg-on);
}

.fu-card.fu-is-light-on .fu-label {
  color: var(--fu-txt-soft-on);
}

.fu-card.fu-is-light-on .fu-value {
  color: var(--fu-txt-on);
}

/* TOP INFO */
.fu-top-row {
  position: relative;
  z-index: 30;
  display: flex;
  gap: clamp(18px, 2.6vw, 36px);
  align-items: flex-end;
  padding: 3vw 7vw;
  color: #fff;
  font-size: calc(25 * var(--fu-vw-base));
  line-height: 2vw;
  font-family: "new-astro", sans-serif;
  letter-spacing: .1em;
  text-align: left;
  font-weight: 400;
}

.fu-info {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 11vw;
  cursor: pointer;
}

.fu-label {
  margin-bottom: 8px;
}

.fu-value {
  white-space: nowrap;
}

.fu-divider {
  width: 1px;
  height: 9vw;
  background: var(--fu-muted);
  margin-top: 0vw;
  flex: 0 0 auto;
}

.fu-location .fu-value {
  white-space: normal;
  max-width: 520px;
}

/* info hover */
.fu-top-row .fu-info a {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.fu-top-row .fu-info .fu-value,
.fu-top-row .fu-info .fu-label {
  transition: color .35s ease;
}

.fu-top-row .fu-info:hover .fu-value,
.fu-top-row .fu-info a:hover .fu-value,
.fu-top-row .fu-info:hover .fu-label,
.fu-top-row .fu-info a:hover .fu-label {
  color: #e2ab2d;
}

/* RIGHT NAV */
.fu-right-nav {
  position: absolute;
  right: 20vw;
  top: 50.5%;
  transform: translateY(0%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
  user-select: none;
}

.fu-right-nav a {
  position: relative;
  width: 8vw;
  height: 2.5vw;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.fu-or-l {
  position: absolute;
  width: 50%;
  left: 0;
  top: 0;
  height: 2.5vw;
  transform: translate(70%, 0);
  transition: transform .35s ease-in-out, opacity .35s ease-in-out;
  z-index: 10;
  background-image: url(../img/index/border-left.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
}

.fu-or-r {
  position: absolute;
  width: 50%;
  right: 0;
  top: 0;
  height: 2.5vw;
  transform: translate(-75%, 0);
  transition: transform .35s ease-in-out, opacity .35s ease-in-out;
  z-index: 10;
  background-image: url(../img/index/border-right.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
}

.fu-en {
  position: relative;
  width: 100%;
  color: #fff;
  font-size: calc(16*var(--fu-vw-base));
  line-height: 2.5vw;
  font-family: "Raleway", sans-serif;
  letter-spacing: .1em;
  text-align: left;
  font-weight: 300;
  height: 2.5vw;
  text-indent: 2vw;
  transform: translate(0, 0);
  transition: transform .35s ease-in-out;
  z-index: 11;
}

.fu-chi {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #ffc561;
  font-size: calc(20*var(--fu-vw-base));
  line-height: 2.5vw;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: .1em;
  text-align: center;
  font-weight: 300;
  height: 2.5vw;
  transform: translate(0, 2.5vw);
  transition: transform .35s ease-in-out;
  z-index: 11;
}

.fu-pointer:hover .fu-en,
.fu-pointer.fu-active .fu-en {
  transform: translate(0, -2.5vw);
}

.fu-pointer:hover .fu-chi,
.fu-pointer.fu-active .fu-chi {
  transform: translate(0, 0);
}

.fu-pointer:hover .fu-or-l,
.fu-pointer.fu-active .fu-or-l {
  transform: translate(0, 0);
  opacity: 1;
}

.fu-pointer:hover .fu-or-r,
.fu-pointer.fu-active .fu-or-r {
  transform: translate(0, 0);
  opacity: 1;
}

/* UNIQUE WAVE */
.fu-unique-wave {
  width: 61vw;
  position: absolute;
  left: 0;
  bottom: 0vw;
  pointer-events: none;
  opacity: 1;
  z-index: 10;
}

.fu-unique-wave svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.fu-unique-fo {
  width: 100%;
  height: 100%;
  position: relative;
}

.fu-u-base {
  position: absolute;
  inset: 0;
  background: var(--fu-unique-off-fill);
  opacity: .92;
}

.fu-card.fu-is-light-on .fu-u-base {
  background: var(--fu-unique-on-fill);
}

.fu-u-water-level {
  position: absolute;
  inset: 0;
  clip-path: inset(calc((1 - var(--fu-level)) * 100%) 0 0 0);
}

.fu-u-water-wave {
  position: absolute;
  inset: 0;
  background: var(--fu-water-off);
  will-change: clip-path;
  animation: fuWaveClip var(--fu-wave-speed) ease-in-out infinite;
}

.fu-card.fu-is-light-on .fu-u-water-wave {
  background: var(--fu-water-on);
}

@keyframes fuWaveClip {

  0%,
  100% {
    clip-path: polygon(0% calc(var(--fu-water-level) - 10%),
        16% calc(var(--fu-water-level) - 11%),
        33% calc(var(--fu-water-level) - 5%),
        54% calc(var(--fu-water-level) + 5%),
        70% calc(var(--fu-water-level) + 6%),
        84% calc(var(--fu-water-level) + 4%),
        100% calc(var(--fu-water-level) - 3%),
        100% 100%,
        0% 100%);
  }

  50% {
    clip-path: polygon(0% calc(var(--fu-water-level) + 5%),
        15% calc(var(--fu-water-level) + 10%),
        34% calc(var(--fu-water-level) + 11%),
        51% calc(var(--fu-water-level) + 7%),
        67% calc(var(--fu-water-level) - 5%),
        84% calc(var(--fu-water-level) - 10%),
        100% calc(var(--fu-water-level) - 9%),
        100% 100%,
        0% 100%);
  }
}

/* LAMP */
.fu-lamp-wrap {
  position: absolute;
  right: 3vw;
  top: -5vw;
  width: 7vw;
  height: 100%;
  z-index: 70;
  user-select: none;
  touch-action: none;
}

.fu-lamp-panel-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle,
      rgba(var(--fu-glow), calc(.58 * var(--fu-light))) 0%,
      rgba(var(--fu-glow), calc(.22 * var(--fu-light))) 24%,
      rgba(var(--fu-glow), calc(.09 * var(--fu-light))) 42%,
      rgba(var(--fu-glow), 0) 72%);
  filter: blur(0.2px);
}

.fu-lamp-svg {
  width: 260px;
  max-width: 86%;
  overflow: visible;
  display: block;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  transform: translateY(2.2vw);
}

.fu-cord {
  fill: none;
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}

.fu-hit {
  fill: rgba(255, 0, 0, 0);
  cursor: grab;
}

.fu-hit:active {
  cursor: grabbing;
}

.fu-handle-img {
  pointer-events: none;
}

.fu-glow-dot {
  opacity: 1;
  transform-origin: 100px 359px;
  pointer-events: none;
  animation: fuGlowBreath var(--fu-breath-dur) var(--fu-breath-ease) infinite;
  filter: brightness(1.2);
  transition: filter .35s ease;
}

.fu-card.fu-is-light-on .fu-glow-dot {
  animation:
    fuGlowBreath var(--fu-breath-dur) var(--fu-breath-ease) infinite,
    fuGlowFlicker var(--fu-breath-dur) var(--fu-breath-ease) infinite;
  filter: none;
}

@keyframes fuGlowBreath {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.80;
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fuGlowFlicker {
  0% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.2);
  }

  100% {
    filter: brightness(1);
  }
}

/* bottom */
.fu-copyright {
  position: absolute;
  left: 7vw;
  bottom: 1vw;
  z-index: 60;
  color: #fff;
  font-size: calc(20*var(--fu-vw-base));
  line-height: 2.5vw;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  font-style: normal;
  letter-spacing: .15em;
  text-align: left;
}

.fu-backtop {
  position: absolute;
  right: 4.5vw;
  bottom: 5vw;
  display: inline-flex;
  align-items: center;
  gap: 0.8vw;
  text-decoration: none;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: calc(18 * var(--fu-vw-base));
  line-height: 2vw;
  letter-spacing: 0.15vw;
  z-index: 80;
  cursor: pointer;
}

.fu-backtop .fu-circle {
  position: relative;
  width: 3.6vw;
  height: 3.6vw;
  border: 1px solid rgba(255, 141, 78, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fu-backtop .fu-top-text {
  position: relative;
  margin-left: -1vw;
  z-index: 2;
}

.fu-backtop .fu-trends {
  position: relative;
  padding-bottom: 0vw;
}

.fu-backtop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.25vw;
  width: 6.2vw;
  height: 1px;
  background: rgba(255, 141, 78, 0.9);
}

.fu-backtop:hover::after {
  will-change: transform;
  animation: fuBacktopline 1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes fuBacktopline {
  0% {
    width: 0vw;
  }

  80%,
  100% {
    width: 6.2vw;
  }
}