/* Keep the image, travelling border light and sheen in one tilted card. */
body.public-site .hero .logo-card {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 35px #3875a511;
  --reveal-delay: 80ms;
  --spark-delay: 1600ms;
  --sheen-delay: 1800ms;
}
body.public-site .hero .logo-tiles .logo-card > img { display: block; transform: none; box-shadow: none; }
body.public-site .hero .logo-card:nth-child(1) { transform: rotate(-5deg) translateY(-2px); }
body.public-site .hero .logo-card:nth-child(2) { transform: rotate(2deg) translateY(9px); --reveal-delay: 200ms; --spark-delay: 1900ms; --sheen-delay: 3100ms; }
body.public-site .hero .logo-card:nth-child(3) { transform: rotate(-2deg) translateY(11px); --reveal-delay: 320ms; --spark-delay: 2200ms; --sheen-delay: 4400ms; }
body.public-site .hero .logo-card:nth-child(4) { transform: rotate(2deg) translateY(11px); --reveal-delay: 440ms; --spark-delay: 2500ms; --sheen-delay: 5700ms; }
body.public-site .hero .logo-card:nth-child(5) { transform: rotate(-1deg) translateY(6px); --reveal-delay: 560ms; --spark-delay: 2800ms; --sheen-delay: 7000ms; }
body.public-site .hero .logo-card:nth-child(6) { transform: rotate(5deg) translateY(-2px); --reveal-delay: 680ms; --spark-delay: 3100ms; --sheen-delay: 8300ms; }
body.public-site .hero .logo-card-spark { display: none; }

@keyframes home-logo-reveal {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes home-logo-spark {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
@keyframes home-logo-spark-appear {
  from { opacity: 0; }
  to { opacity: .9; }
}
@keyframes home-logo-sheen {
  0% { opacity: 0; transform: translateX(-160%) skewX(-20deg); }
  3% { opacity: .65; }
  13% { opacity: 0; transform: translateX(160%) skewX(-20deg); }
  100% { opacity: 0; transform: translateX(160%) skewX(-20deg); }
}

@media (prefers-reduced-motion: no-preference) {
  body.public-site .hero .logo-card {
    animation: home-logo-reveal 780ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay) both;
  }
  body.public-site .hero .logo-card-spark {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: home-logo-spark-appear 500ms ease var(--spark-delay) both;
  }
  body.public-site .hero .logo-card-spark rect {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    animation: home-logo-spark 10s linear var(--spark-delay) infinite;
  }
  .logo-card-spark .spark-dot {
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: .01 99.99;
    filter: drop-shadow(0 0 2px #56adffb3) drop-shadow(0 0 4px #8bcbff66);
  }
  body.public-site .hero .logo-card::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 30%, #ffffff12 40%, #ffffffb3 50%, #ffffff12 60%, transparent 70%);
    animation: home-logo-sheen 9s ease-in-out var(--sheen-delay) both infinite;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  body.public-site .hero .logo-card:hover .logo-card-spark rect,
  body.public-site .hero .logo-card:hover::after { animation-play-state: paused; }
}

@media (max-width: 760px) {
  body.public-site .hero .logo-card { border-radius: 9px; }
  body.public-site .hero .logo-card:nth-child(n) { transform: none; }
  body.public-site .hero .logo-card:nth-child(1),
  body.public-site .hero .logo-card:nth-child(4) { transform: rotate(-3deg); }
  body.public-site .hero .logo-card:nth-child(3),
  body.public-site .hero .logo-card:nth-child(6) { transform: rotate(3deg); }
  @keyframes home-logo-reveal {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
  }
}