/* SINVEC V6.201 — only touch displays, no changes to desktop selectors.
   Motion is kept off the full-screen video compositor. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  /* Short editorial transition instead of the desktop full-screen 3D wipe. */
  html.sinvec-mobile-effects .white-section.sinvec-mobile-page-enter::after {
    content:"";
    position:fixed; inset:0; z-index:50; pointer-events:none;
    background:#080808;
    animation:sinvec-mobile-page-veil .34s cubic-bezier(.18,.65,.27,1) both;
  }
  @keyframes sinvec-mobile-page-veil {
    from {opacity:.88}
    to {opacity:0}
  }
  /* Restore scroll reveals without an animated, GPU-heavy scrolling container. */
  html.sinvec-mobile-effects .white-section.visible .sinvec-mobile-reveal {
    opacity:0;
    translate:0 17px;
    transition:opacity .48s cubic-bezier(.2,.7,.25,1),translate .48s cubic-bezier(.2,.7,.25,1);
  }
  html.sinvec-mobile-effects .white-section.visible .sinvec-mobile-reveal.sinvec-mobile-revealed {
    opacity:1;
    translate:0 0;
  }
  /* Preserve native hover intent using a transient press state on touchscreen.
     Never shift the SVG arrows: their optical centering was fixed in V6.200. */
  html.sinvec-mobile-effects .white-section .ws-hero-side,
  html.sinvec-mobile-effects .white-section .ws-project,
  html.sinvec-mobile-effects .white-section .wap-card,
  html.sinvec-mobile-effects .white-section .sinvec-team-card {
    transition:box-shadow .24s ease, transform .24s ease, background-color .24s ease;
  }
  html.sinvec-mobile-effects .white-section .ws-hero-side.sinvec-mobile-pressed,
  html.sinvec-mobile-effects .white-section .ws-project.sinvec-mobile-pressed,
  html.sinvec-mobile-effects .white-section .wap-card.sinvec-mobile-pressed {
    box-shadow:0 12px 32px rgba(0,0,0,.52);
    transform:translateY(-2px);
  }
  html.sinvec-mobile-effects .white-section .ws-hero-side.sinvec-mobile-pressed .ws-hero-side-img::after,
  html.sinvec-mobile-effects .white-section .ws-project.sinvec-mobile-pressed .ws-project-img::after {
    opacity:.38;
  }
  html.sinvec-mobile-effects .white-section .ws-hero-side.sinvec-mobile-pressed .ws-hero-side-viewmore,
  html.sinvec-mobile-effects .white-section .ws-project.sinvec-mobile-pressed .ws-project-viewmore {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    color:#fff;
  }
  html.sinvec-mobile-effects .white-section .wap-card.sinvec-mobile-pressed .wap-card-media {
    transform:scale(1.015);
  }
  html.sinvec-mobile-effects .white-section .sinvec-team-card.sinvec-mobile-pressed {
    transform:translateY(-6px) rotate(0deg);
  }
  html.sinvec-mobile-effects .white-section :is(.ws-hero-btn,.ws-work-btn,.ws-cta-btn,.ws-solution-head,.wap-pill,.brief-option,.brief-chip,.brief-back-step,.brief-next-step,.brief-submit,.contact-send,.contact-interest-options label,.sinvec-fixed-back).sinvec-mobile-pressed {
    filter:brightness(1.17);
  }
  html.sinvec-mobile-effects .white-section .ws-solution-head.sinvec-mobile-pressed {
    background:rgba(255,255,255,.07);
  }
  html.sinvec-mobile-effects .white-section :is(.ws-hero-side-arrow,.ws-project-arrow,.wap-card-arrow) {
    transition:background-color .25s ease !important;
  }
  html.sinvec-mobile-effects .white-section :is(.ws-hero-side,.ws-project,.wap-card).sinvec-mobile-pressed :is(.ws-hero-side-arrow,.ws-project-arrow,.wap-card-arrow) {
    background:#d8d8d8;
  }
  /* Return restrained editorial type entry on the stage, strictly at stops.
     During a gesture V6.197's display:none rules still take priority. */
  html.sinvec-mobile-effects.sinvec-mobile-magnet:not(.sinvec-mobile-in-motion) .sinvec-lite-service-info:not([hidden]) {
    animation:sinvec-mobile-type-in .36s cubic-bezier(.2,.8,.26,1) both !important;
  }
  @keyframes sinvec-mobile-type-in {
    from {opacity:0;translate:0 9px}
    to {opacity:1;translate:0 0}
  }
  /* Desktop footer has layered section entrances. Use only opacity on mobile. */
  html.sinvec-mobile-effects body.footer-scene-active .footer-scene__columns {
    animation:sinvec-mobile-footer-in .47s ease-out both;
  }
  @keyframes sinvec-mobile-footer-in {
    from {opacity:0}
    to {opacity:1}
  }
}
@media (max-width:900px) and (pointer:coarse) and (prefers-reduced-motion:reduce), (max-width:900px) and (pointer:fine) and (hover:hover) and (prefers-reduced-motion:reduce) {
  html.sinvec-mobile-effects .white-section.sinvec-mobile-page-enter::after,
  html.sinvec-mobile-effects .white-section.visible .sinvec-mobile-reveal,
  html.sinvec-mobile-effects.sinvec-mobile-magnet:not(.sinvec-mobile-in-motion) .sinvec-lite-service-info:not([hidden]),
  html.sinvec-mobile-effects body.footer-scene-active .footer-scene__columns {
    animation:none!important;transition:none!important;opacity:1!important;translate:none!important;
  }
}

/* V6.202 — mobile touch target accessibility and keyboard safe area. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  .nav-services li[data-service] { min-height:40px; align-items:center; padding:4px 6px; border-radius:9px; }
  .nav-services li[data-service]:focus-visible { outline:2px solid rgba(255,255,255,.95); outline-offset:1px; }
  .header-main .header-links a { padding-block:10px; }
  html.sinvec-mobile-typing .white-section.visible > .sinvec-fixed-back { display:none!important; }
}

/* V6.202 — short touch-screen landscape: keep the first service heading and
   its CTA inside the initial viewport; maintain native vertical page scrolling. */
@media (max-width:900px) and (max-height:500px) and (pointer:coarse), (max-width:900px) and (max-height:500px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-lite .white-section .ws-hero {
    padding-top:80px!important;
    width:calc(100% - 30px)!important;
    max-width:700px!important;
    gap:12px!important;
  }
  html.sinvec-mobile-lite .white-section .ws-hero-banner {
    aspect-ratio:auto!important;
    min-height:180px!important;
    height:min(53dvh,225px)!important;
  }
  html.sinvec-mobile-lite .white-section .ws-hero-banner-content {padding:16px!important;}
  html.sinvec-mobile-lite .white-section .ws-hero-title {
    font-size:clamp(20px,4.4vw,28px)!important;
    line-height:1.05!important;
    margin-bottom:12px!important;
  }
  html.sinvec-mobile-lite .white-section .ws-hero-btn {min-height:39px;padding:10px 16px;}
}

/* V6.203 — mobile-only navigation parity with desktop's authored circle wipe
   and internal editorial fade; never apply to wheel/scroll or desktop. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  .sinvec-touch-wipe {position:fixed;inset:0;z-index:5000;visibility:hidden;pointer-events:none;overflow:hidden;isolation:isolate;}
  .sinvec-touch-wipe.is-active {visibility:visible;pointer-events:auto;}
  .sinvec-touch-wipe__disc {position:absolute;width:170vmax;height:170vmax;left:50%;top:50%;border-radius:50%;background:#080808;transform:translate(-50%,-50%) scale(.005);opacity:0;}
  .sinvec-touch-wipe__shade {position:absolute;inset:0;background:#080808;opacity:0;}
  .sinvec-touch-wipe__caption {position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.83);opacity:0;pointer-events:none;}
  .sinvec-touch-wipe__caption span {font:500 clamp(10px,2.6vw,13px)/1.4 'Helvetica Neue',Arial,sans-serif;letter-spacing:.15em;text-align:center;overflow-wrap:anywhere;max-width:min(76vw,360px);}
  .sinvec-touch-wipe__caption i {width:clamp(15px,8vw,40px);height:1px;background:rgba(255,255,255,.32);flex:none;}
  .sinvec-touch-wipe--circle.is-active .sinvec-touch-wipe__disc {animation:sinvec-touch-disc 1.02s cubic-bezier(.64,0,.24,1) both;}
  .sinvec-touch-wipe--circle.is-active .sinvec-touch-wipe__caption {animation:sinvec-touch-caption 1.02s ease both;}
  .sinvec-touch-wipe--fade.is-active .sinvec-touch-wipe__shade {animation:sinvec-touch-shade .7s ease both;}
  .sinvec-touch-wipe--fade.is-active .sinvec-touch-wipe__caption {animation:sinvec-touch-fade-caption .7s ease both;}
  @keyframes sinvec-touch-disc {
    0% {opacity:1;transform:translate(-50%,-50%) scale(.005)}
    42% {opacity:1;transform:translate(-50%,-50%) scale(1)}
    58% {opacity:1;transform:translate(-50%,-50%) scale(1)}
    100% {opacity:0;transform:translate(-50%,-50%) scale(1.24)}
  }
  @keyframes sinvec-touch-caption {0%,27%{opacity:0}42%,63%{opacity:1}86%,100%{opacity:0}}
  @keyframes sinvec-touch-shade {0%{opacity:0}38%,66%{opacity:1}100%{opacity:0}}
  @keyframes sinvec-touch-fade-caption {0%,26%{opacity:0}43%,60%{opacity:1}84%,100%{opacity:0}}
  /* Respect the original SVG geometry: prevent vertical stretching of glyphs. */
  .footer-scene__brand {overflow:visible;min-height:0;}
  .footer-scene__brand-art {display:block;width:100%;height:auto;max-height:none;aspect-ratio:1060 / 220;}
  .footer-scene__brand-art text {font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
}
@media (max-width:900px) and (pointer:coarse) and (prefers-reduced-motion:reduce), (max-width:900px) and (pointer:fine) and (hover:hover) and (prefers-reduced-motion:reduce) {
  .sinvec-touch-wipe {display:none!important;}
}


/* V6.204 — ONLY coarse-pointer responsive service pages.
   Desktop, complete portfolio, videos and authored projects remain untouched. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  /* Remove the whole featured-release card, not merely its caption. */
  .white-section:is(#mainPage,#webDevelopmentPage,.generic-service-page) .ws-hero > .ws-hero-side {
    display:none !important;
  }
  .white-section:is(#mainPage,#webDevelopmentPage,.generic-service-page) .ws-hero {
    grid-template-columns:minmax(0,1fr) !important;
  }
  /* On a service detail, showcase one project. The full Portfolio stays intact. */
  .white-section:is(#mainPage,#webDevelopmentPage,.generic-service-page) .ws-projects > .ws-project:nth-child(n+2) {
    display:none !important;
  }
  /* Figma images must not be held at opacity zero by offscreen reveal observers. */
  #figmaPrototypingPage .ws-project.sinvec-mobile-reveal,
  #figmaPrototypingPage .ws-project.sinvec-mobile-reveal:not(.sinvec-mobile-revealed) {
    opacity:1 !important;
    translate:none !important;
  }
  /* Real <img> fallback for Figma media: stable when Android skips CSS backgrounds. */
  .white-section .sinvec-mobile-figma-media {
    position:relative;
    isolation:isolate;
  }
  .white-section .sinvec-mobile-figma-media > img.sinvec-mobile-figma-picture {
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;height:100%;
    object-fit:contain;
    object-position:center;
    pointer-events:none;
    border-radius:inherit;
  }
  #figmaPrototypingPage .ws-hero-banner > img.sinvec-mobile-figma-picture {
    object-fit:cover;
  }
  #figmaPrototypingPage .ws-hero-banner.sinvec-mobile-figma-media::after {
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.48),rgba(0,0,0,.03));
    border-radius:inherit;
  }
  .white-section .sinvec-mobile-figma-media > :not(img.sinvec-mobile-figma-picture) {
    position:relative;z-index:2;
  }
  #figmaPrototypingPage .ws-project-img > img.sinvec-mobile-figma-picture,
  #lumePage .syx-more-img > img.sinvec-mobile-figma-picture,
  #sendaPage .syx-more-img > img.sinvec-mobile-figma-picture,
  #novaraPage .syx-more-img > img.sinvec-mobile-figma-picture {
    object-fit:contain;
  }
}

/* V6.204 — Figma's imagery stays visible even if an intersection event is
   delayed by Android's internal scroll viewport or a page-entry transition. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  #figmaPrototypingPage :is(.ws-hero,.ws-project,.ws-about-grid).sinvec-mobile-reveal,
  :is(#lumePage,#sendaPage,#novaraPage) :is(.syx-hero,.syx-showcase,.syx-more).sinvec-mobile-reveal {
    opacity:1 !important;
    translate:none !important;
  }
}

/* V6.253 — removed the obsolete V6.205 fixed 1.25x footer transform.
   V6.210+ owns the camera scale from decoded-frame progress; keeping both
   transform owners made Android's cascade harder to reason about. Footer
   visibility timing remains unchanged. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .footer-scene {
    transition:opacity .26s ease,visibility 0s linear .26s;
  }
  html.sinvec-mobile-magnet body.footer-scene-active .footer-scene {
    transition:opacity .26s ease,visibility 0s linear;
  }
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .footer-scene__columns {animation:none!important;}
}
@media (max-width:900px) and (pointer:coarse) and (prefers-reduced-motion:reduce), (max-width:900px) and (pointer:fine) and (hover:hover) and (prefers-reduced-motion:reduce) {
  html.sinvec-mobile-magnet .sinvec-magnet-surface,
  html.sinvec-mobile-magnet .footer-scene {transition:none!important;}
}


/* V6.210 — Desktop-equivalent footer camera approach on touchscreen.
   Scale/darkness follow ACTUAL decoded frames, in both directions.
   Only the camera surface is enlarged; never the footer copy. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .sinvec-magnet-surface,
  html.sinvec-mobile-magnet.sinvec-footer-zoomed .sinvec-magnet-surface {
    transform:scale(var(--sinvec-footer-camera-scale,1)) !important;
    transform-origin:50% 42% !important;
    transition:none !important;
  }
  html.sinvec-mobile-magnet .sinvec-magnet-surface::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:#000;
    opacity:var(--sinvec-footer-camera-shade,0);
    transition:none;
  }
}

/* V6.255 — native-touch persistent glass. V6.253 replaced the live glass
   with an opaque dark fallback while the camera moved, which was visibly
   inconsistent with the magnetic stops. Keep the exact glass material during
   motion and promote only the small header layer; the full-screen camera video
   remains the independent hardware-composited surface. */
@media (max-width:900px) and (pointer:coarse) {
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .header-main,
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning .header-main {
    background:rgba(24,25,29,.26)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.24)!important;
    backdrop-filter:blur(12px) saturate(1.24)!important;
    box-shadow:0 9px 25px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.11)!important;
    /* Retain the centering transform while moving: translateZ(0)
       alone shifted the header by half its width on every swipe. */
    -webkit-transform:translate3d(-50%,0,0);
    transform:translate3d(-50%,0,0);
    isolation:isolate;
  }
}

/* V6.224 — guarantee the previous internal page is obscured when swapping. */
@media (max-width:900px) {
  .sinvec-touch-wipe.sinvec-switch-cover::after {
    content:''; position:absolute; z-index:10; inset:0;
    background:#080808; opacity:1; pointer-events:none;
  }
  .sinvec-touch-wipe.sinvec-switch-cover.sinvec-switch-reveal::after {
    animation:sinvec-switch-cover-out .26s ease-out both;
  }
}