/*!
 * jl-motion — motion system for worldsipo.com
 * Replaces wow.js + animate.css (80 KB, 1–2.5 s entrances) with quick, quiet reveals and
 * three deliberate moments: the hero settle, the "玖领 | …" title bar, and the 广/快/质/高 seal stamp.
 *
 * Rules of the system
 *   - everything is transform/opacity only (compositor-friendly)
 *   - hidden states exist ONLY under html.jl-motion-on, which the inline head script sets when
 *     IntersectionObserver exists and the visitor has not asked for reduced motion; it removes the
 *     class again if jl-motion.js never arrives, so content can never stay invisible
 *   - legacy markup is untouched: elements keep class="wow fadeInUp" data-wow-*, jl-motion.js maps them
 */

:root {
  --jl-ease-out: cubic-bezier(.16, .84, .24, 1);   /* fast start, soft landing: entrances */
  --jl-ease-press: cubic-bezier(.2, 1.4, .4, 1);   /* slight overshoot: the seal stamp */
  --jl-reveal: 560ms;
}

/* ------------------------------------------------------------------ 1. scroll reveals */
.jl-motion-on .wow:not(.jl-seen)          { opacity: 0 !important; }
.jl-motion-on .wow.jl-rise:not(.jl-seen)  { transform: translate3d(0, 18px, 0) !important; }
.jl-motion-on .wow.jl-left:not(.jl-seen)  { transform: translate3d(-26px, 0, 0) !important; }
.jl-motion-on .wow.jl-right:not(.jl-seen) { transform: translate3d(26px, 0, 0) !important; }
.jl-motion-on .wow.jl-zoom:not(.jl-seen)  { transform: scale(.94) !important; }

/* .jl-anim is present only while an element is arriving; afterwards its own CSS is back in charge */
.jl-motion-on .wow.jl-anim {
  transition: opacity var(--jl-reveal) var(--jl-ease-out) var(--jl-delay, 0ms),
              transform var(--jl-reveal) var(--jl-ease-out) var(--jl-delay, 0ms) !important;
  will-change: opacity, transform;
}

/* ------------------------------------------------------------------ 2. section titles  「玖领 | 服务项目」
   the bar draws itself, then the two words part from it */
.jl-motion-on .wow.jl-title:not(.jl-seen) { opacity: 1 !important; }
.jl-motion-on .jl-title > span {
  display: inline-block;
  transition: transform 640ms var(--jl-ease-out) calc(var(--jl-delay, 0ms) + 160ms),
              opacity 420ms linear calc(var(--jl-delay, 0ms) + 160ms);
}
.jl-motion-on .jl-title > span:nth-child(2) {
  transform-origin: 50% 60%;
  transition: transform 340ms var(--jl-ease-out) var(--jl-delay, 0ms), opacity 120ms linear var(--jl-delay, 0ms);
}
.jl-motion-on .jl-title:not(.jl-seen) > span:first-child  { opacity: 0; transform: translate3d(34px, 0, 0); }
.jl-motion-on .jl-title:not(.jl-seen) > span:last-child   { opacity: 0; transform: translate3d(-34px, 0, 0); }
.jl-motion-on .jl-title:not(.jl-seen) > span:nth-child(2) { opacity: 0; transform: scaleY(0); }

/* ------------------------------------------------------------------ 3. 广 / 快 / 质 / 高 — pressed like a seal */
.jl-motion-on .wow.jl-stamp:not(.jl-seen) { opacity: 1 !important; }
.jl-motion-on .jl-stamp .white { position: relative; transition: border-color 300ms linear calc(var(--jl-delay, 0ms) + 260ms); }
.jl-motion-on .jl-stamp .iimg {
  transition: transform 460ms var(--jl-ease-press) var(--jl-delay, 0ms), opacity 160ms linear var(--jl-delay, 0ms);
}
.jl-motion-on .jl-stamp .word {
  transition: opacity 420ms linear calc(var(--jl-delay, 0ms) + 300ms),
              transform 420ms var(--jl-ease-out) calc(var(--jl-delay, 0ms) + 300ms);
}
.jl-motion-on .jl-stamp:not(.jl-seen) .white { border-color: transparent; }
.jl-motion-on .jl-stamp:not(.jl-seen) .iimg  { opacity: 0; transform: scale(1.55) rotate(-9deg); }
.jl-motion-on .jl-stamp:not(.jl-seen) .word  { opacity: 0; transform: translate3d(0, 8px, 0); }
/* one ring of "ink" spreads where the seal landed */
.jl-motion-on .jl-stamp .white::after {
  content: "";
  position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px;
  border: 2px solid #1D78FF; border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.jl-motion-on .jl-stamp.jl-seen .white::after {
  animation: jl-ink 760ms var(--jl-ease-out) calc(var(--jl-delay, 0ms) + 300ms) 1 both;
}
@keyframes jl-ink { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.42); } }

/* ------------------------------------------------------------------ 4. hero: cross-fade + slow settle, progress pagination */
/* (no backface-visibility here: inside Swiper's translate3d fade stack it makes Chrome drop the image) */
.jl-motion-on .ber .swiper-slide-active img,
.jl-motion-on .ber .swiper-slide-duplicate-active img { animation: jl-settle 6400ms var(--jl-ease-out) both; }
@keyframes jl-settle { from { transform: scale(1.055); } to { transform: none; } }

.ber .swiper-pagination { bottom: 18px; }
.ber .swiper-pagination .swiper-pagination-bullet {
  position: relative; overflow: hidden;
  width: 26px; height: 3px; margin: 0 4px; border-radius: 2px;
  background: rgba(140, 165, 255, .42); opacity: 1;
  transition: width 420ms var(--jl-ease-out);
}
.ber .swiper-pagination .swiper-pagination-bullet i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: #1D78FF; transform: scaleX(0); transform-origin: 0 50%;
}
.ber .swiper-pagination .swiper-pagination-bullet-active { width: 56px; }
.ber .swiper-pagination .swiper-pagination-bullet-active i { transform: scaleX(1); }
.jl-motion-on .ber .swiper-pagination .swiper-pagination-bullet-active i { animation: jl-progress 5000ms linear both; }
@keyframes jl-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ 5. answers to the pointer */
/* service cards: the detail panel used to cross-fade over a full second while the icon vanished instantly */
.section .items .content .phont,
.section .items .content .written { transition: opacity 160ms linear; }
.section .items .server1 .content:hover .phont,  .section .items .server2 .content:hover .phont,
.section .items .server1 .content:hover .written, .section .items .server2 .content:hover .written { display: block; opacity: 0; }
.section .items .server1 .content .hide_this, .section .items .server2 .content .hide_this {
  transform: translate3d(0, 10px, 0);
  transition: opacity 200ms linear, transform 280ms var(--jl-ease-out);
}
.section .items .server1 .content:hover .hide_this, .section .items .server2 .content:hover .hide_this { transform: none; }
.section .items .server1 .content .hide_last, .section .items .server2 .content .hide_last { transition: opacity 200ms linear 60ms; }
.section .items .content { transition: box-shadow 240ms ease; }
.section .items .content:hover { box-shadow: 0 8px 22px rgba(29, 120, 255, .20); }
.section .items .content .hide_button { transition: background-color 160ms ease, transform 120ms ease; }
.section .items .content .hide_button:hover  { background-color: #ffd83a; }
.section .items .content .hide_button:active { transform: scale(.96); }

/* navigation */
.header .firestep .icon .blue .key { transition: background-color 180ms ease; }
.header .firestep .function a      { transition: color 180ms ease; }

/* client logos: quiet tiles that acknowledge the pointer */
.client .brand .keep { transition: background-color 220ms ease; }
.client .brand .keep:hover { background-color: #E9EEF8; }

/* the pulsing "click" hint on CTA buttons used animate.css's zoomIn; same name, calmer radar ping */
@keyframes zoomIn {
  0%   { opacity: 0;  transform: scale(.62); }
  35%  { opacity: 1; }
  100% { opacity: 0;  transform: scale(1.08); }
}

/* ------------------------------------------------------------------ 6. page-to-page: native cross-document transition */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: ease; }
.header { view-transition-name: jl-header; }
::view-transition-group(jl-header) { animation-duration: 0s; }

/* ------------------------------------------------------------------ 7. opt-outs */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .get_all_btn span, .ber .swiper-slide img, .ber .swiper-pagination-bullet i { animation: none !important; }
  .section .items .content .hide_this { transform: none; }
}
@media print {
  .wow, .jl-title > span, .jl-stamp .iimg, .jl-stamp .word { opacity: 1 !important; transform: none !important; }
}