/* 自動補樣式：index.html（_build/style.py） */
/* ==========================================================================
   啟動占位畫面 .s-boot
   結構：.s-boot > svg.s-boot__logo + .s-boot__name + .s-boot__text
   HTML 內已有行內樣式（置中、min-height、gap），這裡補上動效、字體與響應式
   ========================================================================== */

.s-boot {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5);
  color: var(--text);
  animation: s-boot-in var(--dur-3) var(--ease) backwards;
}

.s-boot__logo {
  flex: none;
  width: clamp(72px, 18vw, 96px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  animation: s-boot-breathe 2.4s var(--ease) infinite;
}

.s-boot__name {
  font-size: var(--fs-title2);
  line-height: var(--lh-title2);
  font-weight: var(--fw-title2);
  letter-spacing: var(--ls-title);
  color: var(--text);
}

.s-boot__text {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
  letter-spacing: var(--ls-caption);
  color: var(--text-3);
}

/* 載入中：文字前的小圓點旋轉指示 */
.s-boot__text::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--surface-3);
  border-top-color: var(--primary);
  animation: s-boot-spin .9s linear infinite;
}

@keyframes s-boot-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes s-boot-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes s-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 平板以上：稍微放大品牌 */
@media (min-width: 600px) {
  .s-boot {
    max-width: 420px;
  }

  .s-boot__logo {
    width: 96px;
  }
}

@media (min-width: 1024px) {
  .s-boot__logo {
    width: 112px;
  }

  .s-boot__name {
    font-size: var(--fs-title1);
    line-height: var(--lh-title1);
  }
}

/* 手機橫式矮螢幕：縮小並改為緊湊排列 */
@media (orientation: landscape) and (max-height: 500px) {
  .s-boot {
    padding: var(--sp-3) var(--sp-4);
  }

  .s-boot__logo {
    width: 56px;
  }

  .s-boot__name {
    font-size: var(--fs-title3);
    line-height: var(--lh-title3);
  }
}

/* 減少動態 */
@media (prefers-reduced-motion: reduce) {
  .s-boot,
  .s-boot__logo,
  .s-boot__text::before {
    animation: none;
  }

  .s-boot__text::before {
    border-top-color: var(--primary);
    border-right-color: var(--primary);
  }
}