/* UPLINK-Toyama spatial interface system 2026 */
@view-transition{navigation:none}
::view-transition-old(root){animation:uplink-page-out .42s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:uplink-page-in .78s cubic-bezier(.16,1,.3,1) both}
@keyframes uplink-page-out{to{opacity:0;transform:scale(.985);filter:blur(8px)}}
@keyframes uplink-page-in{from{opacity:0;clip-path:inset(0 0 100% 0);transform:scale(1.025)}to{opacity:1;clip-path:inset(0);transform:none}}

html.spatial-ui{scroll-behavior:smooth}
body.spatial-ui-ready{--ui-pointer-x:50%;--ui-pointer-y:50%;--ui-scroll:0}
body.spatial-ui-ready main{overflow:clip}

.spatial-ui-ready .cinematic-hero{
  --hero-x:0px;
  --hero-y:0px;
  --hero-progress:0;
  --hero-shift:0rem;
  --hero-copy-shift:0rem;
  --hero-scale:1.075;
  overflow:hidden;
  min-height:min(58rem,100svh);
  background:#06151d;
}

.spatial-ui-ready .cinematic-hero picture{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 0 100% 0 round 0 0 4rem 4rem);
  transition:clip-path 1.35s cubic-bezier(.16,1,.3,1);
}
.spatial-ui-ready.ui-loaded .cinematic-hero picture{clip-path:inset(0)}

.spatial-ui-ready .cinematic-hero .page-hero-image{
  transform:translate3d(var(--hero-x),var(--hero-shift),0) scale(var(--hero-scale));
  transform-origin:var(--ui-pointer-x) var(--ui-pointer-y);
  transition:transform .18s linear;
  will-change:transform;
}

.spatial-ui-ready .cinematic-hero>.shell{
  transform:translate3d(0,var(--hero-copy-shift),0);
  transition:transform .18s linear;
}

.spatial-ui-ready .cinematic-hero .page-code,
.spatial-ui-ready .cinematic-hero .display,
.spatial-ui-ready .cinematic-hero .lead,
.spatial-ui-ready .cinematic-hero .button{
  opacity:0;
  transform:translateY(2.2rem);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1);
}
.spatial-ui-ready.ui-loaded .cinematic-hero .page-code,
.spatial-ui-ready.ui-loaded .cinematic-hero .display,
.spatial-ui-ready.ui-loaded .cinematic-hero .lead,
.spatial-ui-ready.ui-loaded .cinematic-hero .button{opacity:1;transform:none}
.spatial-ui-ready.ui-loaded .cinematic-hero .display{transition-delay:.08s}
.spatial-ui-ready.ui-loaded .cinematic-hero .lead{transition-delay:.18s}
.spatial-ui-ready.ui-loaded .cinematic-hero .button{transition-delay:.28s}

.ui-route-signature{
  position:absolute;
  z-index:6;
  right:clamp(1rem,3vw,3rem);
  bottom:clamp(1rem,3vw,2.5rem);
  display:flex;
  align-items:center;
  gap:.75rem;
  color:rgba(240,255,252,.75);
  font:700 .56rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
  pointer-events:none;
}
.ui-route-signature::before{content:"";width:4rem;height:1px;background:linear-gradient(90deg,transparent,currentColor)}

.spatial-ui-ready main>section[data-ui-scene]:not(.hero-v4):not(.cinematic-hero){
  --ui-enter:0;
  --ui-progress:.5;
  --ui-offset:4.5rem;
  --ui-opacity:.28;
  --ui-heading-shift:0rem;
  --ui-map-shift:0rem;
  --ui-map-scale:.96;
  --ui-visual-tilt:0deg;
  isolation:isolate;
}
.spatial-ui-ready main>section[data-ui-scene]:not(.hero-v4):not(.cinematic-hero)>.shell{
  opacity:var(--ui-opacity);
  transform:translate3d(0,var(--ui-offset),0);
  transition:opacity .25s linear,transform .25s linear;
}
.spatial-ui-ready main>section[data-ui-scene] .section-title,
.spatial-ui-ready main>section[data-ui-scene] h2{
  text-wrap:balance;
  transform:translate3d(var(--ui-heading-shift),0,0);
  transition:transform .18s linear;
}

.spatial-ui-ready .feature-grid,
.spatial-ui-ready .process{perspective:1400px}
.spatial-ui-ready .feature,
.spatial-ui-ready .process article,
.spatial-ui-ready .about-lens-grid a,
.spatial-ui-ready .living-product{
  --ui-card-x:50%;
  --ui-card-y:50%;
  position:relative;
  overflow:hidden;
  transform:perspective(1200px) rotateX(var(--ui-rx,0deg)) rotateY(var(--ui-ry,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s,border-color .45s,box-shadow .55s;
  will-change:transform;
}
.spatial-ui-ready .feature::after,
.spatial-ui-ready .process article::after,
.spatial-ui-ready .about-lens-grid a::after,
.spatial-ui-ready .living-product::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-35%;
  opacity:0;
  background:radial-gradient(circle at var(--ui-card-x) var(--ui-card-y),color-mix(in srgb,var(--page-accent,#64e0bf) 32%,transparent),transparent 27%);
  pointer-events:none;
  transition:opacity .35s;
}
.spatial-ui-ready :is(.feature,.process article,.about-lens-grid a,.living-product):hover::after{opacity:1}
.spatial-ui-ready :is(.feature,.process article,.about-lens-grid a,.living-product)>*{position:relative;z-index:1}
@media(hover:hover){
  .spatial-ui-ready .feature-grid:has(.feature:hover) .feature:not(:hover),
  .spatial-ui-ready .about-lens-grid:has(a:hover) a:not(:hover){opacity:.42;filter:saturate(.65)}
  .spatial-ui-ready .feature:hover,
  .spatial-ui-ready .about-lens-grid a:hover{box-shadow:0 2.8rem 7rem color-mix(in srgb,var(--page-accent,#64e0bf) 18%,transparent);border-color:color-mix(in srgb,var(--page-accent,#64e0bf) 58%,white)}
}

.spatial-ui-ready .field-instrument{position:relative;min-height:min(50rem,88svh);display:grid;align-items:center;overflow:hidden}
.spatial-ui-ready .field-instrument::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(40rem circle at var(--ui-pointer-x) var(--ui-pointer-y),color-mix(in srgb,var(--page-accent,#64e0bf) 14%,transparent),transparent 64%);
  pointer-events:none;
}
.spatial-ui-ready .field-instrument-visual{position:relative;isolation:isolate;transform:perspective(1000px) rotateX(var(--ui-visual-tilt));transform-style:preserve-3d}
.semantic-field-canvas{position:absolute;z-index:-1;inset:-12%;width:124%;height:124%;pointer-events:none;opacity:.86;mix-blend-mode:screen}
.spatial-ui-ready .instrument-core{box-shadow:0 0 5rem color-mix(in srgb,var(--page-accent,#64e0bf) 28%,transparent);transform:translateZ(38px)}
.spatial-ui-ready .instrument-node{transform:translateZ(18px);transition:transform .65s cubic-bezier(.16,1,.3,1),background .4s,color .4s}
.spatial-ui-ready .instrument-node.is-signal-active{transform:translateZ(50px) scale(1.07);background:color-mix(in srgb,var(--page-accent,#64e0bf) 25%,rgba(255,255,255,.88));color:#062a2b}

.field-pc .field-instrument-visual{border-radius:1.2rem;clip-path:polygon(0 6%,94% 0,100% 88%,7% 100%)}
.field-aquarium .field-instrument-visual{border-radius:50% 42% 56% 44%/48% 58% 42% 52%;overflow:hidden}
.field-web .field-instrument-visual{clip-path:polygon(8% 0,100% 0,92% 100%,0 90%)}
.field-welfare .field-instrument-visual{border-radius:2.8rem 8rem 3rem 9rem}

/* Each service has its own spatial grammar rather than a recoloured orbit */
.spatial-ui-ready:is(.field-pc,.field-aquarium,.field-web,.field-welfare) .instrument-axis{opacity:.16}
.spatial-ui-ready.field-pc .instrument-core{width:clamp(9.5rem,17vw,14rem);aspect-ratio:1.48;border-radius:.75rem;clip-path:polygon(0 0,82% 0,100% 28%,100% 100%,18% 100%,0 72%);background:linear-gradient(135deg,rgba(8,37,49,.96),rgba(10,24,42,.9));box-shadow:inset 0 0 0 1px rgba(180,238,255,.4),0 0 5rem rgba(91,189,255,.2)}
.spatial-ui-ready.field-pc .instrument-node{width:clamp(7rem,12vw,10rem);aspect-ratio:2.35;border-radius:.5rem;background:rgba(5,25,38,.9)}
.spatial-ui-ready.field-pc .instrument-node:nth-of-type(2){left:3%;top:12%}
.spatial-ui-ready.field-pc .instrument-node:nth-of-type(3){right:1%;top:19%}
.spatial-ui-ready.field-pc .instrument-node:nth-of-type(4){left:8%;bottom:8%}
.spatial-ui-ready.field-pc .instrument-node:nth-of-type(5){right:5%;bottom:5%}
.spatial-ui-ready.field-pc .instrument-node.is-signal-active{background:#b9e9f4;color:#061d24}

.spatial-ui-ready.field-aquarium .instrument-axis{display:none}
.spatial-ui-ready.field-aquarium .instrument-core{width:clamp(9rem,18vw,14rem);border-radius:53% 47% 58% 42%/46% 61% 39% 54%;background:rgba(3,37,44,.76);backdrop-filter:blur(8px)}
.spatial-ui-ready.field-aquarium .instrument-node{border-color:rgba(173,255,233,.32);background:rgba(5,47,53,.48);backdrop-filter:blur(9px)}
.spatial-ui-ready.field-aquarium .instrument-node:nth-of-type(2){left:10%;top:7%;width:7.2rem}
.spatial-ui-ready.field-aquarium .instrument-node:nth-of-type(3){right:5%;top:26%;width:9.4rem}
.spatial-ui-ready.field-aquarium .instrument-node:nth-of-type(4){left:3%;bottom:9%;width:5.8rem}
.spatial-ui-ready.field-aquarium .instrument-node:nth-of-type(5){right:18%;bottom:1%;width:7.6rem}
.spatial-ui-ready.field-aquarium .instrument-node.is-signal-active{background:rgba(151,255,224,.88);color:#073b3a}

.spatial-ui-ready.field-web .instrument-axis{opacity:.4;transform:rotate(0);inset:50% 3%}
.spatial-ui-ready.field-web .instrument-axis:nth-child(2){transform:rotate(90deg)}
.spatial-ui-ready.field-web .instrument-core{width:clamp(8rem,15vw,12rem);border-radius:1rem;transform:translateZ(38px) rotate(45deg);background:linear-gradient(145deg,rgba(26,20,59,.95),rgba(14,41,62,.9))}
.spatial-ui-ready.field-web .instrument-core span{transform:rotate(-45deg)}
.spatial-ui-ready.field-web .instrument-node{width:clamp(7.2rem,13vw,10.5rem);aspect-ratio:1.9;border-radius:.7rem;background:rgba(14,24,52,.88)}
.spatial-ui-ready.field-web .instrument-node:nth-of-type(2){left:3%;top:8%}
.spatial-ui-ready.field-web .instrument-node:nth-of-type(3){right:3%;top:8%}
.spatial-ui-ready.field-web .instrument-node:nth-of-type(4){left:3%;bottom:5%}
.spatial-ui-ready.field-web .instrument-node:nth-of-type(5){right:3%;bottom:5%}
.spatial-ui-ready.field-web .instrument-node.is-signal-active{background:#c7adff;color:#21133e}

.spatial-ui-ready.field-welfare .instrument-axis{display:none}
.spatial-ui-ready.field-welfare .instrument-core{left:23%;width:clamp(9rem,16vw,13rem);border-radius:42% 58% 55% 45%/54% 43% 57% 46%;background:linear-gradient(145deg,rgba(22,55,35,.96),rgba(5,47,45,.9))}
.spatial-ui-ready.field-welfare .instrument-node{left:auto!important;right:4%;width:clamp(9rem,15vw,12rem);aspect-ratio:3.6;border-radius:999px;background:rgba(13,48,39,.88)}
.spatial-ui-ready.field-welfare .instrument-node:nth-of-type(2){top:6%}
.spatial-ui-ready.field-welfare .instrument-node:nth-of-type(3){top:31%}
.spatial-ui-ready.field-welfare .instrument-node:nth-of-type(4){top:56%;bottom:auto}
.spatial-ui-ready.field-welfare .instrument-node:nth-of-type(5){top:81%;bottom:auto}
.spatial-ui-ready.field-welfare .instrument-node.is-signal-active{background:#b9eb9a;color:#17341e}

.spatial-ui-ready .process{position:relative;counter-reset:ui-step}
.spatial-ui-ready .process::before{content:"";position:absolute;z-index:0;top:50%;right:4%;left:4%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--page-accent,#64e0bf) 65%,transparent),transparent);transform:scaleX(var(--ui-enter));transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.spatial-ui-ready .process article{counter-increment:ui-step;backdrop-filter:blur(18px)}
.spatial-ui-ready .process article::before{content:"0" counter(ui-step);display:block;margin-bottom:clamp(2rem,6vw,5rem);color:color-mix(in srgb,var(--page-accent,#64e0bf) 72%,#123);font:800 .68rem/1 ui-monospace,monospace;letter-spacing:.16em}

.spatial-ui-ready .work-case-feature{transform-style:preserve-3d;perspective:1400px}
.spatial-ui-ready .work-case-phone{transform:translate3d(var(--phone-x,0),var(--phone-y,0),60px) rotateY(var(--phone-r,0deg));transition:transform .22s ease-out;filter:drop-shadow(0 2.5rem 4.5rem rgba(25,10,55,.25))}

.spatial-ui-ready .form{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.94),color-mix(in srgb,var(--page-accent,#72d9c0) 7%,white));box-shadow:0 3rem 9rem rgba(5,44,44,.1)}
.spatial-ui-ready .field{transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s}
.spatial-ui-ready .field:focus-within{transform:translateX(.55rem)}
.spatial-ui-ready .field:focus-within label{color:color-mix(in srgb,var(--page-accent,#42bfa2) 78%,#062c31)}

.spatial-ui-ready .atlas-stage,
.spatial-ui-ready .current-stage,
.spatial-ui-ready .proof-stage,
.spatial-ui-ready .field-journal,
.spatial-ui-ready .philosophy-v4{min-height:min(64rem,100svh);display:grid;align-items:center}
.spatial-ui-ready .atlas-stage .atlas-map,
.spatial-ui-ready .proof-stage .proof-visual,
.spatial-ui-ready .field-journal .journal-feature{transform:translate3d(0,var(--ui-map-shift),0) scale(var(--ui-map-scale));transition:transform .2s linear}

.ui-scroll-meter{position:fixed;z-index:120;right:0;top:0;width:2px;height:100svh;background:rgba(120,190,180,.08);pointer-events:none}
.ui-scroll-meter i{display:block;width:100%;height:var(--ui-scroll-height,0%);background:linear-gradient(#a5ffe5,#83baff,#dca8ff);box-shadow:0 0 1.2rem rgba(133,255,225,.7)}

@media(max-width:900px){
  .ui-route-signature,.ui-scroll-meter{display:none}
  .spatial-ui-ready .cinematic-hero{min-height:auto}
  .spatial-ui-ready .field-instrument{min-height:auto}
  .spatial-ui-ready .process::before{top:2rem;bottom:2rem;left:1.2rem;width:1px;height:auto;transform:scaleY(var(--ui-enter));transform-origin:top}
}

@media(max-width:700px){
  .spatial-ui-ready .cinematic-hero .page-hero-image{transform:translate3d(0,var(--hero-mobile-shift,0rem),0) scale(var(--hero-mobile-scale,1.035))}
  .semantic-field-canvas{inset:-6%;width:112%;height:112%;opacity:.65}
  .spatial-ui-ready main>section[data-ui-scene] .section-title,
  .spatial-ui-ready main>section[data-ui-scene] h2{transform:none}
  .spatial-ui-ready.field-welfare .instrument-core{left:28%}
  .spatial-ui-ready.field-welfare .instrument-node{right:1%;width:7.5rem;font-size:.7rem}
  .spatial-ui-ready.field-pc .instrument-node,.spatial-ui-ready.field-web .instrument-node{width:6.6rem}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .spatial-ui-ready .cinematic-hero picture{clip-path:none}
  .spatial-ui-ready .cinematic-hero .page-hero-image,
  .spatial-ui-ready .cinematic-hero>.shell,
  .spatial-ui-ready main>section[data-ui-scene]>.shell,
  .spatial-ui-ready main>section[data-ui-scene] h2,
  .spatial-ui-ready :is(.feature,.process article,.about-lens-grid a,.living-product){transform:none!important;transition:none!important}
  .spatial-ui-ready .cinematic-hero :is(.page-code,.display,.lead,.button){opacity:1;transform:none;transition:none}
  .semantic-field-canvas,.ui-scroll-meter{display:none}
}

@media(forced-colors:active){.semantic-field-canvas,.ui-scroll-meter,.ui-route-signature{display:none!important}}