/* CR8R LABS — V48 MOBILE HOMEPAGE HERO EXPERIENCE
   Mobile homepage only. Desktop and all internal pages remain untouched.
   Adds one restrained spatial layer to the hero so the mobile experience carries
   the same sense of a living digital system as the desktop composition.
*/
@media (max-width:900px){
  .home-v08 .organic-home-main .oh-hero{
    position:relative!important;
    isolation:isolate;
    overflow:hidden!important;
  }

  /* Ambient depth behind the existing hero copy. */
  .home-v08 .organic-home-main .oh-hero::before{
    content:"";
    position:absolute;
    inset:-18% -28% -8% 18%;
    z-index:-3;
    pointer-events:none;
    background:
      radial-gradient(circle at 64% 26%,rgba(25,217,255,.16),transparent 22%),
      radial-gradient(circle at 78% 48%,rgba(91,92,255,.13),transparent 27%),
      radial-gradient(circle at 68% 76%,rgba(240,34,185,.10),transparent 24%);
    filter:blur(2px);
    animation:mhsAmbient 11s ease-in-out infinite alternate;
  }

  .home-v08 .mobile-hero-system{
    display:block!important;
    position:absolute;
    width:min(78vw,330px);
    height:min(78vw,330px);
    right:-78px;
    top:122px;
    z-index:-1;
    pointer-events:auto;
    opacity:.72;
    transform:rotate(-11deg);
    filter:drop-shadow(0 0 24px rgba(25,126,255,.10));
    transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease;
  }

  /* The visual is intentionally atmospheric rather than a second hero illustration. */
  .home-v08 .mobile-hero-system::before{
    content:"";
    position:absolute;
    inset:16%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(25,126,255,.16),rgba(25,126,255,.045) 38%,transparent 68%);
    filter:blur(12px);
  }
  .home-v08 .mobile-hero-system::after{
    content:"";
    position:absolute;
    inset:3%;
    border:1px solid rgba(25,217,255,.11);
    border-radius:50%;
    transform:scaleY(.44);
    box-shadow:0 0 42px rgba(25,126,255,.06);
  }

  .home-v08 .mhs-ring{
    position:absolute;
    left:50%;top:50%;
    border:1px solid rgba(112,132,255,.14);
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(24deg) scaleY(.48);
  }
  .home-v08 .mhs-ring-a{width:94%;height:62%;border-color:rgba(25,217,255,.14)}
  .home-v08 .mhs-ring-b{width:72%;height:84%;transform:translate(-50%,-50%) rotate(-33deg) scaleY(.50);border-color:rgba(126,75,255,.13)}
  .home-v08 .mhs-ring-c{width:49%;height:52%;transform:translate(-50%,-50%) rotate(58deg) scaleY(.58);border-color:rgba(255,45,174,.16)}

  .home-v08 .mhs-line{
    position:absolute;
    height:1px;
    transform-origin:left center;
    background:linear-gradient(90deg,transparent,rgba(25,217,255,.7),rgba(126,75,255,.48),transparent);
    box-shadow:0 0 12px rgba(25,217,255,.14);
  }
  .home-v08 .mhs-line-a{width:78%;left:7%;top:43%;transform:rotate(-18deg)}
  .home-v08 .mhs-line-b{width:63%;left:27%;top:64%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(240,34,185,.58),rgba(255,157,34,.42),transparent)}

  .home-v08 .mhs-node{
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 4px rgba(255,255,255,.025),0 0 20px currentColor;
    animation:mhsNode 3.8s ease-in-out infinite;
  }
  .home-v08 .mhs-node-a{left:16%;top:39%;color:var(--cyan)}
  .home-v08 .mhs-node-b{right:13%;top:26%;color:#7b83ff;animation-delay:-1.2s}
  .home-v08 .mhs-node-c{right:21%;bottom:17%;color:var(--pink);animation-delay:-2.1s}

  .home-v08 .mhs-core{
    position:absolute;
    left:50%;top:50%;
    width:26px;height:26px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.72),rgba(25,126,255,.42) 20%,rgba(25,126,255,.10) 52%,transparent 70%);
    box-shadow:0 0 30px rgba(25,126,255,.22),inset 0 0 16px rgba(255,45,174,.12);
    animation:mhsCore 4.8s ease-in-out infinite;
  }
  .home-v08 .mhs-core::after{
    content:"";
    position:absolute;
    inset:-9px;
    border:1px solid rgba(25,217,255,.13);
    border-radius:50%;
  }

  .home-v08 .mhs-scan{
    position:absolute;
    left:10%;right:8%;top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
    opacity:.5;
    animation:mhsScan 5.5s ease-in-out infinite;
  }

  /* Give the headline a little more dimensional separation from the system field. */
  .home-v08 .oh-hero-copy{position:relative;z-index:3}
  .home-v08 .oh-hero h1{
    text-shadow:0 8px 34px rgba(0,0,0,.18);
  }
  .home-v08 .oh-hero h1 em{
    filter:drop-shadow(0 5px 18px rgba(25,126,255,.08));
  }
  .home-v08 .oh-hero .oh-lede{
    position:relative;
    z-index:4;
  }

  /* Small system-status cue makes the hero feel responsive without adding copy clutter. */
  .home-v08 .oh-hero .oh-proof{
    position:relative;
    z-index:4;
  }
  .home-v08 .oh-hero .oh-proof::before{
    content:"LIVE / SYSTEM ONLINE";
    display:block;
    width:max-content;
    margin-bottom:11px;
    padding:5px 8px;
    border:1px solid rgba(25,217,255,.18);
    border-radius:999px;
    background:rgba(25,126,255,.045);
    color:rgba(243,238,220,.72);
    font-family:var(--mono);
    font-size:.42rem;
    line-height:1;
    letter-spacing:.14em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.12);
  }

  .home-v08 .mobile-hero-system.is-pulsing{
    opacity:.95;
    transform:rotate(-8deg) scale(1.045);
  }
  .home-v08 .mobile-hero-system.is-pulsing .mhs-ring-a{border-color:rgba(25,217,255,.25)}
  .home-v08 .mobile-hero-system.is-pulsing .mhs-ring-c{border-color:rgba(255,45,174,.25)}

  @keyframes mhsAmbient{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-2%,2%,0) scale(1.06)}}
  @keyframes mhsNode{0%,100%{transform:scale(.72);opacity:.55}50%{transform:scale(1.45);opacity:1}}
  @keyframes mhsCore{0%,100%{box-shadow:0 0 30px rgba(25,126,255,.20),inset 0 0 16px rgba(255,45,174,.10)}50%{box-shadow:0 0 46px rgba(25,126,255,.32),inset 0 0 20px rgba(255,45,174,.16)}}
  @keyframes mhsScan{0%,100%{transform:translateY(-54px);opacity:0}20%{opacity:.35}50%{transform:translateY(54px);opacity:.7}80%{opacity:.18}}
}

@media (max-width:560px){
  .home-v08 .mobile-hero-system{
    width:300px;height:300px;
    right:-104px;
    top:112px;
    opacity:.64;
  }
  .home-v08 .oh-hero .oh-proof::before{font-size:.40rem}
}

@media (min-width:768px) and (max-width:900px){
  .home-v08 .mobile-hero-system{width:390px;height:390px;right:-88px;top:128px;opacity:.70}
}

@media (prefers-reduced-motion:reduce){
  .home-v08 .mobile-hero-system,
  .home-v08 .mobile-hero-system *{animation:none!important;transition:none!important}
  .home-v08 .organic-home-main .oh-hero::before{animation:none!important}
}