/* DeeneyDigital Studio wordmark — logo + STUDIO lockup */

.studio-brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.studio-brand-lockup--center {
  justify-content: center;
  width: 100%;
  margin-inline: auto;
}

.studio-brand-lockup--hero {
  gap: 18px;
  align-items: center;
}

.studio-brand-mark {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.studio-brand-mark::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--brand-purple),
    #77ddff,
    var(--brand-accent),
    var(--brand-blue),
    var(--brand-purple)
  );
  animation: studio-brand-ring 6s linear infinite;
}

.studio-brand-mark::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(177, 163, 248, 0.35), transparent 68%);
  filter: blur(6px);
  animation: studio-brand-pulse 3.5s ease-in-out infinite;
}

@keyframes studio-brand-ring {
  to {
    transform: rotate(360deg);
  }
}

@keyframes studio-brand-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.studio-brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  border: 3px solid var(--dd-bg);
  border-radius: 50%;
  object-fit: cover;
}

.studio-brand-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.studio-brand-lockup--center .studio-brand-wordmark,
.studio-brand-lockup--hero .studio-brand-wordmark {
  align-items: center;
  text-align: center;
}

.studio-brand-studio {
  position: relative;
  display: inline-block;
  font-family: "Bebas Neue", "Nunito", system-ui, sans-serif;
  font-size: 2.35rem;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #f0ebff 12%,
    #b1a3f8 38%,
    #77ddff 58%,
    #c4b8ff 78%,
    #ffffff 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: studio-brand-shimmer 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(177, 163, 248, 0.55))
    drop-shadow(0 2px 0 rgba(24, 42, 86, 0.45));
}

.studio-brand-studio::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(24, 42, 86, 0.55);
  paint-order: stroke fill;
}

.studio-brand-glow-line {
  display: block;
  width: 5.5em;
  max-width: 100%;
  height: 3px;
  margin-top: 6px;
  margin-inline: auto;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--brand-accent) 20%,
    #77ddff 50%,
    var(--brand-purple) 80%,
    transparent
  );
  box-shadow: 0 0 12px rgba(119, 221, 255, 0.45);
  animation: studio-brand-line 4.5s ease-in-out infinite;
}

@keyframes studio-brand-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes studio-brand-line {
  0%,
  100% {
    opacity: 0.65;
    transform: scaleX(0.88);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Size variants */
.studio-brand-lockup--compact .studio-brand-mark {
  width: 48px;
  height: 48px;
}

.studio-brand-lockup--compact .studio-brand-studio {
  font-size: 1.75rem;
  letter-spacing: 0.09em;
}

.studio-brand-lockup--compact .studio-brand-glow-line {
  width: 4.2em;
  margin-top: 4px;
  height: 2px;
}

.studio-brand-lockup--hero .studio-brand-mark {
  width: 84px;
  height: 84px;
}

.studio-brand-lockup--hero .studio-brand-studio {
  font-size: clamp(3.1rem, 11vw, 4.6rem);
  letter-spacing: 0.13em;
  padding-right: 0.13em;
}

.studio-brand-lockup--hero .studio-brand-glow-line {
  width: 6.2em;
  max-width: none;
  height: 4px;
  margin-top: 8px;
}

[data-theme="light"] .studio-brand-studio {
  background: linear-gradient(
    100deg,
    var(--brand-blue) 0%,
    #5a4a9e 22%,
    var(--brand-purple) 48%,
    #4a8fd4 72%,
    var(--brand-blue) 100%
  );
  background-size: 240% 100%;
  filter: drop-shadow(0 0 10px rgba(129, 106, 191, 0.35))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8));
}

[data-theme="light"] .studio-brand-studio::before {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
}