/* ============================================================
   创梦视界 · 电影感叠加层 (cinematic.css) — 强化版 v2
   —— 纯加法层，叠加在 style.css 之上 ——
   保持蓝/绿深海军蓝品牌色，注入「强烈大片质感」：
     · 电影开场动画 + 影院 letterbox 黑边
     · 重胶片颗粒 + 曝光闪烁 + 深暗角
     · Hero 光束扫过 / Ken Burns 漂移 / 动态调色
     · 标题遮罩揭示 (clip wipe) + 强辉光
     · 鼠标聚光灯
   ============================================================ */

:root {
  --cine-ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --cine-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cine-blue-deep: #060d18;
}

html { background: #000; }
body {
  background:
    radial-gradient(1200px 700px at 75% -8%, rgba(27,116,236,0.12), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(20,212,28,0.05), transparent 55%),
    var(--cine-blue-deep);
}

/* ══════════════════════════════════════════════════════════
   电影开场动画 CINE INTRO
══════════════════════════════════════════════════════════ */
.cine-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.9s var(--cine-ease), visibility 0.9s var(--cine-ease);
}
.cine-intro-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  opacity: 0;
  transform: scale(1.05);
  animation: cineIntroIn 2.4s var(--cine-ease) 0.35s forwards;
}
.cine-intro-line {
  width: 0;
  height: 2px;
  margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--green), transparent);
  box-shadow: 0 0 18px rgba(27,116,236,0.7);
  animation: cineIntroLine 2.6s var(--cine-ease) 0.5s forwards;
}
.cine-intro-brand {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow: 0 0 50px rgba(27,116,236,0.6);
  line-height: 1;
  text-indent: 0.22em;
}
.cine-intro-sub {
  margin-top: 22px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-indent: 0.4em;
}
@keyframes cineIntroIn {
  0%   { opacity: 0; transform: scale(1.05); filter: blur(7px); }
  32%  { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 1; transform: scale(1.012); filter: blur(0); }
}
@keyframes cineIntroLine {
  0%   { width: 0; opacity: 1; }
  55%  { width: min(440px, 62vw); opacity: 1; }
  100% { width: min(440px, 62vw); opacity: 0.45; }
}
/* 开场结束：整体淡出，露出站点 */
body.cine-done .cine-intro { opacity: 0; visibility: hidden; }

/* 开场期间锁滚动 */
body.cine-playing { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   重胶片颗粒 + 曝光闪烁
══════════════════════════════════════════════════════════ */
.cine-grain {
  position: fixed;
  inset: -60%;
  width: 220%;
  height: 220%;
  z-index: 9992;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  background-size: 170px 170px;
  animation: cineGrain 0.5s steps(5) infinite, cineFlicker 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes cineGrain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-4%,-3%); }
  40%  { transform: translate(3%,-4%); }
  60%  { transform: translate(-3%,3%); }
  80%  { transform: translate(4%,2%); }
  100% { transform: translate(-2%,-2%); }
}
/* 轻微曝光闪烁，模拟胶片放映 */
@keyframes cineFlicker {
  0%, 100% { opacity: 0.13; }
  47%      { opacity: 0.13; }
  48%      { opacity: 0.18; }
  49%      { opacity: 0.11; }
  50%      { opacity: 0.15; }
  92%      { opacity: 0.12; }
  93%      { opacity: 0.17; }
}

/* ══════════════════════════════════════════════════════════
   深暗角 vignette
══════════════════════════════════════════════════════════ */
.cine-vignette {
  position: fixed;
  inset: 0;
  z-index: 9991;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 120% at 50% 42%,
      transparent 46%, rgba(3,7,15,0.42) 82%, rgba(1,4,10,0.72) 100%);
}

/* ══════════════════════════════════════════════════════════
   鼠标聚光灯
══════════════════════════════════════════════════════════ */
.cine-spot {
  position: fixed;
  inset: 0;
  z-index: 9989;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 40%),
             rgba(70,150,255,0.16), rgba(70,150,255,0.05) 40%, transparent 65%);
  transition: opacity 0.6s ease;
}
body.cine-spot-on .cine-spot { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   HERO —— 全套电影处理
══════════════════════════════════════════════════════════ */
.hero {
  background:
    radial-gradient(1100px 800px at 72% 16%, rgba(27,116,236,0.20), transparent 60%),
    linear-gradient(180deg, #0a1626 0%, #0b1929 45%, #060f1b 100%);
}
.hero-canvas {
  opacity: 0.8;
  animation: cineKenBurns 48s ease-in-out infinite alternate;
  transform-origin: 60% 40%;
}
@keyframes cineKenBurns {
  0%   { transform: scale(1)    translate(0,0); }
  100% { transform: scale(1.07) translate(-1.4%,-1%); }
}

/* 动态调色层：冷蓝↔暖金缓慢流动（screen 叠加） */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(55% 45% at 16% 8%, rgba(86,160,255,0.20), transparent 70%),
    radial-gradient(48% 50% at 90% 26%, rgba(255,150,60,0.10), transparent 72%),
    radial-gradient(50% 45% at 80% 96%, rgba(20,212,28,0.08), transparent 72%);
  mix-blend-mode: screen;
  animation: cineGrade 16s ease-in-out infinite alternate;
}
@keyframes cineGrade {
  0%   { opacity: 0.7;  transform: translate(0,0); }
  100% { opacity: 1;    transform: translate(2%, 2%); }
}

/* 斜向光束扫过 */
.hero-content::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 50%;
  height: 180%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(150,190,255,0.06) 46%, rgba(255,255,255,0.10) 50%, rgba(150,190,255,0.06) 54%, transparent 100%);
  filter: blur(20px);
  transform: rotate(8deg);
  animation: cineSweep 13s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes cineSweep {
  0%   { transform: translateX(0) rotate(8deg); opacity: 0; }
  10%  { opacity: 0.9; }
  38%  { opacity: 0.9; }
  52%  { transform: translateX(300%) rotate(8deg); opacity: 0; }
  100% { transform: translateX(300%) rotate(8deg); opacity: 0; }
}

/* Hero 底部压暗 */
.hero-left, .hero-right { position: relative; z-index: 2; }
.hero-glow { filter: blur(120px); }

/* 标题：模糊上浮淡入（不裁切，避免描边字底部被切 / 与副标重叠）+ 辉光 */
.hero-headline .line-1,
.hero-headline .line-2 {
  opacity: 0;
  transform: translateY(0.32em);
  filter: blur(12px);
  animation: cineReveal 1.6s var(--cine-ease) forwards;
  will-change: opacity, transform, filter;
}
.hero-headline .line-1 {
  animation-delay: 0.55s;
  text-shadow: 0 0 46px rgba(27,116,236,0.5), 0 2px 30px rgba(0,0,0,0.5);
}
.hero-headline .line-2 {
  animation-delay: 0.95s;
  -webkit-text-stroke: 1.5px rgba(150,185,255,0.5);
  text-shadow: 0 0 36px rgba(27,116,236,0.28);
}
@keyframes cineReveal {
  0%   { opacity: 0; transform: translateY(0.32em); filter: blur(12px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0);      filter: blur(0); }
}

/* 入场放慢、逐层登场 */
.animate-in { animation-duration: 1.2s; animation-timing-function: var(--cine-ease); }
.delay-1 { animation-delay: 0.4s; }
.delay-2 { animation-delay: 0.62s; }
.delay-3 { animation-delay: 0.86s; }

/* 玻璃统计卡 */
.hero-stat-card {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.09);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 34px rgba(0,0,0,0.3);
  transition: transform 0.55s var(--cine-ease), background 0.55s var(--cine-ease), border-color 0.55s var(--cine-ease), box-shadow 0.55s var(--cine-ease);
}
.hero-stat-card:hover {
  transform: translateX(-6px) translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 22px 50px rgba(10,30,70,0.5);
}

/* ══════════════════════════════════════════════════════════
   全局：滚动揭示加强（遮罩上推）
══════════════════════════════════════════════════════════ */
.fade-in-up {
  transition: opacity 1.3s var(--cine-ease), transform 1.3s var(--cine-ease), filter 1.3s var(--cine-ease);
  transform: translateY(34px);
  filter: blur(3px);
}
.fade-in-up.visible {
  transform: translateY(0);
  filter: blur(0);
}
/* 更细腻的逐层登场：网格子项依次浮现 */
.services-grid .fade-in-up:nth-child(1),
.brand-hub-grid .fade-in-up:nth-child(1),
.mw-matrix-grid .fade-in-up:nth-child(1),
.mw-video-grid .fade-in-up:nth-child(1),
.mw-honors-grid .fade-in-up:nth-child(1) { transition-delay: 0.04s; }
.services-grid .fade-in-up:nth-child(2),
.brand-hub-grid .fade-in-up:nth-child(2),
.mw-matrix-grid .fade-in-up:nth-child(2),
.mw-video-grid .fade-in-up:nth-child(2),
.mw-honors-grid .fade-in-up:nth-child(2) { transition-delay: 0.14s; }
.services-grid .fade-in-up:nth-child(3),
.brand-hub-grid .fade-in-up:nth-child(3),
.mw-matrix-grid .fade-in-up:nth-child(3),
.mw-video-grid .fade-in-up:nth-child(3),
.mw-honors-grid .fade-in-up:nth-child(3) { transition-delay: 0.24s; }
.services-grid .fade-in-up:nth-child(4),
.brand-hub-grid .fade-in-up:nth-child(4),
.mw-video-grid .fade-in-up:nth-child(4),
.mw-honors-grid .fade-in-up:nth-child(4) { transition-delay: 0.34s; }

.service-card, .hub-card, .mw-matrix-card, .mw-video-card,
.mw-honor-card, .number-item, .btn {
  transition: transform 0.5s var(--cine-ease), box-shadow 0.5s var(--cine-ease),
              background 0.5s var(--cine-ease), border-color 0.5s var(--cine-ease) !important;
}

/* 深色区块景深光 */
.services-section, .numbers-section, .miaowang-section, .contact-section { position: relative; }
.services-section::before, .contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(27,116,236,0.08), transparent 60%);
  z-index: 0;
}
.services-section > *, .contact-section > * { position: relative; z-index: 1; }

.service-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 44px rgba(0,0,0,0.32); }
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 66px rgba(8,24,58,0.5);
}
.mw-video-card:hover, .mw-honor-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 62px rgba(6,18,42,0.55);
}

/* 视频缩略图电影暗角 + 顶部预告片质感 */
.mw-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
}

/* 按钮流光 */
.btn-primary {
  background: linear-gradient(135deg, #2a82f4, #1560cc);
  box-shadow: 0 6px 28px rgba(27,116,236,0.45), inset 0 1px 0 rgba(255,255,255,0.24);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(27,116,236,0.55), inset 0 1px 0 rgba(255,255,255,0.32);
}

/* 跑马灯羽化 */
.marquee-section {
  background: #04090f;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.scroll-progress { box-shadow: 0 0 14px rgba(27,116,236,0.7); }

/* ══════════════════════════════════════════════════════════
   无障碍 / 移动端
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cine-grain, .hero::after, .hero-canvas,
  .hero-content::before, .cine-intro-inner, .cine-intro-line { animation: none !important; }
  .hero-headline .line-1, .hero-headline .line-2 {
    opacity: 1; transform: none; filter: none; animation: none;
  }
}

@media (max-width: 768px) {
  .cine-grain { opacity: 0.08; }
  .cine-spot { display: none; }
  .hero-content::before { display: none; }
  .cine-vignette {
    background: radial-gradient(ellipse 140% 130% at 50% 42%,
                transparent 56%, rgba(3,7,15,0.5) 100%);
  }
  .cine-intro-brand { text-shadow: 0 0 30px rgba(27,116,236,0.5); }
}