:root{
      --bg:#ffffff;
      --ink:#0f1222;

      /* palette soft (white theme) */
      --c1:#F4935D; /* coral */
      --c2:#FF6088; /* magenta */
      --c3:#FFCF71; /* gold */
      --c4:#46D48A; /* mint */
      --c5:#B19BF1; /* lilac */

      --line:rgba(15,18,34,.10);
      --glass:rgba(255,255,255,.72);
      --shadow:0 18px 50px rgba(15,18,34,.10);
      --shadow2:0 10px 28px rgba(15,18,34,.08);
    }

    #atlas-body-animation{
      margin:0;
      background:
        radial-gradient(900px 420px at 50% 45%, rgba(255,96,136,.08), transparent 60%),
        radial-gradient(820px 380px at 46% 55%, rgba(244,147,93,.08), transparent 62%),
        radial-gradient(900px 420px at 56% 58%, rgba(177,155,241,.08), transparent 60%),
        var(--bg);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    }

    .wrap{
      height:100%;
      display:grid;
      place-items:center;
      padding: 24px;
    }

    .atlas-core-anim{
      width: 100%;
      min-width: 30vw;
      height: min(520px, 70vh);
      position:relative;
      border-radius: 28px;
      
      isolation:isolate;
    }

    .atlas-core-anim::before{
      content:"";
      position:absolute; inset:-120px;
      background:
        radial-gradient(circle at 50% 52%,
          rgba(255,96,136,.14),
          rgba(244,147,93,.10) 32%,
          rgba(177,155,241,.10) 52%,
          transparent 72%);
      pointer-events:none;
      filter: blur(2px);
      opacity:.75;
    }

    /* Core */
    .core{
      position:absolute;
      left:50%; top:52%;
      transform: translate(-50%,-50%);
      width: 230px; height: 230px;
      border-radius: 999px;
      background: radial-gradient(circle at 35% 30%,
        rgba(255,255,255,.95),
        rgba(255,255,255,.55) 35%,
        rgba(255,255,255,.30) 62%,
        rgba(255,255,255,.18) 100%);
      border: 1px solid rgba(15,18,34,.10);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow:hidden;
      z-index:2;
    }

    /* Subtle internal color drift */
    .core::before{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(circle at 20% 40%, rgba(255,96,136,.20), transparent 58%),
        radial-gradient(circle at 70% 30%, rgba(244,147,93,.18), transparent 60%),
        radial-gradient(circle at 45% 75%, rgba(177,155,241,.18), transparent 60%),
        radial-gradient(circle at 58% 62%, rgba(70,212,138,.14), transparent 60%);
      filter: blur(10px);
      opacity:.9;
      animation: drift 6.5s ease-in-out infinite alternate;
    }

    @keyframes drift{
      from{ transform: translate3d(-6px, 6px, 0) scale(1); }
      to  { transform: translate3d(8px,-8px, 0) scale(1.03); }
    }

    /* Label */
    .label{
      position:absolute;
      left:50%; top:50%;
      transform: translate(-50%,-50%);
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #7A7A7A;
      border: 1px solid rgba(15,18,34,.10);
      box-shadow: 0 8px 20px rgba(15,18,34,.08);
      letter-spacing:.08em;
      font-weight: 760;
      font-size: 13.5px;
      text-transform: uppercase;
      color: rgba(15,18,34,.86);
      user-select:none;
      z-index:3;
      white-space:nowrap;
    }

    .label b{
      background: linear-gradient(90deg, var(--c1), var(--c2));
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      text-shadow: 0 0 18px rgba(255,96,136,.18);
    }
    .label span {
        background: linear-gradient(90deg, #FF8C3C 0%, #FF4DB8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 20px rgba(255, 120, 80, 0.25);
}

    .dot{
        display: none;
      width:10px;height:10px;border-radius:50%;
      background: linear-gradient(90deg, var(--c1), var(--c2));
      box-shadow: 0 0 0 6px rgba(255,96,136,.12);
      animation: dotPulse 1.7s ease-in-out infinite;
      flex: 0 0 auto;
    }
    @keyframes dotPulse{
      0%,100%{ transform: scale(1); box-shadow: 0 0 0 6px rgba(255,96,136,.10); }
      50%{ transform: scale(1.08); box-shadow: 0 0 0 10px rgba(244,147,93,.10); }
    }

    /* Particles */
    .particles{
      position:absolute; inset:0;
      pointer-events:none;
      z-index:1;
    }
    .p{
      position:absolute;
      width: 6px; height: 6px;
      border-radius: 999px;
      opacity: 0;
      transform: translate3d(0,0,0);
      will-change: transform, opacity;
      filter: blur(.15px);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .core::before, .dot{ animation: none !important; }
    }

a.btn-atlas {
  background: linear-gradient(90deg, #FF8C3C, #FF4DB8)!important;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(255, 120, 80, 0.25);
}

a.btn-atlas:hover{
  transform: translateY(-1px);
  box-shadow: 0 1px 5px rgba(255, 120, 80, 0.45);
  filter: brightness(1.08);
}