/* ==========================================================================
   Dynamic 3D logo (markup from js/core/logo.js)
   Every colour derives from the active theme's --primary, so the mark,
   its extruded sides, shadow and tile tint follow the theme exactly while
   the lighting model (top-left key light, specular sheen, contact shadow)
   stays identical in every theme.
   ========================================================================== */
:root {
  --logo-g: var(--primary);
  --logo-ink: #17210a;
  --logo-tile-hi: #ffffff;
  --logo-tile-lo: color-mix(in srgb, var(--primary) 14%, #eef3e4);
}
:root[data-theme="white"] {
  --logo-ink: #0e1726;
  --logo-tile-lo: color-mix(in srgb, var(--primary) 12%, #eef2f8);
}
:root[data-theme="black"] {
  --logo-ink: #f6efd9;
  --logo-tile-hi: #3a3527;
  --logo-tile-lo: #141416;
}

.logo3d {
  /* mark colours: deepest → lightest shade of the theme colour, plus the ink stroke */
  --lg-ink: var(--logo-ink);
  --lg-g1: color-mix(in srgb, var(--logo-g), #000 42%);
  --lg-g2: color-mix(in srgb, var(--logo-g), #000 20%);
  --lg-g3: var(--logo-g);
  --lg-g4: color-mix(in srgb, var(--logo-g), #fff 30%);
  /* extruded side walls */
  --lg-side: color-mix(in srgb, var(--logo-g), #000 58%);
  --lg-side-ink: color-mix(in srgb, var(--logo-ink), #000 45%);
  display: inline-block;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 26%;
  box-shadow: none;            /* replaces the flat tile outline of the old <img> mark */
  perspective: 220px;
}
:root[data-theme="black"] .logo3d { --lg-side-ink: color-mix(in srgb, var(--logo-ink), #000 62%); }

.logo3d-tile {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 95% at 26% 10%, var(--logo-tile-hi) 0%, color-mix(in srgb, var(--logo-tile-hi) 55%, var(--logo-tile-lo)) 52%, var(--logo-tile-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 3px color-mix(in srgb, var(--logo-g) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--logo-g) 24%, transparent),
    0 1px 1px rgba(0, 0, 0, .08),
    0 6px 12px -6px color-mix(in srgb, var(--logo-g), #000 40%);
  transform: rotateX(var(--lrx, 0deg)) rotateY(var(--lry, 0deg)) translateZ(0);
  transition: transform .55s var(--ease), box-shadow .35s ease;
}
:root[data-theme="black"] .logo3d-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 3px rgba(0, 0, 0, .5),
    inset 0 0 0 1px color-mix(in srgb, var(--logo-g) 30%, transparent),
    0 1px 1px rgba(0, 0, 0, .6),
    0 6px 14px -6px color-mix(in srgb, var(--logo-g) 45%, #000);
}
/* moving specular highlight across the tile */
.logo3d-tile::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .6) 46%, transparent 60%);
  mix-blend-mode: overlay;
  transform: translateX(-130%);
  animation: logo-sheen 8s ease-in-out 2.5s infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes logo-sheen { 0%, 72% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

.logo3d-svg { position: absolute; inset: 9%; width: 82%; height: 82%; overflow: visible; }
.lg-shadow { --lg-ink: rgba(0, 0, 0, .2); --lg-g1: rgba(0, 0, 0, .2); --lg-g2: rgba(0, 0, 0, .2); --lg-g3: rgba(0, 0, 0, .2); --lg-g4: rgba(0, 0, 0, .2); filter: blur(5px); }
.lg-ext { --lg-ink: var(--lg-side-ink); --lg-g1: var(--lg-side); --lg-g2: var(--lg-side); --lg-g3: var(--lg-side); --lg-g4: var(--lg-side); }
.lg-sheen {
  --lg-ink: url(#tf-logo-sheen); --lg-g1: url(#tf-logo-sheen); --lg-g2: url(#tf-logo-sheen); --lg-g3: url(#tf-logo-sheen); --lg-g4: url(#tf-logo-sheen);
  opacity: .5;
  mix-blend-mode: screen;
}
:root[data-theme="black"] .lg-sheen { opacity: .32; }

/* Interaction: the tile turns towards the pointer like a physical badge */
.brand:hover .logo3d-tile, .brand:focus-visible .logo3d-tile {
  --lrx: 12deg; --lry: -16deg;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 3px color-mix(in srgb, var(--logo-g) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--logo-g) 30%, transparent),
    -3px 8px 16px -6px color-mix(in srgb, var(--logo-g), #000 35%);
}
:root[data-theme="black"] .brand:hover .logo3d-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px color-mix(in srgb, var(--logo-g) 40%, transparent), -3px 8px 16px -6px color-mix(in srgb, var(--logo-g) 50%, #000); }
.brand:hover .logo3d-tile::after { animation-duration: 1.4s; animation-delay: 0s; }

/* Theme switch: one smooth turn while the new colours land */
.logo3d.is-switching .logo3d-tile { animation: logo-turn .85s cubic-bezier(.3, .7, .2, 1); }
@keyframes logo-turn {
  0% { transform: rotateY(0) scale(1); }
  45% { transform: rotateY(180deg) scale(.88); }
  100% { transform: rotateY(360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .logo3d-tile::after { animation: none; }
  .logo3d-tile { transition: none; }
  .brand:hover .logo3d-tile { --lrx: 0deg; --lry: 0deg; }
}