/* Featured-parks gallery (task HOME-GAL, user request 2026-08-02).
   Component design supplied by the user; adapted to this site's design system rather than pasted:
   the palette comes from main.css tokens, and the type is the two self-hosted families this site
   already ships (PLAN §15 — no third-party font request, no visitor IP handed to Google).
   The original called for Archivo + Newsreader italic; adding two webfonts for one block is a
   dependency decision, not a styling one, so the display face is Space Grotesk and the meta rows
   are JetBrains Mono, which is exactly the eyebrow/figure dialect used everywhere else here.

   EVERYTHING IS SCOPED UNDER .sn-hero. Nothing leaks.

   Галерея обраних парків (завдання HOME-GAL, запит користувача 02.08.2026).
   Дизайн компонента надав користувач; адаптовано під дизайн-систему сайту, а не вставлено як є:
   палітра з токенів main.css, а типографіка — дві самохостовані родини, які сайт уже везе
   (PLAN §15 — жодного стороннього запиту по шрифт, жодного IP відвідувача, відданого Google).
   Оригінал просив Archivo + Newsreader курсивом; додати два вебшрифти заради одного блоку — це
   рішення про залежність, а не про стиль, тож заголовок набрано Space Grotesk, а мета-рядки —
   JetBrains Mono, тобто рівно тим діалектом eyebrow/цифр, яким набране все інше тут.

   УСЕ ПІД .sn-hero. Нічого не витікає. */

.sn-hero{
  /* geometry — the glass bar is deliberately SHORTER than the cards' travel: the photos ride on
     top of it and break both its edges by OVER (15%) of card height. The script reads --thumb-w
     and --thumb-h from here, so a breakpoint changes both the layout and the motion at once.
     геометрія — скляна панель навмисно НИЖЧА за хід карток: фото їдуть по ній і виходять за обидва
     її краї на OVER (15%) висоти картки. Скрипт читає --thumb-w і --thumb-h звідси, тож брейкпойнт
     міняє і верстку, і рух одночасно. */
  --thumb-w:172px;
  --thumb-h:108px;
  --rail-h:126px;
  --sn-pad:clamp(20px,4vw,54px);
  --sn-ease:cubic-bezier(.16,1,.3,1);
  --sn-marker:var(--cyan);

  position:relative;
  padding:34px 0 calc(var(--rail-h) * .56 + 30px);
}

/* ── stage ─────────────────────────────────────────────────────────────────────────────────── */
.sn-stage-wrap{position:relative;margin-top:14px}

.sn-stage{
  position:relative;
  aspect-ratio:21/9;
  min-height:340px;
  border-radius:var(--r-lg);
  overflow:hidden;              /* the only clip in the block, and it is on the PHOTO, not the rail */
  background:var(--bg1);        /* єдине обрізання в блоці, і воно на ФОТО, а не на стрічці */
  isolation:isolate;
}

.sn-layers{position:absolute;inset:0}
.sn-layer{position:absolute;inset:-3%;opacity:0;transition:opacity .34s linear}
.sn-layer.is-on{opacity:1}
.sn-layer picture{display:block;width:100%;height:100%}
.sn-layer img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}

/* Ken Burns: slow enough to be felt and not seen. Only the visible layer moves, and only while the
   section is on screen — the script pauses the whole block otherwise.
   Ken Burns: повільно настільки, щоб це відчувалось, а не помічалось. Рухається лише видимий шар і
   лише поки секція на екрані — інакше скрипт присипляє весь блок. */
.sn-hero.is-live .sn-layer.is-on img{animation:sn-kb 22s linear forwards}
@keyframes sn-kb{from{transform:scale(1.02)}to{transform:scale(1.10)}}

.sn-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(5,3,15,.94) 0%,rgba(5,3,15,.66) 24%,rgba(5,3,15,.10) 54%,rgba(5,3,15,.34) 100%),
    linear-gradient(to right,rgba(5,3,15,.66) 0%,rgba(5,3,15,.14) 44%,rgba(5,3,15,0) 72%);
}

/* ── stage copy ────────────────────────────────────────────────────────────────────────────── */
.sn-copy{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:var(--sn-pad);
  padding-bottom:calc(var(--rail-h) * .52 + 22px);
  max-width:min(640px,74%);
}
/* Each line rises out of its own overflow box. padding/margin compensation keeps descenders (the
   "y" in Yosemite) from being shaved by the mask.
   Кожен рядок піднімається зі свого overflow-боксу. Компенсація padding/margin не дає масці зрізати
   нижні виносні («y» у Yosemite). */
.sn-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sn-mask > *{display:block;transform:translateY(108%);opacity:0}
.sn-copy.is-in .sn-mask > *{
  transform:translateY(0);opacity:1;
  transition:transform .82s var(--sn-ease),opacity .5s ease;
}
.sn-copy.is-in .sn-mask:nth-of-type(2) > *{transition-delay:.06s}

.sn-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);
}
.sn-eyebrow b{font-weight:500;color:var(--paper)}
.sn-eyebrow s{text-decoration:none;opacity:.45;margin:0 .7em}

.sn-title{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(2.4rem,6.6vw,5.4rem);
  font-weight:700;letter-spacing:-.04em;line-height:1;
  margin:.16em 0 0;
  /* WARM, AND THAT IS THE WHOLE ARGUMENT (user choice 2026-08-02). This name sits ON a photograph,
     and the photographs are national parks: sky, forest, water, granite — almost always cool. A cyan
     heading sinks into the sky behind it; a warm yellow is the one hue none of those backgrounds
     contains, so it separates from every frame in the library instead of from some of them.
     A flat colour rather than the hero's gradient, also deliberate: gradient text needs
     background-clip, and where that fails the fill is transparent — an invisible heading over a
     photo. One colour cannot fail that way.
     The glow is not decoration: `.sn-scrim` above fades to .10 opacity across the middle of the
     frame, so a bright photo can meet the text there. A dark halo keeps the letters legible without
     darkening the picture the way a full scrim would.
     ТЕПЛИЙ, І В ЦЬОМУ ВЕСЬ АРГУМЕНТ (вибір користувача 02.08.2026). Ця назва лежить НА фотографії, а
     фотографії — національні парки: небо, ліс, вода, граніт, тобто майже завжди холодне. Бірюзовий
     заголовок тоне в небі позаду себе; теплий жовтий — єдиний відтінок, якого в тих фонах немає, тож
     він відділяється від КОЖНОГО кадру бібліотеки, а не від частини.
     Суцільний колір, а не градієнт героя, — теж свідомо: градієнтний текст потребує background-clip,
     а там, де той не спрацює, заливка лишається прозорою, тобто заголовок стає невидимим поверх фото.
     Один колір так зламатись не може.
     Світіння не є оздобою: `.sn-scrim` вище просідає до .10 непрозорості в середині кадру, тож світле
     фото може зустрітися з текстом саме там. Темний ореол тримає літери читабельними, не затемнюючи
     знімок так, як це зробив би суцільний скрим. */
  color:#FFDA36;
  text-shadow:0 2px 18px rgba(5,3,15,.75),0 1px 3px rgba(5,3,15,.55);
}
.sn-lede{
  margin:.8em 0 0;max-width:36ch;
  font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.5;color:rgba(245,241,255,.84);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .12s,transform .6s var(--sn-ease) .12s;
}
.sn-copy.is-in .sn-lede{opacity:1;transform:none}

/* The block earns its place by going somewhere. A gallery that only changes pictures spends the
   reader's attention and returns nothing.
   Блок виправдовує своє місце тим, що кудись веде. Галерея, яка лише міняє картинки, витрачає увагу
   читача й не повертає нічого. */
.sn-cta{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.1em;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
  padding:11px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(16,9,42,.5);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .18s,transform .6s var(--sn-ease) .18s,border-color .25s,background .25s;
}
.sn-copy.is-in .sn-cta{opacity:1;transform:none}
.sn-cta:hover,.sn-cta:focus-visible{border-color:rgba(0,255,255,.45);background:rgba(0,255,255,.08)}

.sn-meta{
  position:absolute;right:0;bottom:0;z-index:2;
  padding:var(--sn-pad);
  padding-bottom:calc(var(--rail-h) * .52 + 22px);
  text-align:right;display:grid;gap:.55em;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
}
.sn-count{font-variant-numeric:tabular-nums;letter-spacing:.2em}
.sn-count i{font-style:normal;color:var(--sn-marker)}
.sn-credit{color:rgba(245,241,255,.78)}

/* ── rail: the row before JavaScript ───────────────────────────────────────────────────────── */
/* Without .is-live this is an ordinary horizontal scroller of links. It is the whole component for
   anyone whose script did not run, so it has to look deliberate, not like a fallback.
   Без .is-live це звичайний горизонтальний скролер із лінків. Для того, чий скрипт не виконався, це
   і є весь компонент, тож виглядати він мусить задумано, а не як запасний варіант. */
.sn-rail{
  position:relative;margin-top:-38px;z-index:3;
  padding:9px;border-radius:18px;
}
.sn-glass{
  position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid var(--line);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sn-glass{
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    -webkit-backdrop-filter:blur(26px) saturate(150%);
    backdrop-filter:blur(26px) saturate(150%);
  }
}
.sn-view{position:relative;z-index:1}
.sn-contour{display:none}
.sn-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sn-track::-webkit-scrollbar{display:none}

.sn-thumb{
  position:relative;flex:0 0 var(--thumb-w);height:var(--thumb-h);
  border-radius:11px;overflow:hidden;scroll-snap-align:center;
  text-decoration:none;display:block;
  box-shadow:0 26px 46px -18px rgba(0,0,0,.95),0 4px 12px -4px rgba(0,0,0,.55);
}
.sn-thumb picture,.sn-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sn-thumb img{transition:filter .4s ease}
.sn-thumb::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 0 var(--sn-marker);
  transition:border-color .35s ease,box-shadow .35s var(--sn-ease);
}
.sn-thumb.is-hot img{filter:brightness(1.08) saturate(1.05)}
.sn-thumb.is-hot::after{border-color:rgba(255,255,255,.55)}
.sn-thumb.is-active::after{border-color:var(--sn-marker);box-shadow:inset 0 0 0 2px var(--sn-marker)}
.sn-thumb:focus-visible{outline:2px solid var(--sn-marker);outline-offset:5px}

.sn-cap{
  /* display is stated, not inherited from the fact that an absolutely positioned box happens to be
     blockified: this rule promises to cut a long park name with an ellipsis, and on an inline box
     that promise is silently void. The UI contract test checks exactly this shape.
     display оголошено, а не успадковано з того, що абсолютно спозиційований бокс і так стає
     блоковим: це правило обіцяє зрізати довгу назву парку багатокрапкою, а на інлайновому боксі
     обіцянка тихо порожня. Тест UI-контракту перевіряє саме таку форму. */
  display:block;
  position:absolute;left:11px;right:11px;bottom:8px;pointer-events:none;
  font-family:"JetBrains Mono",monospace;
  font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .4s var(--sn-ease);
}
.sn-thumb.is-hot .sn-cap,.sn-thumb.is-active .sn-cap{opacity:1;transform:translateY(0)}

/* ── rail: the wave, once JavaScript is driving ────────────────────────────────────────────── */
/* NOTHING ON THE CARD'S PATH MAY CLIP. Not overflow, not clip-path, not a mask — the whole point
   is that a card leaves the glass bar top and bottom. `overflow-x:clip` with `overflow-y:visible`
   collapses to clipping BOTH axes in several browsers, which is exactly how this design gets
   rendered as a rectangle. Soft edges are done per-card in the script instead, by opacity.
   НІЩО НА ШЛЯХУ КАРТКИ НЕ СМІЄ ОБРІЗАТИ. Ні overflow, ні clip-path, ні маска — увесь сенс у тому,
   що картка виходить за скляну панель згори і знизу. `overflow-x:clip` поруч із
   `overflow-y:visible` у кількох браузерах схлопується в обрізання ОБОХ осей — саме так цей дизайн
   і перетворюється на прямокутник. Мʼякі краї натомість робить скрипт покартково, прозорістю. */
.sn-hero.is-live .sn-rail{height:var(--rail-h);padding:0;touch-action:pan-y;cursor:grab;user-select:none;
  -webkit-tap-highlight-color:transparent}
.sn-hero.is-live .sn-rail.is-dragging{cursor:grabbing}
.sn-hero.is-live .sn-view{position:absolute;inset:0;overflow:visible}
.sn-hero.is-live .sn-contour{display:block;position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sn-hero.is-live .sn-contour path{fill:none;stroke:url(#snFade);stroke-width:1}
.sn-hero.is-live .sn-track{position:absolute;inset:0;display:block;overflow:visible;gap:0}
.sn-hero.is-live .sn-thumb{
  position:absolute;left:0;top:50%;flex:none;
  width:var(--thumb-w);height:var(--thumb-h);margin-top:calc(var(--thumb-h) / -2);
  will-change:transform;transform-origin:50% 50%;cursor:inherit;
}

/* ── responsive ────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .sn-hero{--thumb-w:140px;--thumb-h:88px;--rail-h:110px}
  .sn-stage{aspect-ratio:16/10}
  .sn-copy{max-width:84%}
  .sn-meta{display:none}
}
@media (max-width:640px){
  .sn-hero{--thumb-w:112px;--thumb-h:70px;--rail-h:95px}
  .sn-stage{aspect-ratio:4/5;min-height:0;border-radius:var(--r-md)}
  .sn-copy{max-width:100%}
  .sn-cta{padding:13px 16px}   /* tap target ≥ 44px (Apple) / зона тапу ≥ 44px (Apple) */
}

/* The wave, the drift and the Ken Burns are motion for its own sake; the slider still works
   without any of them. The script reads the same query and simply stops moving.
   Хвиля, дрейф і Ken Burns — рух заради руху; слайдер працює і без них. Скрипт читає той самий
   запит і просто перестає рухати. */
@media (prefers-reduced-motion:reduce){
  .sn-hero.is-live .sn-layer.is-on img{animation:none}
  .sn-copy.is-in .sn-mask > *,
  .sn-copy.is-in .sn-lede,
  .sn-copy.is-in .sn-cta{transition-duration:.01ms}
  .sn-layer{transition-duration:.01ms}
}