/* Cinematic home layer. Loaded after home.css so it can compose with, not
   replace, the editorial base and the shared scroll-motion system. */

body.home-cinematic {
  --hc-ease: cubic-bezier(.16, .84, .28, 1);
}

/* 1. Opening: a quiet staggered title card over the photographic spread. */
.home-cinematic.home-intro .hero-copy > * {
  opacity: 0;
  animation: hc-rise .9s var(--hc-ease) both;
}
.home-cinematic.home-intro .hero-copy > .home-eyebrow { animation-delay: .05s; }
.home-cinematic.home-intro .hero-copy > h1 { animation-delay: .13s; }
.home-cinematic.home-intro .hero-copy > p:not(.home-eyebrow) { animation-delay: .28s; }
.home-cinematic.home-intro .hero-copy > .hero-actions { animation-delay: .42s; }
.home-cinematic.home-intro .hero-copy > .hero-rate { animation-delay: .52s; }
.home-cinematic.home-intro .hero-foot,
.home-cinematic.home-intro .hero-credit {
  opacity: 0;
  animation: hc-rise-small .8s var(--hc-ease) .62s both;
}
@keyframes hc-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes hc-rise-small {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

/* 2. Hero scroll depth: the photograph drifts slower than the copy. */
@media (min-width: 701px) {
  .home-cinematic .hero-scenes {
    transform: translate3d(0, var(--hc-hero-y, 0px), 0) scale(var(--hc-hero-scale, 1));
    will-change: transform;
  }
  .home-cinematic .hero-copy {
    transform: translateY(calc(-37% + var(--hc-copy-y, 0px)));
    opacity: var(--hc-copy-opacity, 1);
    will-change: transform, opacity;
  }
  .home-cinematic .hero-foot {
    transform: translate3d(0, var(--hc-foot-y, 0px), 0);
    opacity: var(--hc-foot-opacity, 1);
  }
}

/* 3. Scroll cue, in the empty centre of the hero footer. */
.home-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #f4eee0;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity .3s ease, transform .3s ease;
}
.home-scroll-cue i {
  display: block;
  width: 1px;
  height: 29px;
  background: linear-gradient(#f4eee0, transparent);
  transform-origin: top;
  animation: hc-cue 1.8s ease-in-out infinite;
}
.home-scroll-cue.is-hidden {
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
}
@keyframes hc-cue {
  0%, 100% { transform: scaleY(.55); opacity: .55; }
  50% { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 1000px) {
  .home-scroll-cue { display: none; }
}

/* 4. Story photography: slow focal parallax inside the clipped frames. */
.home-cinematic .story img {
  transform: translate3d(0, var(--hc-story-y, 0px), 0) scale(1.065);
  will-change: transform;
}
.home-cinematic .story:hover img {
  transform: translate3d(0, var(--hc-story-y, 0px), 0) scale(1.085);
  filter: brightness(.94);
}
@media (max-width: 700px) {
  .home-cinematic .story img { transform: scale(1.035); }
  .home-cinematic .story:hover img { transform: scale(1.045); }
}

/* 6. Reduced-motion contract. */
@media (prefers-reduced-motion: reduce) {
  .home-cinematic.home-intro .hero-copy > *,
  .home-cinematic.home-intro .hero-foot,
  .home-cinematic.home-intro .hero-credit {
    opacity: 1;
    animation: none;
    transform: none;
  }
  .home-cinematic .hero-scenes,
  .home-cinematic .hero-copy,
  .home-cinematic .hero-foot,
  .home-cinematic .story img {
    transform: none !important;
    opacity: 1 !important;
  }
  .home-scroll-cue i { animation: none; }
  .home-guide-track { transform: none !important; }
}

/* City cards are ordinary document flow: no sticky stage or scroll spacer. */
.home-guide-rail { position:relative; min-width:0; }
.home-guide-track { overflow-x:auto; overflow-y:hidden; width:100%; padding:6px 0 12px; scrollbar-width:none; scroll-behavior:auto; }
.home-guide-track::-webkit-scrollbar { display:none; }
.home-guide-rail .home-guide-grid { display:flex; width:max-content; max-width:none; gap:18px; margin:0; }
.home-guide-rail .home-guide-card { flex:0 0 clamp(250px,18vw,300px); min-width:0; }
.home-guide-rail .home-guide-image { height:205px; }
.home-guide-rail .home-guide-copy { min-height:185px; }
.home-guide-track:focus-visible { outline:2px solid #8c3e48; outline-offset:4px; }
.home-guide-rail-meta { display:flex; justify-content:space-between; gap:20px; margin:14px 0 6px; font-size:10px; color:#637468; }
.home-guide-rail-count { color:#8c3e48; font-variant-numeric:tabular-nums; }
.home-guide-rail-hint { text-align:right; }
.home-guide-slider { display:block; width:100%; height:24px; margin:0; padding:0; background:transparent; accent-color:#8c3e48; cursor:ew-resize; appearance:none; }
.home-guide-slider::-webkit-slider-runnable-track { height:5px; border-radius:4px; background:#d3dbcf; }
.home-guide-slider::-webkit-slider-thumb { appearance:none; width:70px; height:15px; margin-top:-5px; border:2px solid #f8f6ef; border-radius:8px; background:#8c3e48; }
.home-guide-slider::-moz-range-track { height:5px; border-radius:4px; background:#d3dbcf; }
.home-guide-slider::-moz-range-thumb { width:66px; height:11px; border:2px solid #f8f6ef; border-radius:8px; background:#8c3e48; }
.home-guide-slider:focus-visible { outline:2px solid #8c3e48; outline-offset:3px; border-radius:6px; }

/* Guide post feed: three equal reading cards, not a magazine collage. */
.home-posts-section .section-top {
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.home-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.home-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fffdf7;
  border: 1px solid #dde2d8;
  border-radius: 3px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-post:hover {
  transform: translateY(-4px);
  border-color: #c6d1c4;
  box-shadow: 0 18px 38px #263b2c14;
}
.home-post-image {
  display: block;
  aspect-ratio: 1.48;
  overflow: hidden;
  background: #e6ece2;
}
.home-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.home-post:hover .home-post-image img {
  transform: scale(1.045);
}
.home-post-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 2vw, 26px);
}
.home-post-body small {
  color: #93444d;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.home-post-body h3 {
  margin: 12px 0 10px;
  color: #20382b;
  font-family: Georgia, 'Songti SC', 'Noto Serif SC', serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.home-post-body p {
  margin: 0 0 24px;
  color: #68796c;
  font-size: 13px;
  line-height: 1.8;
}
.home-post-body b {
  margin-top: auto;
  padding-bottom: 6px;
  border-bottom: 1px solid #b9c5b6;
  color: #294a38;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
}
@media (max-width: 900px) {
  .home-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-post:last-child { grid-column: 1 / -1; }
  .home-post:last-child .home-post-image { aspect-ratio: 2.4; }
}
@media (max-width: 600px) {
  .home-posts-grid { grid-template-columns: 1fr; }
  .home-post:last-child { grid-column: auto; }
  .home-post:last-child .home-post-image { aspect-ratio: 1.48; }
  .home-post-body h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-post, .home-post-image img { transition: none; }
  .home-post:hover { transform: none; }
  .home-post:hover .home-post-image img { transform: none; }
}