/* MIND: the "Enter The Mind" gate and the home page's scroll story. Both are always dark, whatever the site theme. */
:root { --m-bg: #07030a; --m-ink: #fafafa; --m-ink2: #d9cdd3; --m-mute: #a39099; --m-line: rgba(255,255,255,.10); --m-rose: #d06a8a; --m-pink: #f2a3c3; --m-plum: #5a1c39; }
.wm { font-weight: 700; letter-spacing: .14em; font-size: 15px; }
canvas.mind3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- gate ---------------- */
html.gating, html.gating body { overflow: hidden; }
html.entered .gate:not(.leaving) { display: none; }
.gate { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(1200px 700px at 50% 45%, #1a0812 0%, var(--m-bg) 62%); color: var(--m-ink); font-family: var(--sans); overflow: hidden; }
.gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side, transparent 55%, rgba(0,0,0,.55)); }
.gate-stage { position: absolute; inset: 0; }
.gate-flat { position: absolute; left: 50%; top: 46%; width: min(300px, 56vw); transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 30px 70px rgba(182,74,116,.5)); transition: opacity 1.2s .4s; }
html.no3d .gate-flat { opacity: .9; }
.gate.has3d .gate-flat { display: none; }
.gate-ui { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; padding: max(22px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom)); pointer-events: none; }
.gate-ui > * { pointer-events: auto; }
.gate-top { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .18em; font-size: 14px; opacity: 0; transition: opacity 1s .2s; }
.gate-top img { border-radius: 7px; }
.gate-mid { align-self: end; text-align: center; padding-bottom: 6vh; }
.gate-k { margin: 0 0 18px; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--m-pink); overflow: hidden; }
.gate-k span { display: inline-block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.16,1,.3,1) .5s; }
.gate-h { margin: 0; font-size: clamp(52px, 10.5vw, 168px); font-weight: 600; letter-spacing: -.055em; line-height: .92; text-shadow: 0 10px 60px rgba(0,0,0,.6); }
.gate-h .w { display: inline-block; overflow: hidden; padding: 0 .02em .08em; margin-bottom: -.08em; vertical-align: bottom; }
.gate-h .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
.gate-h .w:nth-child(1) > span { transition-delay: .65s; } .gate-h .w:nth-child(2) > span { transition-delay: .78s; } .gate-h .w:nth-child(3) > span { transition-delay: .91s; }
.gate-h .w:nth-child(2) > span { font-weight: 300; font-style: italic; color: var(--m-ink2); letter-spacing: -.04em; }
.gate-h .w:nth-child(3) > span { background: linear-gradient(100deg, #fff 10%, var(--m-pink) 55%, var(--m-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-bot { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity 1s 1.4s, transform 1s cubic-bezier(.16,1,.3,1) 1.4s; }
.gate-go { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; color: #0a0507; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 20px 60px -10px rgba(208,106,138,.65); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.gate-go:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 24px 80px -8px rgba(208,106,138,.9); }
.gate-go svg { transition: transform .25s; } .gate-go:hover svg { transform: translateX(3px); }
.gate-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--m-rose); transform-origin: left; transform: scaleX(0); transition: transform .3s, opacity .4s; }
.gate.loaded .gate-bar { opacity: 0; }
.gate-hint { font-size: 12px; color: var(--m-mute); letter-spacing: .04em; }
.gate.in .gate-top { opacity: 1; } .gate.in .gate-k span, .gate.in .gate-h .w > span { transform: none; } .gate.in .gate-bot { opacity: 1; transform: none; }
/* leaving: the words fly apart, the dive happens in 3D, then the veil lifts */
.gate.leaving .gate-ui { transition: opacity .7s, transform 1.2s cubic-bezier(.7,0,.84,0); opacity: 0; transform: scale(1.25); }
.gate.leaving::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(closest-side, rgba(242,163,195,.0), rgba(7,3,10,0)); animation: gflash 1.5s cubic-bezier(.7,0,.84,0) forwards; }
@keyframes gflash { 0% { opacity: 0; } 70% { opacity: 0; background: radial-gradient(closest-side, rgba(242,163,195,.35), rgba(7,3,10,.0)); } 100% { opacity: 1; background: radial-gradient(closest-side, rgba(255,220,235,.5), rgba(7,3,10,.9)); } }
.gate.gone { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gate *, .gate::before { transition-duration: .01s !important; animation-duration: .01s !important; } }

/* ---------------- header over the story ---------------- */
html.over-story header.top { --ink: #fafafa; --mute: rgba(250,250,250,.62); --bg3: rgba(255,255,255,.09); --bg: transparent; --line: rgba(255,255,255,.08); background: linear-gradient(to bottom, rgba(7,3,10,.55), rgba(7,3,10,0)); backdrop-filter: none; -webkit-backdrop-filter: none; color: #fafafa; }
html.over-story header.top.scrolled { border-bottom-color: transparent; }
html.over-story header.top .btn:not(.ghost) { background: #fff; color: #0a0507; border-color: #fff; }
html.over-story header.top .btn.ghost { color: #fafafa; border-color: rgba(255,255,255,.22); background: transparent; }
html.over-story .official { background: #0e0509; color: #f2a3c3; }

/* ---------------- the story ---------------- */
.story { position: relative; background: var(--m-bg); color: var(--m-ink); margin-top: -64px; isolation: isolate;
  --ink: #fafafa; --ink2: var(--m-ink2); --mute: var(--m-mute); --line: var(--m-line); --bg3: rgba(255,255,255,.07); --card: rgba(255,255,255,.04); }
.st-pin { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.st-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.st-glow { position: absolute; inset: 0; background: radial-gradient(900px 640px at 50% 42%, rgba(182,74,116,.26), transparent 70%), radial-gradient(1400px 600px at 50% 115%, rgba(90,28,57,.6), transparent 70%); }
.st-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 80%); }
.st-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%) scale(calc(.92 + var(--w, 1) * .08)); text-align: center; opacity: var(--w, 1); pointer-events: none; }
.st-word span { font-size: clamp(120px, 31vw, 520px); font-weight: 700; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(242,163,195,.22);
  background: linear-gradient(180deg, rgba(208,106,138,.16), rgba(208,106,138,0) 75%); -webkit-background-clip: text; background-clip: text; }
.st-flat { position: absolute; left: 50%; top: 42%; width: min(360px, 60vw); transform: translate(-50%, -50%); filter: drop-shadow(0 30px 70px rgba(182,74,116,.45)); opacity: 0; transition: opacity .8s; }
html.no3d .st-flat { opacity: 1; }
.st-stage canvas.mind3d { z-index: 1; }

.ch { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; opacity: var(--o, 0); pointer-events: none; }
.ch.on { pointer-events: auto; }
.ch > .wrap { width: 100%; transform: translateY(var(--y, 0)); }
.ch .chx { max-width: 470px; }
.ch.at-left .chx { margin-right: auto; }
.ch.at-right .chx { margin-left: auto; }
.ch.at-bottom { align-items: flex-end; padding-bottom: 9vh; }
.ch.at-bottom .chx { max-width: 640px; margin: 0 auto; text-align: center; }
.ch.at-bottom .ctas { justify-content: center; }
.ch h2 { font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -.05em; line-height: 1; margin: 14px 0 18px; font-weight: 600; }
.ch p { color: var(--m-ink2); font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.st-k { display: inline-block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--m-pink); }
.st-link { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 500; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: border-color .2s, gap .2s; }
.st-link:hover { border-color: #fff; gap: 9px; }
.st-split { display: flex; gap: 4px; height: 44px; margin: 4px 0 24px; }
.st-split i { font-style: normal; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 10px; font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; }
.st-split i:first-child { background: linear-gradient(90deg, #5a1c39, #b64a74); }
.st-split i:last-child { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); padding: 0 10px; }
.st-split b { color: #fff; font-weight: 600; }
.ch.on .st-split i:first-child { animation: grow .9s cubic-bezier(.16,1,.3,1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(.2); } }

/* hero chapter */
.ch0 { align-items: flex-end; padding-bottom: 11vh; }
.ch0 .ch-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.ch0 h1 { font-size: clamp(50px, 7.4vw, 112px); letter-spacing: -.06em; line-height: .94; margin: 22px 0 0; font-weight: 600; }
.ch0 .h-right { max-width: 420px; }
.ch0 .lede { color: var(--m-ink2); font-size: 16.5px; margin: 0 0 22px; }
.ch0 .pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fafafa; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ch .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.light { background: #fff; color: #0a0507; border-color: #fff; box-shadow: 0 16px 50px -14px rgba(208,106,138,.7); }
.btn.light:hover { opacity: .92; }
.btn.glass { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.glass:hover { background: rgba(255,255,255,.12); }
.st-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--m-mute); }
.st-cue i { width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: cue 2.2s cubic-bezier(.65,0,.35,1) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* the page continues below the story */
.story + .ticker { margin-top: 0; }

@media (max-width: 760px) {
  .ch0 { padding-bottom: 8vh; }
  .ch0 .ch-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ch0 h1 { font-size: 50px; }
  .ch, .ch.at-bottom { align-items: flex-end; padding-bottom: 8vh; }
  .ch .chx, .ch.at-bottom .chx { max-width: none; margin: 0; text-align: left; background: linear-gradient(to top, rgba(7,3,10,.85) 60%, rgba(7,3,10,0)); padding: 26px 0 0; }
  .ch.at-bottom .ctas { justify-content: flex-start; }
  .ch h2 { font-size: 40px; }
  .ch p { font-size: 15.5px; }
  .st-cue { display: none; }
}

/* ---------------- header: logo · centred glass capsule · actions ---------------- */
header.top .bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; height: 68px; }
header.top .logo { justify-self: start; }
header.top .logo .wm { font-size: 15px; letter-spacing: .2em; }
header.top .bar .right { margin-left: 0; justify-self: end; gap: 6px; }
.nav { position: relative; gap: 0; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.nav a { position: relative; z-index: 1; padding: 7px 16px; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: var(--mute); background: none !important; transition: color .2s; }
.nav a:hover, .nav a.on { color: var(--ink); }
.nav a::after { display: none; }
.nav-ind { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform .45s cubic-bezier(.16,1,.3,1), width .45s cubic-bezier(.16,1,.3,1), opacity .25s; }
.nav-only-s { display: none; }
header.top .btn { height: 36px; padding: 0 16px; font-size: 13.5px; }
header.top .btn.ghost { background: transparent; border-color: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
header.top .btn.ghost:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
header.top .launchbtn { gap: 6px; box-shadow: 0 8px 26px -10px rgba(208,106,138,.75); }
header.top .launchbtn svg { transition: transform .2s; } header.top .launchbtn:hover svg { transform: translateX(2px); }
header.top .iconbtn { width: 34px; height: 34px; }
/* over the dark story: same capsule in glass white */
html.over-story .nav { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
html.over-story .nav-ind { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
html.over-story header.top .btn.ghost { border-color: rgba(255,255,255,.2); }
html.over-story header.top .launchbtn { box-shadow: 0 10px 34px -8px rgba(208,106,138,.9); }

@media (max-width: 900px) {
  header.top .bar { display: flex; height: 62px; }
  header.top .bar .right { margin-left: auto; }
  .nav { display: none; }
  .nav.open { display: grid; position: absolute; top: 62px; left: 12px; right: 12px; padding: 8px; border-radius: 18px; gap: 2px;
    background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  html.over-story .nav.open { background: rgba(14,6,11,.94); }
  html.over-story .nav.open .nav-cta { background: #fff !important; color: #0a0507; }
  .nav.open a { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
  .nav.open a.on { background: color-mix(in srgb, var(--ink) 8%, transparent) !important; }
  .nav.open .nav-only-s { display: block; }
  .nav.open .nav-cta { margin-top: 6px; text-align: center; background: var(--ink) !important; color: var(--bg); }
  .nav-ind { display: none; }
  .burger { display: grid; }
}

header.top .xlink svg { width: 16px; height: 16px; }