/* BIEC motion layer v2 — progressive enhancement, no third-party JS. */
:root{--motion-gold:#e9ce8a;--motion-mint:#a7e9dc}
.motion-progress{position:fixed;top:0;left:0;right:auto;width:0;height:3px;z-index:400;pointer-events:none;background:linear-gradient(90deg,#b3f1e3,#f6d68b,#ffe5ba);box-shadow:0 1px 16px rgba(217,232,214,.8);transition:width .1s linear}
.hero,.inner-hero{position:relative}
.hero-content{position:relative;z-index:4}
.hero-bottom{z-index:4}
/* A true photo reel is visible if the external footage is blocked or slow. */
.cinema-reel{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:#12334a}
.cinema-shot{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform;animation:cinema-scene 24s infinite linear;filter:saturate(1.05) contrast(1.04)}
.cinema-shot:nth-child(1){background-image:linear-gradient(135deg,rgba(0,27,51,.12),transparent),url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Lake_bled.jpg/1280px-Lake_bled.jpg');animation-delay:0s}
.cinema-shot:nth-child(2){background-image:linear-gradient(135deg,rgba(0,27,51,.12),transparent),url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=1600&q=82');animation-delay:-16s}
.cinema-shot:nth-child(3){background-image:linear-gradient(135deg,rgba(0,27,51,.12),transparent),url('https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=1600&q=82');animation-delay:-8s}
@keyframes cinema-scene{0%,28%{opacity:1;transform:scale(1.06) translateX(0)}33%,94%{opacity:0;transform:scale(1.13) translateX(-1.2%)}100%{opacity:1;transform:scale(1.06) translateX(0)}}
.hero .hero-video{opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero.motion-video-playing .hero-video{opacity:.48}
.hero .hero-shade{background:linear-gradient(90deg,rgba(7,24,41,.92) 0%,rgba(7,24,41,.71) 38%,rgba(7,24,41,.26) 90%),linear-gradient(0deg,rgba(7,24,41,.36),transparent 28%)}
/* Moving route map + three gently floating flags: position is outside copy area. */
.journey-visual{position:absolute;right:2.3%;top:18%;width:44%;height:58%;z-index:2;pointer-events:none;opacity:.86;filter:drop-shadow(0 12px 45px rgba(0,0,0,.17));animation:journey-appear 1.5s both .6s}
.inner-hero .journey-visual{right:3%;top:3%;height:92%;width:40%;opacity:.93;z-index:2}
.journey-orbit{position:absolute;right:10%;top:7%;width:min(94%,440px);aspect-ratio:1;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 45px rgba(255,255,255,.019),0 0 0 92px rgba(255,255,255,.012);animation:orbit-breathe 8s ease-in-out infinite alternate}
.journey-orbit:before,.journey-orbit:after{content:'';position:absolute;inset:12%;border:1px dashed rgba(198,236,222,.25);border-radius:50%;transform:rotate(-17deg) scaleY(.63)}
.journey-orbit:after{inset:26%;transform:rotate(37deg) scaleX(.58);border-color:rgba(244,221,166,.26)}
.journey-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.journey-lines .route-glow{fill:none;stroke:rgba(242,213,142,.19);stroke-width:12;filter:blur(9px)}
.journey-lines .route-base{fill:none;stroke:rgba(255,255,255,.31);stroke-width:1.3;stroke-dasharray:4 13;animation:route-travel 19s linear infinite}
.journey-lines .route-lit{fill:none;stroke:#f2d79d;stroke-width:2;stroke-linecap:round;stroke-dasharray:65 620;animation:route-travel 10s linear infinite;filter:drop-shadow(0 0 6px rgba(245,224,166,.9))}
.journey-lines .route-dot{fill:#ffe2a5;filter:drop-shadow(0 0 6px #f9de8f)}
.journey-lines .origin-dot{fill:#fff;stroke:#bde8dd;stroke-width:4}
@keyframes route-travel{to{stroke-dashoffset:-690}}
@keyframes orbit-breathe{0%{transform:rotate(-2deg) scale(.95);opacity:.65}100%{transform:rotate(8deg) scale(1.05);opacity:1}}
@keyframes journey-appear{0%{opacity:0;transform:translateY(25px) scale(.96)}100%{opacity:.9;transform:none}}
.journey-flag{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.92);color:#15374a;border:1px solid rgba(255,255,255,.95);box-shadow:0 13px 40px rgba(0,0,0,.16);border-radius:100px;padding:8px 14px 8px 9px;font-size:12px;font-weight:800;letter-spacing:.01em;white-space:nowrap;backdrop-filter:blur(7px);animation:flag-drift 5.6s ease-in-out infinite}
.journey-flag img{width:27px;height:19px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.journey-flag.a{top:18%;left:24%}.journey-flag.b{top:51%;left:68%;animation-delay:-2s}.journey-flag.c{top:74%;left:14%;animation-delay:-3.5s}
@keyframes flag-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-13px,0)}}
/* A pair of warm travelling light beams gives the hero a clearly animated depth. */
.hero::before,.inner-hero>.motion-beam{content:'';position:absolute;top:-30%;right:-17%;width:50%;height:155%;transform:rotate(22deg);background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.075) 49%,transparent 60%);animation:beam-sweep 12s ease-in-out infinite alternate;pointer-events:none;z-index:1}
.inner-hero>.motion-beam{right:-10%;top:-50%;width:34%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
@keyframes beam-sweep{from{transform:translateX(-50px) rotate(22deg)}to{transform:translateX(170px) rotate(22deg)}}
/* Immediate, staggered entrance animation makes the page visibly alive at load. */
.hero-content .overline,.inner-hero .overline{animation:hero-rise .8s cubic-bezier(.2,.7,.2,1) both .15s}
.hero h1,.inner-hero h1{animation:hero-rise .85s cubic-bezier(.2,.7,.2,1) both .27s}
.hero-content>p,.inner-hero .container>p{animation:hero-rise .9s cubic-bezier(.2,.7,.2,1) both .4s}
.hero-content .actions,.inner-hero .breadcrumb{animation:hero-rise .9s cubic-bezier(.2,.7,.2,1) both .56s}
@keyframes hero-rise{from{opacity:0;transform:translate3d(0,34px,0);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Section reveals keep original layout/spacings but make entering content cinematic. */
.reveal{opacity:1;transform:none}
.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(46px) scale(.985)}
.motion-ready .reveal.visible{opacity:1;transform:none;transition:opacity 1.02s cubic-bezier(.16,1,.3,1),transform 1.02s cubic-bezier(.16,1,.3,1)}
.motion-ready .reveal.delay.visible{transition-delay:.14s}
.motion-ready .country-tile,.motion-ready .feature-card,.motion-ready .detail-photo,.motion-ready .about-panel{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
@media(hover:hover){.country-tile:hover,.feature-card:hover,.detail-photo:hover,.about-panel:hover{transform:translateY(-6px);box-shadow:0 25px 65px rgba(5,40,58,.12)}.country-tile .tile-cover,.detail-photo>img{transition:transform 1.2s ease}.country-tile:hover .tile-cover,.detail-photo:hover>img{transform:scale(1.065)}.choice:hover .round-arrow,.country:hover .country-arrow{transform:translate(3px,-3px)}.round-arrow,.country-arrow{transition:transform .3s ease}}
/* Animated highlight under the current nav link and subtle CTA pulse. */
nav a{position:relative}
nav a:not(.nav-cta):after{content:'';height:1px;position:absolute;left:0;right:100%;bottom:-8px;background:var(--motion-gold);transition:right .35s}
nav a:hover:after,nav a.site-active:after{right:0}
.button.light{box-shadow:0 0 0 0 rgba(240,216,164,.2);animation:button-aura 4.8s infinite}
@keyframes button-aura{0%,100%{box-shadow:0 0 0 0 rgba(240,216,164,0)}50%{box-shadow:0 0 0 9px rgba(240,216,164,.10)}}
/* Steady, slow flag movement — not an intrusive rapid marquee. */
.flag-bar-inner .flag-item{animation:flag-entrance .7s backwards}
.flag-bar-inner .flag-item:nth-child(2){animation-delay:.1s}.flag-bar-inner .flag-item:nth-child(3){animation-delay:.23s}.flag-bar-inner .flag-item:nth-child(4){animation-delay:.36s}.flag-bar-inner .flag-item:nth-child(5){animation-delay:.49s}
@keyframes flag-entrance{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.pill-flags a,.pill-flags span{transition:transform .3s ease,box-shadow .3s ease}
.pill-flags a:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(12,40,58,.09)}
/* Page-specific visual identity carries into the motion graphic. */
body.theme-study .journey-flag{border-bottom:3px solid #70c9e9}
body.theme-work .journey-flag{border-bottom:3px solid #93cb98}
body.theme-destinations .journey-flag{border-bottom:3px solid #77d7dc}
body.theme-services .journey-flag{border-bottom:3px solid #e2c279}
body.theme-about .journey-flag{border-bottom:3px solid #e7aa9c}
body.theme-contact .journey-flag{border-bottom:3px solid #c4adfa}
body.theme-privacy .journey-flag{border-bottom:3px solid #a7c2ce}
/* On smaller screens preserve legibility and minimal arrangement. */
@media(max-width:1050px){.journey-visual{right:-3%;width:47%;opacity:.6}.inner-hero .journey-visual{right:-7%;width:47%;opacity:.6}}
@media(max-width:720px){.journey-visual{right:-11%;top:19%;width:67%;height:45%;opacity:.36}.journey-flag{font-size:10px;padding:6px 9px 6px 6px}.journey-flag img{width:22px;height:15px}.journey-flag.a{top:26%;left:16%}.journey-flag.b{top:56%;left:60%}.journey-flag.c{display:none}.inner-hero .journey-visual{right:-18%;width:60%;top:6%;height:79%;opacity:.43}.inner-hero .journey-flag.a{left:20%;top:18%}.inner-hero .journey-flag.b{left:55%;top:72%}.hero .hero-shade{background:linear-gradient(90deg,rgba(7,24,41,.93) 0%,rgba(7,24,41,.67) 90%),linear-gradient(0deg,rgba(7,24,41,.23),transparent)}}
@media(prefers-reduced-motion:reduce){.motion-progress{transition:none}.cinema-shot{animation:none!important;opacity:0}.cinema-shot:first-child{opacity:1}.journey-visual,.journey-orbit,.journey-flag,.journey-lines *, .hero::before,.motion-beam,.hero-content .overline,.inner-hero .overline,.hero h1,.inner-hero h1,.hero-content>p,.inner-hero .container>p,.hero-content .actions,.inner-hero .breadcrumb,.button.light,.flag-bar-inner .flag-item{animation:none!important}.journey-visual{opacity:.3!important}.motion-ready .reveal:not(.visible){opacity:1;transform:none}.hero .hero-video{display:none!important}}