/**
 * Web 全屏 Loading（ADR-0014）
 * 對齊後台預覽 CSS：loadingImg_style* / loadingArt* / 純代碼 loaders
 * 由 visual-config full_loading.type + nested .style 驅動。
 *
 * 變數：
 *   --dy-color-1   動效色（預設 #E0D2CF，對齊 AppColor.brandEffectColor1）
 *   --font-color   藝術字描邊／字色（API art_text.font_color）
 */

/* 覆寫預設四點 spinner，改由 brand style 接管。
 * 不可用 background shorthand + !important：會清掉子樣式的 background-color
 * （例如 code-3 中心紅球、code-2 中間紅條）。 */
.loading.bfl {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  background-image: none !important;
  background-size: auto !important;
  animation: none !important;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  --dy-color-1: #E0D2CF;
  --font-color: #FFFFFF;
}

.loading.bfl img {
  display: block;
  max-width: 100px;
  max-height: 100px;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* ========== code：1,2,3,4,5,10,13,18（對齊後台原始 CSS，非 Flutter 調參） ========== */

.loading.bfl-code {
  display: block;
  flex: none;
}

.loading.bfl-code-1 {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-left-color: #1678ff;
  border-radius: 100%;
  animation: bfl-circle .75s linear infinite !important;
}

@keyframes bfl-circle {
  0% { transform: rotate(0); }
  to { transform: rotate(1turn); }
}

.loading.bfl-code-2 {
  --shadowColor: #ea4e3d;
  width: 6px;
  height: 10px;
  background-color: #ea4e3d !important;
  display: block;
  position: relative;
  animation: bfl-rectangle 1s ease-in-out -.2s infinite !important;
}
.loading.bfl-code-2:before,
.loading.bfl-code-2:after {
  content: "";
  height: 10px;
  width: 6px;
  position: absolute;
}
.loading.bfl-code-2:before {
  --shadowColor: #04be02;
  background-color: #04be02;
  left: -14px;
  animation: bfl-rectangle 1s ease-in-out -.4s infinite;
}
.loading.bfl-code-2:after {
  --shadowColor: #ffaa09;
  background-color: #ffaa09;
  right: -14px;
  animation: bfl-rectangle 1s ease-in-out infinite;
}
@keyframes bfl-rectangle {
  0%, 80%, to {
    box-shadow: 0 0 var(--shadowColor);
    height: 20px;
  }
  40% {
    box-shadow: 0 -20px var(--shadowColor);
    height: 30px;
  }
}

.loading.bfl-code-3 {
  width: 15px;
  height: 15px;
  margin: 20px;
  background-color: #ea4e3d !important;
  border-radius: 100%;
  position: relative;
  animation: bfl-ball-rotate 1s cubic-bezier(.7, -.13, .22, .86) infinite !important;
  animation-fill-mode: both;
}
.loading.bfl-code-3:before,
.loading.bfl-code-3:after {
  content: "";
  width: 15px;
  height: 15px;
  margin: 2px;
  opacity: .8;
  border-radius: 100%;
  position: absolute;
}
.loading.bfl-code-3:before {
  background-color: #1678ff;
  left: -28px;
  top: 0;
}
.loading.bfl-code-3:after {
  background-color: #ffaa09;
  left: 25px;
  top: 0;
}
@keyframes bfl-ball-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(.6); }
  to { transform: rotate(1turn) scale(1); }
}

.loading.bfl-code-4 {
  width: 48px;
  height: 48px;
  border: 1px solid #fff;
  border-radius: 100%;
  position: relative;
  animation: bfl-satellite 3s linear infinite !important;
}
.loading.bfl-code-4:before,
.loading.bfl-code-4:after {
  content: "";
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 10px #fff;
  height: 12px;
  width: 12px;
  left: 1px;
  top: 1px;
  position: absolute;
}
.loading.bfl-code-4:after {
  height: 20px;
  width: 20px;
  margin: 13px;
  right: 0;
}
@keyframes bfl-satellite {
  0% { transform: rotate(0) translateZ(0); }
  to { transform: rotate(1turn) translateZ(0); }
}

.loading.bfl-code-5 {
  display: block;
  font-size: 0;
  width: 32px;
  height: 32px;
  position: relative;
  box-sizing: border-box;
}
.loading.bfl-code-5 > div {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  float: none;
}
.loading.bfl-code-5 > div:first-child {
  animation: bfl-ball-atom-shrink 4.5s linear infinite;
  background: #1678ff;
  border-radius: 100%;
  height: 60%;
  width: 60%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.loading.bfl-code-5 > div:not(:first-child) {
  animation: bfl-ball-atom-zindex 1.5s steps(2) 0s infinite;
  background: none;
  height: 100%;
  width: 100%;
  left: 0;
  position: absolute;
  z-index: 0;
}
.loading.bfl-code-5 > div:not(:first-child):before {
  content: "";
  animation: bfl-ball-atom-position 1.5s ease 0s infinite,
             bfl-ball-atom-size 1.5s ease 0s infinite;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  left: 0;
  top: 0;
  margin-left: -5px;
  margin-top: -5px;
  opacity: .75;
  position: absolute;
}
.loading.bfl-code-5 > div:nth-child(2) { animation-delay: .75s; }
.loading.bfl-code-5 > div:nth-child(2):before {
  animation-delay: 0s, -1.125s;
  background-color: #ea4e3d;
}
.loading.bfl-code-5 > div:nth-child(3) {
  animation-delay: -.25s;
  transform: rotate(120deg);
}
.loading.bfl-code-5 > div:nth-child(3):before {
  animation-delay: -1s, -.75s;
  background-color: #ffaa09;
}
.loading.bfl-code-5 > div:nth-child(4) {
  animation-delay: .25s;
  transform: rotate(240deg);
}
.loading.bfl-code-5 > div:nth-child(4):before {
  animation-delay: -.5s, -.125s;
  background-color: #04be02;
}
@keyframes bfl-ball-atom-position {
  50% { left: 100%; top: 100%; }
}
@keyframes bfl-ball-atom-size {
  50% { transform: scale(.5, .5); }
}
@keyframes bfl-ball-atom-zindex {
  50% { z-index: 10; }
}
@keyframes bfl-ball-atom-shrink {
  50% { transform: translate(-50%, -50%) scale(.8, .8); }
}

.loading.bfl-code-10 {
  display: block;
  font-size: 0;
  width: 8px;
  height: 8px;
  position: relative;
  color: #000;
}
.loading.bfl-code-10 > div {
  animation: bfl-fussion1 1s ease 0s infinite;
  border-radius: 100%;
  display: inline-block;
  float: none;
  height: 12px;
  width: 12px;
  position: absolute;
  transform: translate(-50%, -50%);
}
.loading.bfl-code-10 > div:first-child {
  background-color: #1678ff;
  left: 50%;
  top: 0;
  z-index: 1;
}
.loading.bfl-code-10 > div:nth-child(2) {
  animation-name: bfl-fussion2;
  background-color: #ea4e3d;
  left: 100%;
  top: 50%;
  z-index: 2;
}
.loading.bfl-code-10 > div:nth-child(3) {
  animation-name: bfl-fussion3;
  background-color: #ffaa09;
  left: 50%;
  top: 100%;
  z-index: 1;
}
.loading.bfl-code-10 > div:nth-child(4) {
  animation-name: bfl-fussion4;
  background-color: #04be02;
  left: 0;
  top: 50%;
  z-index: 2;
}
@keyframes bfl-fussion1 {
  0% { opacity: .35; }
  50% { left: 200%; opacity: 1; top: -100%; }
  to { left: 100%; opacity: .35; top: 50%; z-index: 2; }
}
@keyframes bfl-fussion2 {
  0% { opacity: .35; }
  50% { left: 200%; opacity: 1; top: 200%; }
  to { left: 50%; opacity: .35; top: 100%; z-index: 1; }
}
@keyframes bfl-fussion3 {
  0% { opacity: .35; }
  50% { left: -100%; opacity: 1; top: 200%; }
  to { left: 0; opacity: .35; top: 50%; z-index: 2; }
}
@keyframes bfl-fussion4 {
  0% { opacity: .35; }
  50% { left: -100%; opacity: 1; top: -100%; }
  to { left: 50%; opacity: .35; top: 0; z-index: 1; }
}

.loading.bfl-code-13 {
  display: block;
  font-size: 0;
  width: 32px;
  height: 32px;
  position: relative;
  color: #000;
}
.loading.bfl-code-13 > div {
  border-radius: 100%;
  box-sizing: border-box;
  display: inline-block;
  float: none;
  height: 10px;
  width: 10px;
  left: 0;
  top: 0;
  position: absolute;
}
.loading.bfl-code-13 > div:first-child {
  animation: bfl-tri1 2s ease-in-out 0s infinite;
  background-color: #1678ff;
}
.loading.bfl-code-13 > div:nth-child(2) {
  animation: bfl-tri2 2s ease-in-out 0s infinite;
  background-color: #ffaa09;
}
.loading.bfl-code-13 > div:nth-child(3) {
  animation: bfl-tri3 2s ease-in-out 0s infinite;
  background-color: #04be02;
}
@keyframes bfl-tri1 {
  0% { transform: translateY(220%); }
  17% { opacity: .25; }
  33% { opacity: 1; transform: translate(110%); }
  50% { opacity: .25; }
  66% { opacity: 1; transform: translate(220%, 220%); }
  83% { opacity: .25; }
  to { opacity: 1; transform: translateY(220%); }
}
@keyframes bfl-tri2 {
  0% { transform: translate(110%); }
  17% { opacity: .25; }
  33% { opacity: 1; transform: translate(220%, 220%); }
  50% { opacity: .25; }
  66% { opacity: 1; transform: translateY(220%); }
  83% { opacity: .25; }
  to { opacity: 1; transform: translate(110%); }
}
@keyframes bfl-tri3 {
  0% { transform: translate(220%, 220%); }
  17% { opacity: .25; }
  33% { opacity: 1; transform: translateY(220%); }
  50% { opacity: .25; }
  66% { opacity: 1; transform: translate(110%); }
  83% { opacity: .25; }
  to { opacity: 1; transform: translate(220%, 220%); }
}

.loading.bfl-code-18 {
  width: 30px;
  height: 30px;
  position: relative;
  animation: bfl-shape-container 1s ease infinite !important;
}
.loading.bfl-code-18 .bfl-shape {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  position: absolute;
}
.loading.bfl-code-18 .bfl-shape-1 {
  animation: bfl-shape1 .5s ease infinite alternate;
  background-color: #1678ff;
  left: 0;
}
.loading.bfl-code-18 .bfl-shape-2 {
  animation: bfl-shape2 .5s ease infinite alternate;
  background-color: #ea4e3d;
  right: 0;
}
.loading.bfl-code-18 .bfl-shape-3 {
  animation: bfl-shape3 .5s ease infinite alternate;
  background-color: #04be02;
  bottom: 0;
}
.loading.bfl-code-18 .bfl-shape-4 {
  animation: bfl-shape4 .5s ease infinite alternate;
  background-color: #ffaa09;
  bottom: 0;
  right: 0;
}
@keyframes bfl-shape-container {
  0% { transform: rotate(0); }
  to { transform: rotate(1turn); }
}
@keyframes bfl-shape1 {
  0% { transform: translate(0); }
  to { transform: translate(20px, 20px); }
}
@keyframes bfl-shape2 {
  0% { transform: translate(0); }
  to { transform: translate(-20px, 20px); }
}
@keyframes bfl-shape3 {
  0% { transform: translate(0); }
  to { transform: translate(20px, -20px); }
}
@keyframes bfl-shape4 {
  0% { transform: translate(0); }
  to { transform: translate(-20px, -20px); }
}

/* ========== logo：1,2,3,9,10,21,22,23 ========== */

.loading.bfl-logo .bfl-loader {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading.bfl-logo-1 .bfl-loader {
  animation: bfl-l1 1.5s linear infinite alternate;
}
@keyframes bfl-l1 {
  to { opacity: 0; }
}

.loading.bfl-logo-2 .bfl-loader {
  animation: bfl-l22 .8s infinite;
  filter: drop-shadow(0 0 0 #666);
}
@keyframes bfl-l22 {
  50% { filter: drop-shadow(0 0 10px var(--dy-color-1)); }
}

.loading.bfl-logo-3 .bfl-loader {
  aspect-ratio: 1;
  position: relative;
}
.loading.bfl-logo-3 .bfl-loader img,
.loading.bfl-logo-3 .bfl-logo-el {
  animation: bfl-l16 1s cubic-bezier(.5, 120, .5, -120) infinite;
}
@keyframes bfl-l16 {
  30%, 70% { transform: rotate(0deg); }
  49.99% { transform: rotate(.2deg); }
  50% { transform: rotate(-.2deg); }
}

.loading.bfl-logo-9 .bfl-logo-el {
  animation: bfl-wobble-x 1s ease-in-out infinite alternate,
             bfl-wobble-clip 2s ease-in-out infinite;
  clip-path: inset(0);
  transform: translate(-30px);
}
@keyframes bfl-wobble-x {
  to { transform: translateX(30px); }
}
@keyframes bfl-wobble-clip {
  33% { clip-path: inset(0 0 0 -100px); }
  50% { clip-path: inset(0 0 0 0); }
  83% { clip-path: inset(0 -100px 0 0); }
}

.loading.bfl-logo-10 .bfl-loader {
  animation: bfl-l18 1.5s infinite;
  position: relative;
}
@keyframes bfl-l18 {
  to {
    opacity: 0;
    transform: perspective(200px) translateX(60px);
  }
}

/* Animate.css flipInX / flipInY / jackInTheBox（slower = 2s, infinite） */
.loading.bfl-logo-21 .bfl-logo-el,
.loading.bfl-logo-22 .bfl-logo-el,
.loading.bfl-logo-23 .bfl-logo-el {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  backface-visibility: visible !important;
}
.loading.bfl-logo-21 .bfl-logo-el {
  animation-name: bfl-flipInX;
}
.loading.bfl-logo-22 .bfl-logo-el {
  animation-name: bfl-flipInY;
}
.loading.bfl-logo-23 .bfl-logo-el {
  animation-name: bfl-jackInTheBox;
  transform-origin: center bottom;
}
@keyframes bfl-flipInX {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    animation-timing-function: ease-in;
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateX(10deg);
  }
  80% { transform: perspective(400px) rotateX(-5deg); }
  to { transform: perspective(400px); }
}
@keyframes bfl-flipInY {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    animation-timing-function: ease-in;
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateY(10deg);
  }
  80% { transform: perspective(400px) rotateY(-5deg); }
  to { transform: perspective(400px); }
}
@keyframes bfl-jackInTheBox {
  0% {
    opacity: 0;
    transform: scale(.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% { transform: rotate(-10deg); }
  70% { transform: rotate(3deg); }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== art_text：1,21,31,32（對齊 Flutter；字數由 API 動態決定） ========== */

.loading.bfl-art {
  color: var(--font-color);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.loading.bfl-art .bfl-text-scal {
  overflow: visible;
  transform: scaleX(.8);
  white-space: nowrap;
}
.loading.bfl-art .bfl-letter {
  display: inline-block;
}

/* art 1：描邊 + 動效色左→右填充（2s linear，scaleX .8） */
.loading.bfl-art-1 .bfl-art-fill {
  -webkit-text-stroke: 1px var(--font-color);
  animation: bfl-l23 2s linear infinite;
  background: conic-gradient(var(--dy-color-1) 0 0) 0 / 0 100% no-repeat text;
  color: transparent;
  width: fit-content;
}
@keyframes bfl-l23 {
  to { background-size: 120% 100%; }
}

/*
 * art 21 / 31 / 32：逐字節奏由 brand_full_loading_art.js 驅動（對齊 Flutter 共用時間軸）。
 * 任意 API 字數；循環時 t=0 全體同步消失再進場。此處只保留排版。
 */
.loading.bfl-art-21 .bfl-letter,
.loading.bfl-art-31 .bfl-letter,
.loading.bfl-art-32 .bfl-letter {
  opacity: 0;
  will-change: transform, opacity;
}