/*
 * MATENETWORKS mobile v5.9 network-horizon + constellation mark
 * IMPORTANT: desktop is intentionally untouched.
 * Everything except the hidden default rule is scoped to max-width: 767px.
 */
.mn-v52-mobile-symbol,.mn-v57-flowfield,.mn-v59-constellation{display:none!important;}

@media only screen and (max-width:767px){
  /* Keep the existing page structure. Only the first mobile hero is adjusted. */
  .mainvisual>.visual01{
    overflow:hidden!important;
    isolation:isolate;
    background:#03070b!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Raise the CURRENT Earth and CURRENT SVG network together so they never drift. */
  .mainvisual>.visual01>.photo,
  .mainvisual>.visual01>.netfx{
    transform-origin:50% 100%!important;
    will-change:transform,filter,opacity;
  }
  .mainvisual>.visual01.in-view>.photo{
    animation:mnV52EarthEnter 2.0s cubic-bezier(.18,.76,.22,1) both,
              mnV52EarthBreathe 10s ease-in-out 2.0s infinite alternate!important;
  }
  .mainvisual>.visual01.in-view>.netfx{
    animation:mnV52NetworkEnter 2.0s cubic-bezier(.18,.76,.22,1) both,
              mnV52NetworkBreathe 10s ease-in-out 2.0s infinite alternate!important;
  }
  @keyframes mnV52EarthEnter{
    0%{transform:scale(1.10) translate3d(0,2.4%,0);filter:brightness(.82) saturate(.90);}
    62%{filter:brightness(.98) saturate(1.03);}
    100%{transform:scale(1.30) translate3d(0,0,0);filter:brightness(1) saturate(1.04);}
  }
  @keyframes mnV52NetworkEnter{
    0%{transform:scale(1.10) translate3d(0,2.4%,0);opacity:.10;}
    60%{opacity:.78;}
    100%{transform:scale(1.30) translate3d(0,0,0);opacity:1;}
  }
  @keyframes mnV52EarthBreathe{
    from{transform:scale(1.30) translate3d(0,0,0);filter:brightness(1) saturate(1.04);}
    to{transform:scale(1.335) translate3d(0,-.65%,0);filter:brightness(1.035) saturate(1.08);}
  }
  @keyframes mnV52NetworkBreathe{
    from{transform:scale(1.30) translate3d(0,0,0);filter:drop-shadow(0 0 3px rgba(255,85,87,.15));}
    to{transform:scale(1.335) translate3d(0,-.65%,0);filter:drop-shadow(0 0 8px rgba(255,85,87,.28));}
  }

  /* Remove the white seam/divider ONLY on mobile. */
  .mainvisual>.visual01 .text .line:last-child{
    display:none!important;
    width:0!important;height:0!important;
    margin:0!important;padding:0!important;
    border:0!important;background:transparent!important;
  }
  .mainvisual>.visual01,
  .mainvisual>.visual01 + .visual{
    margin-top:0!important;
    border-top:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }

  /* New constellation artwork: MOBILE ONLY. */
  .mainvisual>.visual01>.mn-v52-mobile-symbol{
    display:block!important;
    position:absolute;
    z-index:1;
    left:50%;
    top:7.5vh;
    width:min(84vw,340px);
    max-height:28vh;
    transform:translateX(-50%);
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
  }
  .mn-v52-mobile-symbol__enter{opacity:0;transform:scale(.84) translateY(10px);}
  .visual01.in-view>.mn-v52-mobile-symbol .mn-v52-mobile-symbol__enter{
    animation:mnV52SymbolIn 1.05s cubic-bezier(.2,.72,.22,1) .9s both;
  }
  .mn-v52-mobile-symbol__float{position:relative;isolation:isolate;}
  .visual01.in-view>.mn-v52-mobile-symbol .mn-v52-mobile-symbol__float{
    animation:mnV52SymbolFloat 6.8s ease-in-out 1.95s infinite alternate;
  }
  .mn-v52-mobile-symbol__imagebox{
    position:relative;
    width:100%;
    overflow:visible;
    border-radius:0;
    background:transparent;
    filter:none;
  }
  .mn-v52-mobile-symbol__imagebox img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    border:0;
    background:transparent;
    /* v5.6 uses the user-provided transparent PNG directly. */
    mix-blend-mode:normal;
    filter:drop-shadow(0 0 12px rgba(78,139,255,.12)) drop-shadow(0 0 12px rgba(255,78,85,.10));
  }
  .mn-v52-mobile-symbol__halo{
    position:absolute;
    z-index:-1;
    left:50%;top:50%;
    width:108%;height:108%;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse,rgba(83,133,255,.08),rgba(255,78,85,.045) 34%,transparent 68%);
    filter:blur(15px);
    opacity:.24;
  }
  .mn-v52-mobile-symbol__glint{
    position:absolute;
    z-index:2;
    right:8%;top:10%;
    width:12px;height:12px;
    opacity:.22;
    background:radial-gradient(ellipse 12% 50%,#fff,transparent),radial-gradient(ellipse 50% 12%,#fff,transparent);
  }
  .visual01.in-view>.mn-v52-mobile-symbol .mn-v52-mobile-symbol__halo{animation:mnV52Twinkle 4.8s ease-in-out 1.2s infinite;}
  .visual01.in-view>.mn-v52-mobile-symbol .mn-v52-mobile-symbol__glint{animation:mnV52Twinkle 4.8s ease-in-out 2.1s infinite;}

  @keyframes mnV52SymbolIn{
    from{opacity:0;transform:scale(.76) translateY(12px);filter:blur(5px);}
    to{opacity:1;transform:scale(1) translateY(0);filter:blur(0);}
  }
  @keyframes mnV52SymbolFloat{
    from{transform:translateY(0) scale(1);}
    to{transform:translateY(-5px) scale(1.015);}
  }
  @keyframes mnV52Twinkle{
    0%,100%{opacity:.16;transform:scale(.88);}
    50%{opacity:.55;transform:scale(1.12);}
  }



  /* V5.4: keep first hero artwork BEHIND all copy. */
  .mainvisual>.visual01>.text{
    z-index:4!important;
    top:60%!important;
  }
  @media (max-height:720px){
    .mainvisual>.visual01>.text{top:52%!important;}
    .mainvisual>.visual01>.mn-v52-mobile-symbol{width:min(78vw,310px);top:6vh;}
  }
  .mainvisual>.visual01>.netfx{
    z-index:2!important;
  }

  /* V5.7: section 2 stays in the original star/space language.
     No photo/HUD. A quiet network horizon fills the lower half behind the copy. */
  .mainvisual>.visual02>.photo{
    overflow:hidden!important;
    isolation:isolate;
    background-image:
      linear-gradient(180deg,rgba(1,4,9,.02) 0%,rgba(1,4,9,.10) 48%,rgba(1,4,9,.42) 100%),
      url('/mate-home-mobile-v52/section2-stars.webp?v=20260908-1')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  .mainvisual>.visual02>.text{
      z-index:4!important;
      top:69%!important;
    }

  /* V5.9: ADD the constellation logo without replacing the v5.7 animation. */
  .mn-v59-constellation{
    display:block!important;
    position:absolute;
    z-index:1;
    left:50%;
    top:5.5vh;
    width:min(92vw,390px);
    transform:translateX(-50%);
    pointer-events:none;
    opacity:.72;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  }
  .mn-v59-constellation img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    border:0;
    background:transparent;
    filter:brightness(.94) saturate(.96) drop-shadow(0 0 10px rgba(74,142,234,.10)) drop-shadow(0 0 10px rgba(244,75,82,.08));
  }
  .visual02.in-view .mn-v59-constellation{
    animation:mnV59ConstellationFloat 9s ease-in-out .3s infinite alternate;
  }
  @keyframes mnV59ConstellationFloat{
    from{opacity:.62;transform:translateX(-50%) translateY(0) scale(.985);}
    to{opacity:.82;transform:translateX(-50%) translateY(-5px) scale(1.015);}
  }

  /* Keep the v5.7 animated network horizon exactly as the motion layer. */
  .mn-v57-flowfield{
    display:block!important;
    position:absolute;
    z-index:1;
    left:-6%;right:-6%;
    top:38%;bottom:-2%;
    pointer-events:none;
    overflow:hidden;
    opacity:.92;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 8%,#000 27%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 8%,#000 27%,#000 100%);
  }
  .mn-v57-flowfield svg{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    overflow:visible;
    filter:drop-shadow(0 0 5px rgba(91,154,230,.08));
  }
  .mn-v57-flowfield__glow{
    position:absolute;
    z-index:0;
    border-radius:50%;
    filter:blur(32px);
    opacity:.18;
  }
  .mn-v57-flowfield__glow--blue{
    width:52%;height:28%;left:1%;bottom:9%;
    background:rgba(66,133,220,.28);
  }
  .mn-v57-flowfield__glow--red{
    width:48%;height:25%;right:-3%;bottom:20%;
    background:rgba(238,76,82,.20);
  }
  .mn-v57-grid path{
    stroke:#87a9c6;
    stroke-width:.7;
    opacity:.13;
    vector-effect:non-scaling-stroke;
  }
  .mn-v57-route{
    vector-effect:non-scaling-stroke;
    stroke-width:1.1;
    opacity:.48;
  }
  .mn-v57-route--blue{stroke:url(#mnV57Blue);}
  .mn-v57-route--red{stroke:url(#mnV57Red);}
  .mn-v57-route--soft{stroke:#d8e7f4;stroke-width:.65;opacity:.20;}
  .mn-v57-pulse{
    vector-effect:non-scaling-stroke;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-dasharray:.055 .945;
    stroke-dashoffset:1;
    opacity:0;
  }
  .mn-v57-pulse--blue{stroke:#a6d2ff;}
  .mn-v57-pulse--red{stroke:#ff7b7e;}
  .mn-v57-node{fill:#dcecf7;opacity:.62;filter:drop-shadow(0 0 4px rgba(219,239,255,.55));}
  .mn-v57-node--blue{fill:#8fc7ff;filter:drop-shadow(0 0 6px rgba(91,165,255,.80));}
  .mn-v57-node--red{fill:#ff6c70;filter:drop-shadow(0 0 6px rgba(255,83,89,.80));}
  .visual02.in-view .mn-v57-grid{animation:mnV57GridBreathe 7s ease-in-out .4s infinite alternate;}
  .visual02.in-view .mn-v57-flowfield__glow--blue{animation:mnV57Glow 6.2s ease-in-out .4s infinite alternate;}
  .visual02.in-view .mn-v57-flowfield__glow--red{animation:mnV57Glow 7.1s ease-in-out 1.1s infinite alternate-reverse;}
  .visual02.in-view .mn-v57-pulse--blue{animation:mnV57Travel 3.8s linear .5s infinite;}
  .visual02.in-view .mn-v57-pulse--red{animation:mnV57Travel 4.5s linear 1.6s infinite;}
  .visual02.in-view .mn-v57-node{animation:mnV57Node 3.8s ease-in-out infinite;}
  .visual02.in-view .mn-v57-node:nth-child(2n){animation-delay:.8s;}
  .visual02.in-view .mn-v57-node:nth-child(3n){animation-delay:1.5s;}
  @keyframes mnV57Travel{
    0%{stroke-dashoffset:1;opacity:0;}
    10%{opacity:.88;}
    84%{opacity:.72;}
    100%{stroke-dashoffset:0;opacity:0;}
  }
  @keyframes mnV57Node{
    0%,100%{opacity:.34;transform:scale(.86);transform-box:fill-box;transform-origin:center;}
    50%{opacity:.94;transform:scale(1.22);transform-box:fill-box;transform-origin:center;}
  }
  @keyframes mnV57Glow{
    from{opacity:.08;transform:translate3d(-2%,2%,0) scale(.94);}
    to{opacity:.28;transform:translate3d(2%,-1%,0) scale(1.08);}
  }
  @keyframes mnV57GridBreathe{
    from{opacity:.72;transform:translate3d(0,2px,0);}
    to{opacity:1;transform:translate3d(0,-3px,0);}
  }

    /* Make existing Seoul pulse/routes a little clearer; still mobile only. */
  .visual01 .netfx .ln{filter:drop-shadow(0 0 1.6px rgba(255,85,87,.30));}
  .visual01 .netfx .dot{filter:drop-shadow(0 0 5px rgba(255,85,87,.70));}
  .visual01 .netfx .pulse{filter:drop-shadow(0 0 8px rgba(255,85,87,.82));}

  /* Very short landscape screens: hide the artwork instead of overlapping copy. */
  @media (max-height:520px){
    .mainvisual>.visual01>.mn-v52-mobile-symbol,.mn-v57-flowfield,.mn-v59-constellation{display:none!important;}
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .mainvisual>.visual01>.photo,
  .mainvisual>.visual01>.netfx,
  .mn-v52-mobile-symbol__enter,
  .mn-v52-mobile-symbol__float,
  .mn-v52-mobile-symbol__halo,
  .mn-v52-mobile-symbol__glint,
  .mn-v59-constellation,
  .mn-v57-flowfield,
  .mn-v57-flowfield *{
    animation:none!important;
    transition:none!important;
  }
  .mn-v52-mobile-symbol__enter{opacity:1!important;transform:none!important;filter:none!important;}
  .mainvisual>.visual01>.photo,
  .mainvisual>.visual01>.netfx{transform:scale(1.30)!important;transform-origin:50% 100%!important;}
}