/* Header: C writes into Cadara. Studio: star hold → rotate → plus hold */

:root {
  /* Studio: star 385 + rot 576 + hold 4000 + rot 576 + settle 195 + wait 8000 = 13732ms */
  --cadara-loop-duration: 13732ms;
  /* 15000ms C → 15000ms Cadara write = 30000ms */
  --cadara-brand-duration: 30000ms;
}

.cadara-symbol-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cadara-symbol-host--md {
  width: 54px;
  height: 54px;
}

.cadara-symbol-host--lg {
  width: 92px;
  height: 92px;
}

/* ── Studio / loop: star → rotate → plus ── */

.cadara-symbol-host--loop {
  color: var(--lime);
}

.cadara-symbol-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cadara-symbol-rotate {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.cadara-symbol-host--loop .cadara-symbol-rotate {
  opacity: 1;
  animation: cadara-loop-rotate var(--cadara-loop-duration) linear infinite;
}

.cadara-symbol-host--loop .cadara-symbol-line--d {
  opacity: 1;
}

@keyframes cadara-loop-rotate {
  /* 385 @45° → 576 to 0° → 4000 @0° → 576 to 45° → 195 settle @45° → 8000 wait */
  0%,
  2.8% {
    transform: rotate(45deg);
  }

  7%,
  36.13% {
    transform: rotate(0deg);
  }

  40.32%,
  100% {
    transform: rotate(45deg);
  }
}

/* ── Header brand: C → Cadara ── */

.cadara-symbol-host--brand {
  position: relative;
}

.cadara-mark--c {
  font-family: 'Beirut Display', Georgia, serif;
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
}

.brand--animated {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 54px;
  min-height: 54px;
}

.cadara-symbol-host--brand .cadara-mark--c {
  animation: cadara-brand-c var(--cadara-brand-duration) steps(1, end) infinite;
}

.brand-wordmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Beirut Display', Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

.brand--animated .brand-wordmark {
  animation: cadara-brand-wordmark-write var(--cadara-brand-duration) ease-in-out infinite;
}

@media (hover: hover) and (min-width: 901px) {
  .brand--animated {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0;
  }

  .brand--animated .cadara-symbol-host--md {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }

  .brand--animated .cadara-mark--c,
  .brand--animated .brand-wordmark {
    animation: none;
  }

  .brand--animated .brand-wordmark {
    position: static;
    transform: none;
    visibility: hidden;
    clip-path: none;
    overflow: visible;
    min-width: 0;
    margin-left: -0.04em;
  }

  .brand--animated.is-writing .brand-wordmark {
    visibility: visible;
  }

  .brand--animated.is-typing .brand-wordmark::after {
    content: '|';
    margin-left: 0.04em;
    animation: cadara-typewriter-cursor 0.75s step-end infinite;
  }
}

@keyframes cadara-typewriter-cursor {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes cadara-brand-c {
  0%,
  46% {
    opacity: 1;
    visibility: visible;
  }

  50%,
  99.99% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes cadara-brand-wordmark-write {
  0%,
  46% {
    clip-path: inset(0 100% 0 0);
    visibility: hidden;
  }

  48% {
    clip-path: inset(0 100% 0 0);
    visibility: visible;
  }

  62% {
    clip-path: inset(0 0 0 0);
  }

  92% {
    clip-path: inset(0 0 0 0);
  }

  96%,
  100% {
    clip-path: inset(0 100% 0 0);
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cadara-symbol-host--loop .cadara-symbol-rotate,
  .cadara-symbol-host--brand .cadara-mark--c,
  .brand--animated .brand-wordmark {
    animation: none;
  }

  .cadara-symbol-rotate {
    transform: rotate(0deg);
    opacity: 1;
  }

  .cadara-mark--c {
    opacity: 1;
    visibility: visible;
  }

  .brand-wordmark {
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
  }
}

@media (max-width: 900px) {
  .cadara-symbol-host--md {
    width: 32px;
    height: 32px;
  }

  .cadara-mark--c,
  .cadara-symbol-host--md .cadara-mark--c {
    font-size: 32px;
  }

  .brand--animated {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 32px;
    gap: 0;
  }

  .brand--animated .cadara-symbol-host--md {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }

  .brand--animated .cadara-mark--c,
  .brand--animated .brand-wordmark {
    animation: none;
  }

  .brand-wordmark {
    position: static;
    top: auto;
    transform: none;
    visibility: hidden;
    clip-path: none;
    overflow: visible;
    min-width: 0;
    margin-left: -0.04em;
    font-size: 32px;
  }

  .brand--animated.is-writing .brand-wordmark {
    visibility: visible;
  }

  .brand--animated.is-typing .brand-wordmark::after {
    content: '|';
    margin-left: 0.04em;
    animation: cadara-typewriter-cursor 0.75s step-end infinite;
  }
}