.hero {
    position: relative;
    height: 100vh;
    min-height: 640px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    overflow: hidden;

    /* lighter haze than before — the dark gradient is here only to
       keep the headline readable, not to veil the photograph */
    background:
        linear-gradient(
            180deg,
            rgba(15, 37, 47, 0.13) 0%,
            rgba(15, 37, 47, 0.02) 38%,
            rgba(15, 37, 47, 0.3) 100%
        ),
        url("../images/hero.jpg");

    /* subtler crop: a touch less zoom, anchored a little higher so
       more of the mountains and coastline show, sea still centered */
    background-size: 104%;
    background-position: center 62%;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;

    /* quiet warm glow, low corner — echoes the gold accent used
       throughout the site so the hero stays tied to the rest of the
       page. Pulled back further than before so the water and
       mountains keep their real color. */
    background-image:
        radial-gradient(ellipse at 72% 88%, rgba(255, 244, 220, 0.09), transparent 58%),
        radial-gradient(ellipse at 50% 100%, rgba(15, 37, 47, 0.18), transparent 60%);

    mix-blend-mode: screen;
}

/* a small, localized dark pool behind the headline only — legibility
   help that's targeted rather than a haze laid over the whole photo */
.hero-content::before{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:min(720px, 90vw);height:340px;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse, rgba(15,37,47,0.22), transparent 72%);
    z-index:-1;
    pointer-events:none;
}

.hero-depth {
    display: none;
}

.hero-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    width: 100%;
    height: 90px;

    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 24px;
}

/* ---------- QUIET LOAD-IN ----------
   The hero is above the fold, so scroll-reveal.js never sees it.
   A one-time, gently staggered rise on page load instead — slow and
   deliberate, not a "landing page" pop-in. */
.hero-content h1,
.hero-content p,
.hero-content .btn-explore {
    opacity: 0;
    animation: heroRise 1.1s var(--ease-out) forwards;
}
.hero-content h1{ animation-delay: .15s; }
.hero-content p{ animation-delay: .35s; }
.hero-content .btn-explore{ animation-delay: .55s; }

@keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-content h1,
    .hero-content p,
    .hero-content .btn-explore {
        animation: none;
        opacity: 1;
    }
}

.hero-content h1 {
    font-size: clamp(40px, 7vw, 84px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
    /* slightly stronger than before, to compensate for the lighter
       overlay and keep contrast against a brighter sky */
    text-shadow: 0 2px 34px rgba(0, 0, 0, 0.32);
}

.hero-content p {
    margin-top: 24px;
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.22);
}

/* ---------- CTA ----------
   Warm frosted glass instead of a flat white block — reads as part
   of the Mediterranean light rather than a UI element dropped on
   top of the photo. */
.btn-explore {
    display: inline-block;

    margin-top: 44px;

    padding: 18px 40px;

    background: rgba(251, 248, 243, 0.82);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--navy);

    border-radius: 999px;

    font-size: 12.5px;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    transition:
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    box-shadow: 0 6px 22px rgba(15, 37, 47, 0.16);
}
.btn-explore:hover {
    background: rgba(241, 217, 168, 0.88);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 26px rgba(15, 37, 47, 0.2);
}
.btn-explore:active {
    background: rgba(241, 217, 168, 0.95);
}

@media (max-width: 640px) {
    .hero-content p { padding: 0 6px; }
    .btn-explore { padding: 16px 32px; margin-top: 36px; }
}

/* ---------- SCROLL CUE ----------
   Small, editorial, bottom-right. A slow breathing fade rather than
   a bounce — a whisper that there's more below, not a nudge. */
.hero-scroll-cue{
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    animation: scrollCueBreathe 3.2s ease-in-out infinite;
    pointer-events: none;
}
.hero-scroll-cue .line{
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.4);
}
@keyframes scrollCueBreathe{
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.8; }
}
@media (max-width: 640px){
    .hero-scroll-cue{ right: 22px; bottom: 26px; }
    .hero-scroll-cue .line{ height: 22px; }
}
@media (prefers-reduced-motion: reduce){
    .hero-scroll-cue{ animation: none; opacity: 0.55; }
}