/* ValtoDS sphere website prototype (silent animation).
   Fonts are system faces for this local prototype only; the real build self-hosts Exo 2, Manrope and JetBrains Mono. */
:root{
  --navy:#050A16; --navy2:#0A1428; --accent:#1E9BFF; --accent-hover:#4DB3FF;
  --silver:#C9D1DC; --text:#EEF2F8; --text2:#A9B4C7; --line:rgba(170,190,220,.16);
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#E8EDF4 34%,#9FAABB 52%,#F1F4F8 66%,#B9C2CF 100%);
  --display:"Bahnschrift","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(22px,6.5vw,112px);
  --tshadow:0 1px 2px rgba(2,6,16,.6),0 8px 40px rgba(2,6,16,.85);
}
*{box-sizing:border-box}
html{background:var(--navy);overflow-x:clip}
body{margin:0;color:var(--text);font:400 17px/1.6 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--accent);color:#04101f;font-weight:600;text-decoration:none}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:28px;padding:14px clamp(18px,4vw,52px);
  background:linear-gradient(to bottom,rgba(5,10,22,.78),rgba(5,10,22,0));transition:background-color .5s var(--ease)}
.site-header.solid{background:rgba(5,10,22,.78);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:block;width:314px;height:80px;overflow:hidden;flex:none}
.brand img{display:block;width:326px;height:auto;margin:-15.4px 0 0 -8.6px;mix-blend-mode:screen}
/* 2026-11-15: logo shown at 2x (same artwork, same crop, every value doubled). .lay-prev = the previous size, for comparison */
.lay-prev .brand{width:157px;height:40px}
.lay-prev .brand img{width:163px;margin:-7.7px 0 0 -4.3px}
.site-nav{margin-left:auto;display:flex;gap:28px}
.site-nav a{color:var(--text2);text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:color .3s var(--ease)}
.site-nav a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .4s var(--ease-out),background-color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
.btn-lg{min-height:58px;padding:0 36px;font-size:17px}
.btn-primary{background:var(--accent);color:#04101f;box-shadow:0 0 0 1px rgba(77,179,255,.5),0 10px 40px rgba(30,155,255,.3)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(201,209,220,.45);color:var(--text);background:rgba(5,10,22,.35);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:#fff;transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--navy)}
.stage{position:absolute;inset:0}
/* the video sits right of center on wide screens so the sphere never sits under the text */
/* full frame height; the frame's centre (the sphere) sits at 66% of the width; the left edge melts into navy */
.media{position:absolute;aspect-ratio:16/9;--vw:max(177.78svh,1067px);width:var(--vw);height:auto;
  left:calc(66vw - var(--vw)/2);top:50%;transform:translateY(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%)}
/* 2026-11-15: the whole video frame (film, hold, reflection, glow, currents) is shown at 75%, centred on the same point,
   so the sphere appears 25% smaller with every effect still aligned. The frame then no longer fills the hero, so the video
   pictures' top and bottom edges melt into navy over 8% of the frame (the sphere itself starts 9.6% from the top, so it is
   never faded), as their left edge already did. The glow, reflection and currents are not masked. .lay-prev = previous size */
html.lay-s75 .media{--sz:.75;width:calc(var(--vw)*var(--sz));left:calc(66vw - var(--vw)*var(--sz)/2);-webkit-mask-image:none;mask-image:none}
html.lay-s75 :is(.m-poster,.m-film,.m-tail,.m-still,.h-img,.h-loop){
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* 2026-11-15 (default, html.lay-trans): the assembly plays full size; when it ends (14.9 s) the whole sphere layer (film,
   hold, reflection, glow, currents) eases to 75% around the sphere's centre (--k, set from the film's clock). Just before
   it shrinks, the video pictures fade out beyond 1.08-1.17 sphere radii (--mo: 1 = no fade) into .m-bgx, a seamless
   extension of the video's own background, so the frame's edges never show. */
html.lay-trans .media{transform:translateY(-50%) scale(var(--k,1));transform-origin:50.21% 50.74%;-webkit-mask-image:none;mask-image:none}
html.lay-trans :is(.m-poster,.m-film,.m-tail,.m-still,.h-img,.h-loop){
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%),radial-gradient(27.03% 48.09% at 50.21% 50.74%,#000 92.3%,rgba(0,0,0,var(--mo,1)) 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%),radial-gradient(27.03% 48.09% at 50.21% 50.74%,#000 92.3%,rgba(0,0,0,var(--mo,1)) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the first-frame poster sits under the film; it fades out with the edge fade (--mo), or it would show through the soft
   edge. During the assembly (--mo = 1) it stays exactly as before. */
html.lay-trans .m-poster{opacity:var(--mo,1)}
.m-bgx{display:none}
html.lay-trans .m-bgx{display:block;position:absolute;left:-19.09%;top:-72.46%;width:138.6%;height:246.4%;max-width:none;opacity:calc(1 - var(--mo,1));pointer-events:none}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.m-film,.m-tail,.m-still{opacity:0}
.hero.s-film .m-film{opacity:1}
.hero.s-tail .m-tail{opacity:1}
.hero.s-still .m-still{opacity:1;transition:opacity .8s var(--ease)}
/* completed-sphere hold: retouched final frame + light only. Sphere centre in the frame: 50.21% / 50.74%, radius 449 px of 1920 */
.m-hold{position:absolute;inset:0;opacity:0;pointer-events:none}
.h-loop{opacity:0}
.hero.s-alive .h-loop{opacity:1}
/* preview: the loop's first frame equals the film's last (the step is the size of one ordinary film frame), so cut, don't fade */
.hero.alive-mode.s-hold .m-hold{transition:none}
.hero.s-hold .m-hold{opacity:1;transition:opacity .5s linear}
.h-drift{position:absolute;inset:0;transform-origin:50.21% 50.74%;will-change:transform}
.m-sheen{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;visibility:hidden}
.hero.s-sheen .m-sheen{visibility:visible}
.s-track{position:absolute;inset:0;transform-origin:50.21% 50.74%;will-change:transform}
.m-energy{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;visibility:hidden}
.hero.s-energy .m-energy{visibility:visible}
.e-track{position:absolute;inset:0;transform-origin:50.21% 50.74%;will-change:transform}
/* rotation experiment: canvas exactly covers the sphere; soft-light with neutral grey outside the sphere = no effect there */
.m-rot{position:absolute;inset:0;mix-blend-mode:soft-light;pointer-events:none;visibility:hidden}
.hero.s-rot .m-rot{visibility:visible}
.r-track{position:absolute;inset:0;transform-origin:50.21% 50.74%;will-change:transform}
.h-rot{position:absolute;left:27.11%;top:9.64%;width:46.2%;height:82.2%;pointer-events:none}
.h-energy{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.h-sheen,.h-glow{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;pointer-events:none}
.h-sheen{clip-path:ellipse(23.1% 41.1% at 50.21% 50.74%);
  background:linear-gradient(112deg,rgba(220,236,255,0) 40%,rgba(220,236,255,.5) 50%,rgba(220,236,255,0) 60%) 130% 50%/300% 100% no-repeat}
.h-glow{background:radial-gradient(26.9% 47.8% at 50.21% 50.74%,rgba(30,155,255,0) 84%,rgba(70,175,255,.34) 88.5%,rgba(30,155,255,.08) 94%,rgba(30,155,255,0) 100%)}
/* same glow shape, 1.2x stronger (light setting p3) */
.hero.glow-strong .h-glow{background:radial-gradient(26.9% 47.8% at 50.21% 50.74%,rgba(30,155,255,0) 84%,rgba(70,175,255,.408) 88.5%,rgba(30,155,255,.096) 94%,rgba(30,155,255,0) 100%)}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,10,22,.86) 0%,rgba(5,10,22,.62) 30%,rgba(5,10,22,.12) 56%,rgba(5,10,22,0) 70%),
             linear-gradient(0deg,rgba(5,10,22,.55) 0%,rgba(5,10,22,0) 26%)}

.copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-44%);width:min(37vw,600px);z-index:2}
.focus-line{margin:0 0 26px;font:600 clamp(11px,.92vw,14px)/1 var(--mono);letter-spacing:.38em;color:#E6EEF8;
  opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}
.focus-line span{color:var(--accent);margin:0 .25em}
.motto{margin:0;font:700 clamp(34px,3.55vw,66px)/1.05 var(--display);letter-spacing:-.018em}
.ln{display:block;color:#fff;text-shadow:var(--tshadow);opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease-out),color .9s var(--ease)}
.ln3{padding-bottom:.06em}
.ln3.chrome{text-shadow:none;filter:drop-shadow(0 2px 16px rgba(2,6,16,.8))}
.ln.on{opacity:1;transform:none}
.ln.dim{opacity:.38;transform:none}
.settle{margin-top:30px;opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease),transform 1.2s var(--ease-out);visibility:hidden}
.lede{margin:0 0 28px;max-width:34em;color:#D3DBE7;font-size:clamp(16px,1.15vw,19px);line-height:1.6;text-shadow:0 1px 12px rgba(2,6,16,.9)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero.show-focus .focus-line{opacity:1;transform:none}
.hero.show-settle .settle{opacity:1;transform:none;visibility:visible}

/* motion control (pause / play) */
.motion-ctl{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);z-index:5;display:inline-flex;align-items:center;gap:10px;
  min-height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(201,209,220,.32);background:rgba(5,10,22,.45);backdrop-filter:blur(8px);
  color:var(--text2);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.motion-ctl:hover{color:#fff;border-color:rgba(255,255,255,.7)}
.motion-ctl .ico{width:12px;height:12px;position:relative;display:inline-block}
.motion-ctl .ico::before,.motion-ctl .ico::after{content:"";position:absolute;top:0;width:4px;height:12px;background:currentColor;border-radius:1px}
.motion-ctl .ico::before{left:1px}.motion-ctl .ico::after{right:1px}
.motion-ctl[aria-pressed="true"] .ico::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;border-radius:0}
.motion-ctl[aria-pressed="true"] .ico::after{display:none}
.motion-ctl[hidden]{display:none}

/* ---------- what we build ---------- */
.build{position:relative;padding:clamp(90px,12vw,170px) var(--pad);background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%)}
.kicker{margin:0 0 16px;font:600 13px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.build-h{margin:0 0 clamp(40px,5vw,70px);font:700 clamp(34px,3.6vw,60px)/1.05 var(--display);letter-spacing:-.016em}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.svc li{padding:34px clamp(18px,2.4vw,40px) 10px 0;border-right:1px solid var(--line);margin-right:clamp(18px,2.4vw,40px)}
.svc li:last-child{border-right:0;margin-right:0}
.svc .n{display:block;margin-bottom:22px;font:600 12px/1 var(--mono);letter-spacing:.3em;color:var(--text2)}
.svc h3{margin:0 0 12px;font:700 clamp(22px,1.8vw,30px)/1.15 var(--display)}
.svc p{margin:0;color:var(--text2);max-width:24em}

/* ---------- closing ---------- */
.closing{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;background:var(--navy)}
.loop{position:absolute;inset:0}
.loop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* faint electric energy around the outside of the sphere, drawn on a canvas sized to the sphere */
.energy{position:absolute;z-index:1;left:0;top:0;width:0;height:0;pointer-events:none;mix-blend-mode:screen}
.loop img.fit{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%)}
.loop-shade{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 46%,rgba(5,10,22,.35),rgba(5,10,22,.82) 100%),linear-gradient(0deg,rgba(5,10,22,.75),rgba(5,10,22,0) 40%)}
.closing-copy{position:relative;z-index:2;padding:0 var(--pad);max-width:1100px}
.closing-title{margin:0 0 38px;font:700 clamp(38px,4.6vw,84px)/1.04 var(--display);letter-spacing:-.018em;filter:drop-shadow(0 4px 24px rgba(2,6,16,.9))}
.closing-note{margin:22px 0 0;color:var(--text2);font-size:15px}

/* ---------- footer ---------- */
.site-footer{padding:56px var(--pad) 120px;border-top:1px solid var(--line);background:var(--navy);color:var(--text2);font-size:14px}
.foot-logo{width:180px;height:auto;mix-blend-mode:screen;margin:-12px 0 4px -6px}
.foot-focus{margin:0 0 10px;font:600 12px/1 var(--mono);letter-spacing:.32em;color:var(--silver)}
.foot-legal{margin:0}

/* ---------- prototype review bar ---------- */
.review{position:fixed;left:16px;bottom:16px;z-index:60;max-width:calc(100vw - 32px);font:500 12px/1.3 var(--mono);color:#dfe7f2}
.review-toggle{display:none}
.review-body{padding:12px 14px;border-radius:14px;background:rgba(8,14,28,.86);backdrop-filter:blur(12px);border:1px solid rgba(120,170,230,.28);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.review-label{margin:0 0 8px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-size:11px}
.review-opts{display:flex;flex-wrap:wrap;gap:6px}
.review button{font:inherit;color:inherit;cursor:pointer}
.review-opts button,.review-replay{padding:7px 10px;border-radius:8px;border:1px solid rgba(201,209,220,.28);background:rgba(255,255,255,.04)}
.review-opts button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#04101f;font-weight:700}
.review-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.review-info{color:var(--text2);font-size:11px;white-space:nowrap}
.review.collapsed .review-body{display:none}

/* ---------- tall screens (phones) ---------- */
@media (max-aspect-ratio: 4/5){
  .media{--vw:170vw;left:-35vw;top:clamp(50px,6.5svh,76px);transform:none;-webkit-mask-image:none;mask-image:none}
  /* phones: frame at 75%, sphere centre kept where it was (x: 50.36vw; y: +48.52vw x 0.25 = +12.13vw); the pictures' top edge melts into navy */
  html.lay-s75 .media{width:calc(170vw*var(--sz));left:calc(50.36vw - 85.36vw*var(--sz));top:calc(clamp(50px,6.5svh,76px) + 12.13vw)}
  html.lay-s75 :is(.m-poster,.m-film,.m-tail,.m-still,.h-img,.h-loop){
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  html.lay-trans .media{transform:scale(var(--k,1))}
  /* phones: while the assembly plays full size, nothing of the video shows behind the 2x logo (frame top to the logo's
     bottom edge = 10.5% of the frame), then it fades in by 17%, so the logo's dark background never shows as a box over
     the video and the frame's top edge tucks under the header; as the sphere shrinks
     (--mo -> 0) this fade switches off, so the finished sphere is never dimmed */
  html.lay-trans :is(.m-poster,.m-film,.m-tail,.m-still,.h-img,.h-loop){
    -webkit-mask-image:radial-gradient(27.03% 48.09% at 50.21% 50.74%,#000 92.3%,rgba(0,0,0,var(--mo,1)) 100%),linear-gradient(180deg,rgba(0,0,0,calc(1 - var(--mo,1))) 0%,rgba(0,0,0,calc(1 - var(--mo,1))) 10.5%,#000 17%,#000 100%);
    mask-image:radial-gradient(27.03% 48.09% at 50.21% 50.74%,#000 92.3%,rgba(0,0,0,var(--mo,1)) 100%),linear-gradient(180deg,rgba(0,0,0,calc(1 - var(--mo,1))) 0%,rgba(0,0,0,calc(1 - var(--mo,1))) 10.5%,#000 17%,#000 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .scrim{background:linear-gradient(180deg,rgba(5,10,22,.5) 0%,rgba(5,10,22,0) 12%),
    linear-gradient(0deg,var(--navy) 0%,var(--navy) calc(100% - 6.5svh - 95vw),rgba(5,10,22,0) calc(100% - 6.5svh - 56vw))}
  /* phones: the hero grows with its content; the text always sits below the video, never over it */
  .hero{height:auto;min-height:100vh;min-height:100svh;padding-bottom:92px}
  .copy{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:auto;margin:0 22px;padding-top:calc(clamp(50px,6.5svh,76px) + 84vw)}
  .focus-line{margin-bottom:16px;letter-spacing:.24em;font-size:10.5px}
  .motto{font-size:clamp(30px,8.6vw,44px)}
  .settle{margin-top:18px}
  .lede{font-size:15.5px;margin-bottom:18px}
  .ctas .btn{min-height:46px;padding:0 20px;font-size:14.5px}
  .site-nav{display:none}
  .site-header .btn-sm{display:none}
  .svc{grid-template-columns:1fr}
  .svc li{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .review{left:8px;bottom:8px;font-size:11px}
  .loop-shade{background:radial-gradient(95% 42% at 50% 42%,rgba(5,10,22,.18),rgba(5,10,22,.78) 100%),linear-gradient(0deg,rgba(5,10,22,.8),rgba(5,10,22,0) 34%)}
  .review-toggle{display:block;margin-left:auto;margin-bottom:6px;padding:6px 10px;border-radius:8px;border:1px solid rgba(201,209,220,.3);background:rgba(8,14,28,.86)}
}
@media (max-width: 900px) and (min-aspect-ratio: 4/5){
  .copy{width:min(56vw,560px)}
  .site-nav{display:none}
}

/* ---------- reduced motion ---------- */
.rm .ln,.rm .settle,.rm .focus-line{transition:none}
@media (prefers-reduced-motion: reduce){ .btn,.ln,.settle,.focus-line,.m-hold{transition:none!important} }
@media (max-aspect-ratio: 4/5) and (max-width: 360px){
  .focus-line{font-size:9.5px;letter-spacing:.16em}
  .motto{font-size:28px}
}