/* The voyage: our ship (Grow With AI / Ward Consulting AI) flying between worlds.
   Uses the page's own tokens (--ink, --muted, --accent, --display), so it fits any theme. */
section.voyage{padding-block:8px 40px;border-top:0}
.mission-tag{margin:0 0 12px}
.mission-step{margin:0 0 16px}
.mission-line{margin:8px 0 0;color:var(--muted);font-size:18px;max-width:40em}
.vy-stage{position:relative;overflow:hidden;border-radius:4px;background:#05080F;aspect-ratio:2000/563;isolation:isolate}
.vy-world{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s ease}
.vy-world.w1{object-position:62% 50%}
.vy-world.w2{object-position:50% 60%;opacity:0}
.vy-stage[data-world="2"] .w1{opacity:0}
.vy-stage[data-world="2"] .w2{opacity:1}
/* shade under the text so it stays readable on both worlds */
.vy-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,14,.82) 0,rgba(4,8,14,.55) 34%,rgba(4,8,14,0) 62%);z-index:1;pointer-events:none}
.vy-copy{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vw,44px);z-index:3;max-width:min(30em,52%);color:#F4F7F5}
.vy-eyebrow{color:#E6C27A}
.vy-copy h2{color:#FFFFFF;font-size:clamp(26px,3.6vw,46px);margin-top:10px}
.vy-where{margin:12px 0 0;font-size:17px;color:#DCE7E2}
.vy-label{display:inline-block;font:700 12.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#05080F;background:#9FE3D0;padding:6px 8px;border-radius:2px;margin-right:6px;vertical-align:2px}
/* the warp field (space-time grid and star streaks) is drawn on this canvas during hyper speed */
.vy-warp{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* the ship: rendered side views of our own rocket, one layer per part so the boosters can separate.
   Engines face left; flames are drawn in CSS. */
.vy-ship{position:absolute;z-index:3;width:clamp(200px,34vw,440px);left:52%;top:6%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));transform:translateX(0) rotate(-6deg)}
.vy-part{position:absolute;inset:0;transition:transform 1.5s cubic-bezier(.45,0,.8,.6),opacity 1.3s ease-in}
.vy-part.core{position:relative;inset:auto;z-index:2}
.vy-part.btop{z-index:1}.vy-part.bbot{z-index:3}
.vy-part img{display:block;width:100%;height:auto;position:relative;z-index:1}
.vy-flame{position:absolute;z-index:0;right:calc(100% - 3%);width:22%;height:15%;border-radius:50%;
  background:radial-gradient(ellipse at 100% 50%,#FFFFFF 0,#FFF1C9 18%,#FFC062 42%,rgba(255,122,61,.55) 64%,rgba(255,122,61,0) 78%);
  transform-origin:100% 50%;animation:vyFlame .16s ease-in-out infinite alternate;transition:opacity .4s}
.btop .vy-flame{top:15.5%}.core .vy-flame{top:42.5%;width:26%}.bbot .vy-flame{top:68.5%}
@keyframes vyFlame{from{transform:scaleX(.85) scaleY(.92)}to{transform:scaleX(1.06) scaleY(1)}}
/* staging: each booster cuts its engines and falls away */
.vy-ship.sep1 .btop{transform:translate(-38%,-55%) rotate(-16deg);opacity:0}
.vy-ship.sep2 .bbot{transform:translate(-38%,70%) rotate(14deg);opacity:0}
.vy-ship.sep1 .btop .vy-flame,.vy-ship.sep2 .bbot .vy-flame{opacity:0}
/* hyper speed: the ship surges, the main flame stretches, the world blurs past */
.vy-stage.warp .vy-ship{animation:vySurge 2.6s ease-in-out both}
@keyframes vySurge{0%{transform:translate(0,0) rotate(-6deg)}35%{transform:translate(4%,-2%) rotate(-6deg)}70%{transform:translate(4%,-2%) rotate(-6deg)}100%{transform:translate(0,0) rotate(-6deg)}}
.vy-stage.warp .core .vy-flame{width:60%;transition:width .5s}
.vy-stage.warp .vy-world{transition:opacity .25s,filter .6s,transform .6s;filter:blur(6px) brightness(1.25);transform:scale(1.08)}
.vy-stage.idle .vy-ship{animation:vyBob 4.5s ease-in-out infinite}
@keyframes vyBob{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(6px,-8px) rotate(-4deg)}}
/* arrival: fly in from the left */
.vy-stage.arrive .vy-ship{animation:vyArrive 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes vyArrive{from{transform:translate(-90vw,40px) rotate(4deg) scale(.7)}to{transform:translate(0,0) rotate(-6deg) scale(1)}}
/* departure: burn off to the right */
.vy-stage.depart .vy-ship{animation:vyDepart 1.1s cubic-bezier(.6,0,.9,.4) both}
@keyframes vyDepart{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(70vw,-60px) rotate(-14deg) scale(.6)}}
.vy-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.vy-pick{display:flex;gap:8px}
.vy-pick button{font:600 15px/1 var(--body);color:var(--ink);background:transparent;border:1px solid var(--rule);padding:14px 16px;border-radius:2px;cursor:pointer}
.vy-pick button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.vy-pick button:hover{border-color:var(--accent)}
.vy-next{border:0;cursor:pointer}
.vy-cap{font-size:14px;color:var(--muted);margin:10px 0 0}
/* phones: a taller frame, and the words move under the picture */
@media (max-width:700px){
  .vy-stage{aspect-ratio:4/3}
  .vy-stage::after{background:linear-gradient(0deg,rgba(4,8,14,.85) 0,rgba(4,8,14,.5) 45%,rgba(4,8,14,0) 75%)}
  .vy-copy{max-width:none;right:16px}
  .vy-ship{left:30%;top:14%;width:62%}
  .vy-controls{flex-direction:column;align-items:stretch}
  .vy-pick button{flex:1}
  .vy-next{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .vy-world{transition:none}
  .vy-stage .vy-ship,.vy-flame{animation:none!important}
  .vy-part{transition:none}
  .vy-warp{display:none}
}

/* launch film at the top of the homepage */
.launchfilm{margin:8px 0 28px}
.lf-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#05080F;border-radius:4px}
.lf-tall{display:none;width:min(100%,calc(80svh * 9 / 16));margin-inline:auto}
.lf-tall video{aspect-ratio:9/16}
@media (max-width:600px){.lf-wide{display:none}.lf-tall{display:block}}
.lf-bar{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.lf-bar button{font:600 15px/1 var(--body);padding:13px 16px;border-radius:2px;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--ink)}
.lf-bar .lf-play{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.launchfilm figcaption{font-size:14px;color:var(--muted);margin-top:8px}