/* ==========================================================================
   Helados De la Casa — landing (loads after brand.css)
   ========================================================================== */

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 2rem;
    min-height: min(calc(100vh - 70px), 880px);
    min-height: min(calc(100svh - 70px), 880px);
    padding: 4rem clamp(1.25rem, 6vw, 6rem) 7rem;
    overflow: hidden;
}

/* The pot's balloon pattern, drifting upward like a sky full of launches */
.hero__sky {
    position: absolute;
    inset: 0;
    background-image: var(--pattern-light);
    background-size: 108px 72px;
    animation: rise 40s linear infinite;
    /* fade out behind the copy, and open a clearing around the balloon */
    -webkit-mask-image:
        linear-gradient(100deg, transparent 0%, transparent 30%, #000 70%),
        radial-gradient(circle at 74% 48%, transparent 0 17rem, #000 26rem);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(100deg, transparent 0%, transparent 30%, #000 70%),
        radial-gradient(circle at 74% 48%, transparent 0 17rem, #000 26rem);
            mask-composite: intersect;
    opacity: .6;
}
@keyframes rise { to { background-position: 0 -360px; } }

.hero__copy { position: relative; z-index: 1; max-width: 40rem; }

.hero__title {
    font-size: clamp(2.9rem, 6.4vw, 5.6rem);
    font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
    margin-bottom: 1.6rem;
}
.hero__title span { display: block; }
.hero__title em {
    font-style: italic;
    font-weight: 600;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    color: var(--gold-ink);
}

.hero__lede {
    max-width: 32rem;
    margin: 0 0 2.4rem;
    font-size: 1.15rem;
    font-weight: 300;
    color: color-mix(in srgb, var(--navy) 85%, transparent);
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }

/* ---------- The balloon: logo mark as a hot-air balloon, the pot as its basket ---------- */

.hero__balloon {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: clamp(300px, 44vw, 640px);
}

.balloon { display: block; width: 100%; height: auto; overflow: visible; }

/* every animated SVG group rotates/moves in viewBox coordinates */
.balloon g { transform-box: view-box; }

.balloon__sun { fill: var(--gold-soft); opacity: .75; }

.airship {
    transform-origin: 188px 84px;
    animation: sway 8s ease-in-out infinite;
}
/* the pot swings a beat behind the envelope, like a real basket */
.payload {
    transform-origin: 188px 107px;
    animation: swing 8s ease-in-out -1.2s infinite;
}

.balloon__ml {
    font-family: var(--sans);
    font-size: 3.4px;
    font-weight: 400;
    letter-spacing: .12px;
    fill: #fff;
}

.far { opacity: .45; animation: float-far 9s ease-in-out infinite; }
.far--2 { opacity: .3; animation-duration: 12s; animation-delay: -4s; }
@keyframes float-far { 50% { transform: translate(3px, -4px); } }

.cloud--back { animation: drift 22s ease-in-out infinite alternate; opacity: .9; }
.cloud--front { animation: drift 16s ease-in-out -6s infinite alternate-reverse; }

@keyframes sway {
    0%, 100% { transform: translateY(0) rotate(-2.2deg); }
    50%      { transform: translateY(-5px) rotate(2.2deg); }
}
@keyframes swing {
    0%, 100% { transform: rotate(2.5deg); }
    50%      { transform: rotate(-2.5deg); }
}
@keyframes drift {
    from { transform: translateX(-8px); }
    to   { transform: translateX(10px); }
}

/* Scrolling down the hero lets the balloon climb away */
@supports (animation-timeline: scroll()) {
    .balloon-lift {
        animation: lift linear both;
        animation-timeline: scroll(root);
        animation-range: 0 90vh;
    }
    @keyframes lift {
        to { transform: translateY(-22%) scale(.9); }
    }
}

/* ---------- Flavors (lids) ---------- */

.flavors {
    position: relative;
    padding: 4rem clamp(1.25rem, 5vw, 5rem) 6rem;
    background-color: var(--navy);
    background-image: var(--pattern-navy);
    background-size: 144px 96px;
    color: var(--cream);
}

.wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(40px, 6vw, 90px);
    fill: var(--navy);
    pointer-events: none;
}
.wave--top { top: 1px; transform: translateY(-100%); }
.wave--bottom { bottom: 1px; transform: translateY(100%); }

.section-head { max-width: 48rem; margin: 0 auto 4rem; text-align: center; }
.section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: .8rem; }
.section-head p:last-child { margin: 0; font-weight: 300; opacity: .8; }

.lids {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1120px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 3.5rem 2.5rem;
}

.lid-card {
    text-align: center;
    opacity: 0;
    transform: translateY(40px) rotate(10deg);
    transition: opacity .8s var(--ease-out), transform .9s var(--ease-spring);
    transition-delay: calc(var(--i) * 80ms);
}
.lid-card.is-in { opacity: 1; transform: none; }

.lid {
    position: relative;
    width: min(220px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 7px #e7ebf0,
        0 0 0 8px rgba(255, 255, 255, .25),
        0 28px 40px -18px rgba(0, 0, 0, .6);
    transition: transform .55s var(--ease-spring), box-shadow .4s;
}
.lid-card:hover .lid {
    transform: translateY(-10px) rotate(-8deg);
    box-shadow:
        0 0 0 7px #e7ebf0,
        0 0 0 11px var(--tint),
        0 38px 46px -20px rgba(0, 0, 0, .7);
}

.lid__logo { width: 50%; margin: 9% auto 0; }

.lid__band {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34%;
    background: var(--tint, var(--navy));
    /* keeps the white type legible on the pale bands (vainilla, limón, stracciatella) */
    text-shadow: 0 1px 2px color-mix(in srgb, var(--tint, var(--navy)) 40%, rgba(0, 0, 0, .45));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 6%;
}
.lid__band svg {
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    height: 26%;
    transform: translateY(-100%);
    fill: var(--tint, var(--navy));
}
.lid__band strong {
    font-family: var(--serif);
    font-variation-settings: "SOFT" 100, "WONK" 0;
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    line-height: 1.1;
    color: #fff;
}
.lid__band small {
    font-size: .62rem;
    font-weight: 300;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .85);
}

.lid-card__note {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 1.6rem 0 0;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cream) 78%, transparent);
}
.dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* ---------- La casa ---------- */

.house {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(8rem, 14vw, 11rem) clamp(1.25rem, 5vw, 4rem) 6rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.house.is-in { opacity: 1; transform: none; }

/* the logo sits on a lid-like disc ringed with the pot pattern */
.house__logo {
    position: relative;
    aspect-ratio: 1;
    width: min(440px, 100%);
    justify-self: center;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-image: var(--pattern-light);
    background-size: 108px 72px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(181, 189, 199, .5);
}
.house__logo::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 0 0 10px var(--paper), 0 20px 50px -20px rgba(17, 40, 74, .35);
}
.house__logo img { position: relative; width: 52%; }

.house__copy h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin-bottom: 2.6rem; }

.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; }
.pillars li {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    gap: 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid color-mix(in srgb, var(--mist) 70%, transparent);
}
.pillars__num {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gold);
}
.pillars h3 { font-size: 1.4rem; margin-bottom: .35rem; }
.pillars p { margin: 0; font-weight: 300; }

/* ---------- Dónde comprar ---------- */

.find { padding: 2rem clamp(1.25rem, 5vw, 4rem) 7rem; }

.find__card {
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5rem);
    border-radius: 36px;
    background: var(--gold-soft);
    text-align: center;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-spring);
}
.find__card.is-in { opacity: 1; transform: none; }
.find__card > *:not(.find__balloons) { position: relative; }
.find__card .eyebrow--gold { color: var(--gold-ink); }
.find__card h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; margin: 0 auto 1rem; }
.find__card p:not(.eyebrow) { max-width: 34rem; margin: 0 auto 2.2rem; font-weight: 300; }

.find__balloons img {
    position: absolute;
    bottom: -120px;
    width: 64px;
    opacity: .9;
    animation: launch 14s linear infinite;
}
.find__balloons img:nth-child(1) { left: 8%; width: 70px; animation-delay: 0s; }
.find__balloons img:nth-child(2) { right: 10%; width: 48px; animation-delay: -5s; animation-duration: 17s; }
.find__balloons img:nth-child(3) { left: 78%; width: 34px; animation-delay: -10s; animation-duration: 20s; opacity: .55; }
@keyframes launch {
    0%   { transform: translate(0, 0) rotate(-4deg); }
    50%  { transform: translate(18px, -260px) rotate(4deg); }
    100% { transform: translate(-6px, -560px) rotate(-3deg); }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 3rem;
        min-height: 0;
    }
    .hero__copy { margin: 0 auto; }
    .hero__lede { margin-left: auto; margin-right: auto; }
    .hero__actions { justify-content: center; }
    .hero__balloon { width: min(420px, 92vw); order: -1; }
    .hero__sky {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
        -webkit-mask-composite: source-over;
                mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
                mask-composite: add;
    }
    .house { grid-template-columns: 1fr; }
    .house__logo { width: min(320px, 80%); }
}
@media (max-width: 720px) {
    .lids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.8rem 1.25rem; }
    .lid-card__note { font-size: .66rem; letter-spacing: .14em; }
}