/* ─── Base ───────────────────────────────── */
html,
body {
    height: 100%;
}

/* ─── Scroll snap ────────────────────────── */
.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ─── Hide scrollbar ─────────────────────── */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── Hero glasses pattern ───────────────── */
/* glasses-pattern.svg is a 167×171 tile: the Raja Optik glasses mark at its
   natural 167×71, butted edge to edge across the row, rows 85.5px apart, every
   other row shifted 112px across. Those numbers are measured off the reference
   artwork, so background-size must stay 167px 171px or the mark distorts.

   Anchored to the bottom so the last row is always complete and the clipping
   happens at the top edge, behind the status bar — exactly as in the design,
   at any viewport height. */
.glasses-pattern {
    background-image: url('glasses-pattern.svg');
    background-repeat: repeat;
    background-size: 167px 171px;
    background-position: center bottom;
}

/* ─── CTA ────────────────────────────────── */
/* Every button in the design is the same pill: 12px Prompt Medium, 22px of
   horizontal padding, 34px tall. Filled variants carry a transparent border so
   they line up with the outlined ones. Colours stay in the markup. */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6875rem 1.375rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.scroll-cue {
    animation: scroll-cue 2.4s ease-in-out infinite;
}

@keyframes scroll-cue {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* ─── Entrance ───────────────────────────── */
@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-rise {
    animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-rise-delay-1 {
    animation-delay: 0.12s;
}

.hero-rise-delay-2 {
    animation-delay: 0.24s;
}

.hero-rise-delay-3 {
    animation-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {

    .hero-rise,
    .scroll-cue,
    .pill {
        animation: none;
        transition: none;
    }
}