/* Explain: App-specific layout utilities (section padding, hero scrims, animations). */
.section-pad {
    padding-block: clamp(5rem, 10vw, 8.5rem);
}

.hero-media {
    animation: slowZoom 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Fondu au blanc par-dessus les photos plein écran (héros, bandeau CTA) :
   la photo se dissout dans le fond crème, les titres foncés restent lisibles. */
.hero-scrim {
    background:
        linear-gradient(to top, var(--background-color) 0%, rgba(250, 246, 239, 0.94) 30%, rgba(250, 246, 239, 0.52) 62%, rgba(250, 246, 239, 0) 100%),
        linear-gradient(to right, rgba(250, 246, 239, 0.9) 0%, rgba(250, 246, 239, 0) 66%);
}

.cta-scrim {
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.82) 0%, rgba(250, 246, 239, 0.9) 55%, rgba(250, 246, 239, 0.97) 100%);
}

.booking-scrim {
    background:
        linear-gradient(to top, var(--background-color) 0%, rgba(250, 246, 239, 0.95) 40%, rgba(250, 246, 239, 0.8) 75%, rgba(250, 246, 239, 0.55) 100%);
}

.scroll-cue {
    width: 1px;
    height: 3.5rem;
    background: linear-gradient(to bottom, var(--primary-color), transparent);
    animation: cuePulse 2.2s ease-in-out infinite;
}

.vertical-note {
    writing-mode: vertical-rl;
}

@keyframes slowZoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@keyframes cuePulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}