/* lockup19 — trademark-synced droplet + SulaQ Systems wordmark (7.8-tm1)
 * Structure: .logo--ref = drop | word | tagline. Desktop tile is NOT used here.
 */
.logo--ref {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.55rem !important;
  text-decoration: none !important;
  width: max-content !important;
  max-width: none !important;
  white-space: normal !important;
}

.logo__drop,
.logo--foot .logo__drop,
.logo--ref .logo__drop {
  display: block !important;
  height: 48px !important;
  width: auto !important;
  max-height: 48px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

.logo__textcol {
  display: flex !important;
  flex-direction: column !important;
  /* Wordmark centers over the wider tagline (shift right vs left-edge stack) */
  align-items: center !important;
  justify-content: center !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
  transform: none !important;
}

.logo__word,
.logo--foot .logo__word {
  display: block !important;
  height: 20px !important;
  width: auto !important;
  max-width: min(260px, 52vw) !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  -webkit-user-drag: none;
  /* Sit on tagline’s optical center — no drop/ripple change */
  margin-inline: auto !important;
}

.logo__word--dark { display: none !important; }
.top:not(.is-solid) .logo__word--paper { display: none !important; }
.top:not(.is-solid) .logo__word--dark { display: block !important; }
.logo__systems { display: none !important; }

.logo__tagline,
.logo__tagline--paper,
.foot__brand .logo__tagline {
  display: block !important;
  margin: 0 !important;
  padding: 0.04rem 0 0.1rem !important;
  width: max-content !important;
  max-width: min(100%, 56vw) !important;
  box-sizing: content-box !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-family: var(--font-body), "Manrope", system-ui, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.018em !important;
  line-height: 1.35 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "kern" 1, "liga" 1 !important;
}

.logo__tagline {
  -webkit-text-fill-color: #e7f4ff !important;
  color: #e7f4ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
  filter: drop-shadow(0 0 8px rgba(94, 180, 232, 0.28)) !important;
  /* Shared master breath ~7.2s family — tagline quieter / slower */
  animation: logo-tagline-pulse 5.4s ease-in-out infinite !important;
}

.top.is-solid .logo__tagline,
.logo__tagline--paper,
.foot__brand .logo__tagline {
  -webkit-text-fill-color: #1a7abf !important;
  color: #1a7abf !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(26, 122, 191, 0.16)) !important;
  animation: logo-tagline-pulse-ink 5.4s ease-in-out infinite !important;
}

@keyframes logo-tagline-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 0.92; }
}
@keyframes logo-tagline-pulse-ink {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.9; }
}

.logo--foot .logo__lockup,
.logo__lockup {
  height: 34px !important;
  width: auto !important;
  max-width: min(260px, 64vw) !important;
}

.logo--foot.logo--ref {
  align-items: center !important;
  gap: 0.55rem !important;
}

.logo--foot .logo__textcol {
  align-items: center !important;
}

.foot__brand {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: max-content !important;
}

@media (max-width: 520px) {
  .logo__drop,
  .logo--foot .logo__drop,
  .logo--ref .logo__drop {
    height: 48px !important;
    max-height: 48px !important;
  }
  .logo__word,
  .logo--foot .logo__word {
    height: 18px !important;
    max-width: min(220px, 58vw) !important;
  }
  .logo__tagline,
  .logo__tagline--paper,
  .foot__brand .logo__tagline {
    font-size: 0.60rem !important;
  }
}

/* ——— Brand motion: drop + wordmark (engineering, controlled) ———
   Tempo table (master ≈ 7.2s):
   - Drop idle whisper + accent on hover/enter
   - Q synced to same family (~7.2s), soft on solid / brighter on hero
   - Tagline quieter 5.4s (above)
   - Slogan shimmer stays separate (slogan-motion.js)
*/
.logo__mark {
  position: relative !important;
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: 48px !important;
  transition: transform 180ms ease !important;
}

.logo__mark .logo__drop {
  position: relative !important;
  z-index: 2 !important;
}

/* Align CSS rings to SVG ellipses (viewBox rings near drop base) */
.logo__ripple {
  position: absolute !important;
  left: 50% !important;
  bottom: 3px !important;
  z-index: 1 !important;
  border: 1.5px solid rgba(94, 184, 232, 0.55) !important;
  border-radius: 50% !important;
  transform: translateX(-50%) scale(0.92) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* Idle: whisper only — accent on hover / enter / brand-beat */
  animation: logo-ripple-idle 7.2s ease-out infinite !important;
}

.logo__ripple--outer {
  width: 32px !important;
  height: 9px !important;
  bottom: 2px !important;
  animation-delay: 0s !important;
}

.logo__ripple--inner {
  width: 21px !important;
  height: 6px !important;
  bottom: 3px !important;
  border-color: rgba(26, 122, 191, 0.55) !important;
  animation-delay: 0.9s !important;
}

.logo__drop-glint {
  position: absolute !important;
  inset: 4px 28% 28% 18% !important;
  z-index: 3 !important;
  border-radius: 40% 40% 45% 45% !important;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 49%,
    rgba(180, 230, 255, 0.35) 52%,
    transparent 62%,
    transparent 100%
  ) !important;
  background-size: 220% 100% !important;
  background-position: 120% 50% !important;
  mix-blend-mode: soft-light !important;
  pointer-events: none !important;
  opacity: 0 !important;
  /* Idle: no continuous glint — brand-beat / enter only */
  animation: none !important;
}

.logo__mark.is-enter-glint .logo__drop-glint,
body.brand-beat .logo__drop-glint {
  animation: logo-drop-glint-once 0.55s ease-out 1 forwards !important;
}

.logo__mark.is-enter-glint .logo__ripple,
.logo__mark.is-hover-burst .logo__ripple,
.logo--ref:hover .logo__ripple,
body.brand-beat .logo__ripple {
  animation: logo-ripple-burst 0.95s ease-out 1 forwards !important;
}

.logo__mark.is-enter-glint .logo__ripple--inner,
.logo__mark.is-hover-burst .logo__ripple--inner,
.logo--ref:hover .logo__ripple--inner,
body.brand-beat .logo__ripple--inner {
  animation-delay: 0.12s !important;
}

@media (hover: hover) and (pointer: fine) {
  .logo--ref:hover .logo__mark {
    transform: translateY(2px) !important;
  }
}

/* Hero (transparent): drop + Q slightly more present */
.top:not(.is-solid) .logo__ripple {
  animation-duration: 7.2s !important;
}

.top:not(.is-solid) .logo__q-glow {
  animation-duration: 7.2s !important;
}

/* Solid: same tempo family, softer amplitude */
.top.is-solid .logo__ripple--outer {
  border-color: rgba(26, 122, 191, 0.4) !important;
}

.top.is-solid .logo__ripple--inner {
  border-color: rgba(26, 122, 191, 0.55) !important;
}

.logo__wordwrap {
  position: relative !important;
  display: block !important;
  line-height: 0 !important;
  margin-inline: auto !important;
  opacity: 0;
  transform: translateY(-4px);
  animation: logo-word-settle 160ms ease 200ms forwards;
}

.logo__wordwrap.is-settled {
  opacity: 1;
  transform: translateY(0);
  animation: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Systems secondary (~85%): soft mask on trailing half */
.logo__wordwrap .logo__word {
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.85) 52%,
    rgba(0, 0, 0, 0.85) 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.85) 52%,
    rgba(0, 0, 0, 0.85) 100%
  ) !important;
}

/* Signature Q — organic round (drop language), not a perfect circle.
   PNG glyph stays; accent sized toward S optical weight (~+30% vs first trial). */
.logo__q-glow {
  position: absolute !important;
  left: 28% !important;
  top: -4% !important;
  width: 18.5% !important;
  height: 116% !important;
  /* Soft asymmetric round — drop/egg, not geometric circle */
  border-radius: 48% 52% 46% 54% / 40% 42% 58% 60% !important;
  background: radial-gradient(
    ellipse 72% 88% at 47% 42%,
    rgba(154, 210, 72, 0.68) 0%,
    rgba(140, 198, 63, 0.28) 42%,
    rgba(140, 198, 63, 0.1) 62%,
    transparent 78%
  ) !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.34 !important;
  transform: rotate(-6deg) scale(1.1) !important;
  transform-origin: 45% 50% !important;
  animation: logo-q-pulse 7.2s ease-in-out infinite !important;
}

/* Soft Q tail — short rounded flick, not a ring segment */
.logo__q-glow::after {
  content: "" !important;
  position: absolute !important;
  right: -12% !important;
  bottom: 0% !important;
  width: 52% !important;
  height: 34% !important;
  border-radius: 70% 40% 65% 35% !important;
  background: radial-gradient(
    ellipse 80% 70% at 30% 40%,
    rgba(154, 210, 72, 0.55) 0%,
    rgba(140, 198, 63, 0.18) 55%,
    transparent 75%
  ) !important;
  transform: rotate(38deg) !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
}

@media (max-width: 520px) {
  .logo__q-glow {
    left: 25.5% !important;
    width: 20% !important;
    top: -5% !important;
  }
}

@media (min-width: 900px) {
  .logo__q-glow {
    left: 28.5% !important;
    width: 17.5% !important;
  }
}

/* Dark hero: brighter Q + cyan word edge */
.top:not(.is-solid) .logo__q-glow {
  mix-blend-mode: screen !important;
  opacity: 0.45 !important;
  background: radial-gradient(
    ellipse 72% 88% at 47% 42%,
    rgba(180, 230, 90, 0.72) 0%,
    rgba(140, 198, 63, 0.32) 45%,
    transparent 76%
  ) !important;
  filter: drop-shadow(0 0 4px rgba(154, 210, 72, 0.35)) !important;
}

.top:not(.is-solid) .logo__q-glow::after {
  background: radial-gradient(
    ellipse 80% 70% at 30% 40%,
    rgba(180, 230, 90, 0.6) 0%,
    rgba(140, 198, 63, 0.2) 55%,
    transparent 75%
  ) !important;
}

.top:not(.is-solid) .logo__word--dark {
  filter: drop-shadow(0 0 0.7px rgba(167, 220, 245, 0.5))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) !important;
}

/* Solid / light: soft Q without muddy multiply */
.top.is-solid .logo__q-glow {
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 0.2 !important;
  background: radial-gradient(
    ellipse 72% 88% at 47% 42%,
    rgba(120, 170, 40, 0.38) 0%,
    rgba(120, 170, 40, 0.12) 50%,
    transparent 74%
  ) !important;
}

.top.is-solid .logo__q-glow::after {
  background: radial-gradient(
    ellipse 80% 70% at 30% 40%,
    rgba(120, 170, 40, 0.32) 0%,
    rgba(120, 170, 40, 0.08) 55%,
    transparent 75%
  ) !important;
}

.top.is-solid .logo__word--paper,
.logo--foot .logo__word,
.foot__brand .logo__word {
  filter: none !important;
}

/* Opening brand beat (~1.2s): glint → Q → tagline, then idle */
body.brand-beat .logo__q-glow {
  animation: logo-q-beat 0.45s ease-out 0.35s 1 both !important;
}

body.brand-beat .logo__tagline,
body.brand-beat-tag .logo__tagline {
  animation: logo-tagline-beat 0.4s ease-out 0.7s 1 both !important;
}

body.brand-idle .logo__drop-glint {
  animation: none !important;
  opacity: 0 !important;
}

@keyframes logo-ripple-idle {
  0% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0;
  }
  18% {
    opacity: 0.2;
  }
  70% {
    transform: translateX(-50%) scale(1.06);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1.06);
    opacity: 0;
  }
}

@keyframes logo-ripple-burst {
  0% {
    transform: translateX(-50%) scale(0.88);
    opacity: 0.85;
  }
  100% {
    transform: translateX(-50%) scale(1.28);
    opacity: 0;
  }
}

@keyframes logo-drop-glint-once {
  0% {
    background-position: 130% 50%;
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    background-position: -30% 50%;
    opacity: 0;
  }
}

@keyframes logo-q-pulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.04);
  }
}

@keyframes logo-q-beat {
  0% {
    opacity: 0.15;
    transform: scale(0.9);
  }
  40% {
    opacity: 0.75;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.28;
    transform: scale(1);
  }
}

@keyframes logo-tagline-beat {
  0% {
    opacity: 0.55;
    filter: drop-shadow(0 0 4px rgba(94, 180, 232, 0.15));
  }
  45% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(94, 180, 232, 0.55));
  }
  100% {
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(94, 180, 232, 0.28));
  }
}

@keyframes logo-word-settle {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo__ripple,
  .logo__drop-glint,
  .logo__q-glow,
  .logo__tagline {
    animation: none !important;
  }
  .logo__ripple,
  .logo__drop-glint {
    opacity: 0 !important;
  }
  .logo__q-glow {
    transform: rotate(-6deg) scale(1.1) !important;
  }
  .logo__wordwrap {
    opacity: 1 !important;
    transform: none !important;
  }
  .logo--ref:hover .logo__mark {
    transform: none !important;
  }
  .sulaq-page-ripple-host,
  body.sulaq-drop-splash::after {
    display: none !important;
  }
}

.is-reduced-motion .logo__ripple,
.is-reduced-motion .logo__drop-glint,
.is-reduced-motion .logo__q-glow {
  animation: none !important;
  opacity: 0 !important;
}
.is-reduced-motion .logo__wordwrap {
  opacity: 1 !important;
  transform: none !important;
}

/* ——— Drop click → page ripples (format-safe overlay) ——— */
.logo__drop-hit {
  cursor: pointer !important;
}

.sulaq-page-ripple-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.sulaq-page-ripple {
  position: absolute !important;
  left: var(--sulaq-splash-x, 50%) !important;
  top: var(--sulaq-splash-y, 40%) !important;
  width: 28px !important;
  height: 28px !important;
  margin: -14px 0 0 -14px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(26, 122, 191, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(94, 184, 232, 0.12) !important;
  transform: scale(0.25) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
  animation: sulaq-page-ripple-expand 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}

.sulaq-page-ripple--b {
  border-color: rgba(94, 184, 232, 0.38) !important;
  animation-delay: 0.1s !important;
}

@keyframes sulaq-page-ripple-expand {
  to {
    transform: scale(26);
    opacity: 0;
  }
}

body.sulaq-drop-splash::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9997 !important;
  pointer-events: none !important;
  background: radial-gradient(
    circle at var(--sulaq-splash-x, 50%) var(--sulaq-splash-y, 40%),
    rgba(26, 122, 191, 0.07) 0%,
    rgba(94, 184, 232, 0.03) 28%,
    transparent 58%
  ) !important;
  animation: sulaq-drop-veil 0.85s ease-out forwards !important;
}

@keyframes sulaq-drop-veil {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sulaq-page-ripple-host,
  body.sulaq-drop-splash::after {
    display: none !important;
  }
}

.is-reduced-motion .sulaq-page-ripple-host,
.is-reduced-motion.sulaq-drop-splash::after {
  display: none !important;
}