<style>

  @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");

  .logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #002540;
    font-size: 16px;
  }

  .logo-wrapper svg.logo {
    width: 160px;
    height: 160px;
    overflow: visible;
    animation: logo-scale 1s cubic-bezier(0.7, 0, 0.3, 1) 0.5s both;
    transform-origin: center;
  }

  .app-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    font-family: "Outfit", sans-serif;
    margin-top: 1rem;
    animation: reveal-up-2 0.5s cubic-bezier(0.1, 0, 0.4, 1) 1.25s backwards;
  }

  .app-title .name-op {
    font-weight: 700;
    font-size: 2rem;
  }

  .app-title .separator {
    font-weight: 200;
    font-size: 2rem;
    display: inline-block;
    transform: rotate(30deg);
    color: var(--color-text-secondary);
  }

  .app-title .name-suite {
    font-weight: 400;
    font-size: 1.5rem;
  }

  .app-title .baseline {
    text-align: center;
    width: 100%;
    font-weight: 400;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    color: var(--color-text-secondary);
  }

  #cr-left-1,
  #cr-top-2,
  #cr-right-3,
  #cr-bottom-center-4,
  #cr-bottom-5,
  #cr-top-center-6 {
    transform-box: fill-box;
  }

  /* Forme 1 — démarre lentement */
  #cr-left-1 {
    animation: reveal-up 0.5s cubic-bezier(0.4, 0, 0.6, 0.4) 0s both;
  }
  /* Forme 2 — s'accélère */
  #cr-top-2 {
    animation: reveal-right 0.4s cubic-bezier(0.3, 0, 0.3, 0.7) 0.35s both;
  }
  /* Forme 3 — vitesse max */
  #cr-right-3 {
    animation: reveal-down 0.3s cubic-bezier(0.2, 0, 0.2, 1) 0.6s both;
  }
  /* Forme 4 — commence à décélérer */
  #cr-bottom-center-4 {
    animation: reveal-left 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.8s both;
  }
  /* Forme 5 — ralentit */
  #cr-bottom-5 {
    animation: reveal-up 0.4s cubic-bezier(0.1, 0, 0.4, 1) 1s both;
  }
  /* Forme 6 — finit très doucement */
  #cr-top-center-6 {
    animation: reveal-diagonal-30 0.25s cubic-bezier(0, 0, 0.2, 1) 1.15s both;
  }

  @keyframes logo-scale {
    from {
      transform: scale(0.7);
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes reveal-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes reveal-down {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes reveal-right {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes reveal-left {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes reveal-diagonal-30 {
    from {
      transform: translate(-50%, 87%);
    }
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes reveal-up-2 {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
</style>

<div class="logo-wrapper">
    <svg class=logo style=shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd viewBox="0 0 1.422 1.422"xml:space=preserve xmlns=http://www.w3.org/2000/svg><defs><linearGradient gradientUnits=userSpaceOnUse id=grad-left-1 x1=.249 x2=.249 y1=1.256 y2=.366><stop offset=0 style=stop-opacity:1;stop-color:#cf65ae /><stop offset=1 style=stop-opacity:1;stop-color:#0068b3 /></linearGradient><linearGradient gradientUnits=userSpaceOnUse id=grad-bottom-5 x1=.557 x2=.557 y1=.546 y2=1.433><stop offset=0 style=stop-opacity:1;stop-color:#fcd465 /><stop offset=1 style=stop-opacity:1;stop-color:#5ce6a1 /></linearGradient><linearGradient gradientUnits=userSpaceOnUse id=grad-bottom-center-4 x1=.773 x2=1.265 y1=1.331 y2=1.003><stop offset=0 style=stop-opacity:1;stop-color:#5ce6a1 /><stop offset=1 style=stop-opacity:1;stop-color:#57b9ff /></linearGradient><linearGradient gradientUnits=userSpaceOnUse id=grad-top-center-6 x1=.768 x2=.646 y1=.367 y2=.728><stop offset=0 style=stop-opacity:1;stop-color:#fc9265 /><stop offset=1 style=stop-opacity:1;stop-color:#fcd465 /></linearGradient><linearGradient gradientUnits=userSpaceOnUse id=grad-right-3 x1=1.173 x2=1.173 y1=1.078 y2=.366><stop offset=0 style=stop-opacity:1;stop-color:#57b9ff /><stop offset=1 style=stop-opacity:1;stop-color:#0068b3 /></linearGradient><clipPath id=clip-left-1><rect height=1.622 id=cr-left-1 width=1.622 x=-0.1 y=-0.1 /></clipPath><clipPath id=clip-top-2><rect height=1.622 id=cr-top-2 width=1.622 x=-0.1 y=-0.1 /></clipPath><clipPath id=clip-right-3><rect height=1.622 id=cr-right-3 width=1.622 x=-0.1 y=-0.1 /></clipPath><clipPath id=clip-bottom-center-4><rect height=1.622 id=cr-bottom-center-4 width=1.622 x=-0.1 y=-0.1 /></clipPath><clipPath id=clip-bottom-5><rect height=1.622 id=cr-bottom-5 width=1.622 x=-0.1 y=-0.1 /></clipPath><clipPath id=clip-top-center-6><rect height=1.622 id=cr-top-center-6 width=1.622 x=-0.1 y=-0.1 /></clipPath></defs><path d="M0 0h1.422v1.422H0z"style=fill:none /><path d="M.371.523.269.453.141.389a.05.05 0 0 0-.008.025v.614c0 .016.008.032.023.04l.209.121V.544q0-.012.006-.021"style=fill:url(#grad-left-1) class="shape left-1"clip-path=url(#clip-left-1) /><path d="m.447.569.231.134A.03.03 0 0 1 .692.689L.923.555C.93.552.938.542.917.529L.731.422a.04.04 0 0 0-.039 0L.463.554C.451.561.45.564.447.569"style=fill:url(#grad-top-center-6) class="shape top-center-6"clip-path=url(#clip-top-center-6) /><path d="m1.051.922.102.07.128.063a.04.04 0 0 0 .008-.025V.414a.05.05 0 0 0-.008-.025l-.128.064-.102.07.002.004.001.001v.001h.001l.002.012v.001h.001V.9a.04.04 0 0 1-.007.022"style=fill:url(#grad-right-3) class="shape right-3"clip-path=url(#clip-right-3) /><path d="M1.283 1.052 1.052.919a.04.04 0 0 1-.015.015L.749 1.1v.267l.514-.297a.04.04 0 0 0 .02-.018"style=fill:url(#grad-bottom-center-4) class="shape bottom-center-4"clip-path=url(#clip-bottom-center-4) /><path d="m1.052.525.231-.133a.1.1 0 0 0-.017-.016L.736.069A.05.05 0 0 0 .69.067l-.139.08-.395.229a.04.04 0 0 0-.017.016L.37.525A.03.03 0 0 1 .384.511L.692.333a.04.04 0 0 1 .039 0l.307.178h.001l.001.001.001.001.001.001h.001l.001.001h.001v.001h.001v.001h.001v.001l.001.001.001.001z"style=fill:#0068b3 class="shape top-2"clip-path=url(#clip-top-2) /><path d=M.68.7.582.629.449.566S.441.575.441.587v.646l.232.134V.722Q.673.71.68.7 style=fill:url(#grad-bottom-5) class="shape bottom-5"clip-path=url(#clip-bottom-5) /></svg>
    <div class="app-title">
        <span class="name-op">OP</span>
        <span class="separator">|</span>
        <span class="name-suite">Custom Ops Suite</span>
        <span class="baseline">By My Digital Buildings</span>
  </div>
</div>