/* A layered Mediterranean scene. All copy stays in an independent foreground. */
.campaign-hero{background:#07568e;min-height:330px}
.sea-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:-1;background:#07568e}
.sea-plane{position:absolute;top:50%;transform:translateY(-50%);background:url('/assets/offers/mediterranean-living-sea-v2.png') center/100% 100% no-repeat}
.sea-plane:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#032d4a24,transparent 62%);pointer-events:none}
.sea-sunlight{position:absolute;inset:0;background:radial-gradient(ellipse at 73% 52%,#ffdc9a35,transparent 27%);mix-blend-mode:screen;opacity:.65}
.sea-sun-window{position:absolute;inset:0 0 38% 0;overflow:hidden}
.sea-sun{position:absolute;left:73%;top:83%;width:3.4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffdf0,#fff1bb 55%,#ffd08b);box-shadow:0 0 18px 6px #fff0b37a,0 0 70px 32px #ffd8a52b;transform:translate(-50%,-50%)}
.sea-rays{position:absolute;left:73%;top:52%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 12deg,#fff0bc00 0deg,#fff0bc10 8deg,#fff0bc00 19deg,#fff0bc00 38deg);border-radius:50%;mask-image:radial-gradient(circle,#0000 4%,#000a 20%,#0000 67%);mix-blend-mode:screen}
.sea-water{position:absolute;inset:0;pointer-events:none}
.sea-boat-track{position:absolute;left:78%;top:72.6%;width:2.8%;aspect-ratio:.72;transform:translate(-50%,-100%)}
.sea-boat{position:absolute;inset:0;transform-origin:50% 95%;filter:drop-shadow(0 1px 1px #00456880)}
.sea-boat svg{width:100%;height:100%;overflow:visible}
.sea-boat:after{content:"";position:absolute;top:99%;left:14%;width:70%;height:70%;background:linear-gradient(#e3f8ff65,#d9f5ff00);clip-path:polygon(48% 0,90% 75%,58% 100%,15% 80%);transform:scaleY(.75);filter:blur(2px);opacity:.5}
.sea-wake{position:absolute;top:94%;left:-55%;width:210%;height:11%;border-bottom:1px solid #e3f7ff85;border-radius:50%;transform:rotate(-4deg);opacity:.7}
.sea-horizon-haze{position:absolute;left:60%;top:57%;width:35%;height:7%;background:radial-gradient(ellipse,#ffefc32e,transparent 70%);mix-blend-mode:screen}
.campaign-copy{z-index:2;text-shadow:0 2px 14px #00395b26}
@keyframes seaSunrise{from{top:100%;transform:translate(-50%,20%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes seaLight{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes seaSail{0%,100%{transform:translate(-50%,-100%) translateX(0)}50%{transform:translate(-50%,-100%) translateX(-115%)}}
@keyframes seaBoatRock{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(2px)}}
@keyframes seaWake{0%,100%{opacity:.35;transform:rotate(-4deg) scaleX(.85)}50%{opacity:.7;transform:rotate(-3deg) scaleX(1.12)}}
@keyframes seaRays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(24deg)}}
@media(prefers-reduced-motion:no-preference){.sea-sun{animation:seaSunrise 8s cubic-bezier(.22,.6,.3,1) both}.sea-sunlight{animation:seaLight 14s ease-in-out infinite}.sea-rays{animation:seaRays 65s linear infinite alternate}.sea-boat-track{animation:seaSail 38s ease-in-out infinite}.sea-boat{animation:seaBoatRock 4.2s ease-in-out infinite}.sea-wake{animation:seaWake 3s ease-in-out infinite}}
.sea-paused .sea-sun,.sea-paused .sea-sunlight,.sea-paused .sea-rays,.sea-paused .sea-boat-track,.sea-paused .sea-boat,.sea-paused .sea-wake{animation-play-state:paused}
@media(max-width:650px){.campaign-hero{min-height:300px;padding:30px 24px;background:#07568e}.sea-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#023555a6,#02355542 70%);z-index:1}.campaign-hero h1{font-size:clamp(26px,6.7vw,36px)}.sea-boat-track{width:3.2%}}

.sea-motion-toggle{position:absolute;z-index:3;right:16px;bottom:14px;width:34px;height:34px;padding:9px;border:1px solid #ffffff45;border-radius:50%;background:#03466c50;color:#fff;backdrop-filter:blur(8px);display:grid;place-items:center}
.sea-motion-toggle:hover{background:#03466c90}.sea-motion-toggle svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}.sea-play-icon{display:none}.sea-motion-toggle[aria-pressed=true] .sea-pause-icon{display:none}.sea-motion-toggle[aria-pressed=true] .sea-play-icon{display:block}
@media(prefers-reduced-motion:reduce){.sea-motion-toggle{display:none}}

/* Photographic yachts and independent olive branches. */
.sea-boat-track{aspect-ratio:2/3;width:3.2%}.sea-boat{filter:drop-shadow(0 1px 1px #00597760)}
.sea-boat img{width:100%;height:100%;object-fit:contain;display:block}
.sea-boat:after{top:87%;left:28%;width:48%;height:45%;opacity:.38}
.sea-wake{top:85%;left:-10%;width:125%;height:8%;border-bottom:1px solid #e7fbff90}
.sea-yacht-1{left:80%;top:77%;width:3.4%}
.sea-yacht-2{left:68%;top:85%;width:3%;opacity:.93}
.sea-yacht-3{left:77%;top:96%;width:3.8%}
.sea-yacht-4{left:64%;top:72%;width:2%;opacity:.83}
.sea-yacht-2 .sea-boat img{transform:scaleX(-1)}.sea-yacht-4 .sea-boat img{transform:scaleX(-1)}
.sea-foliage{position:absolute;z-index:2;top:-2%;right:-1%;width:24%;aspect-ratio:1;transform-origin:100% 0;filter:drop-shadow(0 1px 1px #33562c20)}
.sea-foliage img{width:100%;height:100%;object-fit:contain;object-position:top right;display:block}
.sea-rays{background:repeating-conic-gradient(from 12deg,#fff0bc00 0deg,#fff0bc20 8deg,#fff0bc00 19deg,#fff0bc00 38deg);width:40%}
@keyframes seaFoliage{0%,100%{transform:rotate(-2deg) skewX(-.5deg)}45%{transform:rotate(3deg) skewX(1.2deg)}70%{transform:rotate(1deg) skewX(-.8deg)}}
@keyframes seaSailReverse{0%,100%{transform:translate(-50%,-100%) translateX(-65%)}50%{transform:translate(-50%,-100%) translateX(55%)}}
@media(prefers-reduced-motion:no-preference){.sea-foliage{animation:seaFoliage 6.5s ease-in-out infinite}.sea-yacht-2{animation:seaSailReverse 46s ease-in-out infinite;animation-delay:-12s}.sea-yacht-3{animation-duration:52s;animation-delay:-19s}.sea-yacht-4{animation:seaSailReverse 63s ease-in-out infinite;animation-delay:-32s}.sea-yacht-2 .sea-boat{animation-duration:3.7s;animation-delay:-1.4s}.sea-yacht-3 .sea-boat{animation-duration:4.6s;animation-delay:-2.7s}.sea-yacht-4 .sea-boat{animation-duration:3.4s;animation-delay:-.5s}}
.sea-paused .sea-foliage{animation-play-state:paused}
@media(max-width:650px){.sea-yacht-1{width:3.4%}.sea-yacht-2{width:3%}.sea-yacht-3{width:3.8%}.sea-yacht-4{width:2%}}

@media(max-width:650px){.sea-foliage{right:var(--sea-crop-right,0px);width:15%;top:-2%}}

/* Two passenger jets cross the sky at different distances. */
.sea-aircraft{position:absolute;z-index:1;pointer-events:none;width:88px;aspect-ratio:3/2;opacity:.96;will-change:transform}
.sea-aircraft img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px #154a6820)}
.sea-aircraft-near{left:64%;top:9%;--flight-start:-145px;--flight-end:420px}
.sea-aircraft-far{left:74%;top:28%;width:58px;opacity:.82;--flight-start:320px;--flight-end:-180px}
.sea-aircraft-far img{transform:scaleX(-1)}
@keyframes seaJetCruise{0%{transform:translate3d(var(--flight-start),8px,0);opacity:0}8%{opacity:.96}88%{opacity:.96}100%{transform:translate3d(var(--flight-end),-12px,0);opacity:0}}
@keyframes seaJetDistant{0%{transform:translate3d(var(--flight-start),-4px,0);opacity:0}10%{opacity:.8}88%{opacity:.8}100%{transform:translate3d(var(--flight-end),8px,0);opacity:0}}
@media(prefers-reduced-motion:no-preference){.sea-aircraft-near{animation:seaJetCruise 34s linear infinite;animation-delay:-9s}.sea-aircraft-far{animation:seaJetDistant 46s linear infinite;animation-delay:-26s}}
.sea-paused .sea-aircraft{animation-play-state:paused}
@media(max-width:650px){.sea-aircraft-near{left:64%;top:5%;width:64px;--flight-start:-160px;--flight-end:230px}.sea-aircraft-far{left:72%;top:27%;width:43px;--flight-start:150px;--flight-end:-200px}}
@media(prefers-reduced-motion:reduce){.sea-aircraft{will-change:auto}}

/* Mobile brand is part of the hero, leaving no separate header row. */
.campaign-mobile-logo{display:none}
@media(max-width:650px){
 .shell{padding-top:0}
 .top{display:none}
 .campaign-mobile-logo{display:block;width:56px;height:70px;object-fit:contain;border:1px solid #ffffffb3;border-radius:4px;background:transparent;box-shadow:none;margin:0 0 16px}
 .campaign-hero{padding-top:24px;padding-bottom:24px}
}