/* 樣式層順序的冗餘宣告。主要宣告在 app.blade.php 的 <head> inline <style>，兩處內容必須一致。
   這份的用途是「inline <style> 不可用」時（例如 CSP 禁掉 inline style）仍有人定義層順序。

   ⚠️ 它擋不住「<!DOCTYPE> 之前有輸出」那種故障，實測過：那時整個 <head> 的內容會被瀏覽器
   重新歸到 <body>，這支 <link> 也一起被搬走；而 Vite 對頁面 chunk 的 CSS 是執行期
   document.head.appendChild 插進去的，不在被搬走的序列裡，於是由它的 `@layer app{`
   首先定義順序，app 反而變成最弱的一層。那種故障只能靠「不要有任何輸出跑在 DOCTYPE 之前」
   來防（display_errors=Off、部署後 curl | head -1，另有 CssLayerOrderTest 守門）。 */
@layer properties, theme, base, components, utilities;
@layer vuetify-core { @layer reset, base; }
@layer vendor;
@layer vuetify-components;
@layer vuetify-overrides;
@layer app;
@layer vuetify-utilities { @layer theme-base, typography, helpers, theme-background, theme-foreground; }
@layer vuetify-final { @layer transitions, trumps; }

body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  gap: 1rem 0;
  inline-size: 100%;
}

.loading {
  position: relative;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-radius: 50%;
  block-size: 55px;
  inline-size: 55px;
}

.loading .effect-1,
.loading .effect-2,
.loading .effect-3 {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-radius: 50%;
  block-size: 100%;
  border-inline-start: 3px solid var(--initial-loader-color, #eee);
  inline-size: 100%;
}

.loading .effect-1 {
  animation: rotate 1s ease infinite;
}

.loading .effect-2 {
  animation: rotate-opacity 1s ease infinite 0.1s;
}

.loading .effect-3 {
  animation: rotate-opacity 1s ease infinite 0.2s;
}

.loading .effects {
  transition: all 0.3s ease;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}

@keyframes rotate-opacity {
  0% {
    opacity: 0.1;
    transform: rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: rotate(1turn);
  }
}
