/* Real sunset footage + complementary midnight-indigo / warm-ivory palette. */
body.sunset-page {
  --ink: #252b49;
  --ink-deep: #14192f;
  --moss: #626a83;
  --leaf: #ddb68b;
  --lime: #f2c7a0;
  --paper: #f5eee3;
  --paper-2: #e9dfd2;
  --white: #fff8ed;
  --rust: #ac613b;
  --gold: #f3bd87;
  --line: rgb(37 43 73 / 20%);
  position: relative;
  isolation: isolate;
  background: #161c33;
  color: var(--white);
}
.sunset-page::before { display: none; }
.sunset-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #302c39 url('../video/sunset-gulls-1080p-poster.jpg') center / cover no-repeat;
}
.sunset-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sunset-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(15 21 44 / 75%), rgb(20 24 45 / 30%) 44%, rgb(27 24 41 / 6%) 75%),
    linear-gradient(180deg, rgb(15 21 40 / 22%), transparent 48%, rgb(14 21 43 / 60%));
}
.sunset-page .site-header {
  max-width: none;
  padding-inline: max(24px, calc((100% - var(--max)) / 2 + 24px));
  background: rgb(20 25 46 / 62%);
  border-bottom: 1px solid rgb(255 228 194 / 15%);
  color: var(--white);
}
.sunset-page .brand-mark { background: #282f4d; }
.sunset-page .nav-cta,
.sunset-page .language-switcher,
.sunset-page .nav-toggle { border-color: rgb(255 232 203 / 35%); }
.sunset-page .language-switcher a[aria-current="true"] { background: var(--lime); color: var(--ink-deep); }
.sunset-page .nav-cta:hover { background: var(--lime); color: var(--ink-deep); }
.sunset-page .nav-toggle span { background: var(--white); }
.sunset-page .main-nav a:hover:not(.nav-cta) { border-color: var(--lime); }
.sunset-page .hero {
  max-width: var(--max);
  min-height: min(850px, calc(100svh - 82px));
  padding-top: 80px;
  padding-bottom: 110px;
  grid-template-columns: 1.12fr .88fr;
}
.sunset-page .hero-copy { padding-left: 2vw; }
.sunset-page .hero .eyebrow,
.sunset-page .ai-copy .eyebrow { color: #f2c7a0; }
.sunset-page .hero h1 { text-shadow: 0 3px 30px rgb(10 16 34 / 25%); }
.sunset-page .hero h1 em,
.sunset-page .ai-copy h2 em { color: #f7c69d; }
html[lang="zh-CN"] .sunset-page .hero h1 em { font-size: .8em; }
.sunset-page .hero-lead { color: #f4e7d7; max-width: 510px; }
.sunset-page .hero-visual { align-self: stretch; min-height: 300px; height: auto; }
.sunset-caption {
  position: absolute;
  right: 0;
  bottom: 20px;
  padding-right: 22px;
  border-right: 1px solid rgb(255 230 192 / 70%);
  text-align: right;
  color: #ffecd4;
}
.sunset-caption span { display: block; font-family: var(--display); font-size: 24px; letter-spacing: .025em; }
.sunset-caption small { font-size: 9px; letter-spacing: .2em; }
.sunset-page .hero-index { color: #e9c39f; }
.sunset-intro .button-primary {
  background: #f0c39a;
  border-color: #f0c39a;
  color: #19233e;
}
.sunset-intro .button-primary:hover { background: #ffdbb6; border-color: #ffdbb6; }
.sunset-intro .identify-submit b { color: #80533a; }
.sunset-page .ai-identify-section {
  position: relative;
  border-top: 1px solid rgb(252 226 194 / 23%);
  gap: 6vw;
}
.sunset-page .ai-copy > p:not(.eyebrow) { color: #f3e7da; }
.sunset-page .ai-copy li { color: #f3e7da; }
.sunset-page .ai-copy li b { color: #ffd4a4; border-color: rgb(249 211 169 / 55%); }
.sunset-page .ai-upload-card,
.sunset-page .ai-login-card {
  color: var(--white);
  background: rgb(24 32 57 / 94%);
  border: 1px solid rgb(243 201 160 / 32%);
  box-shadow: 0 28px 80px rgb(8 13 28 / 28%);
  transform: none;
}
.sunset-page .ai-login-card > span { color: #f0c39a; }
.sunset-page .ai-login-card p,
.sunset-page .privacy-note,
.sunset-page .upload-copy small { color: #d5d7e1; }
.sunset-page .ai-upload-zone { background: rgb(235 222 214 / 3%); border-color: #8e99b1; transform: none; }
.sunset-page .upload-copy b { border-color: #eac39f; color: #f1cba6; }
.sunset-page .upload-zone [hidden] { display: none !important; }
.sunset-page .upload-zone:focus-within { outline: 3px solid var(--gold); outline-offset: 4px; }
.sunset-footnote {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #f3e6d8;
  font-size: 10px;
}
.sunset-footnote a { text-underline-offset: 3px; }
.ambient-pause {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid rgb(255 229 195 / 32%);
  background: rgb(20 28 50 / 65%);
  color: #fff2e4;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  white-space: nowrap;
}
.ambient-pause[hidden], .ambient-status[hidden] { display: none; }
.ambient-pause:hover { background: #26324f; }
.sunset-page .guide-section { background: #171e36; border-top: 1px solid rgb(241 199 160 / 24%); }
.sunset-page .section-heading > p,
.sunset-page .empty-state { color: #c0c4d3; }
.sunset-page .search-box input::placeholder { color: #b5bccf; }
.sunset-page .bird-card { background: #f4ede2; color: #26304b; }
.sunset-page .card-intro { color: #536079; }
.sunset-page .ethics-banner { color: var(--paper); }
.sunset-page .ethics-icon { color: var(--lime); }
.sunset-page .ethics-banner > p { border-color: rgb(255 230 199 / 24%); }
.sunset-page .site-footer { background: #11182c; border-top: 1px solid rgb(255 230 199 / 12%); }
.sunset-page .site-footer p { color: #b8bdce; }
@media (max-width: 900px) {
  .sunset-page .hero { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 48px; }
  .sunset-page .hero-copy { padding-top: 0; }
  .sunset-page .hero-visual { min-height: 160px; margin-top: 20px; }
  .sunset-page .main-nav { background: #202b46; border: 1px solid rgb(255 230 199 / 22%); }
}
@media (max-width: 620px) {
  .sunset-page .site-header { padding-inline: 16px; }
  .sunset-page .hero { min-height: calc(100svh - 68px); padding: 44px 18px 32px; }
  .sunset-page .hero-copy { padding: 0; }
  .sunset-page .hero-visual { min-height: 110px; }
  .sunset-caption { bottom: 0; right: 2px; padding-right: 14px; }
  .sunset-caption span { font-size: 21px; }
  .sunset-video { object-position: 40% 50%; }
  .sunset-backdrop { background-position: 40% 50%; }
  .sunset-backdrop::after { background: linear-gradient(90deg, rgb(15 21 44 / 65%), rgb(18 23 43 / 18%)), linear-gradient(180deg, rgb(15 21 40 / 12%), transparent 40%, rgb(14 21 43 / 62%)); }
  .sunset-page .ai-identify-section { padding-top: 58px; }
  .sunset-page .ai-copy h2 { font-size: 38px; }
  .sunset-footnote { padding-inline: 18px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .sunset-page { scroll-behavior: auto; }
  .sunset-page *, .sunset-page *::before, .sunset-page *::after { transition: none !important; animation: none !important; }
  /* JS slows the explicitly requested natural footage; the Pause control is
     still available. No synthetic flight, parallax or animated overlays. */
}