#gatamed-loader{
    --gatamed-pink:#e91e73;
    --gatamed-pink-2:#ff5fa3;
    --gatamed-dark:#5b5b63;
    --gatamed-soft:#f7f7f9;
    --duration:6000ms;
  }

  /* FULLSCREEN LOADER */
  #gatamed-loader{
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 46%, rgba(233,30,115,.055) 0 0, transparent 38%),
      #fff;
    opacity:1;
    visibility:visible;
    transition:opacity .65s ease, visibility .65s ease;
  }
  html:not(.intro-pending) #gatamed-loader{opacity:0;visibility:hidden;pointer-events:none}

  .loader-stage{
    width:min(88vw,460px);
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:none;
  }

  .medical-mark{
    position:relative;
    width:210px;
    height:210px;
    transform:scale(1.65);
    margin-block:32px;
    isolation:isolate;
  }

  /* ambient halo */
  .medical-mark::before{
    content:"";
    position:absolute;
    inset:33px;
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(255,95,163,.18) 0 13%,
      rgba(233,30,115,.09) 28%,
      transparent 68%);
    filter:blur(5px);
    opacity:0;
    animation:halo var(--duration) ease-in-out infinite;
  }

  /* central cell */
  .cell{
    position:absolute;
    left:50%;top:50%;
    width:54px;height:54px;
    transform:translate(-50%,-50%) scale(.05);
    border-radius:50%;
    background:
      radial-gradient(circle at 37% 32%, rgba(255,255,255,.96) 0 5%, transparent 6%),
      radial-gradient(circle at 63% 60%, #9d1551 0 12%, transparent 13%),
      radial-gradient(circle at 45% 46%, #f25b9d 0 28%, #d91c70 53%, #a71050 100%);
    box-shadow:
      0 0 0 1px rgba(172,20,82,.18),
      0 0 20px rgba(233,30,115,.42),
      inset -8px -9px 14px rgba(114,8,54,.20),
      inset 8px 8px 14px rgba(255,255,255,.30);
    opacity:0;
    animation:cellBirth var(--duration) cubic-bezier(.2,.8,.25,1) infinite;
    z-index:4;
  }
  .cell::before,.cell::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.32);
    box-shadow:
      17px 3px 0 -2px rgba(255,255,255,.22),
      9px 19px 0 -3px rgba(255,255,255,.28),
      -10px 14px 0 -3px rgba(255,255,255,.22),
      -14px -5px 0 -4px rgba(255,255,255,.30);
  }
  .cell::before{width:10px;height:10px;left:12px;top:12px}
  .cell::after{width:7px;height:7px;right:11px;bottom:13px}

  /* rings */
  .orbit{
    position:absolute;
    left:50%;top:50%;
    border-radius:50%;
    border:1px solid rgba(233,30,115,.22);
    opacity:0;
    z-index:2;
  }
  .orbit.o1{
    width:112px;height:112px;
    margin:-56px;
    animation:orbitIn var(--duration) ease-in-out infinite, spin 5.4s linear infinite;
  }
  .orbit.o2{
    width:154px;height:154px;
    margin:-77px;
    border-color:rgba(93,93,99,.14);
    animation:orbitIn2 var(--duration) ease-in-out infinite, spinReverse 7.5s linear infinite;
  }
  .orbit.o3{
    width:184px;height:184px;
    margin:-92px;
    border-style:dashed;
    border-color:rgba(233,30,115,.13);
    animation:orbitIn3 var(--duration) ease-in-out infinite, spin 11s linear infinite;
  }

  /* orbit particles */
  .particle{
    position:absolute;
    width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #fff 0 8%, #ff6fab 18%, #e91e73 60%, #a90f50 100%);
    box-shadow:0 0 12px rgba(233,30,115,.42);
  }
  .particle.gray{
    background:radial-gradient(circle at 35% 30%, #fff 0 10%, #dcdde1 28%, #95979d 100%);
    box-shadow:0 0 9px rgba(100,100,110,.20);
  }
  .o1 .p1{left:50%;top:-5px;margin-left:-5px}
  .o1 .p2{right:-5px;top:50%;margin-top:-5px;width:8px;height:8px}
  .o1 .p3{left:12px;bottom:7px;width:7px;height:7px}
  .o2 .p1{right:17px;top:10px;width:12px;height:12px}
  .o2 .p2{left:-4px;top:46%;width:9px;height:9px}
  .o2 .p3{right:1px;bottom:36px;width:8px;height:8px}
  .o3 .p1{left:31px;top:7px;width:7px;height:7px}
  .o3 .p2{right:15px;top:64px;width:6px;height:6px}
  .o3 .p3{left:20px;bottom:27px;width:8px;height:8px}

  /* SVG drop drawn around the cell */
  .drop-svg{
    position:absolute;
    left:50%;top:50%;
    width:112px;height:132px;
    transform:translate(-50%,-53%) scale(.88);
    z-index:3;
    overflow:visible;
    opacity:0;
    animation:dropAppear var(--duration) ease-in-out infinite;
  }
  .drop-line{
    fill:rgba(255,255,255,.34);
    stroke:url(#dropGradient);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:310;
    stroke-dashoffset:310;
    filter:url(#softGlow);
    animation:drawDrop var(--duration) cubic-bezier(.4,0,.2,1) infinite;
  }

  /* small startup sparks */
  .spark{
    position:absolute;
    left:50%;top:50%;
    width:4px;height:4px;border-radius:50%;
    background:var(--gatamed-pink-2);
    opacity:0;
    z-index:1;
  }
  .s1{--x:-78px;--y:-46px}
  .s2{--x:82px;--y:-25px}
  .s3{--x:-88px;--y:36px}
  .s4{--x:70px;--y:58px}
  .s5{--x:2px;--y:-92px}
  .s6{--x:15px;--y:88px}
  .spark{animation:sparkOut var(--duration) ease-out infinite}

  @keyframes cellBirth{
    0%,7%{opacity:0;transform:translate(-50%,-50%) scale(.05)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(.48)}
    29%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
    36%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    88%{transform:translate(-50%,-50%) scale(1.08)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  }
  @keyframes orbitIn{
    0%,18%{opacity:0;transform:scale(.3)}
    34%,82%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.07)}
  }
  @keyframes orbitIn2{
    0%,25%{opacity:0;transform:scale(.45)}
    42%,82%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.05)}
  }
  @keyframes orbitIn3{
    0%,31%{opacity:0;transform:scale(.62)}
    49%,82%{opacity:.8;transform:scale(1)}
    100%{opacity:0;transform:scale(1.03)}
  }
  @keyframes spin{to{rotate:360deg}}
  @keyframes spinReverse{to{rotate:-360deg}}
  @keyframes dropAppear{
    0%,39%{opacity:0}
    52%,83%{opacity:1}
    100%{opacity:0}
  }
  @keyframes drawDrop{
    0%,39%{stroke-dashoffset:310}
    61%,88%{stroke-dashoffset:0}
    100%{stroke-dashoffset:-70}
  }
  @keyframes sparkOut{
    0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
    20%{opacity:.85}
    40%{opacity:.4;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}
    60%,100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.2)}
  }
  @keyframes halo{
    0%,39%{opacity:0;transform:scale(.6)}
    60%{opacity:1;transform:scale(1)}
    78%{opacity:.8;transform:scale(1.08)}
    100%{opacity:0;transform:scale(1.22)}
  }
  @media (max-width:480px){
    .medical-mark{width:185px;height:185px;transform:scale(1.4);margin-block:18px}
  }

  @media (max-height:480px){
    .medical-mark{transform:scale(1);margin-block:0}
  }

  @media (prefers-reduced-motion:reduce){
    #gatamed-loader *,#gatamed-loader *::before,#gatamed-loader *::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  }

#gatamed-loader{display:none}html.intro-pending #gatamed-loader{display:grid}html.intro-pending{overflow:hidden}html.intro-pending #site-content{visibility:hidden}html.intro-pending .hero-copy,html.intro-pending .stage{animation-play-state:paused}html:not(.intro-pending) #gatamed-loader{display:none}@media(prefers-reduced-motion:reduce){html.intro-pending #gatamed-loader{display:none}html.intro-pending #site-content{visibility:visible}html.intro-pending{overflow:auto}}