/* Reference-stage effects from the supplied 特效方式.html; no external resources. */
/* Section Header Style (Matching Video 1:1) */
    .num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #1d6bf3 0%, #1557d8 100%);
      color: #ffffff;
      font-weight: 800;
      font-size: 0.85rem;
      line-height: 1;
      padding: 0.28rem 0.45rem;
      border-radius: 7px;
      box-shadow: 0 2px 6px rgba(29, 107, 243, 0.28);
      font-variant-numeric: tabular-nums;
    }
    .en-sub {
      color: #1d6bf3;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: -0.01em;
    }

    /* Stage Container Shadows */
    .stage-light {
      background: #ffffff;
      border-radius: 18px;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow: 0 14px 34px -10px rgba(15, 23, 42, 0.07), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    }
    .stage-dark {
      background: #0b0e17;
      border-radius: 18px;
      border: 1px solid rgba(30, 41, 59, 0.9);
      box-shadow: 0 18px 38px -10px rgba(11, 14, 23, 0.35);
    }

    /* 01 Border Beam */
    @keyframes spinBeam {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .pro-beam-wrapper {
      position: relative;
      border-radius: 14px;
      padding: 2px;
      overflow: hidden;
      background: rgba(99, 102, 241, 0.22);
      box-shadow: 0 0 28px -4px rgba(124, 58, 237, 0.45);
    }
    .pro-beam-wrapper::before {
      content: '';
      position: absolute;
      inset: -130%;
      background: conic-gradient(from 0deg, transparent 0%, transparent 68%, #60a5fa 82%, #a855f7 93%, #ffffff 100%);
      animation: spinBeam var(--beam-duration, 3.2s) linear infinite;
    }
    .pro-beam-inner {
      position: relative;
      z-index: 1;
      border-radius: 12px;
      background: linear-gradient(180deg, #171836 0%, #101226 100%);
      height: 100%;
    }

    /* 02 Spotlight */
    .spotlight-grid {
      position: relative;
      background-image: radial-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px);
      background-size: 12px 12px;
    }
    .spot-card {
      position: relative;
      background: rgba(17, 22, 37, 0.9);
      border: 1px solid rgba(51, 65, 85, 0.55);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .spot-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        170px circle at var(--sx, -999px) var(--sy, -999px),
        rgba(99, 102, 241, 0.34),
        rgba(56, 189, 248, 0.1) 50%,
        transparent 80%
      );
      pointer-events: none;
    }

    /* 03 3D Tilt Gold Card */
    .tilt-perspective {
      perspective: 900px;
    }
    .gold-vip-card {
      background: linear-gradient(135deg, #f6d365 0%, #d49b35 45%, #b57c1e 75%, #f0c75e 100%);
      border-radius: 14px;
      box-shadow: 0 22px 44px -10px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.65);
      transform-style: preserve-3d;
      transition: transform 0.14s ease-out, box-shadow 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .gold-vip-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        220px circle at var(--gx, 50%) var(--gy, 30%),
        rgba(255, 255, 255, 0.42),
        transparent 70%
      );
      pointer-events: none;
    }

    /* 04 Scroll Storytelling: 2026-11-04 requested edge-to-edge miniature phone. */
    .story-mini-device {
      box-sizing: border-box;
      padding: 3px;
      overflow: hidden;
      flex-shrink: 0;
      background: #0f172a;
    }
    .story-mini-device > #story-phone-screen {
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      border-radius: 17px;
    }
    .story-mini-home {
      width: 23px;
      height: 3px;
      min-height: 3px;
      flex-shrink: 0;
      margin: 1px auto 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
    }
    /* 05 Scramble Text Glow */
    .scramble-glow-white {
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
    }
    .scramble-glow-blue {
      color: #3b82f6;
      text-shadow: 0 0 22px rgba(59, 130, 246, 0.65);
    }

    /* 08 Typewriter Caret */
    @keyframes caretBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .tw-caret {
      display: inline-block;
      width: 2.5px;
      height: 1.05em;
      background: #2563eb;
      vertical-align: -2px;
      margin-left: 2px;
      animation: caretBlink 0.8s step-end infinite;
    }

    /* 09 Marquee Rows */
    @keyframes marqueeLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes marqueeRight {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    .marquee-row-left {
      display: flex;
      width: max-content;
      animation: marqueeLeft 18s linear infinite;
    }
    .marquee-row-right {
      display: flex;
      width: max-content;
      animation: marqueeRight 22s linear infinite;
    }
    .marquee-stage:hover .marquee-row-left,
    .marquee-stage:hover .marquee-row-right,
    .marquee-paused .marquee-row-left,
    .marquee-paused .marquee-row-right {
      animation-play-state: paused;
    }

    /* 10 Shimmer */
    @keyframes shimmerMove {
      0% { transform: translateX(-140%) skewX(-20deg); }
      100% { transform: translateX(240%) skewX(-20deg); }
    }
    .shimmer-surface {
      position: relative;
      overflow: hidden;
    }
    .shimmer-surface::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 48%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
      animation: shimmerMove 2.1s ease-in-out infinite;
    }
    .shimmer-cta::after {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
    }

    /* 12 Scroll Reveal */
    .article-reveal-card {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .article-reveal-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* 15 Hover Lift — screenshot-based neutral, layered card elevation.
       Baseline has a faint contact shadow; hover casts a wider soft shadow below.
       Scoped to the reference effect, not the site's unrelated card navigation. */
    .outdoor-product-card {
      position: relative;
      z-index: 0;
      min-width: 0;
      transform: translate3d(0, 0, 0);
      border-color: rgba(226, 232, 240, 0.95);
      box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.045),
        0 7px 16px -9px rgba(15, 23, 42, 0.10);
      transition:
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.36s ease;
    }
    .outdoor-product-card:is(:hover, .active-lift, :focus-visible) {
      z-index: 1;
      transform: translate3d(0, -3px, 0);
      box-shadow:
        0 19px 36px -13px rgba(15, 23, 42, 0.26),
        0 9px 19px -10px rgba(15, 23, 42, 0.16),
        0 2px 6px rgba(15, 23, 42, 0.055);
      border-color: #e2e8f0;
    }
    .outdoor-product-card:focus-visible {
      outline: 2px solid #60a5fa;
      outline-offset: 3px;
    }

    /* Subtitle Pill from Video Bottom */
    .subtitle-pill {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
      border-radius: 9999px;
    }

    /* Accessibility: prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }