/* ═══════════════════════════════════════════════════════════
   home-variant-a.css — Variant A: snap scroll + video
   ═══════════════════════════════════════════════════════════ */

/* Body: prevent native scroll (snap viewport handles it) */
body.home-page--snap {
    overflow: hidden;
}

/* ─── Snap Viewport — one scrollable container ───────────── */
.home-snap {
    --snap-top: 78px;
    position: fixed;
    top: var(--snap-top);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.home-snap__track {
    width: 100%;
}

/* Hero & Video — each fills one screen */
.home-snap__page {
    width: 100%;
    height: calc(100vh - var(--snap-top));
    height: calc(100dvh - var(--snap-top));
    overflow: hidden;
    position: relative;
}

/* Content page — natural height, flows normally */
.home-snap__page--content {
    height: auto;
    overflow: visible;
}

/* ─── Dot Navigation ──────────────────────────────────────── */
.home-dots {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 100;
}

.home-dots__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #999;
    background: transparent;
    cursor: pointer;
    padding: 0;
    background-clip: content-box;
    box-sizing: border-box;
    border-width: 0;
    background-image: radial-gradient(circle, #999 4px, transparent 4px);
    transition: background-image .3s;
}

.home-dots__dot--active {
    background-image: radial-gradient(circle, #222 5px, transparent 5px);
}

/* ─── Scroll hint arrow ──────────────────────────────────── */
.home-hero__scroll-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    animation: home-bounce 2s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes home-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════════════════
   Responsive: Variant A
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
    .home-snap { --snap-top: 60px; }
    .home-dots { right: 12px; }
    .home-hero__scroll-hint { display: none; }
}

@media (max-width: 600px) {
    .home-dots { right: 8px; }
    .home-dots__dot { width: 24px; height: 24px; }
}

@media (max-width: 768px) {
    .home-snap { --snap-top: 86px; }
}