body.hn-cinematic {
  --cine-x: 0px;
  --cine-y: 0px;
  --cine-scroll: 0px;
  background-color: #f7f1e3;
}

body.hn-cinematic::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background:
    repeating-radial-gradient(circle at 17% 31%, rgba(85,68,42,.12) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(97deg, rgba(111,88,53,.035) 0 1px, transparent 1px 5px);
  background-size: 96px 103px, 127px 121px;
  animation: cine-grain-shift 18s steps(4,end) infinite;
}

.page { position: relative; z-index: 1; }
.hn-three-trail {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: multiply;
}
.site-cinematic-bg {
  position: fixed;
  inset: -12vh -10vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--cine-x) * .35),calc(var(--cine-scroll) * -.035),0);
}

.site-fog {
  position: absolute;
  width: max(330px,48vw);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(12px);
  opacity: .55;
}
.fog-one {
  top: 3%;
  right: -12%;
  background: radial-gradient(circle,rgba(217,198,163,.52),transparent 68%);
  animation: cine-fog-one 26s ease-in-out infinite alternate;
}
.fog-two {
  left: -16%;
  top: 48%;
  background: radial-gradient(circle,rgba(192,95,60,.15),transparent 70%);
  animation: cine-fog-two 32s ease-in-out infinite alternate-reverse;
}

.site-route {
  position: absolute;
  width: 78vw;
  height: 34vw;
  min-width: 520px;
  min-height: 220px;
  border: 2px dashed rgba(192,95,60,.24);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.route-one { top: 24%; left: -22%; transform: rotate(9deg); animation: cine-route-drift 58s linear infinite; }
.route-two { right: -24%; top: 68%; border-color: rgba(119,128,63,.22) transparent transparent rgba(119,128,63,.22); transform: rotate(-12deg); animation: cine-route-drift-two 64s linear infinite; }

.hero-art { animation: cine-hero-breathe 22s ease-in-out infinite alternate; }
.stamp { animation: cine-stamp-bob 7s ease-in-out infinite alternate; }
.region-card,.event-card,.featured-mini,.about-path article,.trip-help-card {
  transition: transform .42s cubic-bezier(.22,.7,.3,1),box-shadow .42s cubic-bezier(.22,.7,.3,1);
}
.region-card:hover,.event-card:hover,.featured-mini:hover,.about-path article:hover {
  transform: translateY(-4px) rotate(-.25deg);
}

@keyframes cine-grain-shift {
  0%,100% { background-position: 0 0,0 0; }
  35% { background-position: 11px -8px,-7px 13px; }
  70% { background-position: -9px 6px,12px -5px; }
}
@keyframes cine-fog-one {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-7%,6%,0) scale(1.13); }
}
@keyframes cine-fog-two {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(8%,-5%,0) scale(1.1); }
}
@keyframes cine-route-drift {
  from { translate: -4% 0; rotate: 0deg; }
  to { translate: 7% -5%; rotate: 7deg; }
}
@keyframes cine-route-drift-two {
  from { translate: 5% 0; rotate: 0deg; }
  to { translate: -7% 6%; rotate: -8deg; }
}
@keyframes cine-hero-breathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.055) translate3d(-.6%,.4%,0); }
}
@keyframes cine-stamp-bob {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 -9px; rotate: 2deg; }
}

@media (max-width:700px) {
  body.hn-cinematic::after { opacity: .11; }
  .hn-three-trail { opacity: .58; }
  .site-fog { opacity: .38; }
  .site-route { opacity: .62; }
  .region-card:hover,.event-card:hover,.featured-mini:hover,.about-path article:hover { transform: none; }
}

@media (prefers-reduced-motion:reduce) {
  body.hn-cinematic::after,.site-fog,.site-route,.hero-art,.stamp { animation: none !important; }
  .site-cinematic-bg { transform: none !important; }
  .hn-three-trail { display: none !important; }
}