/* ============================================================
   KETTA — global.css  v1.1
   Tokens · resets · global components · a11y · motion-respect
   ============================================================ */

:root {
  /* Safe area insets — iPhone 刘海 / 灵动岛 / Android 挖孔屏 */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* Brand palette */
  --c-yellow:    #FFC600;
  --c-yellow-2:  #ffd83a;
  --c-black:     #111111;
  --c-white:     #ffffff;
  --c-navy:      #060a14;
  --c-blue:      rgba(100, 180, 255, 1);
  --c-burnt-1:   #2a1200;
  --c-burnt-2:   #aa1a00;
  --c-trace:     #7a5000;
  --c-trace-2:   #b07000;
  --c-grey-bg:   #f5f4f0;
  --c-line:      rgba(17,17,17,0.14);

  /* Typography */
  --font-cn:   "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en:   "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Courier New", ui-monospace, monospace;

  /* Layout */
  --pad-x: 5%;
  --pad-x-mobile: 6%;
  --nav-h: 72px;
  --max-w: 1440px;

  /* Easings */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--safe-top));
  /* 禁止浏览器下拉刷新/过度滚动弹跳（Android Chrome / iOS Safari） */
  overscroll-behavior: none;
}
body {
  font-family: var(--font-cn);
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior: none;
}
img, video { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; border-radius: 2px; }

/* ----------- NAV ----------- */
.ketta-nav {
  position: fixed;
  inset: 0 0 auto 0;
  /* 高度 = 导航栏本身 + 顶部安全区（刘海/灵动岛） */
  height: calc(var(--nav-h) + var(--safe-top));
  /* 内容区从安全区底部开始 */
  padding: var(--safe-top) var(--pad-x) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  background: var(--c-yellow);
  transition: background .35s var(--ease-out), backdrop-filter .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  border-bottom: 0.5px solid rgba(0,0,0,0.10);
}
/* 默认兜底：不支持 backdrop-filter 的浏览器用纯色背景 */
.ketta-nav.scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: rgba(17,17,17,0.08);
  box-shadow: 0 1px 18px rgba(0,0,0,0.08);
}
/* 渐进增强：支持磨砂效果的浏览器（Chrome 76+, Safari 9+, 鸿蒙 Ark Web） */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ketta-nav.scrolled {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
  }
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; letter-spacing: 0.16em; color: var(--c-black);
}
.nav-logo { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.nav-name { font-family: var(--font-en); font-size: 16px; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-link {
  position: relative;
  padding: 6px 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(17,17,17,0.55);
  transition: color .22s var(--ease-out);
}
.nav-link:hover { color: var(--c-black); }
.nav-link.active { color: var(--c-black); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-black);
}
.nav-cta {
  background: var(--c-black); color: var(--c-yellow);
  padding: 9px 18px; border-radius: 2px;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { color: var(--c-yellow); background: #000; transform: translateY(-1px); }

/* ----------- NAV TAGLINE ----------- */
.nav-tagline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-cn);
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--c-black);
  -webkit-text-stroke: 3px #ffffff;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transition: opacity .3s var(--ease-out);
}
/* 滚动后白色导航栏里隐藏（避免与黑色 nav-link 文字混叠）*/
.ketta-nav.scrolled .nav-tagline {
  opacity: 0;
}

/* ----------- LANG TOGGLE ----------- */
.lang-toggle {
  display: flex; align-items: center; gap: 3px;
  margin-left: 12px;
  flex-shrink: 0;
}
.lang-sep {
  font-size: 10px; color: rgba(17,17,17,0.22);
  user-select: none; pointer-events: none;
}
.lang-btn {
  font-family: var(--font-en);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em;
  padding: 4px 9px; border-radius: 2px;
  border: 1px solid rgba(17,17,17,0.22);
  color: rgba(17,17,17,0.42);
  background: transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.lang-btn.active {
  background: #111; color: var(--c-yellow);
  border-color: #111;
}
.lang-btn:hover:not(.active) {
  border-color: rgba(17,17,17,0.5);
  color: rgba(17,17,17,0.72);
}

/* ----------- SECTIONS ----------- */
.screen {
  position: relative;
  width: 100%;
  /* 100dvh: 動态视口高度，修复 iOS Safari 地址栏遮挡问题；
     fallback 到 100vh 供旧版浏览器 */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  scroll-margin-top: var(--nav-h);
}
.layer-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.eyebrow {
  font-family: var(--font-en);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(17,17,17,0.42);
  margin-bottom: 16px;
}
.eyebrow-light { color: rgba(255,255,255,0.55); }

/* ----------- CORNER BRACKETS ----------- */
.corner-brackets {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5;
}
.corner-brackets::before,
.corner-brackets::after,
.corner-brackets > i,
.corner-brackets > b {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 1.2px solid var(--c-black);
  opacity: 0.18;
}
.corner-brackets > i, .corner-brackets > b { display: block; }
.corner-brackets::before { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.corner-brackets::after  { top: 22px; right: 22px; border-left: none; border-bottom: none; }
.corner-brackets > i     { bottom: 22px; left: 22px; border-right: none; border-top: none; }
.corner-brackets > b     { bottom: 22px; right: 22px; border-left: none; border-top: none; }
.corner-brackets[data-theme="dark"]::before,
.corner-brackets[data-theme="dark"]::after,
.corner-brackets[data-theme="dark"] > i,
.corner-brackets[data-theme="dark"] > b,
.corner-brackets[data-theme="navy"]::before,
.corner-brackets[data-theme="navy"]::after,
.corner-brackets[data-theme="navy"] > i,
.corner-brackets[data-theme="navy"] > b { border-color: #4488ff; opacity: 0.24; }
.corner-brackets[data-theme="light"]::before,
.corner-brackets[data-theme="light"]::after,
.corner-brackets[data-theme="light"] > i,
.corner-brackets[data-theme="light"] > b { border-color: #111; opacity: 0.10; }

/* ----------- TECH GRID ----------- */
.tech-grid .grid-lines line {
  stroke: var(--c-trace);
  stroke-width: 0.5;
  opacity: 0.12;
}

/* ----------- CTA BUTTON ----------- */
.cta-btn {
  display: inline-flex;
  align-items: center; gap: 10px;
  background: var(--c-black);
  color: var(--c-yellow);
  font-family: var(--font-en);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  transition: transform .25s var(--ease-out), background .2s, box-shadow .25s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.cta-btn:hover {
  transform: translateY(-2px);
  background: #000;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.cta-btn:active { transform: translateY(0); }

/* ----------- SCROLL HINT ----------- */
.scroll-hint {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-en);
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(17,17,17,0.4);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: translate(-50%, 0); opacity: .55; }
  50%     { transform: translate(-50%, 5px); opacity: 1; }
}

/* ----------- ANIMATIONS ----------- */
@keyframes flickerA { 0%,100% { transform: scaleY(1) scaleX(1) skewX(0); } 20% { transform: scaleY(1.09) scaleX(0.95) skewX(-2deg); } 45% { transform: scaleY(0.95) scaleX(1.05) skewX(1.5deg); } 70% { transform: scaleY(1.06) scaleX(0.97) skewX(-1deg); } }
@keyframes flickerB { 0%,100% { transform: scaleY(1) scaleX(1) skewX(0); } 25% { transform: scaleY(1.13) scaleX(0.93) skewX(2deg); } 55% { transform: scaleY(0.91) scaleX(1.07) skewX(-2deg); } 80% { transform: scaleY(1.08) scaleX(0.96) skewX(1deg); } }
@keyframes flickerC { 0%,100% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(0.94) scaleX(1.04); } 60% { transform: scaleY(1.11) scaleX(0.94); } }
@keyframes glowBreath { 0%,100% { opacity: .4; } 50% { opacity: .7; } }
@keyframes dinoFloat {
  0%,100% { transform: translateY(0px) rotate(-0.3deg); }
  35%     { transform: translateY(-10px) rotate(0.5deg); }
  70%     { transform: translateY(-4px) rotate(-0.2deg); }
}
@keyframes textFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glitch {
  0%, 92%, 100% { transform: translateX(0); }
  93% { transform: translateX(-3px); }
  95% { transform: translateX(3px); }
  97% { transform: translateX(-2px); }
}

.glitch { animation: glitch 9s ease-in-out infinite; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ----------- HAMBURGER BUTTON ----------- */
.nav-hamburger {
  display: none;   /* 桌面端不显示 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  margin-left: 4px;
  transition: background .2s;
}
.nav-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform .28s var(--ease-out), opacity .2s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ketta-nav.scrolled .nav-hamburger span { background: #111; }

/* ----------- MOBILE NAV MENU ----------- */
.nav-mobile-menu {
  display: none;  /* 桌面端完全隐藏 */
}

/* ----------- RESPONSIVE BREAKPOINTS ----------- */
@media (max-width: 1024px) {
  .nav-links { gap: 18px; }
}
@media (max-width: 768px) {
  :root { --nav-h: 52px; --pad-x: var(--pad-x-mobile); }
  .nav-name { display: none; }
  .nav-links { gap: 12px; }
  .nav-link { font-size: 10px; letter-spacing: 0.10em; }
}
/* ≤600px：隐藏所有导航文字，改为汉堡菜单 */
@media (max-width: 600px) {
  .nav-link { display: none !important; }
  .nav-hamburger { display: flex; }

  /* 手机菜单 — 默认收起（max-height:0），.open 时展开 */
  .nav-mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(var(--nav-h) + var(--safe-top));
    left: 0; right: 0;
    background: var(--c-yellow);
    z-index: 98;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease-out), box-shadow .3s;
  }
  .nav-mobile-menu.open {
    max-height: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  /* 跟随导航栏滚动状态变白 */
  .ketta-nav.scrolled + .nav-mobile-menu {
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
  }
  .nav-mob-link {
    padding: 15px var(--pad-x-mobile);
    font-family: var(--font-en);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(17,17,17,0.60);
    border-bottom: 0.5px solid rgba(0,0,0,0.07);
    transition: color .15s, background .15s;
  }
  .nav-mob-link:active,
  .nav-mob-link:focus-visible { background: rgba(0,0,0,0.05); color: #111; }
}

/* ----------- MUSIC DISC (黑胶唱盘) ----------- */
.music-disc {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 10px;
  cursor: pointer;
  background: none; border: none; padding: 0;
  /* 整体悬停缩放 */
  transition: transform .22s var(--ease-out), filter .22s;
}
.music-disc:hover  { transform: scale(1.10); filter: brightness(1.12); }
.music-disc:active { transform: scale(0.96); }

/* 唱盘本体：黑色底 + 同心圆纹路 */
.disc-body {
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      #1a1a1a  0%,  #0d0d0d 14%,
      #2a2a2a 15%,  #111    20%,
      #252525 21%,  #0d0d0d 27%,
      #222    28%,  #111    35%,
      #1e1e1e 36%,  #0a0a0a 44%,
      #1c1c1c 45%,  #0d0d0d 54%,
      #181818 55%,  #111    65%,
      #1a1a1a 66%,  #0d0d0d 78%,
      #151515 79%,  #080808 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  /* 光泽高光层 */
}
.disc-body::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    rgba(255,255,255,0.07) 0deg,
    transparent 60deg,
    rgba(255,255,255,0.03) 180deg,
    transparent 240deg,
    rgba(255,255,255,0.05) 300deg,
    transparent 360deg
  );
  pointer-events: none;
}

/* 中心标签圆（音乐符号）*/
.disc-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44%; height: 44%;
  border-radius: 50%;
  background: #0d0d0d;
  border: 1px solid rgba(255,198,0,0.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 0 6px rgba(255,198,0,0.12);
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.disc-note {
  width: 68%; height: 68%;
  display: block;
  filter: drop-shadow(0 0 3px rgba(255,198,0,0.45));
}

/* idle 状态：轻微半透明 + 慢速转动 */
.music-disc.idle .disc-body {
  opacity: 0.65;
  animation: discIdleSpin 12s linear infinite;
}
/* playing 状态：正常转速旋转 + 金色光晕 */
.music-disc.playing .disc-body {
  opacity: 1;
  animation: discSpin 2.8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255,198,0,0.30),
    0 0 12px rgba(255,198,0,0.22),
    0 2px 10px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* muted 状态：暂停旋转 + 变暗 */
.music-disc.muted .disc-body {
  opacity: 0.45;
  animation: none;
}

@keyframes discIdleSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes discSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 静音斜线遮罩 */
.disc-mute-line {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.disc-mute-line::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 110%; height: 2px;
  background: rgba(255,80,60,0.85);
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255,60,40,0.5);
}
.music-disc.muted .disc-mute-line { opacity: 1; }

@media (max-width: 768px) {
  .music-disc { width: 30px; height: 30px; margin-left: 6px; }
}

/* ----------- MOTION RESPECT ----------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .glitch { animation: none; }
}

/* ============================================================
   BILINGUAL SWITCH
   Default = Chinese. Switch html[data-lang="en"] to show EN.
   .lang-zh / .lang-en  → inline-level (spans, em, strong…)
   .lang-zh-b / .lang-en-b → block-level (p, div, li…)
   ============================================================ */
.lang-en   { display: none; }
.lang-en-b { display: none; }

html[data-lang="en"] .lang-en   { display: inline; }
html[data-lang="en"] .lang-en-b { display: block; }
html[data-lang="en"] .lang-zh   { display: none; }
html[data-lang="en"] .lang-zh-b { display: none; }