/* Phase 3: design components + motion. Animates opacity/transform only. */
:root{--rv:28px;--ease:cubic-bezier(.22,.8,.3,1)}
html[data-motion=subtle]{--rv:10px}
html{scroll-padding-top:96px}
@view-transition{navigation:auto}

/* ---- header ---- */
.site-header{transition:background-color .3s,box-shadow .3s;border-bottom:2px solid transparent}
.site-header.scrolled{box-shadow:0 6px 24px rgba(23,58,112,.14);border-bottom-color:var(--gold)}
.site-header.scrolled .navbar-brand img{height:52px}.navbar-brand img{transition:height .3s var(--ease)}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.25rem;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}.nav-link.active{color:var(--royal);font-weight:600}
.dropdown-toggle::after{display:none}
@media(min-width:992px){.dropdown-menu{display:block;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s var(--ease),visibility .25s;border:1px solid var(--champ);border-top:3px solid var(--gold);border-radius:.6rem;box-shadow:var(--shadow);margin-top:0}
.dropdown-menu.show,.nav-item.dropdown:hover>.dropdown-menu{opacity:1;visibility:visible;transform:none}}
.dropdown-item{padding:.5rem 1.1rem}.dropdown-item:hover,.dropdown-item:focus{background:var(--champ);color:var(--royal)}
@media(max-width:991.98px){.navbar-collapse{border-top:1px solid var(--champ)}.navbar-collapse.show{animation:slidein .32s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}.dropdown-menu{border:0;background:var(--ivory)}}

/* ---- hero slideshow ---- */
.hero{background:var(--royal);min-height:min(88vh,720px);display:flex;align-items:center}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-slide.on{opacity:1}.hero-slide img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
html:not([data-motion=off]) .hero-slide.on img{animation:kb 11s ease-out both}
html[data-motion=subtle] .hero-slide.on img{animation:none}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(23,58,112,.82) 0%,rgba(23,58,112,.5) 50%,rgba(73,48,100,.25) 100%)}
.hero>.container{z-index:2}.hero::after{z-index:2}
.hero-copy .gold-rule{display:block;width:84px;height:3px;background:linear-gradient(90deg,var(--gold),var(--saffron));margin:1rem 0;transform-origin:left}
.js .hero-copy>*{opacity:0;animation:heroin .9s var(--ease) forwards}
.js .hero-copy>:nth-child(1){animation-delay:.1s}.js .hero-copy>:nth-child(2){animation-delay:.3s}.js .hero-copy>:nth-child(3){animation-delay:.5s}.js .hero-copy>:nth-child(4){animation-delay:.7s}
@keyframes heroin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero-copy .gold-rule{animation:rule 1s var(--ease) .4s forwards;transform:scaleX(0);opacity:1}@keyframes rule{to{transform:scaleX(1)}}
.hero-ctrl{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:4;display:flex;gap:.5rem;align-items:center;background:rgba(23,58,112,.55);padding:.3rem .7rem;border-radius:2rem}
.hero-ctrl button{border:0;background:rgba(255,255,255,.5);width:11px;height:11px;border-radius:50%;padding:0;transition:transform .25s,background .25s}
.hero-ctrl button[aria-current=true]{background:var(--saffron);transform:scale(1.35)}
.hero-ctrl .pp{width:auto;height:auto;background:none;color:#fff;font-size:.85rem;padding:0 .2rem;border-radius:0}
.float-deco{position:absolute;z-index:1;color:var(--champ);opacity:.35;font-size:1.6rem;pointer-events:none;animation:floaty 7s ease-in-out infinite}
.float-deco.b{animation-delay:-3s;font-size:1.1rem}.float-deco.c{animation-delay:-5s}
@keyframes floaty{50%{transform:translateY(-14px) rotate(8deg)}}
.cloud{position:absolute;z-index:1;width:360px;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);animation:drift 60s linear infinite;pointer-events:none}
.cloud.b{top:55%;animation-duration:85s;animation-delay:-30s;opacity:.7}@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.paused,.paused *{animation-play-state:paused!important}
.hero-btns .btn{transition:transform .25s var(--ease),box-shadow .25s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(23,58,112,.2)}

/* ---- scroll reveal (content stays visible without JS) ---- */
.js [data-reveal]{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal=up]{transform:translateY(var(--rv))}.js [data-reveal=left]{transform:translateX(calc(var(--rv)*-1.4))}
.js [data-reveal=right]{transform:translateX(calc(var(--rv)*1.4))}.js [data-reveal=scale]{transform:scale(.94)}
.js [data-reveal].is-in{opacity:1;transform:none}
html[data-motion=off] [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.sec-title{position:relative;padding-bottom:.7rem}.sec-title::after{content:"";position:absolute;left:0;bottom:0;width:70px;height:3px;background:linear-gradient(90deg,var(--gold),var(--saffron),var(--gold));background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .2s}
.is-in .sec-title::after,.sec-title.is-in::after,html:not(.js) .sec-title::after{transform:scaleX(1)}
.sec-title.is-in::after{animation:shimmer 2.4s ease 1s 1}@keyframes shimmer{to{background-position:-200% 0}}

/* ---- destination cards ---- */
.dest-card{position:relative;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow);background:#fff;border:2px solid transparent;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.dest-card:hover,.dest-card:focus-within{transform:translateY(-6px);box-shadow:0 16px 34px rgba(23,58,112,.2);border-color:var(--gold)}
.dest-link{display:block;position:relative;color:#fff;text-decoration:none;aspect-ratio:4/5}
.dest-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;transition:transform .8s var(--ease)}
.dest-card:hover .dest-img,.dest-card:focus-within .dest-img{transform:scale(1.08)}
.dest-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,58,112,.92) 0%,rgba(23,58,112,.35) 45%,transparent 70%)}
.dest-body{position:absolute;left:0;right:0;bottom:0;padding:1rem;display:flex;flex-direction:column;gap:.15rem}
.dest-name{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.55rem;line-height:1.1}
.dest-desc{font-size:.9rem;opacity:.92;max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.dest-go{align-self:flex-start;margin-top:.5rem;background:var(--gold);color:#fff;padding:.3rem .9rem;border-radius:2rem;font-weight:600;font-size:.9rem;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease)}
.dest-card:hover .dest-go,.dest-card:focus-within .dest-go{opacity:1;transform:none}.dest-card:hover .dest-desc,.dest-card:focus-within .dest-desc{max-height:5rem}
.dest-link:focus-visible{outline:3px solid var(--saffron);outline-offset:-3px}
@media(hover:none){.dest-go{opacity:1;transform:none}.dest-desc{max-height:5rem}}

/* ---- carousel ---- */
.cx{position:relative}.cx-track{scroll-padding-inline:.25rem;display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.5rem .25rem 1rem;scrollbar-width:thin;overscroll-behavior-x:contain}
.cx-track:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.cx-item{flex:0 0 78%;scroll-snap-align:start}
@media(min-width:576px){.cx-item{flex-basis:44%}}@media(min-width:992px){.cx-item{flex-basis:calc(25% - .85rem)}.cx.wide .cx-item{flex-basis:calc(33.33% - .75rem)}}
.cx-btn{position:absolute;top:42%;z-index:3;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);background:#fff;color:var(--royal);font-size:1.5rem;line-height:1;box-shadow:var(--shadow);transition:transform .25s,background .25s}
.cx-btn:hover{background:var(--gold);color:#fff;transform:scale(1.08)}.cx-btn.prev{left:-6px}.cx-btn.next{right:-6px}.cx-btn[disabled]{opacity:.35}
@media(max-width:575.98px){.cx-btn{width:38px;height:38px}}

/* ---- cards: fleet / packages ---- */
.veh-card{transition:transform .4s var(--ease),box-shadow .4s;border:2px solid transparent;height:100%}
.veh-card:hover,.veh-card:focus-within{transform:translateY(-6px);box-shadow:0 16px 34px rgba(23,58,112,.18);border-color:var(--gold)}
.veh-card .card-img{transition:transform .7s var(--ease)}.veh-card:hover .card-img{transform:scale(1.05)}.img-wrap{overflow:hidden}
.route-svg{width:100%;max-height:120px}.route-svg path{stroke:var(--gold);stroke-width:3;fill:none;stroke-dasharray:6 8}
.js .route-svg.draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s ease}.js .route-svg.draw.is-in path{stroke-dashoffset:0;stroke-dasharray:1}
.steps li{transition:transform .35s var(--ease)}.steps li:hover{transform:translateY(-4px)}

/* ---- gallery, lightbox, video ---- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.filters button{border:2px solid var(--gold);background:#fff;color:var(--royal);border-radius:2rem;padding:.3rem 1rem;font-weight:600;transition:background .25s,color .25s}
.filters button[aria-pressed=true]{background:var(--gold);color:#fff}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
.g-item{position:relative;display:block;border:0;padding:0;border-radius:.8rem;overflow:hidden;aspect-ratio:4/3;background:var(--champ);cursor:zoom-in;box-shadow:var(--shadow)}
.g-item img,.g-item .ph{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.g-item:hover img{transform:scale(1.08)}
.g-item[hidden]{display:none}.g-cap{position:absolute;left:0;right:0;bottom:0;padding:.5rem .7rem;color:#fff;font-size:.88rem;text-align:left;background:linear-gradient(transparent,rgba(23,58,112,.85));transform:translateY(100%);transition:transform .35s var(--ease)}
.g-item:hover .g-cap,.g-item:focus-visible .g-cap{transform:none}@media(hover:none){.g-cap{transform:none}}
.lb{position:fixed;inset:0;z-index:2000;background:rgba(15,25,45,.93);display:flex;align-items:center;justify-content:center;padding:1rem;animation:lbin .25s ease}
.lb[hidden]{display:none}@keyframes lbin{from{opacity:0}}
.lb figure{margin:0;max-width:min(92vw,1100px);text-align:center}.lb img{max-width:100%;max-height:78vh;border-radius:.5rem}.lb figcaption{color:#fff;margin-top:.7rem}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:48px;height:48px;border-radius:50%;font-size:2rem;line-height:1}
.lb button:hover{background:var(--gold)}.lb-x{top:14px;right:14px}.lb-prev{left:10px}.lb-next{right:10px}.lb-prev,.lb-next{top:50%;margin-top:-24px}
.vb-body{width:min(92vw,960px);aspect-ratio:16/9}.vb-body iframe,.vb-body video{width:100%;height:100%;border:0;background:#000;border-radius:.6rem}
.vid-card{position:relative;border:0;padding:0;width:100%;text-align:left;border-radius:1rem;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .4s var(--ease)}
.vid-card:hover{transform:translateY(-5px)}.vid-poster{aspect-ratio:16/9;background:linear-gradient(135deg,var(--royal),var(--plum));display:flex;align-items:center;justify-content:center;position:relative}
.vid-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-play{position:relative;width:62px;height:62px;border-radius:50%;background:var(--saffron);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 0 0 8px rgba(233,154,50,.3);transition:transform .3s}
.vid-card:hover .vid-play{transform:scale(1.1)}.vid-card[disabled]{cursor:default}.vid-card[disabled] .vid-play{background:#8d8a86;box-shadow:none}.vid-meta{padding:.8rem 1rem}.vid-meta small{color:#6b655d}

/* ---- form polish ---- */
.form-control,.form-select{border:2px solid #e3d7bd;transition:border-color .25s,box-shadow .25s,transform .25s}
.form-control:focus,.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 .25rem rgba(184,138,50,.22)}
.was-validated .form-control:invalid,.was-validated .form-select:invalid{animation:nudge .35s}@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.btn:disabled{opacity:.75;cursor:progress}
.tick{width:84px;height:84px;margin:0 auto 1rem}.tick circle{fill:none;stroke:var(--gold);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s ease forwards}.tick path{fill:none;stroke:#1d8f4e;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .6s ease .6s forwards}@keyframes draw{to{stroke-dashoffset:0}}
details{background:#fff;border-radius:.7rem;padding:.7rem 1rem;box-shadow:var(--shadow)}details summary{cursor:pointer;font-weight:600;color:var(--royal)}details[open] p{animation:fadein .4s ease}@keyframes fadein{from{opacity:0;transform:translateY(-6px)}}
.accordion-button:not(.collapsed){background:var(--champ);color:var(--royal)}.accordion-button:focus{box-shadow:0 0 0 .25rem rgba(184,138,50,.25)}

/* ---- footer, to-top ---- */
.to-top{position:fixed;left:14px;bottom:78px;z-index:1039;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);background:#fff;color:var(--royal);font-size:1.3rem;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.to-top.show{opacity:1;transform:none}@media(min-width:992px){.to-top{bottom:20px}}
.site-footer{background:linear-gradient(180deg,var(--royal),#10294f);border-top:4px solid var(--gold)}
.site-footer a{transition:color .2s}.site-footer a:hover{color:var(--saffron)}

/* ---- motion preferences ---- */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .js [data-reveal]{opacity:1!important;transform:none!important}.js .hero-copy>*{opacity:1}.cloud,.float-deco{display:none}.js .hero-copy .gold-rule{transform:none}.route-svg path{stroke-dashoffset:0!important}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
html[data-motion=off] .js .hero-copy>*,html[data-motion=off] .hero-copy>*{opacity:1!important}html[data-motion=off] .hero-copy .gold-rule{transform:none!important}
html[data-motion=off] .cloud,html[data-motion=off] .float-deco{display:none}