.splash {
    --bg: #0B3B27;
    --bg-soft: #12643F;
    --green: #12B76A;
    --green-dark: #067647;
    --green-light: #32D583;
    --white: #ffffff;
    --muted-white: rgba(255,255,255,.74);
  }
.splash,
.splash * { box-sizing: border-box; }
.splash {
    width: 100vw;
    height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 99999;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 42%, rgba(50,213,131,.30) 0%, rgba(18,100,63,.66) 34%, rgba(11,59,39,1) 73%),
      linear-gradient(135deg, #062719 0%, var(--bg) 48%, #041E14 100%);
  }

  .splash::before{
    content: "";
    position: absolute;
    inset: -35%;
    background:
      radial-gradient(circle at 22% 24%, rgba(50,213,131,.24), transparent 25%),
      radial-gradient(circle at 78% 72%, rgba(18,183,106,.18), transparent 29%);
    filter: blur(4px);
    animation: ambient-drift 5.5s ease-in-out infinite alternate;
    z-index: -4;
  }

  .splash::after{
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(110deg, transparent 37%, rgba(255,255,255,.10) 49%, transparent 60%);
    transform: translateX(-74%) rotate(8deg);
    animation: background-sweep 3s cubic-bezier(.2,.7,.25,1) 1.1s infinite;
    z-index: -3;
  }

  @keyframes ambient-drift{
    from{ transform: translate3d(-2%, -1%, 0) scale(1); }
    to{ transform: translate3d(2%, 1%, 0) scale(1.08); }
  }

  @keyframes background-sweep{
    0%, 18%{ transform: translateX(-74%) rotate(8deg); opacity: 0; }
    38%{ opacity: 1; }
    72%, 100%{ transform: translateX(74%) rotate(8deg); opacity: 0; }
  }

  .orb{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: rgba(18,183,106,.13);
    filter: blur(12px);
    transform: translate(-50%, -50%) scale(.72);
    opacity: 0;
    animation: orb-in 900ms ease-out .1s forwards, orb-breathe 2.8s ease-in-out 1s infinite;
    z-index: -2;
  }

  @keyframes orb-in{
    to{ opacity: .9; transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes orb-breathe{
    0%,100%{ transform: translate(-50%, -50%) scale(1); opacity: .72; }
    50%{ transform: translate(-50%, -50%) scale(1.14); opacity: .95; }
  }

  .ring{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 122px;
    height: 122px;
    border-radius: 999px;
    border: 1.5px solid rgba(50,213,131,.40);
    transform: translate(-50%, -50%) scale(.55);
    opacity: 0;
    animation: ring-pulse 2.2s ease-out infinite;
    z-index: -1;
  }

  .ring.r2{ animation-delay: .55s; }
  .ring.r3{ animation-delay: 1.1s; }

  @keyframes ring-pulse{
    0%{ opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    16%{ opacity: .55; }
    100%{ opacity: 0; transform: translate(-50%, -50%) scale(2.85); }
  }

  .spark{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: 0 0 18px rgba(50,213,131,.85);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(36px) scale(.25);
    animation: spark-out 2.6s cubic-bezier(.18,.84,.36,1) var(--d) infinite;
  }

  .spark.s1{ --a: -112deg; --d: .72s; }
  .spark.s2{ --a: -58deg; --d: .92s; width: 5px; height: 5px; }
  .spark.s3{ --a: 21deg; --d: 1.08s; }
  .spark.s4{ --a: 82deg; --d: 1.28s; width: 5px; height: 5px; }
  .spark.s5{ --a: 145deg; --d: 1.44s; }

  @keyframes spark-out{
    0%, 42%{ opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(36px) scale(.2); }
    52%{ opacity: .95; }
    86%,100%{ opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(132px) scale(1); }
  }

  .logo-stack{
    display: grid;
    justify-items: center;
    gap: 22px;
    position: relative;
    z-index: 1;
  }

  .icon-wrap{
    width: clamp(118px, 20vw, 152px);
    height: clamp(118px, 20vw, 152px);
    position: relative;
    opacity: 0;
    transform: translateY(20px) scale(.45) rotate(-10deg);
    animation:
      logo-arrive 900ms cubic-bezier(.17,1.36,.42,1) .15s forwards,
      logo-float 1.8s ease-in-out 1.12s infinite;
  }

  .icon-wrap::before,
  .icon-wrap::after{
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 34px;
  }

  .icon-wrap::before{
    inset: -12px;
    background: linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,0) 38%, rgba(50,213,131,.22));
    filter: blur(15px);
    opacity: 0;
    animation: halo-pop 900ms ease-out .64s forwards, halo-loop 2.4s ease-in-out 1.2s infinite;
  }

  .icon-wrap::after{
    inset: -16px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 0 0 0 rgba(50,213,131,0);
    opacity: 0;
    animation: confirm-glow 2.2s ease-out 1.35s infinite;
  }

  @keyframes logo-arrive{
    0%{ opacity: 0; transform: translateY(20px) scale(.45) rotate(-10deg); }
    55%{ opacity: 1; transform: translateY(-5px) scale(1.12) rotate(2deg); }
    76%{ transform: translateY(1px) scale(.97) rotate(0deg); }
    100%{ opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  }

  @keyframes logo-float{
    0%,100%{ transform: translateY(0) scale(1); }
    50%{ transform: translateY(-6px) scale(1.035); }
  }

  @keyframes halo-pop{
    to{ opacity: .72; transform: scale(1); }
  }

  @keyframes halo-loop{
    0%,100%{ opacity: .50; transform: scale(1); }
    50%{ opacity: .88; transform: scale(1.05); }
  }

  @keyframes confirm-glow{
    0%{ opacity: 0; box-shadow: 0 0 0 0 rgba(50,213,131,0); transform: scale(.9); }
    22%{ opacity: 1; box-shadow: 0 0 0 17px rgba(50,213,131,.16); }
    55%,100%{ opacity: 0; box-shadow: 0 0 0 36px rgba(50,213,131,0); transform: scale(1.08); }
  }

  .logo-svg{
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.36));
  }

  .tile{
    transform-origin: 32px 32px;
    animation: tile-pop 850ms ease-out .42s both, tile-balance 2s ease-in-out 1.4s infinite;
  }

  @keyframes tile-pop{
    0%{ transform: rotate(-6deg) scale(.93); }
    60%{ transform: rotate(1deg) scale(1.03); }
    100%{ transform: rotate(0) scale(1); }
  }

  @keyframes tile-balance{
    0%,100%{ transform: rotate(0deg) scale(1); }
    50%{ transform: rotate(.7deg) scale(1.01); }
  }

  .tile-shine{
    opacity: 0;
    transform: translateX(-44px) rotate(18deg);
    transform-origin: 32px 32px;
    animation: tile-shine 2.7s ease-out 1.05s infinite;
  }

  @keyframes tile-shine{
    0%,35%{ opacity: 0; transform: translateX(-44px) rotate(18deg); }
    46%{ opacity: .46; }
    72%,100%{ opacity: 0; transform: translateX(48px) rotate(18deg); }
  }

  .drop{
    fill: var(--white);
    fill-opacity: 0;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 142;
    stroke-dashoffset: 142;
    animation:
      draw-drop 720ms ease-out .58s forwards,
      fill-drop 360ms ease-out 1.16s forwards,
      drop-pulse 1.9s ease-in-out 1.65s infinite;
    transform-origin: 32px 34px;
  }

  @keyframes draw-drop{
    to{ stroke-dashoffset: 0; }
  }

  @keyframes fill-drop{
    to{ fill-opacity: 1; }
  }

  @keyframes drop-pulse{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.035); }
  }

  .drop-highlight{
    opacity: 0;
    transform-origin: 26px 24px;
    animation: highlight-in 520ms ease-out 1.28s forwards, highlight-shimmer 1.8s ease-in-out 1.75s infinite;
  }

  @keyframes highlight-in{
    0%{ opacity: 0; transform: translate(-2px, 3px) scale(.75); }
    100%{ opacity: .75; transform: translate(0,0) scale(1); }
  }

  @keyframes highlight-shimmer{
    0%,100%{ opacity: .35; }
    50%{ opacity: .78; }
  }

  .check{
    fill: none;
    stroke: var(--green-dark);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 41;
    stroke-dashoffset: 41;
    opacity: 0;
    animation: draw-check 460ms cubic-bezier(.15,.88,.28,1) 1.42s forwards, check-pop 2s ease-in-out 1.84s infinite;
    transform-origin: 33px 36px;
  }

  @keyframes draw-check{
    0%{ opacity: 1; stroke-dashoffset: 41; }
    100%{ opacity: 1; stroke-dashoffset: 0; }
  }

  @keyframes check-pop{
    0%,100%{ transform: scale(1); }
    12%{ transform: scale(1.08); }
    24%{ transform: scale(1); }
  }

  .wordmark{
    min-width: 210px;
    text-align: center;
    color: var(--white);
    font-size: clamp(18px, 3vw, 23px);
    line-height: 1;
    font-weight: 750;
    letter-spacing: .3px;
    opacity: 0;
    transform: translateY(12px);
    animation: word-in 520ms ease-out 1.56s forwards;
  }

  .dots::after{
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: dots 1.2s steps(4,end) 2s infinite;
  }

  @keyframes dots{
    0%{ content: ""; }
    25%{ content: "."; }
    50%{ content: ".."; }
    75%,100%{ content: "..."; }
  }

  .subtitle{
    display: block;
    margin-top: 10px;
    color: var(--muted-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    animation: subtitle-in 520ms ease-out 1.78s forwards;
  }

  @keyframes word-in{
    to{ opacity: 1; transform: translateY(0); }
  }

  @keyframes subtitle-in{
    to{ opacity: 1; transform: translateY(0); }
  }

  .progress{
    position: relative;
    width: min(220px, 56vw);
    height: 4px;
    margin: 24px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    opacity: 0;
    transform: translateY(8px);
    animation: progress-in 420ms ease-out 1.96s forwards;
  }

  .progress::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 44%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,.48), var(--white));
    transform: translateX(-110%);
    animation: progress-load 1.35s cubic-bezier(.22,.76,.3,1) 2.04s infinite;
  }

  @keyframes progress-in{
    to{ opacity: 1; transform: translateY(0); }
  }

  @keyframes progress-load{
    0%{ transform: translateX(-110%); }
    100%{ transform: translateX(255%); }
  }

.splash[hidden] {
  display: none;
}

.splash.splash-hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

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