/* intro: preloader, first screen, header polish, WebGL fallback */
#pre { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 38%, #fbfbfd 0%, #eef0f4 55%, #dfe2e9 100%); transition: opacity .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .7s; }
#pre.done { opacity: 0; visibility: hidden; pointer-events: none; }
#pre.done .pre-in { transform: scale(.96); filter: blur(4px); }
#pre.instant { transition: none; }
.pre-in { display: grid; justify-items: center; gap: 22px; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s; }
.pre-loop { width: 112px; height: 56px; overflow: visible; }
.pre-loop path { fill: none; stroke-linecap: round; }
.pre-loop .bg { stroke: rgba(12,17,27,.08); stroke-width: 7; }
.pre-loop .run { stroke: url(#preGrad); stroke-width: 7; stroke-dasharray: 70 230; animation: preRun 1.6s linear infinite; }
@keyframes preRun { to { stroke-dashoffset: -300; } }
.pre-mark { font-size: 27px; }
.pre-mark i { font-size: 17px; padding: 6px 9px 7px; }
.pre-bar { width: 180px; height: 2px; border-radius: 2px; background: rgba(12,17,27,.09); overflow: hidden; }
.pre-bar b { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, .06)); background: linear-gradient(90deg, #285ff5, #6f93ff); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pre-cap { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); min-height: 11px; }

/* header */
header { padding: 18px 28px; }
.pill.blue.book { gap: 10px; padding: 11px 13px 11px 17px; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.pill.blue.book svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.pill.blue.book:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(40,95,245,.75); }
.pill.blue.book:hover svg { transform: translateX(2px); }
button.pill { font-family: var(--font); }
.lmeter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 10px 30px -14px rgba(12,17,27,.25); font: 500 11.5px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lmeter b { font-weight: 600; color: var(--ink); }
.lmeter .ring360 { width: 30px; height: 30px; }

/* counter of the opening beat */
.count { top: 15%; padding: 14px 20px 13px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 20px 50px -28px rgba(12,17,27,.45); min-width: 190px; }
.count b { font-size: 54px; font-variant-numeric: tabular-nums; }
.count span { display: block; margin-top: 8px; font-size: 11px; }

/* hero */
.hero p { max-width: 470px; }
.hero .next svg { width: 14px; height: 14px; animation: nudge 1.8s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.hero .eyebrow .live { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--blue); vertical-align: 1px; box-shadow: 0 0 0 0 rgba(40,95,245,.5); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(40,95,245,.45); } 80%, 100% { box-shadow: 0 0 0 7px rgba(40,95,245,0); } }
.hint { display: flex; flex-direction: column; align-items: center; gap: 10px; bottom: 20px; opacity: 0; }
.hint i { display: block; width: 1px; height: 34px; background: linear-gradient(rgba(12,17,27,.0), rgba(12,17,27,.35)); position: relative; overflow: hidden; }
.hint i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--blue); animation: drip 1.9s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes drip { to { top: 100%; } }

@media (max-width: 860px) {
  header { padding: 12px 16px; }
  .lmeter, .hint { display: none; }
  .pill.blue.book { padding: 9px 10px 9px 14px; font-size: 14px; }
  .count { top: 13%; min-width: 170px; padding: 12px 16px 11px; }
  .count b { font-size: 44px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pre-loop .run, .hero .next svg, .hint i::after, .hero .eyebrow .live { animation: none; } }

/* WebGL unavailable: the hero on a calm static background */
html.nogl body { background: radial-gradient(90% 70% at 70% 35%, #e4ebff 0%, #eef0f4 50%, #dfe2e9 100%); }
html.nogl canvas#gl, html.nogl .count, html.nogl .hint, html.nogl .lmeter { display: none; }
html.nogl .hero { opacity: 1 !important; pointer-events: auto !important; }
html.nogl .ui::before { content: ''; position: absolute; left: 50%; top: 40%; width: min(62vw, 560px); aspect-ratio: 2 / 1; transform: translate(-30%, -50%) rotate(-8deg); border-radius: 50%; border: 22px solid transparent; background: conic-gradient(from 30deg, #285ff5, #e2412a, #ffc629, #0f6b5c, #285ff5) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); opacity: .55; filter: blur(.4px); }
@media (max-width: 860px) { html.nogl .ui::before { top: 30%; transform: translate(-50%, -50%) rotate(-8deg); width: 82vw; } }

/* WebGL unavailable (29.10): the story reads as a plain page — chapters stacked in order, so the menu's anchors
   (#how, #dubai, #markets, #work), the market rail and the campaign links all work without the scene */
html.nogl #spacer { display: none; }
html.nogl #ui > header { position: fixed; z-index: 40; background: rgba(238,240,244,.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
html.nogl #ui.ui::before { top: 40vh; } /* the static loop stays on the first screen */
html.nogl #ui.ui { position: relative; inset: auto; pointer-events: auto; padding-bottom: 72px; }
html.nogl #ui > .ch, html.nogl #ui > .ch.top, html.nogl #ui > .work, html.nogl #ui > .final { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; opacity: 1 !important; pointer-events: auto !important; }
html.nogl #ui > .ch { max-width: 640px; margin: 0; padding: 72px 28px 0; scroll-margin-top: 16px; }
html.nogl #ui > .ch.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 54px; }
html.nogl #ui > .ch.mk { top: auto; }
html.nogl #ui > .ch::before { display: none; }
html.nogl #ui > .work { padding: 18px 28px 0; }
html.nogl #ui > .final { width: auto; max-width: 480px; margin: 96px auto 0; padding: 0 16px; }
html.nogl #ui > .ch-plan, html.nogl #quiz, html.nogl #card, html.nogl #pins, html.nogl #tags, html.nogl #example { display: none; }
html.nogl #ui .mkrail { display: flex; flex-wrap: wrap; position: relative; left: auto; right: auto; bottom: auto; gap: 10px; padding: 20px 28px 0; opacity: 1 !important; pointer-events: auto !important; overflow: visible; }
@media (max-width: 860px) {
  html.nogl #ui > .ch, html.nogl #ui > .ch.top { padding: 56px 16px 0; }
  html.nogl #ui > .ch.hero { padding-bottom: 32px; }
  html.nogl #ui.ui::before { top: 30vh; }
  html.nogl #ui > .work { padding: 14px 16px 0; }
  html.nogl #ui .mkrail { flex-wrap: nowrap; overflow-x: auto; padding: 16px; }
}