/* ============================================================
   上海晁祥轴承 · 高级动效层 (Plan A — 纯 CSS/JS)
   Industrial · Metal · Premium Motion
   ============================================================ */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
}

/* ---------- Film grain overlay ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--color-accent-dark),var(--color-accent),var(--color-accent-light));
  box-shadow:0 0 12px rgba(201,169,97,.55);
  transition:width .12s linear;
}

/* ============================================================
   Reveal system
   ============================================================ */
/* reveal hidden state only applies once JS confirms it is running */
html.anim-ready [data-reveal]{
  opacity:0;will-change:transform,opacity,filter;
  transition:opacity .8s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1),
             filter .8s cubic-bezier(.22,1,.36,1);
}
html.anim-ready [data-reveal="up"]   {transform:translateY(30px);filter:blur(6px)}
html.anim-ready [data-reveal="down"] {transform:translateY(-22px)}
html.anim-ready [data-reveal="left"] {transform:translateX(-34px)}
html.anim-ready [data-reveal="right"]{transform:translateX(34px)}
html.anim-ready [data-reveal="scale"]{transform:scale(.93)}
html.anim-ready [data-reveal="clip"] {transform:translateY(24px) scale(.98);clip-path:inset(0 0 100% 0)}
html.anim-ready [data-reveal].in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

/* ============================================================
   Hero — bloom, glow, shimmer, decorative bearing
   ============================================================ */
.hero-inner{position:relative;z-index:2}
.hero-bloom{
  position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 28%, rgba(201,169,97,.20), transparent 60%),
    radial-gradient(46% 46% at 82% 18%, rgba(27,54,93,.60), transparent 60%),
    radial-gradient(52% 52% at 62% 82%, rgba(10,37,64,.55), transparent 60%);
  filter:blur(22px);
  animation:bloom 20s ease-in-out infinite alternate;
}
@keyframes bloom{
  0%  {transform:translate3d(-2%,-1%,0) scale(1)}
  100%{transform:translate3d(3%,2%,0) scale(1.08)}
}
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(440px circle at var(--mx,55%) var(--my,40%),
            rgba(201,169,97,.18), transparent 60%);
  transition:background .2s ease-out;
}
.hero h1 .accent{
  background:linear-gradient(90deg,var(--color-accent-light),var(--color-accent),var(--color-accent-light));
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:220% center}}

/* Decorative precision-bearing line-art */
.deco-bearing{position:absolute;pointer-events:none;color:var(--color-accent);z-index:0;opacity:.14}
.deco-bearing svg{
  width:100%;height:100%;display:block;transform-origin:50% 50%;
  animation:spin 46s linear infinite;
}
.deco-bearing.rev svg{animation-direction:reverse;animation-duration:62s}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .deco-bearing{
  right:-8%;top:50%;width:680px;height:680px;
  transform:translateY(-50%);
  opacity:.26;
  filter:drop-shadow(0 0 28px rgba(201,169,97,.32));
}
.hero .deco-bearing svg{animation-duration:26s}
.hero .deco-bearing circle,.hero .deco-bearing line{stroke-width:1.7}
.page-header .deco-bearing{right:-5%;top:-12%;width:320px;height:320px;opacity:.10}
.page-header .container{position:relative;z-index:2}

/* ============================================================
   Buttons — sheen sweep + magnetic lift
   ============================================================ */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.40),transparent);
  transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;
}
.btn:hover::after{left:140%}
.btn-accent{box-shadow:0 6px 18px rgba(201,169,97,.18)}
.btn-accent:hover{box-shadow:0 10px 26px rgba(201,169,97,.30)}

/* ============================================================
   Cards — sweeping light
   ============================================================ */
.card{position:relative}
.card::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(120deg,transparent 32%,rgba(201,169,97,.14) 50%,transparent 68%);
  transform:translateX(-100%);transition:transform .8s ease;
  pointer-events:none;z-index:1;border-radius:inherit;
}
.card:hover::after{transform:translateX(100%)}

/* ============================================================
   Nav — growing underline on hover
   ============================================================ */
.nav-main a{
  background-image:linear-gradient(var(--color-accent),var(--color-accent));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s cubic-bezier(.4,0,.2,1),color var(--t);
}
.nav-main a:hover{background-size:100% 2px}

/* ============================================================
   Tech panel — flowing gradient border
   ============================================================ */
.tech-panel{position:relative}
.tech-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,transparent,var(--color-accent),transparent 70%);
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:flow 6s linear infinite;pointer-events:none;opacity:.55;
}
@keyframes flow{to{background-position:220% 220%}}

/* ============================================================
   Certification stamp — gentle pulse
   ============================================================ */
.cert-stamp{animation:stampPulse 3.4s ease-in-out infinite}
@keyframes stampPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,169,97,0)}
  50%    {box-shadow:0 0 0 5px rgba(201,169,97,.12)}
}

/* ============================================================
   Product gallery — hover brightness
   ============================================================ */
.product-gallery img{transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
.product-gallery img:hover{filter:brightness(1.06) saturate(1.04)}

/* ============================================================
   Scrolling keyword ticker
   ============================================================ */
.marquee{
  overflow:hidden;background:var(--color-iron);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:11px 0;position:relative;
}
.marquee::before{
  content:"";position:absolute;inset:0;background:var(--bg-brushed);opacity:.4;pointer-events:none;
}
.marquee__track{
  display:inline-flex;white-space:nowrap;will-change:transform;
  animation:marquee 30s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--font-tech);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
  padding:0 30px;position:relative;
}
.marquee__track span::after{
  content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--color-accent);transform:translateY(-50%);
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   Animated divider line
   ============================================================ */
.divider-anim{
  height:1px;border:0;margin:var(--space-6) 0;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.divider-anim.in{transform:scaleX(1)}

/* ============================================================
   Stat counters — subtle emphasis on roll
   ============================================================ */
[data-count]{font-variant-numeric:tabular-nums}
.hero-stats .stat strong,.tech-metrics .stat strong{transition:color .3s}
.count-rolling{animation:countPulse .5s ease}
@keyframes countPulse{0%{filter:brightness(1.5)}100%{filter:brightness(1)}}

/* ============================================================
   NEXT-LEVEL (Open-Design feel) — added layer
   ============================================================ */
html{scroll-behavior:smooth}

/* ---------- Split-text reveal (per-character) ---------- */
[data-split] .word{
  display:inline-block;opacity:0;
  transform:translateY(.42em) rotateX(-55deg);
  transform-origin:bottom;will-change:transform,opacity;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
[data-split].in .word{opacity:1;transform:none}

/* ---------- 3D tilt cards ---------- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .4s;
  will-change:transform;
}
.tilt:hover{box-shadow:0 26px 60px rgba(0,0,0,.45)}

/* ---------- Parallax base ---------- */
[data-parallax]{will-change:transform}

/* ---------- Draw-on SVG (bearing cross-section) ---------- */
.draw-stage{position:relative}
.draw-stage .stroke{
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
}
.draw-stage .stroke.dim{stroke:rgba(201,169,97,.42)}
.draw-stage.in .stroke{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.2,1);
}
.draw-stage .ball{fill:var(--color-accent);opacity:0;transition:opacity .5s ease 1s}
.draw-stage.in .ball{opacity:1}
.draw-stage .cap{fill:rgba(201,169,97,.9);opacity:0;transition:opacity .5s ease 1.8s}
.draw-stage.in .cap{opacity:1}
.draw-stage .label{fill:rgba(255,255,255,.72);font-family:var(--font-tech);font-size:12px;opacity:0;transition:opacity .6s ease 2s}
.draw-stage.in .label{opacity:1}

/* ---------- Cursor glow (desktop) ---------- */
.cursor-glow{
  position:fixed;top:0;left:0;width:24px;height:24px;border-radius:50%;
  border:1.5px solid rgba(201,169,97,.7);background:rgba(201,169,97,.06);
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .25s,background .25s;
  box-shadow:0 0 14px rgba(201,169,97,.35);mix-blend-mode:screen;opacity:0;
}
.cursor-glow.show{opacity:1}
.cursor-glow.big{width:52px;height:52px;background:rgba(201,169,97,.12)}

/* ---------- Floating orbs (hero ambience) ---------- */
.hero-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55}