/* Hertz 中文站共享动效层：轻量、克制，并为无脚本 / 减少动态模式保留可读性。 */
:root {
  --hertz-motion-ease: cubic-bezier(.22, .61, .36, 1);
}

/* 首页的主样式是独立内联样式，因此导航下拉的共享样式也在动效层提供一份。 */
.primary-nav .nav-menu { position:relative; display:flex; align-items:center; flex:0 0 auto; height:100%; }
.primary-nav .nav-menu-trigger { display:inline-flex; align-items:center; gap:0; min-height:36px; padding:8px 0; border:0; color:rgba(255,255,255,.86); background:transparent; font:inherit; font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; transition:color .2s ease,opacity .2s ease; }
.primary-nav .nav-menu-trigger span { margin-left:2px; color:rgba(255,255,255,.82); font-size:11px; line-height:1; transform:translateY(-1px); transition:transform .25s ease; }
.primary-nav .nav-menu-trigger:hover, .primary-nav .nav-menu-trigger:focus-visible, .primary-nav .nav-menu-trigger[aria-current="page"] { color:#fff; opacity:.75; }
.primary-nav .nav-menu.is-open .nav-menu-trigger span { transform:translateY(1px) rotate(180deg); }
.nav-menu-panel { position:absolute; z-index:80; top:calc(100% + 14px); left:50%; width:min(650px,calc(100vw - 48px)); padding:24px; color:#f6f6f2; background:#171716; border-top:4px solid var(--orange, #ef4d22); box-shadow:0 18px 45px rgba(0,0,0,.25); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-8px); transition:opacity .24s ease,visibility .24s ease,transform .24s ease; }
.nav-menu:hover .nav-menu-panel, .nav-menu:focus-within .nav-menu-panel, .nav-menu.is-open .nav-menu-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.nav-menu-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; padding-bottom:19px; border-bottom:1px solid rgba(255,255,255,.17); }
.nav-menu-intro span { color:#ff7952; font-size:10px; font-weight:700; letter-spacing:.16em; }
.nav-menu-intro strong { color:#fff; font-size:20px; line-height:1.15; }
.nav-menu-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-top:13px; }
.primary-nav .nav-menu-panel .nav-menu-links a { display:grid; gap:4px; min-height:106px; padding:14px 12px 13px; color:#fff !important; background:#242422; border:1px solid rgba(255,255,255,.08); opacity:1; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.primary-nav .nav-menu-panel .nav-menu-links a:hover, .primary-nav .nav-menu-panel .nav-menu-links a:focus-visible { color:#fff !important; background:var(--orange, #ef4d22); border-color:var(--orange, #ef4d22); transform:translateY(-3px); }
.nav-menu-links a span { color:#ff7952; font-size:10px; font-weight:700; letter-spacing:.16em; }
.nav-menu-links a strong { font-size:18px; line-height:1.2; }
.nav-menu-links a small { align-self:end; color:#aaa; font-size:9px; font-weight:700; letter-spacing:.13em; }
.nav-menu-links a:hover span, .nav-menu-links a:focus-visible span, .nav-menu-links a:hover small, .nav-menu-links a:focus-visible small { color:rgba(255,255,255,.78); }
.product-section { padding-bottom:58px !important; }
.product-section .view-all { margin-top:32px; padding-top:20px; }

@keyframes hertz-header-in {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to { opacity: 1; transform: none; }
}

html.motion-fallback:not(.motion-reduced) .site-header {
  animation: hertz-header-in .62s var(--hertz-motion-ease) both;
}

[data-motion-reveal] {
  will-change: transform, opacity;
}

html.motion-ready:not(.motion-reduced) [data-motion-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .7s var(--hertz-motion-ease), transform .7s var(--hertz-motion-ease);
}

html.motion-ready:not(.motion-reduced) [data-motion-reveal].is-motion-visible {
  opacity: 1;
  transform: none;
}

/* 页面加载和滚动进入后，卡片只做很小的抬升，避免变成 PPT 式跳动。 */
.product-card,
.product,
.model-card,
.models .card,
.category-card,
.case-card,
.faq-item,
.brand-history-item,
.brand-value,
.help-tile,
.marine-spec,
.marine-related-card,
.news .card,
.detail-related .card {
  transition: transform .38s var(--hertz-motion-ease), box-shadow .38s var(--hertz-motion-ease), border-color .25s ease;
}

@media (hover:hover) and (pointer:fine) {
  html.motion-ready:not(.motion-reduced) [data-motion-card].is-motion-visible:hover {
    transform: translateY(-5px);
  }

  .product-card:hover,
  .product:hover,
  .model-card:hover,
  .models .card:hover,
  .category-card:hover,
  .case-card:hover,
  .faq-item:hover,
  .brand-history-item:hover,
  .brand-value:hover,
  .help-tile:hover,
  .marine-spec:hover,
  .marine-related-card:hover,
  .news .card:hover,
  .detail-related .card:hover {
    transform: translateY(-5px);
  }

  .subpage-btn:hover,
  .outline-btn:hover,
  .solid-btn:hover,
  .btn:hover,
  .header-quick:hover {
    box-shadow: 0 10px 24px rgba(239,77,34,.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  html * {
    scroll-behavior: auto !important;
  }

  html * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-motion-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width:900px) {
  .primary-nav .nav-menu { height:auto; }
  .primary-nav .nav-menu-trigger { font-size:11px; }
  .nav-menu-panel { position:fixed; top:104px; right:18px; left:18px; width:auto; max-height:calc(100vh - 122px); overflow:auto; transform:translateY(-8px); }
  .nav-menu:hover .nav-menu-panel, .nav-menu:focus-within .nav-menu-panel, .nav-menu.is-open .nav-menu-panel { transform:translateY(0); }
}

@media (max-width:560px) {
  .nav-menu-intro { display:grid; gap:9px; align-items:start; }
  .nav-menu-intro strong { font-size:18px; }
  .nav-menu-links { grid-template-columns:1fr; }
}
