/* iOS tap-highlight & active background removal */
img,
.btn,
#info-bar .frame,
#buttons,
#buttons img {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}
img:active,
.btn:active,
#info-bar .frame:active,
#buttons img:active {
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Font */
@font-face {
  font-family: 'Traditional Arabic';
  src: url('fonts/TraditionalArabic.woff2') format('woff2'),
       url('fonts/TraditionalArabic.woff')  format('woff'),
       url('fonts/TraditionalArabic.ttf')   format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Reset */
html, body, #page2 {
  margin: 0; padding: 0;
  width: 100%; overflow: auto;
}
body {
  background-color: black;
  overflow: hidden;
  font-family: 'Bodoni MT', serif;
}

/* Page 容器 */
.page {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
}

/* === Page 1 === */
#intro-video {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity:0;
  animation: fadeInVideo 2s forwards;
}
@keyframes fadeInVideo { to { opacity:1; } }

.loading-hint {
  position: absolute;
  right:20px; 
  width:calc(100% - 40px);
  font-family:'Traditional Arabic',serif;
  font-size:40px; 
  line-height:50px;
  color:white; 
  text-align:right;
  text-shadow:0 0 4px white;
  opacity:0; 
  z-index:3;
}

#hint1 { top: 22vh; }
#hint2 { top: 28vh; }

@keyframes fadeInText {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
  
  /* 第一行淡入：从 0.5s 开始，时长 6s */
#hint1.fade-in-load {
  animation: fadeInText 6s ease-out 0.5s forwards;
}

/* 第二行淡入：从 2.5s 开始，时长 6s */
#hint2.fade-in-load {
  animation: fadeInText 6s ease-out 2.5s forwards;
}

#center-wrapper {
  position:absolute;
  top:50%; left:50%;
  width:78px; height:78px;
  transform:translate(-50%,-50%);
  z-index:3;
}
#loading-ring {
  position:absolute; top:0; left:0;
  overflow:visible;
}
#orb {
  position:absolute;
  top:calc(50% - 2.5px); left:50%;
  transform:translate(-50%,-50%);
  width:70px;
  animation:flicker 2s infinite ease-in-out 2s;
  z-index:4;
}
@keyframes flicker {
  0%,100% { opacity:0.2; }
  50%      { opacity:1;   }
}

/* === Page 2 === */
#info-bar,
#answer-text,
#watermark-img,
#buttons {
  position: fixed; z-index:3;
}

/* Info bar */
#info-bar {
  top:1.5vh; left:5vw; right:5vw;
  display:flex; justify-content:space-between;
  align-items:center;
}
#info-bar .frame {
  display:flex; align-items:center;
  height:24px; padding:0 0.6em;
  background-color:rgba(0,0,0,0.18);
  border-radius:10px;
  box-shadow:0 0 4px rgba(255,255,255,0.4);
  font-family:'Bodoni MT',serif;
  font-style:normal; font-size:16px;
  color:white; gap:0.2em;
}
#loc-icon {
  width:20px; height:20px;
  margin-right:0.5em;
}

/* 卡片背景 & 文本 */
#card {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background-size:100% auto;
  background-position:top center;
  background-repeat:no-repeat;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}

#answer-text {
  position: fixed;      /* 保证它不被 #card 遮住 */
  top:15vh; 
  left:5vw; 
  right:6vw;

  font-family:'Traditional Arabic',serif;
  font-size:38px; 
  line-height:57px;
  color:white;
  direction:rtl; 
  text-align:right;
  -webkit-text-stroke:0.2px rgba(0,0,0,0.6);
  text-shadow:
    0 0 2px rgba(0,0,0,0.4),
    0 0 4px white;

  opacity: 0;
  animation: fadeInAnswer 3s ease-in-out forwards;

  /* 如果你要保留 \n 换行，请用 pre-line */
  white-space: pre-line;  
  unicode-bidi: isolate-override;
}

@keyframes fadeInAnswer {
  from { opacity: 0; }
  to   { opacity: 1; }
}


#watermark-img {
  top:calc(15vh + 20vh + 3vh);
  right:5vw;
  height:2.5vh;
}

/* —— Page2 显示切换 —— */
#page2 {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}
#page2.show {
  display: block;
  opacity: 1;
}

/* —— 按钮组容器 —— */
#buttons {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  left: 5vw;
  right: 5vw;
  display: flex;
  justify-content: space-between;  /* 第一层级按钮左右分布 */
  align-items: center;
  z-index: 3;

  /* 只让子元素响应点击 */
  pointer-events: none;
}
/* —— 第一层级：下载 & 重生成 & Visit 按钮 —— */
#buttons .btn {
  width: 80px;
  height: auto;
  touch-action: manipulation;
  pointer-events: auto;  /* 恢复按钮本身的点击 */
}

/* 按钮本体，去掉背景、内边距 */
#visit-button {
  background: none;
  border: none;
  padding: 0;
}

/* 里面的 img */
#visit-button-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  cursor: pointer;      /* 小手提示 */
}

/* 按下态（JS 会自动给 <img> 加上 .pressed） */
#visit-button-img.pressed {
  /* JS 切 src 就够了，如果你要用 CSS：
  content: url("assets/button-visit-pressed.png");
  */
}

/* —— 第二层级：菜单连线 —— */
.menu-line {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 18px + 61px);
  right: 8.2vw;               /* 与 Visit 按钮右对齐 */
  width: auto;
  height: 300px;            /* 线条总长度 */
  transform: scaleY(0);
  transform-origin: bottom center;
  opacity: 0;
  transition: transform 0.8s ease-in-out, opacity 0.5s;
}

/* —— 第二层级：社交图标容器 —— */
.menu-icons {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 18px + 75px);
  right: 3.7vw;
  width: 50px;    /* 和 visit 按钮一样宽 */
  height: auto;  /* 和 menu-line 一致 */
  pointer-events: none;
}

/* 图标绝对定位，各自斜上排列 */
.menu-icons a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/* 比如 5 个图标，间隔 64px（320/4） */
.menu-icons a:nth-child(1) { bottom: calc(240px * 4/4); }
.menu-icons a:nth-child(2) { bottom: calc(240px * 3/4); }
.menu-icons a:nth-child(3) { bottom: calc(240px * 2/4); }
.menu-icons a:nth-child(4) { bottom: calc(240px * 1/4); }
.menu-icons a:nth-child(5) { bottom: 0; }

/* 初始隐藏，向上平移 20px */
.menu-icon {
  width: 52px; height: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: auto;
}

/* —— 打开状态 —— */
#buttons.open .menu-line {
  transform: scaleY(1);
  opacity: 1;
}

/* 打开时依次淡入回位 */
#buttons.open .menu-icon {
  opacity: 1;
  transform: translateY(0);
}
#buttons.open .menu-icons a:nth-child(5) .menu-icon { transition-delay: 0.1s; }
#buttons.open .menu-icons a:nth-child(4) .menu-icon { transition-delay: 0.2s; }
#buttons.open .menu-icons a:nth-child(3) .menu-icon { transition-delay: 0.3s; }
#buttons.open .menu-icons a:nth-child(2) .menu-icon { transition-delay: 0.4s; }
#buttons.open .menu-icons a:nth-child(1) .menu-icon { transition-delay: 0.5s; }

/* —— 关闭状态 —— */
#buttons.closing .menu-line {
  transform: scaleY(0);
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s;
}
#buttons.closing .menu-icon {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1s ease-in, transform 1s ease-in;
}