:root {
  --bg: #ffffff;
  --hero-bg: #d9d9d9;
  --cta-bg: rgb(255, 141, 40, 0.75);
  --text: #111;
}
@font-face {
  font-family: 'btt';
  src: url('../font/btt.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  
 background:
    url("../image/bg.webp") center / cover no-repeat,
    var(--bg);
}
.roboto-flex-mid {
  font-family: "Roboto Flex";
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

.page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}



/* 主視覺區（攝影機預覽區） */
.hero {
  position: absolute;
  top: 30%;
  left: 21.5%;
  width: 58%;
  height: 58%;
  background: #a8a6a6;
  overflow: hidden;
}

/* 攝影機視訊元素 */
.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* 鏡像翻轉，讓使用者看起來更自然 */
}

/* 中央圓形（人物／Logo） */
.hero-avatar {
  position: absolute;
  top: 35%;
  left: 50.5%;
  transform: translate(-50%, -50%);
  width: 140%;
  aspect-ratio: 1 / 1;
  background:
    url("../image/FACE.svg") center / cover no-repeat;
}
/* 中間提示文字區 */
.mid-field--text {
  position: absolute;
  left: 10%;
  top: 5%;
  height: 8%;
  width: 80%;

  background: rgba(255,255,255,0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mid-only-text {
  font-family: "Roboto Flex", "Roboto";
  text-align: center;
  margin: 0;
  font-size: clamp(70px, 2.5vh, 100px); /* 使用 vh 確保垂直比例一致 */
  font-weight: 600;
  color: #111;
  line-height: 1.3;
}

/* 底部 CTA 區（台詞區） */
.cta {
  position: absolute;
  left: 10%;
  top: 16%;           /* 固定在提示文字下方 */
  height: 12%;        /* 固定高度比例 */
  width: 80%;
  background: var(--cta-bg);
  border-radius: 24px;
  padding: 2% 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cta-title {
  margin: 0;
  font-size: clamp(14px, 2vh, 20px);
  font-weight: 900;
}

.cta-desc {
  margin: 0;
  font-family: "Roboto Flex", "Roboto";
  font-size: clamp(35px, 3vh, 60px); /* 使用 vh 確保垂直比例一致 */
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: #111;
  opacity: 0.9;
}

.cta-actions {
  display: flex;
  gap: 10px;
}
*{ box-sizing: border-box; }



body{
  display: grid;
  place-items: center;
  
}

/* 主畫面（9:16） */
.screen{
  height: 100%;
  width: 100%;
  
 /* background:#ffffff; */
}

/* 灰色資訊框 */
.notice{
  width: 100%;
  height: 100px;
  /* background: rgba(210, 210, 210, 0.92);       */
  padding: 15% 2%;
 
  
}

.notice p{
  margin: 0;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: .5px;
  text-align: center;
  font-family: "Roboto Flex", "Roboto";
  /* 依螢幕自動縮放字體，避免不同尺寸爆版 */
  font-size: clamp(18px, 3vh, 64px);
  font-weight: 700;
  padding-top: 0%;
}

/* QR 區 */
.qr-wrap{
  width: 55%;
  height: 38%;
  background: url(../image/QRcode.png) no-repeat;
  margin-top: 46%;
  margin-left: 26%;
  padding: 16px;
  border-radius: 2px;
 
}

.qr{
  width: 200%;
  height: auto;
  display: block;
  
  image-rendering: pixelated; /* QR 更銳利（可留可不留） */
}

.btn{
  width: 65%;
  border: none;
  border-radius: 999px;
  padding: 16px 18px;
  font-weight: bold;
  font-size: clamp(60px, 2.6vh, 60px);
  cursor: pointer;
  background: #ff8d28;
  color: #fff;
  margin-top: 100%;
  margin-left: 12%;
  /* box-shadow: 0 10px 22px rgba(0,0,0,.18); */
}

.btn:active{
  transform: translateY(1px);
}
.timer {
  font-size: 80px;
  font-family: "Roboto Flex", "Roboto";
  font-weight: bold;
  transition: transform 0.2s ease-in-out; /* 讓縮放平滑 */
  text-align: center;
  width: 100%;
  text-indent: 10px;
 
}

/* 當數字更新時，我們可以用 JS 切換這個 class 產生跳動感 */
.bump {
  transform: scale(1.2);
  color: #ff8d28;
}

/* index */
.container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:rgba(255, 255, 255, 0.6);
  
}

.content {
  text-align: left;
  padding-right: 5%;
  /* padding-bottom: 30%; */
  font-family: "btt";
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 透過調整這個 padding，可以優雅地集體移動所有文字與按鈕 */
  padding-top: 0; 
  margin-top: -50px;
  width: 60%;
}

.title {
  font-size: clamp(150px, 8vw, 200px);
  font-family:"btt" ;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom:40%;
  width: 100%;
}
.loading {
  font-size: 200px;
  font-family:"btt" ;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom:15%;
  width: 100%;
}

.description {
  font-family: "Roboto Flex", "Roboto";
  font-size:45px;
  width: 100%;
  line-height: 1.5;
  font-weight: bold;
  position: relative;
  top: -260px;
  /* margin-bottom: 100%; */
  max-width: 800px;
  padding-left: 2%;
}

/* 我要參加按鈕樣式 */
.start-button {
  background-color: #ff8d28;
  color: white;
  border: none;
  padding: 3% 0%;
  margin-right: 20%;
  font-size: 50px;
  font-weight: bold;
  border-radius: 70px;
  cursor: pointer;
  position: relative;
  top: -250px;
  left: 15%;
  width: 80%;
  /* 加上這行會讓變色有平滑轉場感 */
  transition: background-color 0.2s ease, transform 0.1s ease; 
}

/* 確保這裡的選擇器正確，且沒有被註釋符號包圍 */
.start-button:hover {
  background-color: #e67e22 !important; /* 加 !important 是為了測試是否被權重蓋掉 */
}
/* 全螢幕遮罩層 */
.record-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3); /* 30% 不透明度白色底 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 確保在最上層 */
  transition: opacity 0.3s ease;
}

/* 開始錄影按鈕 */
.record-btn {
  background-color: #ff8d28;
  color: white;
  border: none;
  padding: 20px 60px;
  font-size: 48px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 60%;
  margin-left: 3%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.record-btn:active {
  transform: scale(0.95);
}

/* 隱藏類別 */
.hidden {
  display: none !important;
}
.recording-timer {
  position: absolute;
  top: 50%;         /* 修改：從頂部向下 50% */
  left: 50%;        /* 修改：從左側向右 50% */
  transform: translate(-50%, -50%); /* 關鍵：位移自身寬高的一半來達成正中心 */
  
  color: #ff0000;
  font-family: "Roboto Flex", sans-serif;
  font-size: 80px;  /* 建議：放在中央可以放大字體，更有視覺張力 */
  font-weight: bold;
  z-index: 10;
  white-space: nowrap; /* 防止換行 */
  pointer-events: none; /* 防止遮擋點擊事件 */
}

/* 呼吸感動畫：縮放 + 透明度變化 */
.breath-animation {
  animation: breathe 1.5s infinite ease-in-out;
}

@keyframes breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.7;
  }
}

/* 確保 hidden 類別能隱藏元素 */
.hidden {
  display: none !important;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background:linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7)),
        url("../image/bg_stuff.webp") center / cover no-repeat;
    display: none; /* 平時隱藏 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.loading-overlay.active {
    display: flex;
}

/* 轉圈動畫本體 */
.spinner {
    position: relative;
    width: 420px;
    height: 420px;
    margin-bottom: 700px;
}

.spinner div {
    position: absolute;
    width: 8%;
    height: 24%;
    background: #46b7ff; /* 你圖片中的藍色 */
    left: 46%;
    top: 38%;
    opacity: 0;
    border-radius: 50px;
    animation: fade 1.2s linear infinite;
}

/* 設定 12 根線條的角度與動畫延遲 */
.spinner .bar1  { transform: rotate(0deg) translate(0, -130%); animation-delay: 0s; }
.spinner .bar2  { transform: rotate(30deg) translate(0, -130%); animation-delay: -1.1s; }
.spinner .bar3  { transform: rotate(60deg) translate(0, -130%); animation-delay: -1.0s; }
.spinner .bar4  { transform: rotate(90deg) translate(0, -130%); animation-delay: -0.9s; }
.spinner .bar5  { transform: rotate(120deg) translate(0, -130%); animation-delay: -0.8s; }
.spinner .bar6  { transform: rotate(150deg) translate(0, -130%); animation-delay: -0.7s; }
.spinner .bar7  { transform: rotate(180deg) translate(0, -130%); animation-delay: -0.6s; }
.spinner .bar8  { transform: rotate(210deg) translate(0, -130%); animation-delay: -0.5s; }
.spinner .bar9  { transform: rotate(240deg) translate(0, -130%); animation-delay: -0.4s; }
.spinner .bar10 { transform: rotate(270deg) translate(0, -130%); animation-delay: -0.3s; }
.spinner .bar11 { transform: rotate(300deg) translate(0, -130%); animation-delay: -0.2s; }
.spinner .bar12 { transform: rotate(330deg) translate(0, -130%); animation-delay: -0.1s; }

@keyframes fade {
    from { opacity: 1; }
    to { opacity: 0.1; }
}