/* Homepage atmosphere: original photo mosaic and a manual video gallery. */
.home-atmosphere { scroll-margin-top: 90px; overflow: clip; }
.home-atmosphere-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 30px;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.home-atmosphere-head .sec-head { min-width: 0; }
.home-atmosphere [data-atmosphere-panel][hidden] { display: none; }
.atmosphere-video-track {
  --video-gap: clamp(14px, 1.6vw, 22px);
  position: relative;
  display: flex;
  gap: var(--video-gap);
  padding: 6px var(--gut) 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--gut);
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.atmosphere-video-track::-webkit-scrollbar { display: none; }
.atmosphere-video-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.atmosphere-video-card {
  position: relative;
  flex: 0 0 clamp(220px, 78vw, 300px);
  min-width: 0;
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  isolation: isolate;
}
.atmosphere-video-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
}
.atmosphere-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  color: #fff;
  background: linear-gradient(180deg, rgba(6, 17, 27, .1), transparent 40%, rgba(6, 17, 27, .18));
  cursor: inherit;
  touch-action: auto;
}
/* Leave the native seek, sound and fullscreen controls available after launch. */
.atmosphere-video-card.has-started .atmosphere-video-play { bottom: 58px; }
.atmosphere-video-play-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(6, 17, 27, .3);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  transition: background .25s, transform .25s, opacity .25s;
}
.atmosphere-video-play svg { width: 22px; height: 22px; }
.atmosphere-video-pause-symbol { display: none; }
.atmosphere-video-card.is-playing .atmosphere-video-play-symbol { display: none; }
.atmosphere-video-card.is-playing .atmosphere-video-pause-symbol { display: block; }
.atmosphere-video-card.is-playing .atmosphere-video-play { background: none; }
.atmosphere-video-card.is-playing .atmosphere-video-play-icon { opacity: 0; }
.atmosphere-video-play:focus-visible .atmosphere-video-play-icon { opacity: 1; background: var(--accent); }
@media (hover: hover) {
  .atmosphere-video-play:hover .atmosphere-video-play-icon { opacity: 1; background: rgba(6, 17, 27, .58); transform: scale(1.06); }
}
.atmosphere-video-track.is-dragging .atmosphere-video-play-icon { opacity: 0; }
.atmosphere-video-track.is-dragging * { cursor: grabbing; }
.atmosphere-video-error {
  position: absolute;
  bottom: 76px;
  left: 16px;
  right: 16px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: #fff;
  background: rgba(6, 17, 27, .85);
  font-size: .875rem;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}
.atmosphere-video-error[hidden] { display: none; }
.home-atmosphere button:focus-visible,
.atmosphere-video-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-atmosphere .atmosphere-video-play:focus-visible { outline-offset: -5px; border-radius: var(--r-lg); }
@media (max-width: 760px) {
  .home-atmosphere-head { flex-direction: column; align-items: flex-start; }
}
[data-motion="off"] .home-atmosphere * { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .home-atmosphere * { transition: none; }
}