/* Hianma commercial Hero GSAP V2 — "chaos to one platform".
   Desktop-only cinematic layer; mobile/tablet keep the existing stable Hero layout. */

@media (min-width: 1121px) {
  body .hm-marketing .hm-hero.hm-gsap-v2-ready {
    overflow: hidden !important;
    isolation: isolate;
  }

  body .hm-marketing .hm-hero.hm-gsap-v2-ready .hm-hero-copy,
  body .hm-marketing .hm-hero.hm-gsap-v2-ready .hm-product-stage,
  body .hm-marketing .hm-hero.hm-gsap-v2-ready .hm-hero-glow {
    will-change: transform;
  }

  body .hm-marketing .hm-hero.hm-gsap-v2-ready .hm-hero-copy h1 > span {
    display: inline-block;
    will-change: transform, opacity;
  }

  body .hm-marketing .hm-hero.hm-gsap-v2-ready .hm-product-window {
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
  }

  body .hm-marketing .hm-hero.hm-gsap-v2-ready .hm-hian-card {
    z-index: 7;
    will-change: transform, opacity;
  }

  body .hm-marketing .hm-chaos-layer {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 6;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  body .hm-marketing .hm-chaos-tile {
    position: absolute;
    left: -26px;
    top: -26px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(203, 216, 233, .94);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    color: #2563eb;
    box-shadow: 0 15px 36px rgba(28, 62, 109, .16), 0 2px 8px rgba(28, 62, 109, .06);
    opacity: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform, opacity;
  }

  body .hm-marketing .hm-chaos-tile svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.9;
  }

  body .hm-marketing .hm-chaos-tile:nth-child(2) {
    color: #10b981;
    background: rgba(242, 253, 249, .98);
  }

  body .hm-marketing .hm-chaos-tile:nth-child(3) {
    color: #f59e0b;
    background: rgba(255, 250, 238, .98);
  }

  body .hm-marketing .hm-chaos-tile:nth-child(4) {
    color: #7c3aed;
    background: rgba(249, 246, 255, .98);
  }

  body .hm-marketing .hm-chaos-tile:nth-child(5) {
    color: #0ea5e9;
    background: rgba(242, 251, 255, .98);
  }

  body .hm-marketing .hm-chaos-tile:nth-child(6) {
    color: #2563eb;
    background: rgba(245, 249, 255, .98);
  }

  body .hm-marketing .hm-gsap-focus-ring {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 1;
    width: min(520px, 88%);
    aspect-ratio: 1.5 / 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 46%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 0 14px rgba(37, 99, 235, .025), 0 0 90px rgba(37, 99, 235, .10);
    will-change: transform, opacity;
  }

  body .hm-marketing .hm-activity-line i {
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .hm-marketing .hm-chaos-layer,
  body .hm-marketing .hm-gsap-focus-ring {
    display: none !important;
  }
}