/**
 * Hazelink logo motion system
 * Import on marketing pages / preview. Prefer SVG mark assets from branding/.
 *
 * Sequence (intro):
 *   1. Mark entrance  — scale + subtle rotate-to-settle
 *   2. Gold sheen     — one light sweep across the mark
 *   3. Wordmark       — fade/slide up after mark settles
 * Idle (optional):
 *   .hl-logo--idle    — very low-amplitude breath loop
 * Favicons: always static (no CSS motion).
 */

:root {
  /* Brand tokens used by motion */
  --hl-gold: #d4a94d;
  --hl-gold-soft: #e7c97a;
  --hl-gold-glow: rgba(212, 169, 77, 0.4);
  --hl-gold-glow-hot: rgba(212, 169, 77, 0.55);
  --hl-sheen: rgba(255, 255, 255, 0.28);

  /* Timings (ms) */
  --hl-mark-enter-ms: 700ms;
  --hl-mark-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hl-sheen-ms: 1100ms;
  --hl-sheen-delay-ms: 420ms;
  --hl-sheen-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hl-word-ms: 800ms;
  --hl-word-delay-ms: 560ms;
  --hl-word-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hl-idle-ms: 4200ms;
  --hl-idle-ease: ease-in-out;
  --hl-idle-scale: 1.025;
}

/* —— Lockup shell —— */
.hl-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.hl-logo__mark {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.hl-logo__mark img,
.hl-logo__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hl-logo__word {
  display: inline-block;
}

.hl-logo__word img {
  display: block;
  height: 1em;
  width: auto;
}

/* —— Intro: mark entrance —— */
@keyframes hl-mark-enter {
  from {
    opacity: 0;
    transform: scale(0.88) rotate(-4deg);
    filter: drop-shadow(0 0 0 transparent);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 8px var(--hl-gold-glow));
  }
}

.hl-logo--intro .hl-logo__mark > img,
.hl-logo--intro .hl-logo__mark > svg {
  animation: hl-mark-enter var(--hl-mark-enter-ms) var(--hl-mark-enter-ease) both;
}

/* —— Intro: sheen once —— */
@keyframes hl-mark-sheen {
  from {
    transform: translateX(-130%) skewX(-18deg);
  }
  to {
    transform: translateX(230%) skewX(-18deg);
  }
}

.hl-logo--intro.hl-logo--sheen .hl-logo__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    var(--hl-sheen) 50%,
    transparent 62%
  );
  animation: hl-mark-sheen var(--hl-sheen-ms) var(--hl-sheen-ease)
    var(--hl-sheen-delay-ms) 1 both;
}

/* —— Intro: wordmark reveal —— */
@keyframes hl-word-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hl-logo--intro .hl-logo__word {
  animation: hl-word-reveal var(--hl-word-ms) var(--hl-word-ease)
    var(--hl-word-delay-ms) both;
}

/* —— Idle breath (opt-in, low amplitude) —— */
@keyframes hl-mark-idle {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px var(--hl-gold-glow));
  }
  50% {
    transform: scale(var(--hl-idle-scale));
    filter: drop-shadow(0 0 12px var(--hl-gold-glow-hot));
  }
}

.hl-logo--idle .hl-logo__mark > img,
.hl-logo--idle .hl-logo__mark > svg {
  animation: hl-mark-idle var(--hl-idle-ms) var(--hl-idle-ease) infinite;
}

/* Intro + idle: entrance first, then hand off to idle via JS (optional).
   Without JS, idle alone is fine for persistent nav. */

/* —— Nav bridge (site .n-logo / .n-word) —— */
@keyframes markBreath {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px var(--hl-gold-glow));
  }
  50% {
    transform: scale(var(--hl-idle-scale));
    filter: drop-shadow(0 0 12px var(--hl-gold-glow-hot));
  }
}

@keyframes markEnter {
  from {
    opacity: 0;
    transform: scale(0.88) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes markSheen {
  from {
    transform: translateX(-130%) skewX(-18deg);
  }
  to {
    transform: translateX(230%) skewX(-18deg);
  }
}

@keyframes wordReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.n-logo-wrap {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: 6px;
}

.n-logo-wrap--sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    var(--hl-sheen) 50%,
    transparent 62%
  );
  animation: markSheen var(--hl-sheen-ms) var(--hl-sheen-ease)
    var(--hl-sheen-delay-ms) 1 both;
}

.n-logo--enter {
  animation: markEnter var(--hl-mark-enter-ms) var(--hl-mark-enter-ease) both;
}

.n-logo--idle {
  animation: markBreath var(--hl-idle-ms) var(--hl-idle-ease) infinite;
  filter: drop-shadow(0 0 8px var(--hl-gold-glow));
}

.n-brand .n-word,
.n-word--reveal {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  animation: wordReveal var(--hl-word-ms) var(--hl-word-ease)
    var(--hl-word-delay-ms) both;
}
.n-brand .n-word img {
  height: 16px;
  width: auto;
  display: block;
}
.n-word-light { display: none; }
html[data-theme="light"] .n-word-dark { display: none; }
html[data-theme="light"] .n-word-light { display: block; }

/* Mono / B&W: no sheen, no gold glow — entrance + word only if needed */
.hl-logo--mono .hl-logo__mark::after {
  display: none !important;
}

.hl-logo--mono.hl-logo--intro .hl-logo__mark > img,
.hl-logo--mono.hl-logo--intro .hl-logo__mark > svg {
  filter: none;
}

.hl-logo--mono.hl-logo--idle .hl-logo__mark > img,
.hl-logo--mono.hl-logo--idle .hl-logo__mark > svg {
  filter: none;
}

.hl-logo--static .hl-logo__mark > img,
.hl-logo--static .hl-logo__mark > svg,
.hl-logo--static .hl-logo__word {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hl-logo--intro .hl-logo__mark > img,
  .hl-logo--intro .hl-logo__mark > svg,
  .hl-logo--intro.hl-logo--sheen .hl-logo__mark::after,
  .hl-logo--intro .hl-logo__word,
  .hl-logo--idle .hl-logo__mark > img,
  .hl-logo--idle .hl-logo__mark > svg,
  .n-logo--enter,
  .n-logo--idle,
  .n-logo-wrap--sheen::after,
  .n-brand .n-word,
  .n-word--reveal {
    animation: none !important;
  }

  .hl-logo--intro .hl-logo__word,
  .n-brand .n-word,
  .n-word--reveal {
    opacity: 1;
    transform: none;
  }

  .hl-logo--intro .hl-logo__mark > img,
  .hl-logo--intro .hl-logo__mark > svg,
  .n-logo--enter {
    opacity: 1;
    transform: none;
    filter: none;
  }
}