@font-face {
    font-family: 'FranHandwrite';
    src: url('fonts/FranHandwrite-Regular.woff2') format('woff2'),
        url('fonts/FranHandwrite-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ─── 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;
}

.down-oval {
    font-family: 'FranHandwrite', cursive;
    position: relative;
    display: inline-block;
    padding: 0 0.4em;
    z-index: 1;
    transform: rotate(-2deg);
}

.down-oval::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: 150%;
    height: 150%;
    background: url('brush-circle.svg') no-repeat center;
    background-size: contain;
    z-index: -1;
    pointer-events: none;
}

.down-oval:hover::after {
    filter: brightness(0) invert(1);
}

.down-oval-white::after {
    filter: brightness(0) invert(1);
    width: 115%;
    height: 100%;
}

.down-oval-white:hover::after {
    filter: none;
}

/* ─── Gradient overlays ──────────────────── */
.hero-img-gradient {
    background: linear-gradient(to bottom,
            transparent 0%,
            transparent 0%,
            rgba(0, 0, 0, 0.80) 72%,
            rgba(0, 0, 0, 0.95) 100%);
}

.location-gradient {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.68) 0%,
            transparent 38%,
            transparent 52%,
            rgba(0, 0, 0, 0.60) 100%);
}

.gelato-gradient {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.10) 40%,
            transparent 55%,
            rgba(0, 0, 0, 0.75) 80%,
            rgba(0, 0, 0, 1.00) 100%);
}

/* ─── Slider ─────────────────────────────── */
.slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-out;
}

.slide {
    flex: 0 0 100%;
    height: 100%;
}

/* ─── Slider dots ────────────────────────── */
.dot-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.dot-light.active-light {
    width: 24px;
    border-radius: 4px;
    background-color: #fff;
}

/* ─── Daisy button ───────────────────────── */
svg {
    transition: transform 0.3s ease;
}

button:hover svg {
    transform: scale(1.05);
}

@keyframes daisy-spin {
    to {
        transform: rotate(360deg);
    }
}

.daisy-btn:hover {
    animation: daisy-spin 10s linear infinite;
}