/* ========== 基础重置 ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

::-webkit-scrollbar {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE (没人用了) */
body {
  -ms-overflow-style: none;
}

@font-face {
  font-family: 'Whyte';
  src: url('ABCWhyteInktrapVariable-Trial.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



body {
  font-family: "Whyte", sans-serif;
  font-weight:300;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

.site-header {
  padding: 40px 60px;
}

.main-nav {
  position: relative;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 100px;          /* 主菜单之间的距离 */
}

/* 顶部导航 */
.nav-item {
  position: relative;
}

.nav-link {
  display: inline-block;
  padding: 20px;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase; 
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
  transition: border 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* hover 顶部菜单：出现白边 */
.nav-item:hover > .nav-link {
  border-color: #fff;
}

/* ===== 下拉菜单 ===== */

.submenu {
  position: absolute;
  top: calc(100% - 1px);   /* 紧贴 ABOUT 底部 */
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* 右对齐的子菜单 */
.right-align .submenu {      /* 取消原来的 left 对齐 */
  position: absolute;
  top: calc(100% - 1px); 
  left: auto; 
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;         
}

/* 每个 submenu-item 的偏移也改为从右边开始 */
.right-align .submenu-item {
  left: auto;
  right: var(--offset, 0px);
}


/* 只要鼠标在 ABOUT 或者下拉菜单上，菜单都保持打开 */
.has-submenu:hover .submenu,
.submenu:hover {
  opacity: 1;
  pointer-events: auto;
}

/* 每个下拉项：竖直紧贴排列 */
.submenu-item {
  position: relative;
  width: 240px;
  padding: 20px;
  border: 1px solid #fff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;

  left: var(--offset, 0px);   /* ✅ 用这个控制左右偏移 */
}

.submenu-item a {
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ hover 下拉项：白色填充、文字变黑 */
.submenu-item:hover {
  background: #fff;
}

.submenu-item:hover a {
  color: #000;
}

/* ========== HERO：logo 区 ========== */

#hero {
  height: 220vh; /* 给滚动和翻牌留空间 */
  position: relative;
}

/* 固定在视口中间，负责上下移动 */
.logo-wrapper {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-30%, 0); /* Y 位移在 JS 中动态修改 */
  pointer-events: none;
}

/* 内层负责整体 scale（响应式） */
.logo-inner {
  transform: scale(var(--logo-scale, 1));
  transform-origin: center center;
}

/* logo 网格：以“半片”为一个 unit
   半片 H = 1 unit = 110px
   整片 F = 2 unit = 220px
*/
.logo-grid {
  --cols: 24;              /* 实际列数由 JS 设置 */
  --baseWidth: 110px;      /* 半片宽度，整数且为 2 的倍数 */
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--baseWidth));
  grid-auto-rows: 76px;    /* 行高（整片/半片高度），76 也是 2 的倍数 */
  gap: 0;
  background: #000;        /* 空格直接是黑色背景 */
  padding: 0;
  perspective: 1200px;
}

/* 每一块 tile（宽高由 grid 控制） */
.logo-tile {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* 不翻转的纯黑 tile（用于“补形状”的黑块） */
.logo-tile-static {
  background: #000;
}

/* 翻转内层 */
.logo-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 正反两面 */
.tile-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* 正面：白色长方形 */
.tile-front {
  background: #fff;
}

/* 背面：默认纯色，占位；整片 F 会在 JS 里加图片 */
.tile-back {
  transform: rotateX(180deg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(0.1);
  background-color: #fff; /* 半片或没有图片时就是这个颜色 */
}

/* 加上 is-flipped 时沿 X 轴翻到背面 */
.logo-tile.is-flipped .logo-tile-inner {
  transform: rotateX(180deg);
}

/* 下面的文字 */
.logo-text {
  margin-top: 1.2rem;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 63px;
  font-weight: 400;
}

/* ========== 白色“遮罩” parallax 区 ========== */

#parallax {
  height: 5vh;
  position: relative;
  background: transparent;
  z-index: 2;
}

.white-panel {
  position: sticky;
  top: 5vh;
  height: 100vh;
  background: #fff;
  z-index: 2;
}

/* ========== 后续内容：排片 & 购票 ========== */

#content {
  background: #fff;
  color: #000;
  min-height: 90vh;
  padding: 1rem 1vw 1rem;
  position: relative;
  z-index: 3;
}

.content-inner {
  max-width: 960px;
  margin: 0 auto;
  line-height: 1.6;
}

#content h2,
#content h3 {
  text-transform: uppercase;
  /* letter-spacing: 0.05em; */
}

#content h2 {
  font-size: 48px;
  font-weight: 450;
  /* margin-bottom: 1rem; */
}
/* 
#content h3 {
  margin-top: 3rem;
} */

/* ===== Lineup filters ===== */

.lineup-filters {
  margin-top: 1rem;
  margin-bottom: 3.5rem;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* 白底黑字按钮：hover 反转 */
.filter-pill {
  position: relative;
  /* border: 1px solid #000; */
  border: none;
  background: #fff;
  color: #000;
  padding: 0.5rem 1rem;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.filter-pill:hover,
.filter-pill.is-active {
  background: #000;
  color: #fff;
}

/* Dropdown 容器 */
.filter-dropdown {
  position: relative;
}

/* hover 父级时显示下拉 */
.filter-dropdown:hover .filter-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.filter-dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 210px;
  background: #fff;
  padding: 0;      /* 上下有间距，左右 0 */
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}

.filter-dropdown-item {
  border: 0;
  background: #fff;
  color: #000;
  text-align: left;
  padding: 0.5rem 1rem;   /* 自己左右 1rem 内边距 */
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;            /* 撑满菜单宽度 */
}

.filter-dropdown-item:hover {
  background: #000;
  color: #fff;
}


/* ===== Search 区 ===== */

.filter-search {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.filter-pill-search {
  /* 保持和其他一样的 pill 样式 */
}

/* 搜索输入区域——只有底部一条线 */
.filter-search-input-wrap {
  position: relative;
  min-width: 200px;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}

.filter-search-input {
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  outline: none;
  caret-color: #000;
}

/* placeholder 设成透明，只看到光标 */
.filter-search-input::placeholder {
  color: transparent;
}

/* 激活时：出现黑色下划线 */
.filter-search.is-active .filter-search-input-wrap {
  border-bottom-color: #000;
}

/* ===== 电影 grid：四个一排 ===== */

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem 4rem;
  margin-top: 3rem;
}

/* 一张电影卡片 */
.film-card {
  display: flex;
  flex-direction: column;
}

/* 海报占位：可换成真实 img */
.film-poster {
  position: relative;
  background: #dcdcdc; /* 灰色占位 */
  width: 100%;
  padding-top: 140%;  /* 近似竖版比例 */
  overflow: hidden;
}

/* 如果你用 img：让它铺满 */
.film-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 余票 badge：叠在海报上方 */
.ticket-badge {
  position: absolute;
  right: 0;
  top: 0;
  height: 32px;
  padding: 0 0.8rem;
  background: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 19;
}

/* meta 信息 */
.film-meta {
  margin-top: 1rem;
}

.film-title {
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  /* margin: 0 ; */
  margin: 0 0 0.25rem
}

.film-title .film-year {
  font-weight: 300;
}

.film-credit {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

/* 响应式：平板三列，手机一列 / 两列 */
@media (max-width: 1024px) {
  .lineup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .filter-bar {
    gap: 0.6rem;
  }

  .filter-search-input-wrap {
    min-width: 140px;
  }

  .lineup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .lineup-grid {
    grid-template-columns: 1fr;
  }
}


/* ========== 小屏简单适配（整体保持 scale 控制，不再额外缩放） ========== */

@media (max-width: 768px) {
  #content {
    padding: 3rem 5vw 6rem;
  }
}