/* NEXO motion layer (28.10.2026, Yaroslav: «all the motion of the Avvocato theme, keep our colours and
   button shapes»). Letter «blinds» on the H1, scroll reveals, sticky header, link
   underlines, counters and a side tab. Published on every page by scripts/site/fix-motion.mjs as
   assets/css/motion-nx.perf-<hash>.css. Everything is gated on html.mx, which motion.js sets only when the
   visitor has not asked for reduced motion. Nothing here changes texts or links. The Rayo layer (§19–§27,
   28.10.2026) was removed on 30.10.2026 at Yaroslav's request. */
:root{--mx-ease:cubic-bezier(.22,1,.36,1);--mx-ease-io:cubic-bezier(.77,0,.175,1);--mx-gold:#c29a4b}

/* 1. Intro curtain (home page, first visit of the session) */
.mx-curtain{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#f2f8f6;pointer-events:none;
  animation:mx-curtain-out .75s var(--mx-ease-io) .55s forwards}
.mx-curtain img{width:min(260px,52vw);height:auto;opacity:0;animation:mx-logo-in .5s var(--mx-ease) .05s forwards}
.mx-curtain:after{content:"";position:absolute;left:50%;bottom:calc(50% - 70px);width:120px;height:1px;margin-left:-60px;background:var(--mx-gold);
  transform:scaleX(0);transform-origin:left;animation:mx-line .5s var(--mx-ease) .15s forwards}
@keyframes mx-curtain-out{to{transform:translateY(-100%)}}
@keyframes mx-logo-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mx-line{to{transform:scaleX(1)}}

/* 2. Sticky header: shrinks and gains a hairline shadow once the page scrolls */
.mx .site-header{transition:box-shadow .4s var(--mx-ease),background-color .4s var(--mx-ease)}
.mx .site-header .brand-logo-glass{transition:scale .45s var(--mx-ease);transform-origin:left center}
.mx .site-header.mx-scrolled{box-shadow:0 10px 30px -18px rgba(9,47,52,.35)!important}
.mx .site-header.mx-scrolled .brand-logo-glass{scale:.86}
.mx .reading-progress{display:block!important;position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--mx-gold);
  transform:scaleX(var(--mx-progress,0));transform-origin:left;opacity:1}

/* 3. Animated underlines on navigation and text links */
.mx :is(.main-nav a,.text-link,.gold-link,.site-footer .footer-col a,.v-cta-phone){background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:100% 100%;background-size:0 1px;transition:background-size .45s var(--mx-ease),color .25s}
.mx :is(.main-nav a,.text-link,.gold-link,.site-footer .footer-col a,.v-cta-phone):hover{background-position:0 100%;background-size:100% 1px}
.mx .gold-link svg{transition:transform .4s var(--mx-ease)}
.mx .gold-link:hover svg{transform:translateX(5px)}

/* 4. Headline «blinds»: letters fold down one after another */
.mx .mx-split{display:inline-block;white-space:nowrap}
.mx .mx-ch{display:inline-block;transform-origin:50% 0;transform:perspective(400px) rotateX(-95deg);opacity:0;
  transition:transform .8s var(--mx-ease),opacity .5s var(--mx-ease);transition-delay:calc(var(--d,0) * 1ms)}
.mx .mx-go .mx-ch{transform:none;opacity:1}

/* 5. Section headings: words rise out of a mask */
.mx .mx-words .mx-wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mx .mx-words .mx-wi{display:inline-block;transform:translateY(105%);transition:transform .9s var(--mx-ease);transition-delay:calc(var(--d,0) * 1ms)}
.mx .mx-words.mx-in .mx-wi{transform:none}

/* 6. Fade-up reveals with stagger */
.mx .mx-up{opacity:0;translate:0 34px;transition:opacity .9s var(--mx-ease),translate .9s var(--mx-ease);transition-delay:calc(var(--d,0) * 1ms)}
.mx .mx-up.mx-in{opacity:1;translate:0 0}
/* the bundle pins some hero blocks to opacity:1 !important */
html.mx body .mx-up:not(.mx-in){opacity:0!important;translate:0 34px!important}
.mx .mx-left{opacity:0;translate:-40px 0;transition:opacity .9s var(--mx-ease),translate .9s var(--mx-ease);transition-delay:calc(var(--d,0) * 1ms)}
.mx .mx-left.mx-in{opacity:1;translate:0 0}

/* 8. Hero: slow Ken Burns on the portrait, the name card slides in and floats */
/* the zoom grows from the top edge, so the head is never cut (Yaroslav, 28.10) */
.mx .nx-hero .nx-portrait.mx-in img{object-position:50% 0;transform-origin:50% 0;animation:mx-kenburns 18s ease-in-out 1.4s infinite alternate}
@keyframes mx-kenburns{from{scale:1.08}to{scale:1.18}}
.mx .nx-hero .nx-chip.mx-in{animation:mx-float 6s ease-in-out 2.4s infinite alternate}
@keyframes mx-float{from{translate:0 0}to{translate:0 -8px}}
.mx .nx-art{transition:transform .6s var(--mx-ease);transform:perspective(1200px) rotateY(var(--mx-rx,0deg)) rotateX(var(--mx-ry,0deg))}
.mx .nx-mobile-hero-dossier img{animation:mx-rise .8s var(--mx-ease) .2s both}
/* Inner pages: the hero picture stays visible from the first frame (it is the page's main image) and only drifts */
.mx .page-hero-art.mx-kb{overflow:hidden}
.mx .page-hero-art.mx-kb img{animation:mx-kenburns 20s ease-in-out infinite alternate}
@keyframes mx-rise{from{opacity:0;transform:translateY(40px)}}

/* 9. Drifting background light behind the whole page */
.mx body[data-design=nexo]:before{animation:mx-drift 22s ease-in-out infinite alternate}
.mx body[data-design=nexo]:after{animation:mx-drift 28s ease-in-out -9s infinite alternate-reverse}
@keyframes mx-drift{from{transform:translate3d(-2%,-1%,0) scale(1.04)}to{transform:translate3d(2%,1.5%,0) scale(1.1)}}

/* 10. Cards: lift, picture zoom, arrow moves out */
/* the reveal transitions are repeated here, or this list would replace them */
.mx :is(.nx-tile a,.nx-map-card,.nx-person,.nx-post,.nx-offer-tickets li,.article-card,.calc-card,.team-card,.re-area-card,.related-links a){
  transition:opacity .9s var(--mx-ease) calc(var(--d,0) * 1ms),translate .9s var(--mx-ease) calc(var(--d,0) * 1ms),transform .5s var(--mx-ease),box-shadow .5s var(--mx-ease),border-color .3s}
.mx :is(.nx-tile a,.nx-map-card,.nx-person,.nx-post,.nx-offer-tickets li,.article-card,.calc-card,.team-card,.re-area-card):hover{transform:translateY(-6px)!important;box-shadow:0 26px 50px -28px rgba(9,47,52,.45)!important}
.mx .related-links a:hover{transform:translateX(4px)}
.mx :is(.nx-tile a,.nx-map-card,.nx-person,.nx-post,.article-card):hover :is(img,.nx-cover,.photo){scale:1.14!important;transition:scale 1.2s var(--mx-ease)!important}
.mx .nx-service-link [aria-hidden]{display:inline-block;transition:transform .45s var(--mx-ease)}
.mx .nx-tile a:hover .nx-service-link [aria-hidden]{transform:translate(4px,-4px)}
.mx :is(.nx-chips a,.nx-stage-chips a){transition:transform .35s var(--mx-ease),background-color .3s,border-color .3s}
.mx :is(.nx-chips a,.nx-stage-chips a):hover{transform:translateY(-3px)}

/* 11. Buttons keep their shape; a light sweep crosses them on hover and the arrow slides */
.mx .btn{position:relative;overflow:hidden;isolation:isolate}
.mx .btn:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--mx-ease)}
.mx .btn:hover:after{transform:translateX(120%)}
.mx .btn svg{transition:transform .45s var(--mx-ease)}
.mx .btn:hover svg{transform:translateX(5px)}
.mx .btn:active{scale:.98}

/* 12. Steps: the rule above each step draws itself, numbers count up */
.mx .nx-steps li{position:relative}
.mx .nx-steps li:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--mx-gold);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--mx-ease-io);transition-delay:calc(var(--d,0) * 1ms + 150ms)}
.mx .nx-steps li.mx-in:before{transform:scaleX(1)}

/* 13. Quote: the mark swings in */
.mx .nx-quote .nx-quote-mark{display:inline-block;transform:scale(.3) rotate(-25deg);opacity:0;transition:transform 1s var(--mx-ease) .2s,opacity .6s .2s}
.mx .nx-quote.mx-in .nx-quote-mark{transform:none;opacity:1}


/* 15. Vertical «Консультация» tab on the right edge (desktop) */
.mx-side{position:fixed;right:0;top:50%;z-index:60;transform:translate(100%,-50%);transition:transform .7s var(--mx-ease)}
.mx-side.mx-in{transform:translate(0,-50%)}
.mx-side a{display:block;writing-mode:vertical-rl;rotate:180deg;padding:22px 12px;background:#0d4a52;color:#fff;font:600 13px/1 var(--font-body,Manrope,sans-serif);
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:0 10px 10px 0;transition:padding .35s var(--mx-ease),background-color .3s}
.mx-side a:hover{padding-left:18px;background:#0a3a41}
@media (max-width:1080px){.mx-side{display:none}}

/* 16. Cross-page transitions (Chrome, Edge, Safari 18.2+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mx-vt-out .35s var(--mx-ease) both}
::view-transition-new(root){animation:mx-vt-in .55s var(--mx-ease) both}
@keyframes mx-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes mx-vt-in{from{opacity:0;transform:translateY(18px)}}

/* 17. Phone header (28.10.2026, Yaroslav: «keep the buttons, everything around them 100 % transparent»; then
   «a background when scrolling»). Not motion and not gated on .mx: at the top of the page the bar and the
   language pill have no fill, border, blur or shadow; once the page scrolls (.mx-scrolled, set by motion.js
   even with reduced motion) the bar gets its light frosted background back, so text does not run under the
   logo. The menu button and RU/EN/ES keep their look. */
@media (max-width:760px){
  body[data-design=nexo] .site-header{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    transition:background-color .35s ease,border-color .35s ease}
  body[data-design=nexo] .site-header.mx-scrolled{background:rgba(239,249,246,.88)!important;border-bottom-color:rgba(9,47,52,.08)!important;box-shadow:0 10px 30px -22px rgba(9,47,52,.4)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.35)!important;backdrop-filter:blur(20px) saturate(1.35)!important}
  body[data-design=nexo] .site-header .nx-lang-switch{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* 18. Phone bottom bar (28.10.2026, Yaroslav): the bar around «Пройти квиз» and «Консультация» is fully
   transparent (no fill, top line, blur or shadow); the two buttons keep their look. Not gated on .mx. */
@media (max-width:760px){
  html body[data-design=nexo] .nx-mobile-actions:not([hidden]){background:transparent!important;border-top-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* 29. Home «Виды ВНЖ Испании» block (scripts/site/fix-keywords.mjs, 30.10): cards with the main residence routes */
.nx-kinds{margin-top:clamp(56px,7vw,96px)}
/* The home <main> is a flex column that places its sections with `order` (hero 1, tiles 2, first quiz 3 …).
   A section without an order gets 0 and jumps above the hero: keep «Виды ВНЖ» after the first quiz invite
   and the EN/ES answer section right after the hero. */
body[data-page=home] main>.nx-kinds{order:3}
body[data-page=home] main>.nx-answer{order:1}
.nx-kinds .nx-head{max-width:820px}
.nx-kinds .nx-head p:not(.eyebrow){color:#2c4448;font-size:17px;line-height:1.6;margin-top:14px}
.nx-kinds-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.nx-kinds-list a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 24px;border-radius:22px;background:rgba(255,255,255,.62);
  border:1px solid rgba(13,74,82,.12);color:#2c4448;text-decoration:none;transition:border-color .3s,transform .3s}
.nx-kinds-list a:hover{border-color:#c29a4b;transform:translateY(-2px)}
.nx-kinds-list strong{font-family:var(--font-body,Manrope,sans-serif);font-weight:600;font-size:20px;letter-spacing:-.02em;color:#092f34}
.nx-kinds-list span{font-size:15px;line-height:1.55}
.nx-kinds-note{max-width:820px;margin-top:22px;color:#2c4448;font-size:15px;line-height:1.6}
.nx-kinds-note a{color:#0d4a52}
@media (prefers-reduced-motion:reduce){.nx-kinds-list a{transition:none}.nx-kinds-list a:hover{transform:none}}

@media print{html.mx :is(.mx-up,.mx-left,.mx-wi,.mx-ch){opacity:1!important;translate:none!important;transform:none!important;clip-path:none!important}
  .mx-side,.mx-curtain{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .mx-curtain{animation:none!important}.mx-curtain{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* §28 Шапка на узком телефоне (375 px и уже): логотип, меню и RU/EN/ES не помещались, ES уходил за край.
   Сжимаем только промежутки и шрифт переключателя языков, логотип прежний. */
@media (max-width: 400px) {
  .header-inner { gap: 8px !important; column-gap: 8px !important; }
  .header-actions { gap: 4px !important; }
  .nx-lang-switch { padding: 2px !important; }
  .nx-lang-switch a { padding: 0 3px !important; font-size: 15px !important; }
}
/* 370 px и уже (Android 360 px, старые iPhone 320 px): логотип чуть меньше, иначе ES всё равно не помещается. */
@media (max-width: 370px) {
  .brand { zoom: .82; }
}

/* §30. Home: the answer-first section after the hero («Как получить ВНЖ Испании в 2026 году», scripts/site/fix-ai-answers.mjs). */
.nx-answer{margin-top:clamp(40px,5vw,64px)}
.nx-answer .nx-head{max-width:860px}
.nx-answer .nx-head p:not(.eyebrow){color:#2c4448;font-size:17px;line-height:1.6;margin-top:14px}
.nx-answer .nx-head p a{color:var(--teal,#0d4a52);text-decoration:underline;text-underline-offset:3px}
.nx-kinds .nx-head h3{margin:26px 0 0;font-size:clamp(20px,2.2vw,24px);line-height:1.25;color:var(--teal,#0d4a52)}

/* §31. Digital nomad hub: the income-figure explanation as a named callout (scripts/site/fix-ai-answers.mjs). */
.dnv-callout{margin:22px 0;padding:20px 22px 16px;border-radius:22px;background:rgba(255,255,255,.62);border:1px solid var(--line,#cfe1e4)}
.dnv-callout-title{margin:0 0 10px;font-size:20px;line-height:1.3;color:var(--teal,#0d4a52)}
.dnv-callout p{margin:0 0 10px}
.dnv-callout-note{font-size:14px;color:var(--muted,#53686c)}

/* §32. Snow-blue background (30.10.2026, Yaroslav: «очень нежный снежно-голубой с плавным переходом в белый»).
   Replaces the mint/turquoise page background of the bundle: the fixed layers behind the page (body:before/after,
   still drifting with §9), the pale surface variables and the mint tints of the header, quiz blocks, light buttons
   and phone buttons. Brand colours stay: petrol buttons and links, gold accents, the dark «how we work», CTA and
   footer bands. Not motion, not gated on .mx. */
:root{--snow-1:#e4effb;--snow-2:#eef5fd;--snow-3:#f6faff}
html body[data-design=nexo]{--bg:#f6faff;--bg-2:#ebf3fc;--sky:#dbe9f8;--line:#d4e2f0;--line-soft:#e5eef8;--rx-mist:#f6faff;--rx-fog:#edf4fc;background:#fff}
html{background:#fff}
html body[data-design=nexo]:before{background:radial-gradient(ellipse 70% 55% at 85% 0%,#dceafa 0%,rgba(220,234,250,0) 70%),
  radial-gradient(ellipse 60% 45% at 0% 10%,#e6f0fc 0%,rgba(230,240,252,0) 70%),
  linear-gradient(180deg,var(--snow-1) 0%,var(--snow-2) 30%,var(--snow-3) 60%,#fff 100%)}
html body[data-design=nexo]:after{background:radial-gradient(ellipse 55% 40% at 20% 8%,#e1edfb 0%,rgba(225,237,251,0) 70%),
  radial-gradient(ellipse 50% 40% at 90% 40%,#eef5fe 0%,rgba(238,245,254,0) 70%),linear-gradient(180deg,rgba(255,255,255,0) 55%,#fff 100%)}
html body[data-design=nexo] .site-header{background:rgba(246,250,255,.8)}
@supports not (backdrop-filter:blur(1px)){html body[data-design=nexo] .site-header{background:#f6faff}}
@media (max-width:760px){html body[data-design=nexo] .site-header.mx-scrolled{background:rgba(246,250,255,.9)!important}}
html body[data-design=nexo] .main-nav.open{background:rgba(246,250,255,.97)}
html body[data-design=nexo] .nx-quiz-invite{background:#eef5fd}
html body[data-design=nexo] .nx-quiz-prep{background:#f7faff}
html body[data-design=nexo] .nx-end-actions,html body[data-design=nexo] .quiz-result-note{background:#eff5fd}
html body[data-design=nexo] .quiz-options label:has(input:checked){background:#dfecfa}
html body[data-design=nexo] :is(.btn.secondary,.quiz-switch button[aria-pressed=false]){background:linear-gradient(145deg,#ffffffcc,#dfecfaa3);border-color:#8fb0cc8c}
html body[data-design=nexo] .nx-mobile-actions a:first-child{background:linear-gradient(145deg,#ffffff94,#d9e8f866)!important}
@media (prefers-reduced-transparency:reduce){html body[data-design=nexo] .nx-mobile-actions a:first-child{background:#f4f8fe!important}}
html body[data-design=nexo] .nx-social-dock :is(button,a){background:#e8f1fbb3}
html body[data-design=nexo] .nx-quote{background:linear-gradient(160deg,#eaf2fc,#f6faff 80%)}
html body[data-design=nexo] .v-cta:not(.nx-cta){background:linear-gradient(180deg,var(--bg-2),#dde9f7)}
html body[data-page=home] .nx-offer-panel{background:linear-gradient(120deg,#ffffffaa,#dceafa66)}
html body[data-page=home] .nx-art:before{background:#dceaf84d}
html body[data-page=home] .nx-portrait{background:#dae7f4}
html body[data-page=home] :is(.nx-service-image,.nx-about-photo){background:#e8f0f9}
html body[data-design=nexo] .nx-kinds-list a,html body[data-design=nexo] .dnv-callout{background:rgba(255,255,255,.7)}
/* §33. Blue logo (tools/make-blue-logo.py, 30.10.2026) on the dark navy footer: lighter, or it sinks into the band. */
html body .site-footer .brand img{filter:brightness(2.1) saturate(.9) drop-shadow(0 5px 10px rgba(0,0,0,.22))}