/* ==========================================================================
   SEEYOUSOON — WEBSITE BRAND LOCKUP FOR APP (Wave 10 Contract C1)
   Ported from cloudflare-pages/seeusoon-se/assets/seeusoon.css (.brand).
   Winking receipt mark + seeyous[oo]n.se wordmark with 6s synchronized blink.
   ========================================================================== */

:root {
  --sys-brand-purple: #A855F7;
  --sys-brand-tld: #A855F7;
  --sys-brand-ink: var(--sys-label, #F8FAFC);
  --sys-brand-cut: var(--sys-canvas, #050510);
}

html[data-apple-theme="light"] {
  --sys-brand-purple: #A855F7;
  --sys-brand-tld: #8B3FD9;
  --sys-brand-ink: var(--sys-label, #050510);
  --sys-brand-cut: var(--sys-canvas, #FAF9F6);
}

.sys-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font-family: var(--font-display, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1;
  color: var(--sys-brand-ink);
  text-decoration: none;
  user-select: none;
  direction: ltr;
  unicode-bidi: isolate;
  -webkit-tap-highlight-color: transparent;
  font-size: 22px;
}

.sys-brand[data-size="sm"] { font-size: 18px; }
.sys-brand[data-size="md"] { font-size: 22px; }
.sys-brand[data-size="lg"] { font-size: 28px; }
.sys-brand[data-size="xl"] { font-size: 40px; }

.sys-brand-mark {
  width: 1.16em;
  height: 1.16em;
  color: var(--sys-brand-purple);
  flex: none;
  filter: drop-shadow(0 3px 14px rgba(168, 85, 247, 0.28));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-brand-wm {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  color: var(--sys-brand-ink);
}

.sys-brand[data-mark-only="true"] .sys-brand-wm {
  display: none;
}

.sys-brand-tld {
  color: var(--sys-brand-tld);
}

.sys-brand-eyes {
  display: inline-block;
  width: 1.32em;
  height: 0.6em;
  vertical-align: -0.045em;
  color: var(--sys-brand-purple);
  margin: 0 0.015em;
  flex: none;
}

.sys-brand-mark .bm-body,
.sys-brand-mark .bm-pupil,
.sys-brand-eyes .we-left,
.sys-brand-eyes .we-right {
  fill: currentColor;
}

.sys-brand-mark .bm-socket,
.sys-brand-mark .bm-wink,
.sys-brand-mark .bm-lash,
.sys-brand-eyes .we-pupil,
.sys-brand-eyes .we-wink,
.sys-brand-eyes .we-lash {
  fill: var(--sys-brand-cut);
}

.sys-brand-mark .bm-lash,
.sys-brand-eyes .we-lash {
  opacity: 0;
}

.sys-brand-mark .bm-socket,
.sys-brand-mark .bm-pupil,
.sys-brand-eyes .we-pupil {
  animation: sys-bm-open 6s infinite;
}

.sys-brand-mark .bm-lash,
.sys-brand-eyes .we-lash {
  animation: sys-bm-lash 6s infinite;
}

@keyframes sys-bm-open {
  0%, 91%, 97%, 100% { opacity: 1; }
  93%, 95% { opacity: 0; }
}

@keyframes sys-bm-lash {
  0%, 91%, 97%, 100% { opacity: 0; }
  93%, 95% { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .sys-brand:hover .sys-brand-mark {
    transform: rotate(-8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sys-brand-mark,
  .sys-brand-mark *,
  .sys-brand-eyes * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .sys-brand-mark .bm-lash,
  .sys-brand-eyes .we-lash {
    opacity: 0 !important;
  }
  .sys-brand-mark .bm-socket,
  .sys-brand-mark .bm-pupil,
  .sys-brand-eyes .we-pupil {
    opacity: 1 !important;
  }
}

:root.a11y-calm .sys-brand-mark,
:root.a11y-calm .sys-brand-mark *,
:root.a11y-calm .sys-brand-eyes *,
:root[data-motion="off"] .sys-brand-mark,
:root[data-motion="off"] .sys-brand-mark *,
:root[data-motion="off"] .sys-brand-eyes * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

:root.a11y-calm .sys-brand-mark .bm-lash,
:root.a11y-calm .sys-brand-eyes .we-lash,
:root[data-motion="off"] .sys-brand-mark .bm-lash,
:root[data-motion="off"] .sys-brand-eyes .we-lash {
  opacity: 0 !important;
}

:root.a11y-calm .sys-brand-mark .bm-socket,
:root.a11y-calm .sys-brand-mark .bm-pupil,
:root.a11y-calm .sys-brand-eyes .we-pupil,
:root[data-motion="off"] .sys-brand-mark .bm-socket,
:root[data-motion="off"] .sys-brand-mark .bm-pupil,
:root[data-motion="off"] .sys-brand-eyes .we-pupil {
  opacity: 1 !important;
}