/* Brand skins: NEXA at rest, the product's own identity on hover, focus or press (js/brands.js).
   Each product sets its tokens; the states below are shared by every product. */
[data-brand="ultrasystem"] {
  --b-bg: radial-gradient(90% 100% at 92% 0%, rgba(37,69,255,.95), transparent 62%), radial-gradient(60% 70% at 0% 100%, rgba(110,139,255,.4), transparent 70%), linear-gradient(160deg, #0c1754, #070d3d);
  --b-ink: #ffffff; --b-soft: rgba(255,255,255,.78); --b-accent: #c8d0ff; --b-chip: #d0deff; --b-chip-ink: #0c1754;
  --b-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --b-body: "Inter", ui-sans-serif, system-ui, sans-serif; --b-mono: "Geist Mono", ui-monospace, monospace;
  --b-iso: url("../assets/ultrasystem/iso-light.svg"); --b-shadow: 0 30px 70px rgba(37,69,255,.35); --b-line: #2545ff;
}
[data-brand="marked"] {
  --b-bg: url("../assets/marked/tex/noise.png") 0 0 / 146px 146px, url("../assets/marked/tex/gradient.jpg") center / cover no-repeat, #4312cc; --b-blend: overlay, soft-light, normal;
  --b-ink: #ffffff; --b-soft: rgba(255,255,255,.82); --b-accent: #c9b8ff; --b-chip: #ffffff; --b-chip-ink: #4312cc;
  --b-display: "Bricolage Grotesque", "Montserrat", ui-sans-serif, system-ui, sans-serif; --b-body: "Montserrat", ui-sans-serif, system-ui, sans-serif; --b-mono: "Roboto Mono", ui-monospace, monospace;
  --b-iso: url("../assets/marked/iso-white.svg"); --b-shadow: 0 30px 70px rgba(67,18,204,.4); --b-line: #4312cc;
}

[data-brand="entrystarth"] {
  --b-bg: #003e72;
  --b-ink: #ffffff; --b-soft: rgba(255,255,255,.8); --b-accent: #b0e585; --b-chip: #b0e585; --b-chip-ink: #262626;
  --b-display: "Inter", ui-sans-serif, system-ui, sans-serif; --b-body: "Inter", ui-sans-serif, system-ui, sans-serif; --b-mono: "JetBrains Mono", ui-monospace, monospace;
  --b-iso: url("../assets/entrystarth/iso-cyan.svg"); --b-shadow: 0 20px 50px rgba(0,41,77,.3); --b-line: #b0e585;
}
[data-brand="unik"] {
  --b-bg: radial-gradient(120% 70% at 100% 0%, #e3ff00 0%, rgba(227,255,0,.5) 20%, rgba(227,255,0,0) 48%), linear-gradient(195deg, #4dd8ff 0%, #2aa9e0 16%, #057bc1 36%, #06567f 56%, #083645 82%);
  --b-ink: #f8f4ed; --b-soft: rgba(248,244,237,.84); --b-accent: #e3ff00; --b-chip: #e3ff00; --b-chip-ink: #083645;
  --b-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --b-body: "Inter", ui-sans-serif, system-ui, sans-serif; --b-mono: "Geist Mono", ui-monospace, monospace;
  --b-iso: none; --b-shadow: 0 30px 70px rgba(5,123,193,.32); --b-line: #057bc1;
}

[data-brand="lumicloud"] {
  --b-bg: radial-gradient(70% 90% at 100% 0%, rgba(221,254,147,.55), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(184,223,252,.6), transparent 60%), linear-gradient(135deg, #d2bcfa 0%, #f092ce 55%, #b8dffc 100%);
  --b-ink: #2b2433; --b-soft: rgba(43,36,51,.78); --b-accent: #2b2433; --b-chip: #2b2433; --b-chip-ink: #f6f2ef;
  --b-display: "Sora", ui-sans-serif, system-ui, sans-serif; --b-body: "Sora", ui-sans-serif, system-ui, sans-serif; --b-mono: "IBM Plex Mono", ui-monospace, monospace;
  --b-iso: url("../assets/lumicloud/iso-color.svg"); --b-shadow: 0 30px 70px rgba(240,146,206,.35); --b-line: #f092ce;
}

/* no transform in this list: GSAP owns transform on revealed blocks, and a CSS transition on it makes them lag out of line */
[data-brand] { position: relative; isolation: isolate; transition: box-shadow .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1); }
[data-brand] > .brand-skin { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--b-bg); background-blend-mode: var(--b-blend, normal); opacity: 0; transition: opacity .5s cubic-bezier(.4,0,.2,1); overflow: hidden; pointer-events: none; }
[data-brand] > .brand-skin::after { content: ""; position: absolute; right: -8%; bottom: -14%; width: 46%; aspect-ratio: 1; background: var(--b-iso) center / contain no-repeat; opacity: 0; transform: translateY(16px) rotate(-6deg); transition: opacity .6s ease .1s, transform .6s ease .1s; }
.brand-swap { position: relative; transition: color .35s ease; }
.brand-swap > .brand-logo { position: absolute; left: 0; top: 50%; height: var(--b-logo-h, .95em); width: auto; max-width: 100%; opacity: 0; transform: translateY(-50%) scale(.94); transform-origin: 0 50%; transition: opacity .4s ease .05s, transform .4s ease .05s; pointer-events: none; }

/* the on state */
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) { color: var(--b-ink); box-shadow: var(--b-shadow); }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) > .brand-skin { opacity: 1; }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) > .brand-skin::after { opacity: .16; transform: none; }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .brand-swap { color: transparent; }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .brand-swap > .brand-logo { opacity: 1; transform: translateY(-50%) scale(1); }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) :is(p, .p, .p-l, span, li, .muted, .mono) { color: var(--b-soft); font-family: var(--b-body); }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) :is(h2, h3, .h3, .d-s, .d-m, b) { color: var(--b-ink); font-family: var(--b-display); text-transform: none; letter-spacing: -0.035em; }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .tag { background: var(--b-chip); color: var(--b-chip-ink); font-family: var(--b-mono); border-radius: 100px; }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .volt, [data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .link { color: var(--b-accent); font-family: var(--b-body); }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .fn li { border-color: rgba(255,255,255,.14); }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .fn li::before { background: var(--b-accent); }

/* product cards (home and systems) */
.prod[data-brand] .prod-name { --b-logo-h: .82em; }
.prod[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .peek div { background: rgba(255,255,255,.08); border-radius: 12px; font-family: var(--b-body); }
.prod[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .peek b { color: var(--b-accent); }
.prod[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .prod-foot { border-color: rgba(255,255,255,.14); }

/* mega menu item */
.mega a[data-brand] b { --b-logo-h: 1em; display: block; }

/* department rows on the home */
.dept a[data-brand] { border-radius: 24px; }
.dept a[data-brand] h3 { --b-logo-h: .8em; }
.dept a[data-brand]:is(:hover, :focus-visible, .brand-on, [aria-selected="true"]) { padding-inline: 24px; border-bottom-color: transparent; }

/* business case cards and articles */

/* demo switch tab */
/* the selected tab wears the brand too, so the identity shows while the demo plays on its own */
.demo-switch button[data-brand] { outline-offset: 2px; }
.demo-switch button[data-brand] b { --b-logo-h: 1.3em; display: block; min-height: 1.3em; }
.demo-switch button[data-brand]:is(:hover, :focus-visible, .brand-on, [aria-selected="true"]) { border-top-color: var(--b-line); }

/* a chip whose text gives way to the logo */
.tag.brand-swap { --b-logo-h: 1.5em; }
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .tag.brand-swap { background: transparent; padding-inline: 0; min-width: 9em; }

/* the swapped text always yields to the logo, whatever heading rule applies */
[data-brand]:is(:hover, :focus-visible, :focus-within, .brand-on, [aria-selected="true"]) .brand-swap.brand-swap { color: transparent; -webkit-text-fill-color: transparent; }

/* its horizontal logo has a small wordmark beside a tall symbol, so it needs more height than the others */
.mega a[data-brand="entrystarth"] b { --b-logo-h: 1.7em; }
.prod[data-brand="entrystarth"] .prod-name { --b-logo-h: 1.15em; }
.demo-switch button[data-brand="entrystarth"] b { --b-logo-h: 2em; }
/* the LumiCloud lockup carries its symbol beside the name, so it needs the same extra height */
.mega a[data-brand="lumicloud"] b { --b-logo-h: 1.6em; }
.prod[data-brand="lumicloud"] .prod-name { --b-logo-h: 1.2em; }
.demo-switch button[data-brand="lumicloud"] b { --b-logo-h: 1.9em; }