/* ============================================================
   文章科技 · 尖端体验层 II —— "The Living Gazette"
   Loaded AFTER enhance.css. Pure progressive enhancement.
   Theme: tactile paper + contemporary editorial motion,
   strictly within the existing cream / jujube / gold system.
   ============================================================ */

/* ---------- 0. Global feel ------------------------------------------ */
html { scroll-behavior: smooth; }
::selection { background: var(--jujube); color: #F7F1E3; }

/* ---------- 1. Tactile paper grain (sitewide) ----------------------- */
/* A fixed, faint fractal-noise film. Reads as newsprint tooth on the
   cream zones; naturally fades to nothing on the dark band. */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}
@media print { .paper-grain { display: none !important; } }

/* ---------- 2. Kinetic gazette marquee (cream → dark bridge) -------- */
.gazette-marquee {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(26px, 3.4vw, 46px) 0;
  border-top: 1px solid rgba(245, 238, 223, 0.1);
}
.gazette-marquee::before,
.gazette-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 10vw, 160px);
  z-index: 2;
  pointer-events: none;
}
.gazette-marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.gazette-marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.gazette-marquee .gm-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 44px);
  white-space: nowrap;
  will-change: transform;
  animation: gmScroll 42s linear infinite;
}
.gazette-marquee:hover .gm-track { animation-play-state: paused; }
.gazette-marquee .gm-w {
  font-family: "FZ QingKeYueSong", var(--f-biaosong);
  font-size: clamp(26px, 3.2vw, 50px);
  letter-spacing: 0.2em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 238, 223, 0.45);
}
.gazette-marquee .gm-w.solid {
  color: var(--paper);
  -webkit-text-stroke: 0;
}
.gazette-marquee .gm-w.gold {
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
}
.gazette-marquee .gm-dot {
  font-style: normal;
  color: var(--gold);
  font-size: clamp(10px, 1vw, 15px);
  transform: translateY(-0.35em);
}
@keyframes gmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 3. Micro-interaction system ----------------------------- */
/* (a) Cards: refined lift + image bloom */
.letter-card, .series-card, .inscription, .wechat-card,
.phone-video, .gallery-item, .single-card, .tl-pic {
  transition: transform .5s cubic-bezier(.2,.7,.2,1),
              box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.letter-card:hover, .series-card:hover, .wechat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -42px rgba(26, 21, 18, 0.55);
}
.phone-video:hover { transform: translateY(-6px); }

/* image bloom inside any framed picture */
.wechat-card .wc-pic, .series-pic, .ins-pic, .gallery-item,
.tl-pic, .single-pic { overflow: hidden; }
.wechat-card .wc-pic img, .series-pic img, .ins-pic img,
.gallery-item img, .tl-pic img, .single-pic img {
  transition: transform 1.1s cubic-bezier(.19,.77,.27,1);
  will-change: transform;
}
.wechat-card:hover .wc-pic img,
.series-card:hover .series-pic img,
.inscription:hover .ins-pic img,
.gallery-item:hover img,
.tl-item:hover .tl-pic img { transform: scale(1.045); }

/* Touch devices (no real hover): disable sticky lift/zoom so a tap doesn't leave
   cards stuck in the hovered state */
@media (hover: none) and (pointer: coarse) {
  .letter-card:hover, .series-card:hover, .wechat-card:hover,
  .phone-video:hover, .tl-item:hover, .hero-index .hi:hover { transform: none; }
  .wechat-card:hover .wc-pic img,
  .series-card:hover .series-pic img,
  .inscription:hover .ins-pic img,
  .gallery-item:hover img,
  .tl-item:hover .tl-pic img { transform: none; }
}

/* (b) Buttons / CTAs: arrow glide */
.hero-btn .ar, .series-cta .arr, .nav-cta .arrow,
.wechat-card .wc-go { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.series-cta:hover .arr { transform: translate(3px, -3px); }

/* (c) Animated underline for inline text links (footer / refs / docs) */
.site-footer a:not(.brand):not(.footer-logo),
.products-refs a,
.juzhen-intro-right a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.2,.7,.2,1);
}
.site-footer a:not(.brand):not(.footer-logo):hover,
.products-refs a:hover,
.juzhen-intro-right a:hover { background-size: 100% 1px; }

/* (d) Reduced motion: stop the marquee + blooms */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gazette-marquee .gm-track { animation: none; }
  .letter-card, .series-card, .inscription, .wechat-card,
  .phone-video, .gallery-item, .tl-pic,
  .wechat-card .wc-pic img, .series-pic img, .ins-pic img,
  .gallery-item img, .tl-pic img, .single-pic img { transition: none; }
}