/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  cursor: pointer; /* Ensure links have pointer cursor */
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input, /* General input, specific types will override cursor if needed */
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/* Ensure clickable input types and buttons have pointer cursor */
button,
[type="button"],
[type="reset"],
[type="submit"],
select { /* Select is also interactive */
  cursor: pointer;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Safari.
 */

progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* Custom App Styles
   ========================================================================== */

body {
  font-family: 'LXGW WenKai Lite', 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-image: linear-gradient(160deg, #fff0f5 0%, #ffe8ec 35%, #fdf2f8 65%, #f0f4ff 100%);
  background-color: #fff0f5; /* 渐变背景的回退色 */
  color: #333;
  line-height: 1.6;
  padding: 20px; /* Default padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  /* Custom heart cursor for the body. Hotspot (0 0) is top-left. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23e91e63'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") 0 0, auto;
}

header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  /* background-color: #fff; Replaced by gradient */
  background-image: linear-gradient(to bottom, #fff0f5, #ffffff); /* LavenderBlush to White */
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); /* Softer shadow */
  width: 100%;
  max-width: 800px;
  position: relative; /* For potential future pseudo-elements if needed */
}

header h1 {
  font-size: 2.8em;
  margin-bottom: 0.2em;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* 粉红渐变文字 + 流动光泽 */
  background-image: linear-gradient(135deg, #e91e63 0%, #ff7aa8 45%, #e91e63 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: titleShimmer 6s linear infinite;
}

.subtitle {
  font-size: 1.2em;
  color: #555;
  font-style: italic;
}

.timeline-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px; /* Thinner line */
  /* Dashed line effect using background gradient */
  background-image: linear-gradient(to bottom, #e91e63 60%, transparent 60%);
  background-size: 2px 10px; /* width of dash, gap between dashes */
  background-repeat: repeat-y;
  /* border-radius: 2px; Remove if using gradient for dashes */
}

.timeline-item {
  padding: 20px 40px;
  position: relative;
  background-color: transparent; /* Let AOS handle reveal */
  width: 50%;
  box-sizing: border-box;
}

/* Alternating sides */
.timeline-item:nth-child(odd) {
  left: 0;
  padding-left: 0;
  padding-right: 60px; /* Space for the line and dot */
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  padding-right: 0;
  padding-left: 60px; /* Space for the line and dot */
  text-align: left;
}

/* Heart icon on the timeline */
.timeline-item::after {
  content: ''; /* Will be replaced by SVG background */
  position: absolute;
  width: 24px; /* Adjust size of heart icon */
  height: 24px; /* Adjust size of heart icon */
  /* background-color: white; Remove this if using SVG with its own fill */
  /* border: 4px solid #e91e63; Remove or adjust if using SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e91e63'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  top: 28px; /* Adjust vertical position if needed */
  z-index: 1;
  /* Remove border-radius if it's not a circle anymore */
}

.timeline-item:nth-child(odd)::after {
  right: -12px; /* Adjust to center the heart icon on the line */
  transform: translateX(50%);
}

.timeline-item:nth-child(even)::after {
  left: -12px; /* Adjust to center the heart icon on the line */
  transform: translateX(-50%);
}

.timeline-content {
  padding: 25px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(233, 30, 99, 0.08);
  position: relative;
  overflow: hidden; /* 让照片放大时裁剪在圆角卡片内 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 卡片顶部粉红渐变描边 */
.timeline-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-image: linear-gradient(90deg, #ffb3c8, #e91e63, #ffb3c8);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.timeline-item:hover .timeline-content {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(233, 30, 99, 0.16);
}

.timeline-content h3 {
  margin-top: 0;
  color: #e91e63;
  font-size: 1.5em;
  font-weight: 600;
}

.timeline-content .date {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 10px;
  display: block;
}

.timeline-content p {
  margin-bottom: 15px;
  font-size: 1em;
  line-height: 1.7;
}

.timeline-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: #ffe4ec; /* 懒加载时的柔和占位色 */
  transition: transform 0.5s ease;
  display: block; /* 避免图片底部空隙 */
}

.timeline-item:hover .timeline-content img {
  transform: scale(1.04);
}

footer {
  text-align: center;
  margin-top: 50px;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 800px;
}

.final-confession {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 15px;
  /* 流动粉红渐变文字 */
  background-image: linear-gradient(90deg, #e91e63, #ff6f9f, #e91e63);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: titleShimmer 5s linear infinite;
}

.signature {
  font-size: 1.1em;
  color: #555;
  font-style: italic;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .timeline-container::before {
    left: 30px; /* Move line to the left */
    transform: translateX(0);
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    padding-left: 70px; /* Space for line and dot */
    padding-right: 15px;
    text-align: left;
  }

  .timeline-item:nth-child(odd)::after,
  .timeline-item:nth-child(even)::after {
    left: 20px; /* Align dot with the line */
    transform: translateX(0);
  }
  header h1 {
    font-size: 2.2em;
  }
  .subtitle {
    font-size: 1em;
  }
  .final-confession {
    font-size: 1.2em;
  }
  .signature {
    font-size: 1em;
  }

  body {
    padding: 10px; /* Reduced padding for smaller screens */
  }

  header, footer {
    padding: 15px; /* Reduced padding for header/footer */
    margin-bottom: 20px;
  }
  footer {
    margin-top: 30px;
  }

  .timeline-content {
    padding: 15px; /* Reduced padding for content boxes */
  }
  .timeline-content h3 {
    font-size: 1.3em;
  }
  .timeline-content p, .timeline-content .date {
    font-size: 0.85em;
  }

  /* Entry Page specific responsive adjustments */
  .entry-container {
    padding: 25px; /* Reduced padding for entry container */
    max-width: 90%; /* Allow it to be wider on small screens */
  }
  .entry-container h2 {
    font-size: 1.5em; /* Adjust title size */
    margin-bottom: 20px;
  }
  .entry-container input[type="text"] {
    padding: 12px; /* Slightly larger input for touch */
    font-size: 1em;
  }
  .entry-container button {
    padding: 12px 20px; /* Adjust button padding */
    font-size: 1em;
  }
  
  /* Hide decorative elements on very small screens if they become too distracting */
  body.entry-page-body::before,
  body.entry-page-body::after {
    width: 30px;
    height: 30px;
  }
}

/* Entry Page Styles
   ========================================================================== */

/* Styles for body specifically on entry.html if needed, or rely on global body styles */
/* For now, the body style from entry.html's inline style is very generic,
   so we might not need to duplicate it if the global body style is sufficient.
   However, to be safe and ensure entry.html looks the same initially, I'll add a more specific selector.
   We can refine this later.
*/

body.entry-page-body { /* Add class="entry-page-body" to body tag in entry.html */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* background-color: #f0f2f5; Replaced by global body style */
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; Replaced by global body style */
}

.entry-container {
    background-color: #fff;
    padding: 40px; /* Default padding */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 400px; /* Default max-width */
    position: relative; /* Needed for z-index to work if pseudo-elements are an issue */
    z-index: 1;
}
.entry-container h2 {
    color: #e91e63;
    margin-bottom: 25px; /* Default margin */
    font-size: 1.8em; /* Default font size */
}
.entry-container label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}
.entry-container input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px; /* Default padding */
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.9em; /* Default font size */
}
.entry-container button {
    background-color: #e91e63;
    color: white;
    padding: 12px 25px; /* Default padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em; /* Default font size */
    transition: background-color 0.3s ease;
}
.entry-container button:hover {
    background-color: #d81b60;
}
.error-message { /* This class is already in entry.html's p tag */
    color: red;
    margin-top: 15px;
    font-size: 0.9em;
}

/* Decorative elements for Entry Page
   ========================================================================== */

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

body.entry-page-body::before,
body.entry-page-body::after {
  content: '';
  position: fixed; /* Fixed positioning relative to the viewport */
  width: 40px; /* Size of the decorative heart */
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e91e63'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.3; /* Make them subtle */
  z-index: -1; /* Place them behind other content */
  animation: slowRotate 20s linear infinite; /* Slow rotation animation */
}

body.entry-page-body::before {
  top: 20px;
  left: 20px;
}

body.entry-page-body::after {
  bottom: 20px;
  right: 20px;
  animation-delay: -10s; /* Start the second heart at a different point in animation */
}

/* Ensure entry container is above the pseudo-elements if z-index issues arise */
/* .entry-container already has position:relative and z-index:1 from above */

/* 爱心粒子画布与内容层级
   ========================================================================== */

#heartsCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

header,
.timeline-container,
footer {
  position: relative;
  z-index: 1; /* 内容叠加在爱心画布之上 */
}

/* 渐变文字流动动画 */
@keyframes titleShimmer {
  to { background-position: 200% center; }
}

/* 入场遮罩
   ========================================================================== */

.enter-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(160deg, #fff0f5 0%, #ffe4ec 40%, #fbe8f4 70%, #f4efff 100%);
  background-color: #fff0f5;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.enter-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-overlay-inner {
  text-align: center;
  padding: 20px;
  animation: overlayIn 1s ease both;
}

@keyframes overlayIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.enter-heart {
  font-size: 76px;
  line-height: 1;
  animation: heartBeat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(233, 30, 99, 0.35));
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.18); }
  30%      { transform: scale(0.95); }
  45%      { transform: scale(1.12); }
  60%      { transform: scale(1); }
}

.enter-title {
  font-size: 2.6em;
  color: #e91e63;
  margin: 20px 0 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.enter-subtitle {
  font-size: 1.15em;
  color: #b06a86;
  font-style: italic;
  margin-bottom: 36px;
}

.enter-button {
  display: inline-block;
  padding: 14px 46px;
  font-family: inherit;
  font-size: 1.15em;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background-image: linear-gradient(135deg, #ff6f9f, #e91e63);
  box-shadow: 0 8px 22px rgba(233, 30, 99, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.enter-button:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(233, 30, 99, 0.45);
}

.enter-button:active { transform: scale(0.97); }

/* 悬浮音乐按钮
   ========================================================================== */

.music-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1100;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  background-image: linear-gradient(135deg, #ff8fb3, #e91e63);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(233, 30, 99, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.music-toggle:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 26px rgba(233, 30, 99, 0.5);
}

.music-toggle:active { transform: scale(0.95); }

/* 播放中:呼吸光晕 */
.music-toggle.playing { animation: musicPulse 2.4s ease-in-out infinite; }

@keyframes musicPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(233, 30, 99, 0.4); }
  50%      { box-shadow: 0 6px 28px rgba(233, 30, 99, 0.75); }
}

/* 生日验证页美化
   ========================================================================== */

.entry-container {
  border: 1px solid rgba(233, 30, 99, 0.12);
  box-shadow: 0 8px 30px rgba(233, 30, 99, 0.12);
}

.entry-container input[type="text"] {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.entry-container input[type="text"]:focus {
  outline: none;
  border-color: #e91e63;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
}

.entry-container button {
  background-image: linear-gradient(135deg, #ff6f9f, #e91e63);
  box-shadow: 0 6px 16px rgba(233, 30, 99, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry-container button:hover {
  background-image: linear-gradient(135deg, #e91e63, #d81b60);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(233, 30, 99, 0.4);
}

/* 生日错误时的抖动 */
.shake { animation: shake 0.5s ease; }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* 移动端适配(新增部分)
   ========================================================================== */

@media screen and (max-width: 768px) {
  .enter-heart { font-size: 56px; }
  .enter-title { font-size: 1.9em; }
  .enter-subtitle { font-size: 1em; margin-bottom: 28px; }
  .enter-button { padding: 12px 36px; font-size: 1.05em; }

  .music-toggle {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
}