/* Brand hero: a bit smaller screen; dots closer; slogan under dots */
html {
  --azo-brand-compact: 0;
  --azo-brand-scale: 1;
}

.brand-stage {
  overflow: visible !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  min-height: min(58dvh, 580px) !important;
  /* extra top space so upper dots are not clipped by top bar */
  padding:
    calc(clamp(96px, 12vw, 140px) - var(--azo-brand-compact) * 52px)
    clamp(20px, 3.5vw, 48px)
    calc(clamp(24px, 3.5vw, 40px) - var(--azo-brand-compact) * 16px)
    !important;
  place-items: center !important;
  transition: none !important;
  will-change: auto;
}

.brand-stage.is-compact {
  min-height: 0 !important;
}

/* anti-blink logo */
.brand-lockup,
.brand-image,
.azo-brand-mark,
.brand-slogan {
  opacity: 1;
}

.brand-lockup {
  position: relative;
  justify-items: center;
  gap: clamp(8px, 1.2vw, 14px) !important;
  width: min(88vw, 440px);
  transform: scale(var(--azo-brand-scale));
  transform-origin: top center;
  will-change: auto;
  transition: none !important;
}

.brand-image,
.azo-brand-mark > .brand-image {
  position: relative;
  z-index: 1;
  width: min(44vw, 320px) !important;
  max-width: 100% !important;
  height: auto !important;
  transition: none !important;
}

.brand-slogan {
  position: relative;
  z-index: 3;
  /* Always handwriting font — avoids Arial flash on refresh */
  font-family: "Caveat", "Segoe Print", cursive !important;
  font-weight: 600 !important;
  font-size: clamp(1.85rem, 4.6vw, 3.4rem) !important;
  letter-spacing: 0.01em;
  line-height: 1.2 !important;
  /* Underneath outer dots — white first screen */
  margin: clamp(100px, 12vw, 140px) 0 0 !important;
  padding-top: 0;
  transition: none !important;
  min-height: 1.35em;
}

/* Hide until handwriting write is prepared (refresh / first open) */
html.azo-slogan-pending .brand-slogan {
  /* Never hide slogan — hiding caused text blink on refresh */
  opacity: 1 !important;
}

html.azo-slogan-ready .brand-slogan {
  opacity: 1 !important;
}

/* First-visit handwriting write */
.brand-slogan.azo-slogan-handwriting {
  font-family: "Caveat", "Segoe Print", cursive !important;
  font-weight: 600 !important;
  font-size: clamp(1.85rem, 4.6vw, 3.4rem) !important;
  letter-spacing: 0.01em;
  min-height: 1.25em;
}

.brand-slogan.azo-slogan-handwriting .azo-slogan-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px) rotate(-6deg);
  animation: azo-slogan-write 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.052s);
}

.brand-slogan.azo-slogan-handwriting .azo-slogan-space {
  display: inline-block;
  width: 0.28em;
}

@keyframes azo-slogan-write {
  0% {
    opacity: 0;
    transform: translateY(8px) rotate(-8deg) scale(0.92);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) rotate(1deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.brand-slogan.azo-slogan-handwriting-done {
  font-family: "Caveat", "Segoe Print", cursive !important;
  font-weight: 600 !important;
  font-size: clamp(1.85rem, 4.6vw, 3.4rem) !important;
  letter-spacing: 0.01em;
  opacity: 1 !important;
}

/* Three round dot lines — centered on logo */
.azo-brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  line-height: 0;
  margin: clamp(18px, 3vw, 32px) clamp(6px, 1.2vw, 14px) 0;
  padding-bottom: 0;
  box-sizing: content-box;
}

/* Logo behind dots so the round lines are not covered */
.azo-brand-mark > .brand-image {
  position: relative;
  z-index: 0;
  display: block;
}

.azo-brand-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 0;
  padding-bottom: 120%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.azo-brand-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.azo-brand-ring.ring-0 {
  --ring-spin: 1;
}

.azo-brand-ring.ring-1 {
  --ring-spin: -1;
}

.azo-brand-ring.ring-2 {
  --ring-spin: 1;
}

.azo-brand-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.azo-brand-dot.is-tiny {
  width: 2.5px;
  height: 2.5px;
  background: radial-gradient(circle at 28% 24%, #d8d8d8, #9a9a9a 55%, #6a6a6a);
  box-shadow:
    0 0 4px rgba(140, 140, 140, 0.35),
    0 0 1px rgba(255, 255, 255, 0.55);
}

.azo-brand-dot.is-small {
  width: 4px;
  height: 4px;
  background: radial-gradient(circle at 32% 28%, #8a8a8a, #4a4a4a 72%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.14);
}

.azo-brand-dot.is-big {
  width: 6px;
  height: 6px;
  background: #0a0a0a;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}

/* Living motion without entrance flash */
.azo-brand-dots.is-in.is-alive .azo-brand-dot {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1);
  animation:
    azo-dot-orbit-float var(--float-dur, 5s) ease-in-out infinite,
    azo-dot-ring-wave var(--wave-dur, 2.8s) ease-in-out infinite;
  animation-delay:
    var(--wave-delay, 0s),
    var(--wave-delay, 0s);
}

.azo-brand-dots.is-in.is-alive .azo-brand-dot.ring-0 {
  animation-timing-function:
    cubic-bezier(0.45, 0.05, 0.55, 0.95),
    ease-in-out;
}

.azo-brand-dots.is-in.is-alive .azo-brand-dot.ring-1 {
  animation-duration:
    var(--float-dur, 5s),
    calc(var(--wave-dur, 2.8s) * 1.08);
}

.azo-brand-dots.is-in.is-alive .azo-brand-dot.ring-2 {
  animation-duration:
    calc(var(--float-dur, 5s) * 1.12),
    calc(var(--wave-dur, 2.8s) * 0.92);
}

.azo-brand-dots.is-in.is-instant .azo-brand-dot {
  /* visible immediately — orbit rules above still apply when is-alive */
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1);
  filter: none;
}

/* Scroll-scrub landing: rings circle opposite ways; direction flips with scroll */
html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive {
  transform: translate(-50%, -50%) scale(calc(1 + var(--az-scroll-shrink, 0) * 0.018));
  transition: transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html:has(#az-scroll-track) .az-apple-brand .azo-brand-dots.is-in.is-alive {
  transform: translate(-50%, -50%) scale(calc(var(--az-dots-ring-scale, 1) * (1 + var(--az-scroll-shrink, 0) * 0.018))) !important;
}

/* Affirmed: leave circling on refresh — opposite idle ring spin */
html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive .azo-brand-ring {
  animation: azo-ring-circle 42s linear infinite;
  will-change: transform;
}
html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive .azo-brand-ring.ring-0 {
  animation-duration: 38s;
}
html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive .azo-brand-ring.ring-1 {
  animation-duration: 52s;
  animation-direction: reverse;
}
html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive .azo-brand-ring.ring-2 {
  animation-duration: 64s;
}
html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive.is-scrolling .azo-brand-ring {
  animation: none;
  transform: rotate(calc(var(--az-ring-rot, 0deg) * var(--ring-spin, 1)));
}

html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive.is-scrolling .azo-brand-dot {
  transform: translate(-50%, -50%) scale(calc(var(--az-dots-pulse, 1)));
  opacity: 0.92;
}

html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive.is-scrolling .azo-brand-dot.is-tiny {
  box-shadow:
    0 0 calc(4px + var(--az-dots-glow, 0.4) * 8px) rgba(90, 90, 90, 0.5),
    0 0 1px rgba(255, 255, 255, 0.55);
}

html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive.is-scrolling .azo-brand-dot.is-big {
  box-shadow: 0 0 calc(1px + var(--az-dots-glow, 0.4) * 2px) rgba(0, 0, 0, 0.35);
}

@keyframes azo-dot-spiral-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(var(--spin, 0deg));
    filter: blur(4px) brightness(1.4);
  }
  45% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.45) rotate(calc(var(--spin, 0deg) * 0.15));
    filter: blur(0) brightness(1.15);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.88) rotate(calc(var(--spin, 0deg) * -0.06));
    filter: none;
  }
  100% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: none;
  }
}

@keyframes azo-dot-orbit-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) translate(calc(var(--fx, 0px) * 1px), calc(var(--fy, 0px) * -0.85px))
      scale(1.06);
  }
  50% {
    transform: translate(-50%, -50%) translate(calc(var(--fx, 0px) * -0.55px), calc(var(--fy, 0px) * 0.65px))
      scale(0.94);
  }
  75% {
    transform: translate(-50%, -50%) translate(calc(var(--fx, 0px) * 0.35px), calc(var(--fy, 0px) * 0.45px))
      scale(1.1);
  }
}

@keyframes azo-dot-ring-wave {
  0%,
  100% {
    opacity: 0.88;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0.92;
  }
}

@keyframes azo-ring-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .azo-brand-dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }

  .azo-brand-dots.is-in:not(.is-alive) .azo-brand-dot,
  .azo-brand-dots.is-in.is-alive .azo-brand-dot {
    animation: none;
  }

  html:has(#az-scroll-track) .azo-brand-dots.is-in.is-alive .azo-brand-ring {
    animation: none;
  }

  .brand-slogan.azo-slogan-handwriting .azo-slogan-ch {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .brand-lockup {
    transition: none;
  }

  .brand-stage {
    transition: none;
  }
}

@media (max-width: 900px) {
  .brand-stage {
    min-height: auto !important;
    padding:
      calc(72px - var(--azo-brand-compact) * 40px)
      16px
      calc(18px - var(--azo-brand-compact) * 10px)
      !important;
    display: grid !important;
    place-items: center !important;
  }

  .brand-stage.is-compact {
    min-height: 0 !important;
  }

  .brand-lockup {
    width: min(78vw, 300px);
    margin: 0 auto;
    justify-items: center;
    gap: 0 !important;
  }

  .azo-brand-mark {
    margin: 4px auto 0;
    padding-bottom: 0;
  }

  .azo-brand-dots {
    width: 122%;
    padding-bottom: 122%;
    transform: translate(-50%, -50%);
  }

  .brand-image,
  .azo-brand-mark > .brand-image {
    width: min(26vw, 108px) !important;
  }

  .brand-slogan {
    margin: 22px 0 0 !important;
    font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
    transition: none !important;
  }

  /* Phone: same living orbit/wave + ring circle as PC (no blink / no freeze) */
  .azo-brand-dot.is-tiny {
    background: radial-gradient(circle at 28% 24%, #d8d8d8, #9a9a9a 55%, #6a6a6a);
    box-shadow:
      0 0 4px rgba(140, 140, 140, 0.35),
      0 0 1px rgba(255, 255, 255, 0.55);
  }

  .azo-brand-dot.is-small {
    background: radial-gradient(circle at 32% 28%, #8a8a8a, #4a4a4a 72%);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.14);
  }

  .azo-brand-dot.is-big {
    background: #0a0a0a;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
  }

  /* inherit desktop orbit + wave + ring rules — do not kill animations */
}

@media (max-width: 560px) {
  .brand-stage {
    min-height: auto !important;
    padding:
      calc(64px - var(--azo-brand-compact) * 36px)
      14px
      calc(14px - var(--azo-brand-compact) * 8px)
      !important;
  }

  .brand-lockup {
    width: min(72vw, 260px);
  }

  .brand-image,
  .azo-brand-mark > .brand-image {
    width: min(26vw, 108px) !important;
  }

  .brand-slogan {
    margin-top: 22px !important;
    font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
    white-space: normal !important;
    transition: none !important;
  }

  .azo-brand-dots {
    width: 120%;
    padding-bottom: 120%;
    transform: translate(-50%, -50%);
  }

  .azo-brand-dot.is-tiny {
    width: 2px;
    height: 2px;
  }

  .azo-brand-dot.is-small {
    width: 3.25px;
    height: 3.25px;
  }

  .azo-brand-dot.is-big {
    width: 5px;
    height: 5px;
  }
}