/*
 * The Presskit mark, for the public site (LogoWidget).
 *
 * A copy of `.pk-admin-logo` in @presskit/admin-ui's `src/styles.css`: the same
 * rounded dark tile, the same lowercase `pk`, the same two counter-rotating
 * spectrum layers. The admin package is a React and Mantine bundle no public page
 * should load for one tile, so the rules are carried here instead — and the brand
 * is therefore in two places. `tests/BrandDriftTest.php` compares the palette and
 * the timings with the admin copy whenever the workspace has it beside this
 * plugin; change the admin one first, then this.
 *
 * What differs from the admin copy, and why:
 *
 *   - Everything that has a size is relative to the tile, so the mark holds its
 *     proportions from a favicon-sized 16px to a hero-sized several hundred. The
 *     radius already was (28%), and so was the glyph (0.42 of the tile); the
 *     glyph's shadow was a fixed 1px/2px, which vanishes at 400px, and is in em
 *     here — the same 1px/2px at the admin's 30px.
 *   - The hover target is the mark itself. The admin fires the spectrum from the
 *     whole brand cluster, because a 30px target in a header is easy to miss;
 *     on a page the mark stands alone and is the thing being pointed at.
 *   - `data-spectrum` chooses when the spectrum runs: `hover` (the default),
 *     `always` (the admin's About-dialog variant) or `off`.
 *   - An optional grow on hover, `--pk-site-logo-hover-scale`, 1 by default.
 *   - No dark-mode inversion: the admin's keys off Mantine's colour-scheme
 *     attribute, which a public page does not have. The widget's colour controls
 *     set the two custom properties instead.
 *
 * Only transform, opacity and filter animate, as in the admin copy.
 */
.pk-site-logo-wrap {
  display: flex;
}

.pk-site-logo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--pk-site-logo-size, 120px);
  block-size: var(--pk-site-logo-size, 120px);
  border-radius: 28%;
  background: var(--pk-site-logo-bg, #1d1d1b);
  /* overflow clips the oversized spinning layer to the rounded square; isolate
     keeps its blend mode from reaching the page behind it. */
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

a.pk-site-logo {
  cursor: pointer;
}

.pk-site-logo:hover,
.pk-site-logo:focus-visible {
  transform: scale(var(--pk-site-logo-hover-scale, 1));
}

/*
 * Inset by half the box on every side, so the layer is large enough that a
 * rotation never sweeps one of its own corners into view — a square rotating
 * inside a square has to cover the circumscribed circle. Holds at any size.
 */
.pk-site-logo__kaleido {
  position: absolute;
  inset: -50%;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    #ff2e6b,
    #ff8a00,
    #ffe600,
    #4dff00,
    #00ffd5,
    #0091ff,
    #8a2bff,
    #ff2e6b
  );
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The counter-rotating wedges. Measured in degrees, so they keep their count at
   every size rather than turning to hairlines on a large mark. */
.pk-site-logo__kaleido::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.5) 0deg 5deg, transparent 5deg 16deg);
  mix-blend-mode: overlay;
}

.pk-site-logo[data-spectrum='hover']:hover .pk-site-logo__kaleido,
.pk-site-logo[data-spectrum='hover']:focus-visible .pk-site-logo__kaleido,
.pk-site-logo[data-spectrum='always'] .pk-site-logo__kaleido {
  opacity: 1;
  animation:
    pk-site-kaleido-spin 2.6s linear infinite,
    pk-site-kaleido-hue 3.4s linear infinite;
}

.pk-site-logo[data-spectrum='hover']:hover .pk-site-logo__kaleido::after,
.pk-site-logo[data-spectrum='hover']:focus-visible .pk-site-logo__kaleido::after,
.pk-site-logo[data-spectrum='always'] .pk-site-logo__kaleido::after {
  animation: pk-site-kaleido-spin 1.7s linear infinite reverse;
}

@keyframes pk-site-kaleido-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes pk-site-kaleido-hue {
  to {
    filter: hue-rotate(360deg);
  }
}

.pk-site-logo__glyph {
  position: relative;
  z-index: 1;
  color: var(--pk-site-logo-fg, #fff);
  font-size: calc(var(--pk-site-logo-size, 120px) * 0.42);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  /* The admin's 0 1px 2px at its 30px tile (a 12.6px glyph), as a share of the
     glyph so it scales with it. Holds the letters legible over yellow and lime. */
  text-shadow: var(--pk-site-logo-glyph-shadow, 0 0.08em 0.16em rgb(0 0 0 / 45%));
}

/* The spectrum still appears — on hover, on focus, and always where asked; only
   the spinning and the grow's travel are dropped. */
@media (prefers-reduced-motion: reduce) {
  .pk-site-logo {
    transition: none;
  }

  .pk-site-logo .pk-site-logo__kaleido,
  .pk-site-logo .pk-site-logo__kaleido::after {
    animation: none !important;
  }
}