/* APLIKE / motion-foundations.css
 * Canonical theme implementation: previously split historical styles, now collected
 * in cascade order. Do not create append-only override files. */

/* ===== LAYOUT AND REGION FOUNDATIONS ===== */
/* Cursor and prelude effects; editorial content remains Drupal-authored. */
/* Keep the useful broad glow but remove the distracting cursor crosshair/dot. */
.apx-site .apx-cursor-dot{display:none}
.apx-site .apx-cursor-halo{background:radial-gradient(circle,#83fff010 0%,#61a8f008 32%,transparent 71%);opacity:.46;z-index:5}

/* Scroll navigation: quiet neutral surface, recognisable corporate yellow arrow. */

/* Breadcrumbs and informational banner now form a subtly moving visual zone. */
.apx-site .apx-crumb{position:relative;isolation:isolate;overflow:visible}
.apx-site .apx-crumb::before{content:"";position:absolute;inset:4px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 8%,#74ffe713 42%,#ffd70011 57%,transparent 86%);background-size:220% 100%;animation:apxCrumbSweep 11s ease-in-out infinite}
.apx-site .apx-crumb nav{position:relative}
.apx-site .apx-crumb a{transition:color .3s,text-shadow .3s}
.apx-site .apx-crumb a:hover{color:#FFD700;text-shadow:0 0 13px #ffd70066}

@keyframes apxCrumbSweep{0%,18%{background-position:130% 0}70%,100%{background-position:-100% 0}}


/* Editorial captions should use the whole available width, rather than a 560px column. */
/* Editorial labels are allowed to use more than one line at ANY viewport width.
   The former nowrap + max-content pairing overflowed the left story column
   between the mobile and desktop breakpoints. Keep the icon on its own track
   and allow the author-written label to wrap rather than clipping it. */
.apx-site:is(.apx-site--service,.apx-site--hub) .apx-service-story .apx-section-intro .apx-editorial-signal,
.apx-site .apx-related .apx-editorial-signal--related{
  min-width:0;max-width:100%;width:fit-content;
  white-space:normal;overflow-wrap:anywhere;text-wrap:pretty;
  line-height:1.55;
}
.apx-site .apx-offer-microcopy{max-width:none;overflow-wrap:break-word}

/* List rows: no giant golden square, no clipped pseudo marker, no cursor implying an editor. */

@media(prefers-reduced-motion:reduce){.apx-site .apx-crumb::before{animation:none}}


/* ===== BREADCRUMBS AND INFO-BANNER DETAILS ===== */
/* Drupal remains the source of all visible editorial content. */

/* Breadcrumbs and Info Banner are separate Drupal regions sharing one colour-only scene. */
.apx-site .apx-prelude{position:relative;isolation:isolate;padding:4px 0 8px;overflow:hidden;}
.apx-site .apx-prelude::after{content:none}
.apx-site .apx-prelude .apx-crumb::before{content:none;animation:none}
.apx-site .apx-prelude .apx-crumb{background:transparent}
/* Decorative control becomes a genuinely integrated interactive pill. */
.apx-site .apx-tech-note{position:relative;width:max-content;overflow:hidden;}
.apx-site .apx-tech-note::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 25%,#ffd70023 48%,transparent 70%);background-size:260% 100%;animation:apx-v18-shimmer 9s linear infinite}
.apx-site .apx-tech-note__trigger{position:relative;z-index:1;overflow:visible;isolation:isolate}
.apx-site .apx-tech-note__rings{display:grid;place-items:center;width:22px;height:22px;position:relative}
.apx-site .apx-tech-note__rings i{display:block;position:absolute;width:20px;height:9px;border:1px solid currentColor;border-radius:50%;transform:rotate(52deg);animation:apx-v18-rings 4.5s linear infinite}
.apx-site .apx-tech-note__rings i:nth-child(2){transform:rotate(-52deg);animation-delay:-1.5s}
.apx-site .apx-tech-note__rings i:nth-child(3){width:5px;height:5px;background:currentColor;animation:apx-v18-core 2s ease-in-out infinite}
.apx-site .apx-tech-note__trigger:hover,.apx-site .apx-tech-note__trigger[aria-pressed=true]{transform:scale(1.15)}
@keyframes apx-v18-rings{to{rotate:360deg}}
@keyframes apx-v18-core{50%{scale:1.6;filter:drop-shadow(0 0 4px #ffd700)}}
@keyframes apx-v18-shimmer{to{background-position:-250% 0}}
/* Original lists: no text transformations or yellow rectangle on hover, only a glowing dot and a small glide. */

/* No yellow-on-yellow up-arrow: neutral background and rim, yellow centre icon. */

/* Reduced motion respects accessibility and leaves every piece of text visible. */
@media(prefers-reduced-motion:reduce){.apx-site :is(.apx-prelude,.apx-prelude::after,.apx-tech-note::after,.apx-tech-note__rings i){animation:none}}
/* Phones keep the two primary hero actions. The third telemetry pill is
   deliberately absent rather than wrapping to an unrelated second row. */
@media(max-width:760px){.apx-site .apx-hero__actions .apx-tech-note{display:none}}


/* ===== KINETIC EFFECTS ===== */
/* Kinetic transitions apply to Drupal-owned elements without altering content. */
/* Important: the prelude is a colour-only animated scene, unlike other regions. */
.apx-site .apx-prelude{
  box-shadow:inset 0 1px #ffffff14,inset 0 -1px #ffd7001c;
}
/* Info banner text: a travelling *light wave*, not a text-node split or jumping letters. */
/* Hero: microcopy occupies same action row; no wasted line beneath CTA. */
.apx-site .apx-hero__actions{display:flex;align-items:center;flex-wrap:wrap;column-gap:clamp(11px,1.5vw,22px);row-gap:13px}
.apx-site .apx-hero__actions .apx-tech-note{margin:0;min-height:47px;flex:0 1 auto;animation:apx19NoteFloat 7s ease-in-out infinite alternate;border-color:#FFD70097;box-shadow:inset 0 1px #fff2,0 6px 28px #ffdd0026}
.apx-site .apx-tech-note__trigger{transition:transform 1.45s var(--apx-silk),background 1.2s ease,color 1.2s ease,box-shadow 1.2s ease}
.apx-site .apx-tech-note__trigger:hover{transform:rotate(300deg) scale(1.1)}
.apx-site .apx-tech-note__rings i:first-child{animation-duration:8s}
.apx-site .apx-tech-note__rings i:nth-child(2){animation-duration:6s;animation-direction:reverse}
@keyframes apx19NoteFloat{to{translate:0 -3px;box-shadow:inset 0 1px #fff3,0 11px 36px #ffd70034}}
/* Desktop offer grid is independent of the relocated Rate widget. */
@media(min-width:1220px){
 .apx-site--service .apx-offer-band__inner{grid-template-columns:minmax(185px,.66fr) minmax(290px,1.12fr) minmax(420px,1.35fr);gap:clamp(15px,2vw,32px)}
}

/* Original lists, not tables: simple dot, bottom-up reveal with original DOM intact. */

/* Contacts: icon LEFT, text RIGHT. Existing Drupal links and data untouched. */
.apx-site .apx-contact-scene__card .messengers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.apx-site .apx-contact-scene__card .contact-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:57px;padding:11px 10px;position:relative;text-align:center;border-radius:13px;font-size:clamp(12px,1vw,15px);}
.apx-site .apx-contact-scene__card .contact-btn::before{position:static;left:auto;top:auto;transform:none;transition:transform 1.1s var(--apx-silk),filter .9s ease}
.apx-site .apx-contact-scene__card .contact-btn:hover::before{transform:scale(1.13) rotate(-5deg)}
@media(max-width:1280px){.apx-site .apx-contact-scene__card .messengers-grid{grid-template-columns:1fr}.apx-site .apx-contact-scene__card .contact-btn{min-height:58px}}
@media(min-width:1281px){.apx-site .apx-contact-scene__card .messengers-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.apx-site .apx-contact-scene__card .messengers-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.apx-site .apx-contact-scene__card .messengers-grid{grid-template-columns:1fr}.apx-site .apx-hero__actions{align-items:stretch}.apx-site .apx-hero__actions .apx-tech-note{margin:0}}
@media(prefers-reduced-motion:reduce){.apx-site .apx-prelude,.apx-site .apx-prelude::after,.apx-site .apx-hero__actions .apx-tech-note{animation:none}}
/* Drupal's core visually-hidden class can be missing in offline previews. */
.apx-site a.visually-hidden.focusable{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
.apx-site a.visually-hidden.focusable:focus-visible{position:fixed;top:10px;left:10px;z-index:900;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;background:#FFD700;color:#080c15;padding:12px 20px;border-radius:10px}


/* ===== EDITORIAL MOTION GUARDRAILS ===== */
/* Keep editorial transitions consistent with the shared reveal controller. */

/* Prevent multiple reveal effects from acting on the same editorial text. */
.apx-site .apx-prose :is(p,li,h2,h3),
.apx-site .apx-chapter :is(p,li,h2,h3),
.apx-site .apx-extended-section :is(p,li,h2,h3){
  filter:none;animation:none;
  
}

/* The rail is neutral sage / ink. Never bright yellow. */

/* One characteristic living field per region. Each background varies slowly
   even without pointer input. Background never intercepts links or controls. */


.apx-site .apx-region-code{display:block;width:100%;color:#93d8c9;font-size:11px;letter-spacing:.19em;font-weight:800;text-transform:uppercase;white-space:normal;margin:10px 0 0;line-height:1.6;text-shadow:0 0 14px #6affda20}
.apx-site .apx-related .apx-region-code--related{grid-column:1/-1;color:#e8cb9e}

@media(prefers-reduced-motion:reduce){.apx-site .apx-prose :is(p,li,h2,h3){transition:none}}


/* ===== REVEAL SUPPORT ===== */
/* One visibility owner for Drupal-rendered text and content cards.
   Only nodes registered by experience.js may be hidden. Without JS,
   IntersectionObserver, or motion preference, all content is visible. */
:root {
  --apx-reveal-duration: 1.55s;
  --apx-reveal-ease: cubic-bezier(.17,.78,.2,1);
}
/* Conceal only explicitly registered desktop reveals. Mobile content must
   never need a competing priority declaration to become visible. */
@media screen and (min-width: 1121px) and (prefers-reduced-motion: no-preference) {
  html.apx-motion-boot .apx-site [data-apx-reveal-text] {
    transition: opacity var(--apx-reveal-duration) var(--apx-reveal-ease),
                filter var(--apx-reveal-duration) var(--apx-reveal-ease),
                translate var(--apx-reveal-duration) var(--apx-reveal-ease) ;
  }
  html.apx-motion-boot .apx-site [data-apx-reveal-text][data-apx-reveal-pending] {
    opacity: 0 ;
    filter: blur(5px) ;
    transition: none ;
  }
  html.apx-motion-boot .apx-site :is(p,h2,h3,h4)[data-apx-reveal-pending] {
    translate: 0 19px ;
  }
  html.apx-motion-boot .apx-site [data-apx-reveal-text].apx-motion-visible {
    opacity: 1 ;
    filter: blur(0) ;
  }
  html.apx-motion-boot .apx-site :is(p,h2,h3,h4)[data-apx-reveal-text].apx-motion-visible {
    translate: 0 0 ;
  }
  /* Card transforms belong to hover/floating/tilt. Reveal touches opacity only. */
  html.apx-motion-boot .apx-site [data-apx-card-pending] {
    opacity: 0 ;
  }
  /* Media are registered by experience.js only after a desktop observer is
     ready. A CSS-owned pending state replaces inline opacity, which formerly
     required a priority override on mobile and destroyed authored styles. */
  .apx-site img[data-apx-media-pending] {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce), print {
  html.apx-motion-boot .apx-site [data-apx-reveal-text],
  html.apx-motion-boot .apx-site [data-apx-reveal-pending],
  html.apx-motion-boot .apx-site [data-apx-card-pending] {
    opacity: 1 ;
    filter: none ;
    translate: none ;
    transition: none ;
  }
}


/* ===== INTERFACE MOTION ===== */
/* Aplike UI: semantic, unversioned component finish. Source text remains Drupal-owned. */
:root{--apx-silk:cubic-bezier(.19,.82,.21,1)}
/* Gold editorial subheadings. Main HUB direction-card titles keep their component color. */
.apx-site:not(.apx-site--service):not(.apx-site--search) :is(.apx-prose,.apx-additional,.apx-widgets) :not(.apx-hub-main-card) > h3{color:#ffdb32;transition:color .75s ease,text-shadow .75s ease}
.apx-site :is(.apx-prose,.apx-additional,.apx-widgets) :not(.apx-hub-main-card) > h3:hover{color:#fff1a8;text-shadow:0 0 25px #ffd70058}
/* Bottom and side scroll controls: neutral body, deliberately red arrow. */

/* Richer, balanced contact composition; original links and labels are unchanged. */
.apx-site .apx-contact-scene__intro h2{background:linear-gradient(108deg,#ffffff 0%,#ffe75c 34%,#ff5d66 70%,#fcf0bd 100%);background-size:180% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:apxContactHeadingFlow 16s ease-in-out infinite alternate}
.apx-site .apx-contact-scene__card{border:1px solid #ffda5288;background:linear-gradient(125deg,#202b4b,#292a4e 53%,#183c40);background-size:190% 190%;animation:apxContactCardFlow 27s ease-in-out infinite alternate;box-shadow:0 28px 75px #0007,0 0 39px #ff00000f,inset 0 1px #ffef8b40}
.apx-site .apx-contact-scene__card .contacts-title{color:#ffe16b;text-shadow:0 0 19px #ffd70024}
.apx-site .apx-contact-scene__card .phone-number{color:#ffe76e}
.apx-site .apx-contact-scene__card .contact-btn{border-width:1px;border-style:solid;color:#fff}
.apx-site .apx-contact-scene__card .btn-max{background:linear-gradient(125deg,#6b3acb,#352374);border-color:#ba9bff}
.apx-site .apx-contact-scene__card .btn-telegram{background:linear-gradient(125deg,#15a6dd,#04547f);border-color:#73dfff}
.apx-site .apx-contact-scene__card .btn-whatsapp{background:linear-gradient(125deg,#0d9c69,#06503e);border-color:#71e1b2}
.apx-site .apx-contact-scene__card .contact-btn:hover{transform:translateY(-5px) scale(1.025);filter:brightness(1.18);box-shadow:0 16px 35px #0006}
.apx-site .apx-contact-scene__card .contact-btn::before{width:34px;height:34px;filter:drop-shadow(0 2px 5px #0006)}

/* Small decorative telemetric captions, all editable in theme settings. */
.apx-site .apx-offer-band__english{display:block;margin-top:10px;color:#85321e;font-size:11px;letter-spacing:.17em;font-weight:850;text-transform:uppercase}
.apx-site .apx-region-code--additional,.apx-site .apx-region-code--widgets{display:block;margin:14px 0;color:#ffe188;text-align:right;font-size:11px}
@keyframes apxContactHeadingFlow{to{background-position:100% 0}}
@keyframes apxContactCardFlow{to{background-position:100% 70%}}
@media(max-width:900px){.apx-site .apx-contact-scene__intro h2{background-size:100% 100%}}
@media(prefers-reduced-motion:reduce){.apx-site .apx-contact-scene__intro h2,.apx-site .apx-contact-scene__card{animation:none}}
/* Drupal's skip link lives outside .apx-site; preserve accessibility, not a visible strip. */
body>a.visually-hidden.focusable[href="#main-content"]{position:absolute;top:-120px;left:14px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;z-index:9999}
body>a.visually-hidden.focusable[href="#main-content"]:focus{position:fixed;top:12px;left:12px;clip-path:none;width:auto;height:auto;padding:12px 18px;background:#121b2a;color:#ffdf4e;border:2px solid #ffdf4e;border-radius:8px;overflow:visible}

/* Brand headline: same luminous spectrum as closing project invitation.
   Heading stays in Drupal HTML; only its optical rendering changes. */
.apx-site .apx-hero__copy h1{
  background:linear-gradient(112deg,#f9fcff 4%,#c7fff5 21%,#ffea7c 43%,#ff925f 63%,#ff5c77 80%,#fff2bc 98%);
  background-size:175% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:apxHeroHeadlineFlow 18s ease-in-out infinite alternate;
  text-shadow:none;
}
@keyframes apxHeroHeadlineFlow{0%{background-position:25% 50%}100%{background-position:75% 50%}}
@media(prefers-reduced-motion:reduce){.apx-site .apx-hero__copy h1{animation:none;background-position:45% 50%}}


@media(prefers-reduced-motion:reduce){
  .apx-site .apx-tech-note__rings i:nth-child(3){animation:none}
}

@media(max-width:1120px){
  .apx-site .apx-tech-note__rings i:nth-child(3){animation:none}
}