.footer-brand-stack {
  width: min(1100px, calc(100vw - 36px));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.footer-brand-showcase {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 18%, rgba(45, 212, 191, 0.2), transparent 30%),
    radial-gradient(circle at 88% 24%, rgba(56, 189, 248, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    var(--card);
  box-shadow: var(--shadow);
  isolation: isolate;
}

[data-theme="dark"] .footer-brand-showcase {
  background:
    radial-gradient(circle at 10% 18%, rgba(45, 212, 191, 0.14), transparent 30%),
    radial-gradient(circle at 88% 24%, rgba(56, 189, 248, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--card);
}

.footer-brand-showcase::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.22) 0%, rgba(45, 212, 191, 0) 70%);
  filter: blur(10px);
  z-index: 0;
  animation: footer-brand-orbit 9s ease-in-out infinite alternate;
}

.footer-brand-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.12) 50%, transparent 72%);
  transform: translateX(-135%);
  z-index: 0;
  pointer-events: none;
  animation: footer-brand-sheen 7.5s ease-in-out infinite;
}

.footer-brand-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: clamp(14px, 3vw, 22px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.footer-brand-marquee-track {
  display: flex;
  gap: 26px;
  width: max-content;
  min-width: 100%;
  animation: footer-brand-marquee 22s linear infinite;
}

.footer-brand-marquee span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.footer-brand-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.footer-brand-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.footer-brand-wordmark {
  position: relative;
  display: block;
  margin: 0;
  max-width: 100%;
  font-size: clamp(34px, 6.8vw, 94px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.45);
  overflow-wrap: anywhere;
}

.footer-brand-wordmark::before,
.footer-brand-wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
}

.footer-brand-wordmark::before {
  color: rgba(255, 255, 255, 0.06);
}

.footer-brand-wordmark::after {
  background: linear-gradient(90deg, #67e8f9 0%, #ecfeff 22%, #5eead4 48%, #ecfeff 78%, #67e8f9 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 24px rgba(45, 212, 191, 0.16));
  animation: footer-brand-wordmark 6s ease-in-out infinite;
}

.footer-brand-description {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.footer-brand-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--accent-soft-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.footer-brand-note::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(15, 118, 110, 0.14);
  flex: 0 0 auto;
}

.footer-brand-cinematic {
  position: relative;
  width: 100%;
  height: 340vh;
  margin: 0;
  --footer-brand-progress: 0;
  --footer-brand-logo-progress: 0;
  --footer-brand-copy-progress: 0;
  --footer-brand-copy-2-progress: 0;
}

.footer-brand-cinematic-panel {
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100vh;
  min-height: 100svh;
  padding: 0 clamp(18px, 5vw, 46px);
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at calc(18% + (var(--footer-brand-progress) * 9%)) 30%, rgba(252, 192, 255, 0.64), transparent 24%),
    radial-gradient(circle at 48% calc(48% + (var(--footer-brand-progress) * 8%)), rgba(201, 171, 255, 0.48), transparent 28%),
    radial-gradient(circle at calc(82% - (var(--footer-brand-progress) * 7%)) 34%, rgba(93, 184, 255, 0.46), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
  box-shadow: none;
}

[data-theme="dark"] .footer-brand-cinematic-panel {
  background:
    radial-gradient(circle at calc(18% + (var(--footer-brand-progress) * 9%)) 30%, rgba(252, 192, 255, 0.64), transparent 24%),
    radial-gradient(circle at 48% calc(48% + (var(--footer-brand-progress) * 8%)), rgba(201, 171, 255, 0.48), transparent 28%),
    radial-gradient(circle at calc(82% - (var(--footer-brand-progress) * 7%)) 34%, rgba(93, 184, 255, 0.46), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96));
}

.footer-brand-cinematic-panel::before {
  content: "";
  position: absolute;
  inset: -18% auto auto -12%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 72%);
  filter: blur(12px);
  opacity: 0.85;
  transform: translate3d(calc(var(--footer-brand-progress) * 48px), calc(var(--footer-brand-progress) * 18px), 0) scale(calc(1 + (var(--footer-brand-progress) * 0.16)));
}

.footer-brand-cinematic-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%);
  transform: translateX(calc(-135% + (var(--footer-brand-progress) * 260%)));
  pointer-events: none;
}

.footer-brand-cinematic-devices {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.footer-brand-cinematic-device {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  mix-blend-mode: normal;
  filter: drop-shadow(0 26px 34px rgba(15, 23, 42, 0.12));
  transform-origin: center center;
  backface-visibility: hidden;
  user-select: none;
  opacity: 0.36;
}

[data-theme="dark"] .footer-brand-cinematic-device {
  opacity: 0.44;
}

.footer-brand-cinematic-device.device-a {
  width: clamp(160px, 13vw, 236px);
  left: max(2vw, 8px);
  bottom: 10vh;
  transform: translate3d(calc(var(--footer-brand-progress) * -6vw), calc(var(--footer-brand-progress) * -2.5vh), 0) rotate(-14deg) scale(calc(0.9 + (var(--footer-brand-progress) * 0.14)));
  opacity: calc(0.18 + (var(--footer-brand-copy-2-progress) * 0.36));
}

.footer-brand-cinematic-device.device-b {
  width: clamp(168px, 14vw, 250px);
  right: max(2vw, 10px);
  bottom: 11vh;
  transform: translate3d(calc(var(--footer-brand-progress) * 5vw), calc(var(--footer-brand-progress) * -3vh), 0) rotate(10deg) scale(calc(0.92 + (var(--footer-brand-progress) * 0.16)));
  opacity: calc(0.2 + (var(--footer-brand-copy-2-progress) * 0.38));
}

.footer-brand-cinematic-device.device-c {
  width: clamp(118px, 10vw, 170px);
  left: 50%;
  bottom: 1.5vh;
  transform: translate3d(calc(-50% + (var(--footer-brand-progress) * 1.3vw)), calc(var(--footer-brand-progress) * -2vh), 0) rotate(-4deg) scale(calc(0.88 + (var(--footer-brand-progress) * 0.12)));
  opacity: calc(0.16 + (var(--footer-brand-copy-2-progress) * 0.3));
}

.footer-brand-cinematic-device.device-d {
  width: clamp(132px, 11vw, 196px);
  left: 15vw;
  top: 12vh;
  transform: translate3d(calc(var(--footer-brand-progress) * -2.5vw), calc(var(--footer-brand-progress) * 1.8vh), 0) rotate(-24deg) scale(calc(0.82 + (var(--footer-brand-progress) * 0.12)));
  opacity: calc(0.14 + (var(--footer-brand-copy-progress) * 0.28));
}

.footer-brand-cinematic-device.device-e {
  width: clamp(142px, 11.5vw, 208px);
  right: 17vw;
  top: 16vh;
  transform: translate3d(calc(var(--footer-brand-progress) * 3vw), calc(var(--footer-brand-progress) * 1.4vh), 0) rotate(21deg) scale(calc(0.8 + (var(--footer-brand-progress) * 0.15)));
  opacity: calc(0.14 + (var(--footer-brand-copy-progress) * 0.3));
}

.footer-brand-cinematic-stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.footer-brand-cinematic-eyebrow {
  color: rgba(15, 23, 42, 0.52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: var(--footer-brand-copy-progress);
  transform: translateY(calc((1 - var(--footer-brand-copy-progress)) * 24px));
}

.footer-brand-cinematic-wordmark {
  position: relative;
  display: block;
  width: min(96vw, 1420px);
  max-width: 100%;
  margin: 0;
  font-size: clamp(30px, 9.2vw, 144px);
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background-image:
    radial-gradient(circle at 18% 42%, rgba(255, 145, 240, 0.92), transparent 24%),
    radial-gradient(circle at 42% 56%, rgba(206, 157, 255, 0.85), transparent 28%),
    radial-gradient(circle at 84% 34%, rgba(88, 184, 255, 0.92), transparent 24%),
    linear-gradient(90deg, #f7a6ef 0%, #d596ff 38%, #ab9fff 62%, #63b6ff 100%);
  background-size: 150% 150%, 160% 160%, 150% 150%, 100% 100%;
  background-position:
    calc(var(--footer-brand-progress) * 12%) 50%,
    calc(50% + (var(--footer-brand-progress) * 10%)) 52%,
    calc(100% - (var(--footer-brand-progress) * 9%)) 50%,
    calc(var(--footer-brand-progress) * 100%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
  opacity: calc(1 - (var(--footer-brand-logo-progress) * 0.98));
  transform: translateY(calc(var(--footer-brand-logo-progress) * -1.4vh)) scale(calc(1 + (var(--footer-brand-logo-progress) * 0.92)));
  transform-origin: center center;
  clip-path: inset(0 0 0 0);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

.footer-brand-cinematic-wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
  opacity: calc(0.42 - (var(--footer-brand-logo-progress) * 0.28));
  pointer-events: none;
}

.footer-brand-cinematic-copy {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: 4px;
  max-width: min(700px, 88vw);
  position: relative;
  z-index: 1;
}

.footer-brand-cinematic-line {
  margin: 0;
  color: rgba(15, 23, 42, 0.7);
}

.footer-brand-cinematic-line.lead {
  font-size: 14px;
  font-weight: 700;
  opacity: var(--footer-brand-copy-progress);
  transform: translateY(calc((1 - var(--footer-brand-copy-progress)) * 26px));
}

.footer-brand-cinematic-line.sub {
  max-width: 780px;
  font-size: 14px;
  line-height: 1.6;
  opacity: var(--footer-brand-copy-2-progress);
  transform: translateY(calc((1 - var(--footer-brand-copy-2-progress)) * 26px));
}

@keyframes footer-brand-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes footer-brand-sheen {
  0%,
  14% {
    transform: translateX(-135%);
  }

  60%,
  100% {
    transform: translateX(135%);
  }
}

@keyframes footer-brand-wordmark {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.88;
  }

  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

@keyframes footer-brand-orbit {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-40px, -26px, 0) scale(1.14);
  }
}

@media (max-width: 720px) {
  .footer-brand-stack {
    width: calc(100vw - 24px);
    gap: 14px;
  }

  .footer-brand-showcase {
    padding: 18px 16px;
    border-radius: 22px;
  }

  .footer-brand-wordmark {
    font-size: clamp(30px, 11vw, 58px);
  }

  .footer-brand-cinematic {
    height: 280svh;
  }

  .footer-brand-cinematic-panel {
    padding: 0 14px;
  }

  .footer-brand-cinematic-device.device-a {
    width: 114px;
    left: -8px;
    bottom: 7vh;
  }

  .footer-brand-cinematic-device.device-b {
    width: 122px;
    right: -14px;
    bottom: 10vh;
  }

  .footer-brand-cinematic-device.device-c {
    width: 108px;
    bottom: 2vh;
  }

  .footer-brand-cinematic-device.device-d {
    width: 92px;
    left: 4px;
    top: 17vh;
  }

  .footer-brand-cinematic-device.device-e {
    width: 96px;
    right: 8px;
    top: 19vh;
  }

  .footer-brand-cinematic-wordmark {
    width: min(96vw, 420px);
    font-size: clamp(30px, 9.8vw, 50px);
    letter-spacing: -0.05em;
    white-space: normal;
  }

  .footer-brand-cinematic-line.lead {
    font-size: 13px;
  }

  .footer-brand-cinematic-line.sub {
    font-size: 13px;
  }

  .footer-brand-marquee span {
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .footer-brand-description {
    font-size: 13px;
  }

  .footer-brand-note {
    width: 100%;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand-showcase::before,
  .footer-brand-showcase::after,
  .footer-brand-marquee-track,
  .footer-brand-wordmark::after,
  .footer-brand-cinematic-wordmark {
    animation: none;
  }

  .footer-brand-cinematic {
    height: auto;
  }

  .footer-brand-cinematic-panel {
    position: relative;
  }

  .footer-brand-cinematic-wordmark,
  .footer-brand-cinematic-eyebrow,
  .footer-brand-cinematic-line {
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
  }
}