/* Vionario Work V3.5 — Work-only cinematic gallery.
 * Everything is scoped to this page. The shared footer, header and homepage
 * templates remain untouched. All content is visible if JavaScript is off.
 */
.work-v35 { background:#040b1a; overflow-x:clip; }
.work-v35__chapter { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center;
  min-height:calc(100svh - 5.5rem); padding-block:clamp(3.5rem,6svh,5rem); scroll-margin-top:5.5rem; }
.work-v35 .site-container { position:relative; z-index:1; min-width:0; }
.work-v35__intro { background:radial-gradient(ellipse at 76% 50%,#15386c 0%,#081c3d 43%,#040b1a 88%); overflow:hidden; }
.work-v35__intro-orbit { position:absolute; inset:-25% -10%; pointer-events:none; overflow:hidden; }
.work-v35__intro-orbit:before,.work-v35__intro-orbit:after { content:""; position:absolute; border:clamp(2rem,5vw,5rem) solid #1b65bf2f;
 border-radius:50%; width:min(74vw,900px); height:min(51vw,620px); top:44%; left:65%; transform:translate(-50%,-50%) rotate(-27deg) scaleY(.67); }
.work-v35__intro-orbit:after { left:86%; top:63%; width:min(38vw,460px); height:min(24vw,310px); border-width:clamp(1rem,2.8vw,3rem); border-color:#35c7ff24; }
.work-v35__intro-layout { display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(1.5rem,5vw,6rem);align-items:center; }
.work-v35 .eyebrow { color:#4de7fb; margin-bottom:clamp(.85rem,2vw,1.6rem); }
.work-v35__intro h1 { font-weight:750;font-size:clamp(3.5rem,5.9vw,6.6rem);letter-spacing:-.065em;line-height:1.035;max-width:12.5ch;margin:0 0 clamp(1.1rem,2vw,2rem);text-wrap:balance; }
.work-v35__intro h1 span { display:block; color:#abc1e2; }
.work-v35__intro-lead { max-width:43ch;color:#bdcce4;font-size:clamp(.98rem,1.5vw,1.19rem);line-height:1.7;margin:0 0 1.4rem; }
.work-v35__explore { display:inline-flex;align-items:center;gap:.8rem;color:#f3f9ff;border:1px solid #4c81bc;border-radius:999px;
 padding:.82rem 1.2rem;background:#0d2b55c2;text-decoration:none;font-size:.82rem;font-weight:720;letter-spacing:.025em;
 transition:border-color .2s,transform .2s,background .2s; }
.work-v35__explore:hover { border-color:#47eafd;background:#14386a;transform:translateY(-2px); }
.work-v35__explore svg { width:1rem;height:1rem; }
.work-v35__intro-art { min-height:380px;display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1.8vw,1.7rem);perspective:850px;
 transform:rotate(-6deg); }
.work-v35__floating-mock { flex:0 1 43%;height:285px;border:1px solid #2d78bc;border-radius:15px;
 background:linear-gradient(145deg,#123a7a,#071327);padding:clamp(10px,2vw,20px);box-shadow:0 30px 50px #0008; }
.work-v35__floating-mock--second { transform:translateY(38px);border-color:#5d59bb;background:linear-gradient(145deg,#272263,#0c142e); }
.work-v35__mock-stripes { display:grid;gap:9px;margin:15px 0 20px; }
.work-v35__mock-stripes i { display:block;height:5px;background:#36649d;width:75%;border-radius:6px; }
.work-v35__mock-stripes i:first-child { background:#3ce9ff;width:50%; }
.work-v35__mock-stripes i:last-child { width:63%; }
.work-v35__mock-sphere { width:clamp(70px,10vw,125px);aspect-ratio:1;max-width:100%;margin:0 auto;
 border-radius:50%;background:radial-gradient(circle at 30% 23%,#72f5ff,#208aee 44%,#0a2c87);box-shadow:0 0 34px #1f80ed65; }
.work-v35__floating-mock--second .work-v35__mock-sphere { background:radial-gradient(circle at 27% 23%,#d4c0ff,#8264ea 44%,#242172);
 border-radius:36% 64% 58% 42%; }
.work-v35__mock-tiles { display:flex;gap:7px;margin-top:27px; }
.work-v35__mock-tiles i { flex:1;height:34px;border-radius:5px;background:#153864; }
.work-v35__floating-mock--second .work-v35__mock-tiles i { background:#292b57; }
.work-v35__showcase { background:radial-gradient(ellipse at 80% 53%,#123568 0%,#081b36 40%,#040b1a 91%); }
.work-v35__showcase--two { background:radial-gradient(ellipse at 20% 52%,#162c63 0%,#0a1831 45%,#040b1a 91%); }
.work-v35__showcase:before,.work-v35__principles:before { content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,#9dcaff06 1px,transparent 1px);background-size:72px 100%;pointer-events:none; }
.work-v35__showcase-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 align-items:center;gap:clamp(2rem,6.5vw,7rem); }
.work-v35__project-art { min-width:0;display:flex;align-items:center;justify-content:center; }
.work-v35__project-art .work-card { width:100%;max-width:500px; }
.work-v35__project-art .work-card__visual { min-height:355px; display:flex;flex-direction:column;justify-content:space-between; }
.work-v35__project-art .work-mockup { margin:auto 0; }
.work-v35__project-art .work-card__visual-label,.work-v35__project-art .work-card__coordinate { color:#69dafa; }
.work-v35__project-copy { min-width:0; }
.work-v35__index { font:.73rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;color:#49e9fb;margin:0 0 1rem; }
.work-v35__project-copy h2 { font-size:clamp(2.6rem,4.4vw,5rem);font-weight:720;line-height:1.075;letter-spacing:-.06em;max-width:14ch;margin:0 0 1.4rem;text-wrap:balance; }
.work-v35__lead { color:#d0dff2;font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.65;margin:0 0 1.2rem;max-width:48ch; }
.work-v35__description { max-width:54ch;color:#acbfda;font-size:.97rem;line-height:1.7;margin:0 0 1.45rem; }
.work-v35__metadata { display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.72rem;color:#b1c7e1; }
.work-v35__metadata span:first-child { color:#57dce9;font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase; }
.work-v35__metadata span:last-child { border:1px solid #6689b077;border-radius:999px;padding:.3rem .7rem; }
.work-v35__principles { background:radial-gradient(ellipse at right,#10284f,#060f21 64%,#040a17); }
.work-v35__principles-header { margin-bottom:clamp(2rem,4svh,3rem); }
.work-v35__principles h2 { font-size:clamp(2.6rem,4.9vw,5rem);letter-spacing:-.062em;font-weight:650;max-width:18ch;line-height:1.1; }
.work-v35__principles-grid { gap:clamp(1rem,4vw,4rem); }
.work-v35__principles-grid .principle-card { border-top:1px solid #49c9f750; }
.work-v35__principles-grid .principle-card h3 {font-size:clamp(1.25rem,1.65vw,1.5rem);font-weight:650;margin:1.3rem 0 .9rem;}
.work-v35__principles-grid .principle-card p {color:#b0c1d9;line-height:1.7;font-size:.92rem;max-width:34ch;}
.work-v35__ending { position:relative;background:radial-gradient(ellipse at 84% 45%,#0c2754,#040b1a 76%);
 padding-block:clamp(2.25rem,4svh,3.25rem) clamp(1rem,1.8svh,1.5rem); }
.work-v35__ending .closing-cta { padding-block:0; }
.work-v35__ending .closing-cta__panel { min-height:clamp(23rem,47svh,34rem);display:flex;align-items:center;
 padding-block:clamp(2rem,4svh,3.8rem); }
.work-v35__ending .closing-cta__content { max-width:44rem; }
.work-v35__ending .closing-cta h2 { max-width:15ch; }
.work-v35 + .site-footer { padding-top:clamp(2rem,3.5svh,3rem); }
.work-v35 + .site-footer .footer-top { padding-bottom:clamp(1.5rem,3svh,2.75rem); }

/* Progressive enhancement: nav stays available and content stays visible without JS. */
html.v35-work-js body .site-header {position:fixed;z-index:100;left:0;right:0;top:0;
 transform:translate3d(0,calc(-100% - 8px),0);opacity:0;visibility:hidden;pointer-events:none;
 transition:transform .68s cubic-bezier(.16,1,.3,1),opacity .46s,visibility 0s linear .68s;}
html.v35-work-js.v35-work-nav-visible body .site-header {transform:translate3d(0,0,0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s,visibility 0s;}
html.v35-work-js body.admin-bar .site-header {top:32px;}
html.v35-work-js .work-v35__chapter {min-height:100svh;scroll-margin-top:0;}
html.v35-work-js body.admin-bar .work-v35__chapter {min-height:calc(100svh - 32px);}
html.v35-work-js .work-v35__intro {min-height:100svh;}
html.v35-work-js body.admin-bar .work-v35__intro {min-height:calc(100svh - 32px);}
html.v35-work-js .work-v35__chapter {padding-top:clamp(7rem,12vh,10rem);padding-bottom:clamp(2rem,4vh,4rem);}
html.v35-work-js .work-v35__intro {padding-top:clamp(2.5rem,5svh,4.5rem);}
html.v35-work-js .work-v35__chapter.is-v35-visible .v35-enter-left { animation:v35-work-left .95s cubic-bezier(.16,1,.3,1) both; }
html.v35-work-js .work-v35__chapter.is-v35-visible .v35-enter-right { animation:v35-work-right 1.03s cubic-bezier(.16,1,.3,1) .12s both; }
html.v35-work-js .work-v35__chapter.is-v35-visible .v35-enter-up { animation:v35-work-up .85s cubic-bezier(.16,1,.3,1) var(--v35-delay,0s) both; }
html.v35-work-js .work-v35__chapter.is-v35-visible .v35-enter-down { animation:v35-work-down .9s cubic-bezier(.16,1,.3,1) both; }
html.v35-work-js .work-v35__ending.is-v35-visible .v35-enter-up { animation:v35-work-up .9s cubic-bezier(.16,1,.3,1) both; }
/* Keep unrevealed content in the accessibility tree and keyboard order. */
html.v35-work-js .work-v35 [data-v35-chapter]:not(.is-v35-visible) :is(.v35-enter-left,.v35-enter-right,.v35-enter-up,.v35-enter-down) {opacity:0;}
/* Focus overrides entrance delays and the shared Web Animations reveal. */
html.v35-work-js .work-v35 [data-v35-chapter]:focus-within :is(.v35-enter-left,.v35-enter-right,.v35-enter-up,.v35-enter-down) {
 opacity:1!important;visibility:visible;transform:none!important;animation:none;
}
@keyframes v35-work-left {from{opacity:0;transform:translate3d(-85px,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes v35-work-right {from{opacity:0;transform:translate3d(85px,-12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes v35-work-up {from{opacity:0;transform:translate3d(0,65px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes v35-work-down {from{opacity:0;transform:translate3d(0,-65px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

@media(max-width:1023px){
 .work-v35__chapter,.work-v35__intro {min-height:auto;padding-block:clamp(4rem,8vw,6rem);}
 html.v35-work-js .work-v35__chapter,html.v35-work-js body.admin-bar .work-v35__chapter {min-height:auto;padding-block:clamp(4rem,8vw,6rem);}
 html.v35-work-js .work-v35__intro,html.v35-work-js body.admin-bar .work-v35__intro {min-height:calc(100svh - 5rem);padding-block:clamp(3rem,7vw,5rem);}
 .work-v35__intro h1 {font-size:clamp(2.9rem,6vw,4.8rem);}
 .work-v35__intro-art{min-height:290px;}
 .work-v35__floating-mock{height:235px;}
 .work-v35__mock-sphere{width:85px;}
 .work-v35__showcase-layout {gap:clamp(1.5rem,4vw,3rem);}
 .work-v35__project-art .work-card__visual{min-height:280px;}
 .work-v35__project-copy h2{font-size:clamp(2.5rem,5vw,4.25rem);}
}
@media(max-width:767px){
 html.v35-work-js body.admin-bar .site-header{top:46px;}
 .work-v35__intro-layout {grid-template-columns:1fr;gap:1.2rem;}
 .work-v35__intro h1 {font-size:clamp(2.8rem,10vw,4.6rem);}
 .work-v35__intro-lead{font-size:1rem;}
 .work-v35__intro-art{min-height:190px;gap:1rem;}
 .work-v35__floating-mock{max-width:170px;height:173px;padding:12px;transform:rotate(-7deg);}
 .work-v35__floating-mock--second{transform:translateY(24px) rotate(7deg);}
 .work-v35__mock-stripes{gap:6px;margin:4px 0 10px;}
 .work-v35__mock-stripes i{height:3px;}
 .work-v35__mock-sphere{width:60px;}
 .work-v35__mock-tiles{margin-top:13px;gap:5px;}
 .work-v35__mock-tiles i{height:15px;}
 .work-v35__showcase-layout,.work-v35__showcase-layout--reverse {grid-template-columns:1fr;gap:1.5rem;}
 .work-v35__showcase-layout--reverse .work-v35__project-copy{grid-row:1;}
 .work-v35__showcase-layout--reverse .work-v35__project-art{grid-row:2;}
 .work-v35__project-copy h2{font-size:clamp(2.4rem,8vw,3.8rem);margin-bottom:.9rem;}
 .work-v35__project-art .work-card{max-width:420px;}
 .work-v35__project-art .work-card__visual{min-height:235px;}
 .work-v35__principles-grid{grid-template-columns:1fr;gap:1rem;}
 .work-v35__principles-grid .principle-card {padding-top:1rem;}
 .work-v35__principles-grid .principle-card h3{margin:.5rem 0;}
 .work-v35__principles-grid .principle-card p{margin-bottom:0;}
 .work-v35__ending .closing-cta__panel{min-height:0;}
 .work-v35__ending .closing-cta__content{max-width:100%;}
 .work-v35__ending .closing-cta h2{font-size:clamp(2rem,8vw,3.4rem);}
 html.v35-work-js .work-v35__chapter.is-v35-visible :is(.v35-enter-right,.v35-enter-left){animation-duration:.7s;animation-delay:0s;}
}
@media(max-width:479px){
 html.v35-work-js .work-v35__intro,html.v35-work-js body.admin-bar .work-v35__intro {min-height:calc(100svh - 46px);}
 .work-v35__project-art .work-card__visual{min-height:210px;}
 .work-v35__intro-art{min-height:165px;}
 .work-v35__floating-mock{height:148px;max-width:140px;}
 .work-v35__mock-sphere{width:47px;}
 .work-v35__project-copy h2 {font-size:clamp(2.15rem,9.5vw,3.1rem);}
 .work-v35__principles h2 {font-size:clamp(2.25rem,10vw,3.1rem);}
}
@media(prefers-reduced-motion:reduce){
 html.v35-work-js .work-v35 [data-v35-chapter] :is(.v35-enter-left,.v35-enter-right,.v35-enter-up,.v35-enter-down) {
    opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important;}
 html.v35-work-js body .site-header{transition:none!important;}
 .work-v35 *, .work-v35 *::before, .work-v35 *::after {transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}


/* V3.6 inner-page standard: the Work navbar is visible from first paint. */
html.v35-work-js body .site-header,
html.v35-work-js.v35-work-nav-visible body .site-header {
  position:sticky;left:auto;right:auto;top:0;
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
html.v35-work-js body.admin-bar .site-header,
html.v35-work-js.v35-work-nav-visible body.admin-bar .site-header {top:32px;}
@media(max-width:782px){
 html.v35-work-js body.admin-bar .site-header,
 html.v35-work-js.v35-work-nav-visible body.admin-bar .site-header{top:46px;}
}
@media(max-width:600px){
 html.v35-work-js body.admin-bar .site-header,
 html.v35-work-js.v35-work-nav-visible body.admin-bar .site-header{top:0;}
}
@media(min-width:64rem) and (pointer:fine){
 html.v35-work-js .work-v35__chapter,
 html.v35-work-js .work-v35__intro {
   min-height:calc(100svh - 5.5rem);scroll-margin-top:5.5rem;
   padding-block:clamp(2.5rem,6svh,4.5rem);
 }
 html.v35-work-js body.admin-bar .work-v35__chapter,
 html.v35-work-js body.admin-bar .work-v35__intro {
   min-height:calc(100svh - 5.5rem - 32px);
 }
}
@media(max-width:1023px){
 html.v35-work-js .work-v35__intro,
 html.v35-work-js body.admin-bar .work-v35__intro{min-height:calc(100svh - 4.5rem);}
}