body {
  background-color: #f4f6fb;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
    margin: 0;
}
  .page-content {
    display: flex;
    flex-direction: column;  /* 垂直排列：LOGO 在上，文字在下 */
    justify-content: center;
    align-items: center;
    width: 100vw;
  }
/* 外層容器 */
.logo-wrapper {
  position: relative;
  /*width: 200px;*/
  padding-top: 10vh;
  height: 285px;
  overflow: hidden;
  filter: drop-shadow(0 0 12px rgba(0, 30, 80, 0.4));
}

/* LOGO 本體 */
.logo {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.95);
  animation: reveal 2.5s ease-out forwards;
    animation-delay: 0s;
    display: block;
}
  .typewriter {
    margin-top: 50px;
    font-size: 40px;
    color: #001d44;
    white-space: nowrap;
    border-right: 3px solid #001d44; /* 游標 */
    overflow: hidden;
    width: 0;
    opacity: 0;
  }
.typerA{
	font-size: 30px;
    animation:
      typingA 4s steps(20, end) 4s forwards,   /* 打字動畫 */
      blink 1s step-end 5 alternate 3s forwards; /* 游標閃爍 */
}

@font-face {
  font-family: 'ChenYuluoyan-Thin';
  src: url('image/ChenYuluoyan-2.0-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.typerB{
	
    font-family: 'ChenYuluoyan-Thin';
    animation:
      typingB 5s steps(20, end) 4s forwards,   /* 打字動畫 */
      blink 1s step-end 2 alternate 2s forwards; /* 游標閃爍 */
	  }
.typerC{
	font-size: 30px;
    animation:
      typingC 4s steps(20, end) 4s forwards,   /* 打字動畫 */
      blink 1s step-end 5 alternate 3s forwards; /* 游標閃爍 */
}
.pagelogo
{
	justify-content: center;
    align-items: center;
    display: flex
;
}
/* 模擬筆刷掃過 */
.logo::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
  transform: translateX(-100%);
  animation: brush 2.5s ease-in-out forwards;
  mix-blend-mode: lighten;
  filter: blur(8px);
  pointer-events: none;
}

/* 光線掃過特效 */
.glow {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: lightSweep 2.5s ease-in-out 1.2s forwards;
  filter: blur(10px);
    opacity: 0;
    animation: lightSweep 2s ease-in-out forwards;
    animation-delay: 1.5s; /* ✅ 延後到 LOGO 顯現完畢再開始 */
}

/* 動畫關鍵幀 */
@keyframes reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

@keyframes brush {
  0% { transform: translateX(-100%); opacity: 0.5; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes lightSweep {
  0% { left: -60%; opacity: 0; }
  30% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
  @keyframes typingA {
    from { width: 0; opacity: 1; }
    to { width: 100%;padding-left: 27%; opacity: 1; }
  }
  @keyframes typingB {
    from { width: 0; opacity: 1; }
    to { width: 50%;padding-left: 25%; opacity: 1; }
  }
  @keyframes typingC {
    from { width: 0; opacity: 1; }
    to { width: 100%;padding-left: 25%; opacity: 1; }
  }
  @keyframes blink {
    0%,100% { border-color: transparent; }
    50% { border-color: none; }
  }