/* ==========================================================================
   Font Faces
   ========================================================================== */
   @font-face {
    font-family: 'Minion Variable Concept';
    src: url('assets/MinionVariableConcept-Roman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Minion Variable Concept';
    src: url('assets/MinionVariableConcept-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
  }
  
  /* ==========================================================================
     Design System & Layout
     ========================================================================== */
  :root {
    --bg-color: #ffffff;
    --text-main: #000000;
    --text-muted: #000000;
    --input-bg: #f5ede4;
    --input-border: #ded4c8;
    --btn-bg: #F6F0EB;
    --btn-border: #DDC7B5;
    --font-family: 'Minion Variable Concept', Georgia, serif;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 13.3px;
    line-height: 1.18;
    -webkit-font-smoothing: antialiased;
  }
  
  body {
    padding: 30px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
  }
  
  .page-layout {
    display: flex;
    width: 100%;
    max-width: 1700px;
    min-height: calc(100vh - 80px);
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
  }
  
  /* 左侧文字面板 */
  .left-panel {
    flex: 0 0 460px;
    max-width: 480px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s ease, visibility 3.8s ease;
    z-index: 10;
  }
  
  .left-panel.is-visible,
  body.has-focus-view .left-panel {
    opacity: 1;
    visibility: visible;
  }
  
  .right-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    min-height: calc(100vh - 80px);
  }
  
  /* View Control */
  .view-panel {
    display: none;
  }
  
  .view-panel.active {
    display: block;
    animation: panelFadeIn 0.9s ease-out forwards;
  }
  
  @keyframes panelFadeIn {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 文本分段排版 */
  .header-group,
  .meta-section,
  .event-details,
  .schedule-section,
  .callout,
  .description {
    margin-bottom: 18px;
  }
  
  .title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }
  
  .author {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .meta-bold {
    font-size: 1rem;
    font-weight: 700;
  }
  
  .meta-text {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .subheading {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
  }
  
  .schedule-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  
  .schedule-item {
    display: flex;
    flex-direction: column;
  }
  
  .schedule-time {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .schedule-desc {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .rsvp-prompt {
    font-weight: 700;
    font-size: 1rem;
  }
  
  .description p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
  }
  
  .description em {
    font-family: 'Minion Variable Concept', Georgia, serif;
    font-style: italic;
  }
  
  .credits {
    margin-top: 32px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
  }
  
  /* Form Components */
  .dietary-note {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 18px;
  }
  
  .form-group label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 6px;
  }
  
  .form-group input {
    width: 240px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 2px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
  }
  
  .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }
  
  .btn-book, .btn-cancel {
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--text-main);
    padding: 2px 12px;
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
  }
  
  .btn-cancel {
    background: transparent;
    border: none;
    color: #736c64;
  }
  
  /* Perspective Table */
  .stage-container {
    position: relative;
    width: 100%;
    max-width: 980px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-8%) translateY(4%) scale(1.1);
    transform-origin: center center;
  }
  
  .layer-table {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }
  
  .layer-boxes {
    position: absolute;
    inset: 0;
    z-index: 10;
  }
  
  .box-item {
    position: absolute;
    width: 8.8%;
    aspect-ratio: 160 / 110;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.75s cubic-bezier(0.2, 0, 0.2, 1);
  }
  
  .box-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }
  
  .box-item.is-booked {
    cursor: pointer; /* 保持可点击以触发抖动反馈 */
  }
  
  /* 第二排第二个 box 提升至花瓶上方，保证可点 */
  .box-item.is-elevated {
    z-index: 120;
  }
  
/* 动效：点击轻缓飘浮与下落 */
.box-item.is-popping {
  /* 延长至 1.8s，使用柔和的双向平滑曲线 */
  animation: boxFloat 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, filter;
}

@keyframes boxFloat {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  /* 40% 时间柔和上升并微张 */
  40% {
    transform: translateY(-2px) scale(1);
    filter: drop-shadow(0 4px 3px rgba(58, 58, 58, 0.08));
  }
  /* 剩下的 60% 时间极其轻缓地沉落回原位 */
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}
/* 动效：已预订轻盈微晃动反馈 */
.box-item.is-shaking {
  animation: boxGentleShake 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

@keyframes boxGentleShake {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-1.2px) rotate(-0.3deg);
  }
  35% {
    transform: translateX(1.0px) rotate(0.25deg);
  }
  55% {
    transform: translateX(-0.3px) rotate(-0.1deg);
  }
  75% {
    transform: translateX(0.2px) rotate(0.05deg);
  }
  90% {
    transform: translateX(-0.2px);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}
  
  .layer-vase {
    position: absolute;
    left: 45.0%;
    top: 30.0%;
    transform: translate(-50%, -50%);
    width: 14%;
    height: auto;
    pointer-events: auto;
    cursor: pointer;
    z-index: 100;
  }
  
  /* Mobile */
  @media (max-width: 1024px) {
    body {
      padding: 30px 20px;
    }
  
    .page-layout {
      flex-direction: column;
      gap: 32px;
      min-height: auto;
    }
  
    .left-panel {
      flex: none;
      width: 100%;
      max-width: 100%;
      min-height: auto;
      padding-top: 0;
      opacity: 1 !important;
      visibility: visible !important;
    }
  
    .right-panel {
      width: 100%;
      min-height: auto;
      order: 2;
      padding: 20px 0;
    }
  
    .stage-container {
      transform: scale(1);
      max-width: 100%;
    }
  
    .form-group input {
      width: 100%;
      max-width: 320px;
    }
  }