/* Premium home + dashboard layer. Loaded after theme.css.
   Motion is transform and opacity only, and it stops for
   prefers-reduced-motion, a hidden tab, or an off-screen block. */

body:has(.home-hero) {
  background-image:
    radial-gradient(900px 420px at 100% -80px, rgba(196, 132, 58, .16), transparent 60%),
    radial-gradient(720px 380px at -10% 0, rgba(28, 74, 46, .1), transparent 55%);
}
body:has(.home-hero) .wz-wrap {
  max-width: 1120px;
  padding-top: 8px;
}
body:has(.home-hero) .hdr-in { max-width: 1120px; }
body:has(.home-hero) #quick,
body:has(.home-hero) #main > .fcard {
  max-width: 680px;
  margin-inline: auto;
}
body:has(.home-hero) #quick {
  margin-top: -28px;
  position: relative;
  z-index: 4;
  border-radius: 24px;
}

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(78vh, 760px);
  margin: 0 0 8px;
  border-radius: 28px;
  color: #f7f4ee;
  background: #102018;
  box-shadow: var(--shadow-lg);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.35s ease;
}
.hero-slide.is-on { opacity: 1; z-index: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.hero-slide.is-on img { animation: ken 14s ease-out forwards; }
.hero-slide:nth-child(2).is-on img { animation-name: ken-alt; }
.hero-slide:nth-child(4).is-on img { animation-name: ken-alt; }
@keyframes ken {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(-2.2%, -1.2%, 0); }
}
@keyframes ken-alt {
  from { transform: scale(1.14) translate3d(-2%, -1%, 0); }
  to { transform: scale(1.05) translate3d(1.4%, 0.6%, 0); }
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 14, 11, .55) 0%, rgba(6, 14, 11, .28) 34%, rgba(6, 14, 11, .82) 100%);
}
.hero-route {
  position: absolute;
  z-index: 2;
  inset-inline: 4%;
  bottom: 18%;
  width: 92%;
  height: 84px;
  pointer-events: none;
  overflow: visible;
}
.hero-route path {
  fill: none;
  stroke: rgba(255, 236, 196, .85);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  animation: route-march 2.8s linear infinite;
}
@keyframes route-march { to { stroke-dashoffset: -104; } }
.hero-cloud {
  position: absolute;
  z-index: 2;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 18px 6px 0 6px rgba(255, 255, 255, .35);
  pointer-events: none;
  animation: cloud-drift 46s linear infinite;
}
.hero-cloud.c1 { width: 92px; top: 14%; inset-inline-start: 8%; animation-duration: 52s; }
.hero-cloud.c2 { width: 64px; top: 26%; inset-inline-end: 12%; animation-duration: 38s; animation-delay: -12s; }
.hero-cloud.c3 { width: 48px; top: 11%; inset-inline-start: 42%; animation-duration: 64s; animation-delay: -20s; opacity: .8; }
@keyframes cloud-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-14vw, 8px, 0); }
}
html[dir="ltr"] .hero-cloud { animation-name: cloud-drift-ltr; }
@keyframes cloud-drift-ltr {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(14vw, 8px, 0); }
}
.hero-plane {
  position: absolute;
  z-index: 3;
  top: 16%;
  left: 0;
  width: 86px;
  height: 36px;
  pointer-events: none;
  animation: plane-fly 24s linear infinite;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35));
}
.hero-plane svg { display: block; width: 100%; height: 100%; }
@keyframes plane-fly {
  from { transform: translate3d(108vw, 0, 0) scaleX(-1); }
  to { transform: translate3d(-28vw, -28px, 0) scaleX(-1); }
}
html[dir="ltr"] .hero-plane { animation-name: plane-fly-ltr; }
@keyframes plane-fly-ltr {
  from { transform: translate3d(-28vw, 0, 0); }
  to { transform: translate3d(108vw, -28px, 0); }
}
.hero-copy {
  position: relative;
  z-index: 4;
  max-width: 38rem;
  margin: 11vh auto 0;
  margin-inline-start: clamp(16px, 4vw, 48px);
  margin-inline-end: auto;
  padding: 18px 18px 14px;
  border-radius: 22px;
  background: rgba(8, 16, 12, .86);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.home-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Rubik, Assistant, sans-serif;
  font-weight: 800;
  font-size: clamp(1.85rem, 4.6vw, 3.15rem);
  line-height: 1.2;
  letter-spacing: 0;
}
.home-hero .intro {
  margin: 0;
  max-width: 46ch;
  color: #f3f7f4;
  font-size: 1.05rem;
  line-height: 1.55;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #f6f1e6;
  color: #143321;
  font: 800 16px Rubik, Assistant, sans-serif;
  text-decoration: none;
}
.hero-cta:hover { background: #fff; }
.hero-controls {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px clamp(16px, 4vw, 48px) 0;
}
.hero-dots { display: flex; gap: 4px; }
.hero-dot, .hero-pause {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.hero-dot { position: relative; }
.hero-dot::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.hero-dot[aria-current="true"]::before { background: #fff; inset: 14px; }
.hero-pause {
  margin-inline-start: auto;
  padding: 0 14px;
  background: rgba(8, 16, 12, .88);
  border: 2px solid #e4c48a;
  font: 800 14px Rubik, Assistant, sans-serif;
  color: #fff;
}
.hero-cta:focus-visible,
.hero-dot:focus-visible,
.hero-pause:focus-visible,
.dest-card:focus-visible {
  outline: 3px solid #fff8e8;
  outline-offset: 3px;
}
.hero-credit {
  position: relative;
  z-index: 4;
  margin: 8px clamp(16px, 4vw, 48px) 52px;
  color: #f4f1ea;
  font-size: 13px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
.hero-credit a { color: #fff; font-weight: 700; }

.dest-band { margin: 28px 0 8px; }
.dest-title {
  margin: 0 2px 6px;
  font: 800 clamp(1.45rem, 3vw, 2rem) Rubik, Assistant, sans-serif;
  color: var(--g900);
  line-height: 1.25;
}
html[data-theme="dark"] .dest-title,
html[data-theme="dark"] .routes-title,
html[data-theme="dark"] .route-filter-label {
  color: #f4efe6;
}
.dest-lead {
  margin: 0 2px 14px;
  max-width: 48ch;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.5;
}
.dest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.dest-card {
  position: relative;
  display: block;
  min-height: 230px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #143321;
  box-shadow: var(--shadow-sm);
}
.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dest-name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 56px 14px 14px;
  background: linear-gradient(transparent, rgba(6, 14, 10, .9));
  color: #fff;
  font: 800 1.2rem/1.25 Rubik, Assistant, sans-serif;
}
.dest-card.is-in,
.dest-card:not([data-reveal]) {
  animation: floaty 7s ease-in-out infinite alternate;
}
.dest-card:nth-child(2n) { animation-delay: -1.6s; }
.dest-card:nth-child(3n) { animation-delay: -3.1s; }
@keyframes floaty {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -8px, 0); }
}
html.motion-on [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); }
html.motion-on [data-reveal].is-in { animation: rise-in .7s var(--ease) forwards; }
.dest-card[data-reveal].is-in {
  animation: rise-in .65s var(--ease) forwards, floaty 7s ease-in-out .7s infinite alternate;
}
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.photo-credit {
  margin: 10px 2px 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.45;
}
.photo-credit a { color: var(--g800); font-weight: 700; }

.route-card { padding: 0 0 12px; overflow: hidden; gap: 6px; }
.route-card:not(:has(.route-photo)) { padding: 14px 16px; }
.route-card:not(:has(.route-photo)) > * { margin-inline: 0; }
.route-photo {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #d9e4da;
}
.route-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.route-card > :not(.route-photo) { margin-inline: 14px; }
.route-card .route-title { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .route-card:hover .route-photo img { transform: scale(1.07); }
  .route-photo img { transition: transform .6s var(--ease); }
  .dest-card:hover { animation-play-state: paused; }
}

/* trip dashboard */
.wrap > .hero {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border-radius: 28px;
  color: #f7f4ee;
}
.wrap > .hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  height: auto;
  background-color: #102018;
  background-image:
    linear-gradient(165deg, rgba(6, 14, 11, .8), rgba(6, 14, 11, .62) 48%, rgba(6, 14, 11, .84)),
    url("/assets/photos/hero/hike-800.webp");
  background-image:
    linear-gradient(165deg, rgba(6, 14, 11, .8), rgba(6, 14, 11, .62) 48%, rgba(6, 14, 11, .84)),
    image-set(
      url("/assets/photos/hero/hike-800.webp") 1x,
      url("/assets/photos/hero/hike-1600.webp") 2x
    );
  background-size: cover;
  background-position: center;
  animation: dash-kb 26s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
@keyframes dash-kb {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.6%, -1%, 0); }
}
.wrap > .hero .tile { animation: floaty 7.5s ease-in-out infinite alternate; }
.wrap > .hero .tile:nth-child(2) { animation-delay: -1.4s; }
.wrap > .hero .tile:nth-child(3) { animation-delay: -2.8s; }
.wrap > .hero .tile:nth-child(4) { animation-delay: -4s; }
.wrap .card, .wrap article.sg, .wrap .evt {
  border-radius: 22px;
}
.wrap .sec-title {
  font-family: Rubik, Assistant, sans-serif;
  letter-spacing: 0;
}
[data-motion][data-paused] :is(.hero-slide img, .hero-plane, .hero-cloud, .hero-route path, .dest-card, .tile),
html.is-tab-hidden [data-motion] :is(.hero-slide img, .hero-plane, .hero-cloud, .hero-route path, .dest-card, .tile),
.wrap > .hero[data-paused]::before,
.wrap > .hero[data-paused] .tile,
html.is-tab-hidden .wrap > .hero::before,
html.is-tab-hidden .wrap > .hero .tile {
  animation-play-state: paused;
}

@media (min-width: 640px) {
  .dest-grid { grid-template-columns: 1fr 1fr; }
  .dest-card { min-height: 250px; }
  .home-hero { min-height: min(82vh, 820px); }
}
@media (min-width: 980px) {
  .dest-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .dest-card { min-height: 280px; }
  body:has(.home-hero) .route-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 639px) {
  .home-hero { min-height: 86svh; border-radius: 22px; }
  .hero-copy { margin-top: 18vh; }
  .hero-plane { width: 68px; top: 12%; }
  .hero-route { bottom: 22%; }
  .dest-card { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-slide { transition: none !important; }
  .hero-slide img, .hero-plane, .hero-cloud, .hero-route path, .dest-card, .wrap > .hero::before, .wrap > .hero .tile {
    animation: none !important;
    transform: none !important;
  }
  .hero-slide.is-on img { transform: none !important; }
}

/* Festival suggestions: Israel is first in the DOM, so RTL puts it on the right.
   One column below 800px keeps Israel on top. */
.fest-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 14px;
}
.fest-col-h { font-size: 1.05rem; }
.fest-split .org-grid { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .fest-split { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.amb-credit {
  margin: 8px auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.45;
}

@media print {
  .hero-plane, .hero-cloud, .hero-route, .hero-controls { display: none !important; }
}