/* ============================================================
   Yandong Li — Personal Website
   Fonts: ChiuKong Gothic CL (Light 300 / Medium 500 / region Bold 700)
   Design tokens from Figma: 32px, #111, background opacity .66
   Stage: fixed 1440px-wide canvas scaled to fit viewport
   ============================================================ */

@font-face {
  font-family: 'ChiuKong Gothic CL';
  src: url('../fonts/ChiuKongGothic-CL-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ChiuKong Gothic CL';
  src: url('../fonts/ChiuKongGothic-CL-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold subset contains only the region selector's characters. */
@font-face {
  font-family: 'ChiuKong Gothic CL';
  src: url('../fonts/ChiuKongGothic-CL-Bold-region.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #fff;
  font-family: 'ChiuKong Gothic CL', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Full-screen background, 66% opacity over white (as in Figma) */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.66;
  pointer-events: none;
  user-select: none;
}

/* Fixed-size design canvas, centered and scaled by fit.js */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1440px;
  transform-origin: center center;
}

.stage.h1024 { height: 1024px; }
.stage.h1079 { height: 1079px; }

/* Every text element: ChiuKong Gothic CL, 32px, #111 */
.item {
  position: absolute;
  display: block;
  font-size: 32px;
  font-weight: 300;
  line-height: normal;
  color: #111;
  white-space: nowrap;
  text-decoration: none;
}

a.item {
  cursor: pointer;
  transition: opacity 0.25s ease;
}

a.item:hover {
  opacity: 0.45;
}

/* Region selector: Figma x=546/751, y=489 on the 1440px canvas. */
.region-option {
  font-weight: 700;
}

.region-option:focus-visible {
  outline: 2px solid #111;
  outline-offset: 6px;
}

/* "Yandong" wordmark: Medium weight, 19% opacity */
.brand {
  left: 50px;
  top: 42px;
  font-weight: 500;
  opacity: 0.19;
}

/* "Home" link, top right */
.home {
  left: 1302px;
  top: 37px;
}

/* Keep translated labels centered without changing English design coordinates. */
html[lang="zh-CN"] .centered-label {
  left: 50% !important;
  transform: translateX(-50%);
}

/* Language controls: Figma x=1308/1352, y=42 on the 1440px canvas. */
.language-switch {
  position: absolute;
  left: 1308px;
  top: 42px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.language-button {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  color: #111;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.language-button[aria-pressed="true"] {
  opacity: 1;
}

.language-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

/* Gallery tiles (covers / photos) */
.tile {
  position: absolute;
  display: block;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

.tile:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.18);
  z-index: 2;
}

/* Homepage social links */
.social-links {
  position: absolute;
  right: 50px;
  bottom: 50px;

  display: flex;
  align-items: center;
  gap: 20px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;

  transition: opacity 0.25s ease;
}

.social-links img {
  display: block;
}

.social-links a:hover {
  opacity: 0.45;
}

.social-links a:focus-visible {
  outline: 2px solid #111;
  outline-offset: 5px;
  border-radius: 6px;
}

/* Music Project: platform row above the title, retaining each SVG's native size */
.music-page {
  position: fixed;
  inset: 0;
}

.music-links {
  position: absolute;
  left: 50%;
  top: calc(50% - 54.5px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 100px;
}

.music-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}

.music-links img {
  display: block;
}

.music-links a:hover {
  opacity: 0.45;
}

.music-links a:focus-visible {
  outline: 2px solid #111;
  outline-offset: 8px;
  border-radius: 6px;
}

.music-title {
  left: calc(50% - 96px);
  top: 543px;
}

/* Homepage player: Figma text at (48,864)/(50,905), icon centers at y=962.5. */
.music-player {
  position: absolute;
  left: 48px;
  top: 864px;
  color: #111;
  max-width: 590px;
}

.player-song {
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.player-artist {
  position: absolute;
  left: 2px;
  top: 41px;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
}

.player-controls {
  position: absolute;
  left: -11.5px;
  top: 76.5px;
  display: flex;
  align-items: center;
  gap: 7.5px;
}

.player-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.player-button img { display: block; }
.player-button:hover { opacity: 0.45; }
.player-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 6px;
}

.player-status {
  position: absolute;
  left: 145px;
  top: 90px;
  width: 400px;
  font-size: 16px;
  font-weight: 300;
}