/* ============================================================================
   Valmier website — motion layer (2026-10-25, owner: "more movement, more scroll animation, more new
   elements" — inspired by jimo.ai's landing, our own design). Loaded after brand.css on the home page only.
   Monochrome still: white light on black, colour only for status. Behaviour lives in motion.js; without
   JS every section below still reads top to bottom (pinned scenes collapse to normal blocks).
   ========================================================================== */

/* ---- hero: starfield + planet horizon, centred copy --------------------------- */
.climb--space{background:var(--abyss);background-image:none;flex-direction:column;justify-content:center;
  padding-bottom:clamp(120px,20vh,200px)}
.climb--space::after{height:28%}
.sky{position:absolute;inset:0;z-index:-3;width:100%;height:100%;display:block;pointer-events:none}
.planet{position:absolute;left:50%;top:calc(100% - clamp(120px,19vh,210px));z-index:-2;pointer-events:none;
  width:max(1500px,175vw);aspect-ratio:1;border-radius:50%;translate:-50% var(--py,0px);
  background:#050506;
  box-shadow:inset 0 1.5px 0 rgba(242,242,239,.55),inset 0 46px 80px -40px rgba(242,242,239,.16),0 -40px 140px -60px rgba(242,242,239,.28)}
.planet__grid{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(rgba(242,242,239,.16) 1px,transparent 1.5px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(180deg,#000 0,transparent 9%);mask:linear-gradient(180deg,#000 0,transparent 9%)}
/* a light that travels along the horizon */
.planet__rim{position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 46%,rgba(255,255,255,.95) 50%,transparent 54% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:rim 14s linear infinite;opacity:.9}
@keyframes rim{from{transform:rotate(-38deg)}50%{transform:rotate(38deg)}to{transform:rotate(-38deg)}}

.hero--center{display:block;max-width:920px;margin-inline:auto;text-align:center;will-change:transform,opacity}
.hero--center .hero-copy{display:flex;flex-direction:column;align-items:center}
.hero--center h1{font-size:clamp(2.4rem,6.2vw,5.1rem);line-height:1.2;letter-spacing:-.02em;margin-bottom:22px}
.hero--center .lead{max-width:46ch;margin-inline:auto}
.hero--center .cta,.hero--center .hero-links{justify-content:center}
.hero--center .hero-links{margin-bottom:0}
.hero h1 .w{animation-name:word-in;animation-duration:1s}
.hero--center h1 .glow{color:var(--ash);-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,rgba(242,242,239,.55) 0 40%,#fff 50%,rgba(242,242,239,.55) 60% 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:word-in 1.1s var(--ease) .55s forwards,sweep 6s ease-in-out 2.2s infinite}
@keyframes word-in{from{opacity:0;transform:translateY(.5em);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes sweep{0%{background-position:100% 0}45%,100%{background-position:0 0}}
.hero--center .hero-badge,.hero--center .lead,.hero--center .cta,.hero--center .hero-links{opacity:0;animation:rise .9s var(--ease) forwards}
.hero--center .hero-badge{animation-delay:.05s}
.hero--center .lead{animation-delay:.75s}
.hero--center .cta{animation-delay:.9s}
.hero--center .hero-links{animation-delay:1.05s}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#heroTrust{margin:clamp(44px,9vh,90px) auto 0;justify-content:center;border-top:0;padding-top:0;max-width:820px;
  opacity:0;animation:rise 1s var(--ease) 1.25s forwards}
#heroTrust div{text-align:center}
.climb--space .scrollcue{bottom:26px}

/* ---- statement: words light up as you scroll ---------------------------------- */
.statement{padding-block:clamp(70px,12vw,150px)}
.scrub{margin:0 auto;max-width:21em;text-align:center;font:700 clamp(1.45rem,3.5vw,2.75rem)/1.65 var(--display);letter-spacing:-.01em;color:var(--bone)}
.js .scrub .sc{opacity:.14;transition:opacity .35s var(--ease)}
.js .scrub .sc.on{opacity:1}

/* ---- journey: pinned scene, phone on one side, three steps on the other -------- */
.journey{position:relative}
.journey__pin{padding-block:clamp(58px,8.4vw,104px)}
.journey__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:center}
.journey__copy h2{font-size:clamp(1.7rem,3.3vw,2.6rem);margin:10px 0 26px}
.journey__steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.journey__steps li{padding:14px 18px;border-inline-start:1px solid var(--line-2);opacity:.36;transition:opacity .5s var(--ease),border-color .5s}
.journey__steps li.is-on{opacity:1;border-color:var(--bone)}
.journey__steps b{display:flex;align-items:center;gap:12px;font-size:1.06rem}
.journey__steps b .num{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.8rem;
  border:1px solid var(--line-3);transition:background .4s,color .4s}
.journey__steps li.is-on b .num{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.journey__steps p{margin:8px 40px 0 0;color:var(--ash);font-size:.9rem;line-height:1.9}
.journey__rail{height:1px;margin-top:26px;background:var(--line-2);overflow:hidden}
.journey__rail i{display:block;height:100%;background:var(--bone);transform:scaleX(var(--jp,0));transform-origin:right}
.journey__stage{position:relative}
.journey .phone{animation:none}
.journey .chip{opacity:0;scale:.9;translate:0 12px;transition:opacity .55s var(--ease),scale .55s var(--ease),translate .55s var(--ease)}
.journey .chip.is-on{opacity:1;scale:1;translate:0 0}
.journey .chip .flag{width:18px;height:13px}
.chip.c3{top:44%;inset-inline-end:-24%;animation-delay:-5s}
.phone .s-row{transition:border-color .4s,background .4s}
.phone[data-step="1"] .s-row:first-child,.phone[data-step="2"] .s-row:first-child{border-color:var(--line-3);background:#1D1D20}
.phone .s-status{transition:color .4s,background .4s}
.phone[data-step="2"] .s-status{color:var(--ok)}
/* crosshair framing around the device */
.frame{position:absolute;inset:-7% -16%;z-index:-1;pointer-events:none}
.frame::before,.frame::after{content:"";position:absolute;background:var(--line)}
.frame::before{top:-40%;bottom:-40%;left:50%;width:1px;
  -webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.frame::after{left:-30%;right:-30%;top:50%;height:1px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.frame i{position:absolute;width:16px;height:16px;border:0 solid var(--line-3)}
.frame i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}
.frame i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.frame i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}
.frame i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
@media(min-width:961px){
  .js .journey{height:330vh}
  .js .journey__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-block:calc(var(--nav-h,64px) * .6) 0}
}

/* ---- tunnel: pinned wireframe tunnel, copy fades in mid-way -------------------- */
.tunnel{position:relative}
.tunnel__pin{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.tunnel__cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2}
.tunnel__pin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 50% 50%,rgba(10,10,11,.82),transparent 72%),
             linear-gradient(180deg,var(--abyss),transparent 18%,transparent 82%,var(--abyss))}
.tunnel__copy{text-align:center;max-width:780px;padding-block:80px}
.tunnel__copy h2{font-size:clamp(1.9rem,4.8vw,3.9rem);line-height:1.3;margin:12px 0 18px;letter-spacing:-.02em}
.tunnel__copy h2 span{color:var(--ash)}
.tunnel__copy p{max-width:52ch;margin:0 auto 26px;color:var(--ash);line-height:1.95}
.js .tunnel{height:250vh}
.js .tunnel__pin{position:sticky;top:0;height:100svh}
.js .tunnel__copy{opacity:var(--to,0);transform:translateY(calc((1 - var(--to,0)) * 34px)) scale(calc(.96 + var(--to,0) * .04));filter:blur(calc((1 - var(--to,0)) * 8px))}

/* ---- locations: globe beside the cards ---------------------------------------- */
.loc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(18px,3.4vw,44px);align-items:center}
.loc-wrap .loc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.loc-wrap .loc-card:last-child{grid-column:span 2}
.globe{position:relative;width:100%;max-width:540px;aspect-ratio:1;justify-self:center}
.globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask:radial-gradient(closest-side,#000 74%,transparent);mask:radial-gradient(closest-side,#000 74%,transparent)}
.globe__hint{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:.74rem;color:var(--ash-dim);white-space:nowrap}
.loc-card{transition:transform .4s var(--ease),border-color .35s,background .35s}
.loc-card.is-hot{border-color:var(--line-3);background:#1A1A1D}

/* ---- steps: a line draws across as you scroll; each step lights in turn -------- */
.js [data-steps]{position:relative;padding-top:30px}
.js [data-steps]::before,.js [data-steps]::after{content:"";position:absolute;top:0;inset-inline:0;height:1px}
.js [data-steps]::before{background:var(--line-2)}
.js [data-steps]::after{background:var(--bone);transform:scaleX(var(--sp,0));transform-origin:right}
.js [data-steps] .step .n{background:transparent;color:var(--bone);border:1px solid var(--line-3);transition:background .4s,color .4s,border-color .4s}
.js [data-steps] .step.is-lit .n{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.js [data-steps] .step{transition:transform .4s var(--ease),border-color .4s}
.js [data-steps] .step.is-lit{border-color:var(--line-3)}

/* ---- pointer light on cards, tilt, magnetic buttons ---------------------------- */
.card>i.glare{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(242,242,239,.075),transparent 55%)}
.card:hover>i.glare{opacity:1}
.tilt{transition:transform .5s var(--ease),border-color .35s}
.tilt.is-tilting{transition:transform .12s linear,border-color .35s}
[data-magnet]{transition:transform .45s var(--spring,cubic-bezier(.3,1.4,.5,1)),background .2s,border-color .2s}
[data-magnet].is-pulled{transition:transform .15s linear,background .2s,border-color .2s}

/* ---- reveals: add a soft focus-pull to the existing fade-up -------------------- */
.js [data-reveal]{filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js [data-reveal].is-in{filter:none}
.lite [data-reveal]{filter:none}
.js .section-head .kicker::before{transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease) .2s}
.js .section-head.is-in .kicker::before{transform:none}

/* ---- responsive ---------------------------------------------------------------- */
@media(max-width:960px){
  .journey__grid{grid-template-columns:1fr}
  .journey__stage{order:-1;margin-bottom:10px}
  .journey__steps li{opacity:1}
  .chip.c3{inset-inline-end:0;top:50%}
  .loc-wrap{grid-template-columns:1fr}
  .globe{max-width:420px}
}
@media(max-width:620px){
  .hero--center h1{font-size:clamp(2.1rem,9.4vw,2.9rem)}
  .planet{width:max(1100px,300vw);top:calc(100% - 110px)}
  #heroTrust{margin-top:36px}
  .scrub{font-size:clamp(1.25rem,5.6vw,1.6rem);line-height:1.85}
  .journey__steps p{margin-inline-end:0}
  .loc-wrap .loc-grid{grid-template-columns:1fr}
  .loc-wrap .loc-card:last-child{grid-column:auto}
  .js .tunnel{height:190vh}
  .js [data-steps]{padding-top:0}
  .js [data-steps]::before,.js [data-steps]::after{display:none}
}

/* ---- the island: a floating island in the middle of the page; moss grows under the pointer ---- */
.isle{position:relative;padding-block:clamp(40px,7vw,90px) clamp(30px,5vw,60px);overflow:hidden}
.isle__head{text-align:center;max-width:720px;position:relative;z-index:2}
.isle__head h2{font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.3;margin:12px 0 10px;letter-spacing:-.02em}
.isle__head h2 span{color:var(--ash)}
.isle__hint{margin:0;color:var(--ash-dim);font-size:.86rem}
.hint-touch{display:none}
@media(hover:none){.hint-fine{display:none}.hint-touch{display:inline}}
.isle__stage{position:relative;height:clamp(420px,62vw,720px);margin-top:-30px}
.isle__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:none;touch-action:pan-y}
.isle__meter{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:6px;
  padding:7px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(20,20,22,.7);font-size:.8rem;color:var(--ash);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(242,242,239,.07)}
.isle__meter b{color:#A9D88A;font-size:1rem}
.isle__done{position:absolute;bottom:calc(8% + 46px);left:50%;transform:translate(-50%,10px);margin:0;white-space:nowrap;
  font-size:.9rem;color:var(--bone);opacity:0;pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.isle__done a{color:#A9D88A;text-decoration:underline;text-underline-offset:3px}
.isle.is-green .isle__done{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media(max-width:620px){.isle__stage{height:440px;margin-top:-10px}.isle__done{white-space:normal;width:86%;text-align:center}}