/* Pinnacle International: calm motion layer. The default state of everything here is the finished state.
   Motion lives only inside (prefers-reduced-motion: no-preference) and, for scroll reveals, under html.motion
   (set by motion.js once IntersectionObserver is confirmed). Only transform and opacity are animated. */

/* ---------- 0. hero fog ---------- */
.hero .fog{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .fog .f{position:absolute;left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;background-position:0 0;will-change:transform,opacity;backface-visibility:hidden;transform:translate3d(0,0,0)}
.hero .fog .f1{top:30%;height:58%;background-image:url(../img/fog-far.webp);opacity:.62}
.hero .fog .f2{top:44%;height:52%;background-image:url(../img/fog-mid.webp);opacity:.6}
.hero .fog .f3{top:60%;height:56%;background-image:url(../img/fog-near.webp);opacity:.5}
@media (max-width:640px){
  /* portrait crop: the peak sits high, so the fog band sits high too; wider tiles keep wisps in scale */
  .hero .fog .f{width:520%;background-size:50% 100%}
  .hero .fog .f1{top:22%;height:30%}
  .hero .fog .f2{top:31%;height:28%}
  .hero .fog .f3{top:42%;height:30%}
}
@media (prefers-reduced-motion:no-preference){
  /* each layer travels exactly one tile (-50% of a 200%-wide strip of two identical tiles), so the loop point is invisible */
  .hero .fog .f1{animation:fog-x 180s linear infinite,fog-a1 26s ease-in-out infinite alternate}
  .hero .fog .f2{animation:fog-x 120s linear infinite,fog-a2 19s ease-in-out -7s infinite alternate}
  .hero .fog .f3{animation:fog-x 84s linear infinite,fog-a3 23s ease-in-out -11s infinite alternate}
  .hero.fog-off .fog .f{animation-play-state:paused}
  @keyframes fog-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @keyframes fog-a1{from{opacity:.5}to{opacity:.74}}
  @keyframes fog-a2{from{opacity:.42}to{opacity:.72}}
  @keyframes fog-a3{from{opacity:.34}to{opacity:.6}}
}

/* ---------- 1. vision statement: word-by-word light-up ---------- */
.statement blockquote .w,.statement .q .w{transition:opacity 1.1s ease}
html.motion .statement blockquote.lightup .w,html.motion .statement .q.lightup .w{opacity:.2}
html.motion .statement blockquote.lightup .w.on,html.motion .statement .q.lightup .w.on{opacity:1}

/* ---------- 2. page turn between pages + EN/VN crossfade ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:masthead}
  ::view-transition-group(root){animation-duration:.6s}
  ::view-transition-old(root){animation:pt-out .42s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:pt-in .6s cubic-bezier(.2,0,.2,1) .1s both}
  :root.vt-lang::view-transition-old(root){animation:pt-fade-out .4s ease both}
  :root.vt-lang::view-transition-new(root){animation:pt-fade-in .4s ease both}
  @keyframes pt-out{to{opacity:0;transform:translateY(-10px)}}
  @keyframes pt-in{from{opacity:0;transform:translateY(14px)}}
  @keyframes pt-fade-out{to{opacity:0}}
  @keyframes pt-fade-in{from{opacity:0}}
}

/* ---------- 3. gold hairlines draw in; numerals print in ---------- */
.pr{position:relative}
.pr:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold-muted);transform-origin:0 50%;pointer-events:none}
.band .head.pr:before{top:auto;bottom:-1px;background:rgba(226,158,39,.75)}
.statement .label.pr:before{top:-1px}
html.motion .pr:before{transition:transform 1.8s cubic-bezier(.22,.61,.24,1)}
html.motion .pr:not(.in):before{transform:scaleX(0)}
html.motion .prd{transition:transform 1.8s cubic-bezier(.22,.61,.24,1);transform-origin:0 50%}
html.motion .divider.ink.prd{transform-origin:50% 50%}
html.motion .prd:not(.in){transform:scaleX(0)}
html.motion .prn{transition:opacity 1.1s ease var(--d,0s),transform 1.3s cubic-bezier(.22,.61,.24,1) var(--d,0s)}
html.motion .prn:not(.in){opacity:0;transform:translateY(8px)}
.row .n,.steps .n,.svc-block .big,.hww-card .n,.ledger .n{display:inline-block}

/* ---------- 5. "How we work" strip ---------- */
.hww .sec-head{margin-bottom:34px}
.hww-track{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);scrollbar-width:thin;scrollbar-color:var(--gold-muted) transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hww-track:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.hww-card{position:relative;flex:0 0 clamp(270px,29vw,380px);scroll-snap-align:start;padding:34px 30px 34px 0;margin-right:30px;border-right:1px solid var(--rule-soft);display:flex;flex-direction:column}
.hww-card:last-child{margin-right:0;border-right:0}
.hww-card .n{font:italic 300 54px/1 var(--font-display);color:var(--gold-text)}
.hww-card h3{font-size:clamp(24px,2.2vw,30px);line-height:1.12;color:var(--green);margin:18px 0 16px}
.hww-card .st{list-style:none;margin:0 0 22px;padding:0}
.hww-card .st li{padding:8px 0;border-top:1px solid var(--rule-soft);font-size:15px}
.hww-ctrl{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.hww-btn{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;border:1px solid var(--green);display:grid;place-items:center;color:var(--green);font:300 22px/1 var(--font-display);transition:background .3s,color .3s}
.hww-btn:hover:not(:disabled){background:var(--green);color:var(--on-dark)}
.hww-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hww-btn:disabled{opacity:.35;cursor:default}
@media (max-width:640px){.hww-card{flex-basis:82%;padding-right:22px;margin-right:22px}}

/* ---------- 5b. footer logo: gentle fade-in and one shine ---------- */
.ft-logo{position:relative;display:inline-block}
.ft-logo:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(255,236,190,0) 35%,rgba(255,236,190,.55) 50%,rgba(255,236,190,0) 65%) 0 0/300% 100% no-repeat;
  -webkit-mask:url(../img/logo-original-480.webp) center/100% 100% no-repeat;mask:url(../img/logo-original-480.webp) center/100% 100% no-repeat}
html.motion .ft-logo img{transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.22,.61,.24,1)}
html.motion .ft-logo.lg:not(.in) img{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:no-preference){
  html.motion .ft-logo.in:after{animation:logo-shine 2.8s ease-in-out 1.2s 1 both}
  @keyframes logo-shine{0%{opacity:0;background-position:100% 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:0 0}}
}

/* ---------- 6. running head + reading line ---------- */
.site-header .wrap{position:relative}
.runhead{display:none}
@media (min-width:1181px){
  .runhead{display:flex;gap:10px;position:absolute;right:0;bottom:7px;max-width:340px;font:700 10px/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,228,.68);opacity:0;transition:opacity .6s ease;white-space:nowrap}
  .runhead.on{opacity:1}
  .runhead .no{color:var(--gold);flex:none}
  .runhead .t{overflow:hidden;text-overflow:ellipsis}
}
.readline{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Save as PDF button (footer) */
.print-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;margin-top:16px;padding:9px 14px;border:1px solid rgba(244,239,228,.45);font:700 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark)}
.print-btn:hover{border-color:var(--gold);color:var(--gold)}
.print-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.site-footer .mail{display:inline-block}
.print-btn[hidden]{display:none}

/* 2: How we work, no clipped card: a grid where it fits, swipe strip on phones */
@media (min-width:641px){
  .hww-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
  .hww-card{margin-right:0;padding:30px 26px 30px 0;border-right:0}
  .hww-card:nth-child(n+4){border-top:1px solid var(--rule-soft)}
  .hww-card:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--rule-soft)}
}
@media (min-width:641px) and (max-width:900px){
  .hww-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hww-card:nth-child(n+3){border-top:1px solid var(--rule-soft)}
  .hww-card:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .hww-card:nth-child(2n){padding-left:26px;border-left:1px solid var(--rule-soft)}
}
.hww-card .st{margin-bottom:0}

.print-btn.print-link{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0;border:0;font:400 13px/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:rgba(244,239,228,.85);text-decoration:underline;text-decoration-color:rgba(244,239,228,.4);text-underline-offset:3px}
.print-btn.print-link:hover{color:var(--gold);text-decoration-color:var(--gold)}
.print-btn.print-link[hidden]{display:none}
.section.hww{padding-bottom:clamp(28px,3.5vw,44px)}
.section.hww + .section{padding-top:clamp(36px,4.5vw,60px)}
.svc-block .cols .more{margin-top:0}

/* ---------- 7. map lines: slow draw-in, one hub pulse; World time clocks light their dot ---------- */
.worldmap .pulse{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.worldmap .arc,.worldmap .city,.worldmap .pin,.worldmap .wm-city,.worldmap .wm-label{transition:stroke-width .5s ease,opacity .5s ease,fill .5s ease}
.worldmap .arc.hot{opacity:1;stroke-width:2.4}
.worldmap .city.hot,.worldmap .pin.hot{fill:var(--gold)}
.worldmap .wm-city.hot,.worldmap .wm-label.hot{fill:var(--gold)}
@media (max-width:640px){ .worldmap .wm-city.hot{display:inline} }
.times>div .t{transition:color .5s ease}
.times>div.hot .t{color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  /* staggered draw-out from Ho Chi Minh City: 14 lines x .09 s + 1.4 s = ~2.6 s */
  .worldmap .arc.wait{stroke-dasharray:1;stroke-dashoffset:1}
  .worldmap .arc.draw{animation:arc-draw 1.4s cubic-bezier(.3,.6,.3,1) calc(var(--i,0) * .09s) forwards}
  @keyframes arc-draw{to{stroke-dashoffset:0}}
  /* each endpoint dot and label fades in as its line arrives (animation, so the hover fill transition is untouched) */
  .worldmap.armed .city,.worldmap.armed .wm-city{opacity:0}
  .worldmap.drawing .city,.worldmap.drawing .wm-city{animation:city-in .6s ease calc(var(--i,0) * .09s + 1.05s) both}
  @keyframes city-in{from{opacity:0}to{opacity:1}}
  /* travelling light: a short soft dash runs hub -> city, then rests; period 7 s, offset per line */
  .worldmap .arc-glow{fill:none;stroke:#F6D68A;stroke-width:2.2;stroke-linecap:round;opacity:0;stroke-dasharray:.07 1.43;stroke-dashoffset:.07}
  .worldmap.flow .arc-glow{opacity:.75;transition:opacity 1.2s ease;animation:arc-flow 7s linear calc(var(--o,0) * -7s) infinite}
  @keyframes arc-flow{to{stroke-dashoffset:-1.43}}
  /* endpoint dots breathe: a faint ring grows and fades, 4.5 s, offset per city */
  .worldmap .city-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
  .worldmap.flow .city-ring{animation:city-breathe 4.5s ease-out calc(var(--o,0) * -4.5s) infinite}
  @keyframes city-breathe{0%{opacity:.7;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
  .worldmap:not(.live) .arc-glow,.worldmap:not(.live) .city-ring{animation-play-state:paused}
  .worldmap .pulse.go{animation:pin-pulse 3.6s cubic-bezier(.2,.6,.3,1) 1 both}
  @keyframes pin-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
}

@media (prefers-reduced-motion:no-preference){ .worldmap .arc-glow{stroke:#FEEE80} }
.hww-track:focus-visible{outline-color:var(--green)}
/* running head on the cream header (motion.css loads after site.css, so it lives here) */
@media (min-width:1181px){ .runhead{color:#4a4546} .runhead .no{color:var(--gold-text)} }
.runhead{display:none!important}
.print-btn,.print-btn.print-link{display:none!important}