/* =========================================================
   DuckWow Banner
   固定视觉 / 不跟随网站日夜间模式
   品牌绿柔和版
   ========================================================= */

#duckwow-banner.dw-banner {

  --dw-theme: #00aa90;
  --dw-theme-rgb: 0,170,144;

  position: relative;

  width: 100%;
  min-height: 235px;

  margin: 0 0 24px;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 22px;

  background:

    radial-gradient(
      circle at 82% 38%,
      rgba(0,220,180,.13),
      transparent 32%
    ),

    radial-gradient(
      circle at 8% 118%,
      rgba(0,170,144,.16),
      transparent 38%
    ),

    linear-gradient(
      135deg,
      #087c6d 0%,
      #09917e 48%,
      #087666 100%
    );

  box-shadow:

    0 14px 40px
    rgba(0,0,0,.10);

  color: #ffffff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;

}


/* =========================================================
   背景层
   ========================================================= */

#duckwow-banner .dw-banner-bg {

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;

}


/* =========================================================
   背景圆环
   ========================================================= */

#duckwow-banner .dw-orb {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


/* =========================================================
   大圆
   ========================================================= */

#duckwow-banner .dw-orb-1 {

  width: 360px;
  height: 360px;

  right: -125px;
  top: -165px;

  border:
    1px solid
    rgba(255,255,255,.12);

  box-shadow:

    0 0 0 42px
    rgba(255,255,255,.025),

    0 0 0 84px
    rgba(255,255,255,.014);

  animation:

    dw-orb-float 12s
    ease-in-out infinite;

}


/* =========================================================
   底部光晕
   ========================================================= */

#duckwow-banner .dw-orb-2 {

  width: 220px;
  height: 220px;

  right: 24%;
  bottom: -165px;

  background:

    radial-gradient(
      circle,
      rgba(0,255,210,.09),
      transparent 68%
    );

  filter:
    blur(5px);

}


/* =========================================================
   点阵
   ========================================================= */

#duckwow-banner .dw-dots {

  position: absolute;

  right: 9%;
  top: 20%;

  width: 145px;
  height: 110px;

  opacity: .30;

  background-image:

    radial-gradient(
      rgba(255,255,255,.30) 1.2px,
      transparent 1.2px
    );

  background-size:
    15px 15px;

  mask-image:

    radial-gradient(
      circle,
      #000 0%,
      transparent 72%
    );

  -webkit-mask-image:

    radial-gradient(
      circle,
      #000 0%,
      transparent 72%
    );

}


/* =========================================================
   网格
   ========================================================= */

#duckwow-banner .dw-grid {

  position: absolute;

  inset: 0;

  opacity: .055;

  background-image:

    linear-gradient(
      rgba(255,255,255,.12) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.12) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  mask-image:

    linear-gradient(
      to right,
      transparent 0%,
      transparent 25%,
      #000 75%,
      transparent 100%
    );

  -webkit-mask-image:

    linear-gradient(
      to right,
      transparent 0%,
      transparent 25%,
      #000 75%,
      transparent 100%
    );

}


/* =========================================================
   内容区域
   ========================================================= */

#duckwow-banner .dw-banner-inner {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 235px;

  max-width: 1280px;

  margin: 0 auto;

  padding: 42px 56px;

  box-sizing: border-box;

}


/* =========================================================
   左侧文字
   ========================================================= */

#duckwow-banner .dw-banner-copy {

  position: relative;

  z-index: 5;

  max-width: 720px;

}


/* =========================================================
   栏目名称
   ========================================================= */

#duckwow-banner .dw-eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 14px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.76);

}


/* =========================================================
   左侧短线
   ========================================================= */

#duckwow-banner .dw-eyebrow-line {

  width: 27px;

  height: 2px;

  flex-shrink: 0;

  border-radius: 999px;

  background:
    #63e4d0;

  box-shadow:

    0 0 10px
    rgba(99,228,208,.35);

}


/* =========================================================
   标题
   ========================================================= */

#duckwow-banner .dw-title {

  margin: 0;

  padding: 0;

  font-size:
    clamp(29px, 3vw, 43px);

  line-height: 1.18;

  font-weight: 800;

  letter-spacing: -1px;

  color:
    #ffffff;

  text-shadow:

    0 2px 16px
    rgba(0,0,0,.14);

}


/* =========================================================
   描述
   ========================================================= */

#duckwow-banner .dw-description {

  max-width: 620px;

  margin:
    14px 0 0;

  font-size: 15px;

  line-height: 1.8;

  color:
    rgba(255,255,255,.72);

}


/* =========================================================
   右侧视觉区域
   ========================================================= */

#duckwow-banner .dw-visual {

  position: relative;

  flex:
    0 0 250px;

  width: 250px;

  height: 195px;

  margin-right: 6px;

}


/* =========================================================
   圆环基础
   ========================================================= */

#duckwow-banner .dw-ring {

  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);

  box-sizing: border-box;

  border:
    1px solid
    rgba(112,241,220,.25);

}


/* =========================================================
   外环
   ========================================================= */

#duckwow-banner .dw-ring-outer {

  width: 188px;

  height: 188px;

  border-color:
    rgba(190,255,242,.38);

  box-shadow:

    0 0 35px
    rgba(0,170,144,.12);

  animation:

    dw-spin 30s
    linear infinite;

}


/* =========================================================
   中环
   ========================================================= */

#duckwow-banner .dw-ring-middle {

  width: 139px;

  height: 139px;

  border-style:
    dashed;

  border-color:
    rgba(255,255,255,.30);

  animation:

    dw-spin-reverse 21s
    linear infinite;

}


/* =========================================================
   内环
   ========================================================= */

#duckwow-banner .dw-ring-inner {

  width: 101px;

  height: 101px;

  border:
    1px solid
    rgba(255,255,255,.14);

  background:

    radial-gradient(
      circle,
      rgba(255,255,255,.13),
      rgba(255,255,255,.035) 65%,
      transparent 70%
    );

  box-shadow:

    0 0 35px
    rgba(0,255,210,.13),

    inset 0 0 30px
    rgba(255,255,255,.04);

}


/* =========================================================
   中央 Logo 卡片
   正向 / 浅色玻璃
   ========================================================= */

#duckwow-banner .dw-icon-card {

  position: absolute;

  left: 50%;
  top: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 82px;
  height: 82px;

  border-radius: 25px;

  /* Logo 卡片保持完全正向 */
  transform:
    translate(-50%, -50%);

  /* 柔和的浅薄荷玻璃 */

  background:
    rgba(226,250,245,.88);

  border:
    1px solid
    rgba(255,255,255,.72);

  box-shadow:

    0 18px 40px
    rgba(0,55,48,.22),

    0 0 35px
    rgba(190,255,242,.18),

    inset 0 1px 0
    rgba(255,255,255,.85);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

}


/* =========================================================
   DuckWow Logo
   透明 PNG
   小鸭子保持静止
   ========================================================= */

#duckwow-banner .dw-icon {

  display: block;

  width: 58px;
  height: 58px;

  object-fit:
    contain;

  /* Logo 不旋转 */
  transform:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

}


/* =========================================================
   Logo 柔和光晕
   ========================================================= */

#duckwow-banner .dw-icon-card::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 50px;
  height: 50px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(0,170,144,.20);

  filter:
    blur(18px);

  z-index: -1;

}


/* =========================================================
   装饰星星
   ========================================================= */

#duckwow-banner .dw-spark {

  position: absolute;

  color:
    rgba(126,244,224,.90);

  font-weight: 800;

  user-select:
    none;

  text-shadow:

    0 0 12px
    rgba(85,235,210,.40);

}


/* =========================================================
   星星 1
   ========================================================= */

#duckwow-banner .dw-spark-1 {

  top: 18px;

  right: 27px;

  font-size: 18px;

  animation:

    dw-float 4.2s
    ease-in-out infinite;

}


/* =========================================================
   小点
   ========================================================= */

#duckwow-banner .dw-spark-2 {

  left: 14px;

  bottom: 34px;

  font-size: 26px;

  opacity: .48;

  animation:

    dw-float 5s
    ease-in-out infinite .5s;

}


/* =========================================================
   星星 2
   ========================================================= */

#duckwow-banner .dw-spark-3 {

  right: 8px;

  bottom: 46px;

  font-size: 12px;

  opacity: .75;

  animation:

    dw-float 3.8s
    ease-in-out infinite 1s;

}


/* =========================================================
   外环旋转
   ========================================================= */

@keyframes dw-spin {

  from {

    transform:
      translate(-50%, -50%)
      rotate(0deg);

  }

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);

  }

}


/* =========================================================
   中环反向旋转
   ========================================================= */

@keyframes dw-spin-reverse {

  from {

    transform:
      translate(-50%, -50%)
      rotate(360deg);

  }

  to {

    transform:
      translate(-50%, -50%)
      rotate(0deg);

  }

}


/* =========================================================
   星星漂浮
   ========================================================= */

@keyframes dw-float {

  0%, 100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-7px);

  }

}


/* =========================================================
   背景圆环漂移
   ========================================================= */

@keyframes dw-orb-float {

  0%, 100% {

    transform:
      translate3d(0,0,0);

  }

  50% {

    transform:
      translate3d(-10px,8px,0);

  }

}


/* =========================================================
   平板
   ========================================================= */

@media (max-width: 850px) {

  #duckwow-banner .dw-banner-inner {

    padding:
      38px 38px;

  }


  #duckwow-banner .dw-visual {

    flex-basis:
      195px;

    width:
      195px;

    transform:
      scale(.84);

    transform-origin:
      center right;

  }

}


/* =========================================================
   手机
   ========================================================= */

@media (max-width: 620px) {

  #duckwow-banner.dw-banner {

    min-height:
      205px;

    border-radius:
      18px;

    margin-bottom:
      18px;

  }


  #duckwow-banner .dw-banner-inner {

    min-height:
      205px;

    padding:
      30px 24px;

  }


  #duckwow-banner .dw-banner-copy {

    max-width:
      100%;

  }


  #duckwow-banner .dw-eyebrow {

    margin-bottom:
      10px;

    font-size:
      10px;

    letter-spacing:
      1.5px;

  }


  #duckwow-banner .dw-title {

    max-width:
      72%;

    font-size:
      25px;

    line-height:
      1.3;

    letter-spacing:
      -.5px;

  }


  #duckwow-banner .dw-description {

    max-width:
      70%;

    margin-top:
      9px;

    font-size:
      13px;

    line-height:
      1.65;

    color:
      rgba(255,255,255,.69);

  }


  #duckwow-banner .dw-visual {

    position:
      absolute;

    right:
      -38px;

    bottom:
      -8px;

    width:
      190px;

    height:
      170px;

    transform:
      scale(.76);

    transform-origin:
      bottom right;

    opacity:
      .92;

  }

}


/* =========================================================
   很窄手机
   ========================================================= */

@media (max-width: 390px) {

  #duckwow-banner .dw-banner-inner {

    padding-left:
      20px;

    padding-right:
      20px;

  }


  #duckwow-banner .dw-title {

    max-width:
      76%;

    font-size:
      23px;

  }


  #duckwow-banner .dw-description {

    max-width:
      72%;

    font-size:
      12px;

  }

}


/* =========================================================
   用户开启减少动画时停止动画
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #duckwow-banner .dw-ring,
  #duckwow-banner .dw-spark,
  #duckwow-banner .dw-orb-1 {

    animation:
      none;

  }

}