/* Block 1 lab: loader, papyrus hero with sand erosion, fold-to-card scene, manifesto */
:root {
  --night: #0D0A08; --night-2: #16110D; --cream: #F1E7D6; --papyrus: #EFE2C6; --papyrus-ink: #1E1711;
  --gold: #EBB530; --gold-ink: #0D0A08; --wine: #5C0E1B;
  --serif: "Cinzel", Georgia, serif; --sans: "Montserrat", system-ui, sans-serif;
  --ease: cubic-bezier(.7, 0, .2, 1); --ease-out: cubic-bezier(.2, .7, .2, 1);
  --gut: clamp(16px, 4vw, 64px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--night); }
html.lenis, html.lenis body { height: auto; }
a { color: inherit; }
body { font: 400 16px/1.6 var(--sans); color: var(--cream); background: var(--night); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 3px; border: 1.5px solid var(--gold);
  font: 700 14px/1 var(--sans); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.btn--solid { background: var(--gold); color: var(--gold-ink); }
.btn--solid:hover { background: var(--night); color: var(--gold); }

/* ---------- Loader ---------- */
.loader { --hole: 0px; position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--cream); }
/* once loaded, the mark is cut out of the night and grows until the hero fills the screen */
.loader.is-open { -webkit-mask: url("../../assets/img/brand/mark.svg") 50% 46% / var(--hole) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: url("../../assets/img/brand/mark.svg") 50% 46% / var(--hole) auto no-repeat exclude, linear-gradient(#000 0 0); }
.loader__mark { --w: clamp(120px, 11vw, 176px); --p: 0; position: absolute; left: 50%; top: 46%; width: var(--w); aspect-ratio: 555 / 705; translate: -50% -50%; }
.loader__mark i { position: absolute; inset: 0; -webkit-mask: url("../../assets/img/brand/mark.svg") center / contain no-repeat; mask: url("../../assets/img/brand/mark.svg") center / contain no-repeat; }
.loader__ghost { background: rgba(235, 181, 48, .16); }
/* real gold leaf fills the pharaoh from the chin up, and the leaf keeps drifting so the metal catches the light */
.loader__leaf { background: url("../../assets/img/v4/gold-leaf.webp") 0 0 / 420% auto; clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); animation: leaf-drift 7s linear infinite alternate; }
@keyframes leaf-drift { to { background-position: 100% 60%; } }
.loader__name { position: absolute; left: 0; right: 0; top: calc(46% + var(--w, 176px) * .78); display: grid; justify-items: center; gap: 8px; text-align: center;
  font: 700 clamp(18px, 1.5vw, 24px)/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); padding-left: .32em; }
.loader__name small { font: 400 clamp(13px, 1vw, 16px)/1 var(--serif); letter-spacing: .2em; color: var(--cream); opacity: .85; }
.loader__name, .loader__foot { transition: opacity .5s; }
.loader.is-open .loader__name, .loader.is-open .loader__foot, .loader.is-open .loader__mark { opacity: 0; }
.loader__mark { transition: opacity .35s; }
/* the logo mark: one colour, follows currentColor */
.mark { display: inline-block; width: 1em; aspect-ratio: 555 / 705; background: currentColor; -webkit-mask: url("../../assets/img/brand/mark.svg") center / contain no-repeat; mask: url("../../assets/img/brand/mark.svg") center / contain no-repeat; }
.loader__foot { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; }

/* ---------- Header: ink on papyrus, cream on night ---------- */
.hdr { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 32px; padding: 18px var(--gut); color: var(--papyrus-ink);
  transition: color .4s, translate .6s var(--ease); }
/* it steps out of the way while you read down the page and comes back as soon as you scroll up */
.hdr.is-hidden { translate: 0 calc(-100% - 40px); }
/* after the loader the brand, the links and the button drop in one after another */
.hdr > *, .hdr__nav a { opacity: 0; translate: 0 -14px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out), color .3s; transition-delay: calc(var(--d, 0) * 70ms); }
.hdr.is-in > *, .hdr.is-in .hdr__nav a { opacity: 1; translate: none; }
.hdr__nav { opacity: 1 !important; translate: none !important; }
/* sound on/off: four thin bars that keep dancing while sound is on and lie flat when it is off */
.hdr__sound { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.hdr__sound i { width: 2px; height: 4px; border-radius: 1px; background: currentColor; transition: height .3s; }
.hdr__sound.is-on i { animation: eq 1s ease-in-out infinite alternate; }
.hdr__sound.is-on i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.hdr__sound.is-on i:nth-child(3) { animation-duration: .9s; animation-delay: -.5s; }
.hdr__sound.is-on i:nth-child(4) { animation-duration: .6s; animation-delay: -.2s; }
.hdr__sound:hover { color: var(--gold); }
@keyframes eq { from { height: 4px; } to { height: 16px; } }
/* the link's word rolls up and a second copy in gold rolls in from below; a short gold rule draws under it */
.roll { position: relative; display: inline-grid; overflow: hidden; vertical-align: top; }
.roll > span { grid-area: 1 / 1; transition: translate .5s var(--ease); }
.roll > span + span { translate: 0 105%; color: var(--gold); }
.hdr__nav a { position: relative; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--gold); scale: 0 1; transform-origin: right; transition: scale .5s var(--ease); }
.hdr__nav a:hover::after, .hdr__nav a:focus-visible::after { scale: 1 1; transform-origin: left; }
.hdr__nav a:hover .roll > span:first-child, .hdr__nav a:focus-visible .roll > span:first-child { translate: 0 -105%; }
.hdr__nav a:hover .roll > span + span, .hdr__nav a:focus-visible .roll > span + span { translate: none; }
/* the button fills with night from the left, its word turns gold */
.hdr__book { position: relative; overflow: hidden; isolation: isolate; }
.hdr__book::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night); scale: 0 1; transform-origin: right; transition: scale .5s var(--ease); }
.hdr__book:hover::before, .hdr__book:focus-visible::before { scale: 1 1; transform-origin: left; }
.btn--solid.hdr__book:hover { background: var(--gold); color: var(--gold); }
.hdr.is-dark { color: var(--cream); }
.hdr__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.hdr__brand span { display: grid; gap: 5px; }
.hdr__brand b { font: 700 17px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.hdr__brand small { font: 400 13px/1 var(--serif); letter-spacing: .08em; }
.hdr__brand .mark { font-size: 46px; }
.hdr__nav { display: flex; gap: 28px; margin-left: auto; }
.hdr__nav a { font: 600 14px/1 var(--sans); color: inherit; text-decoration: none; padding: 10px 0; }


/* ---------- Block 1 ---------- */
.stage { --day: 0; --ink: 0; position: relative; background: var(--night); }
/* sticks to the viewport for the length of the stage, takes no room */
.stage__bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; pointer-events: none; }
.stage__bg::before, .stage__bg::after { content: ""; position: absolute; inset: 0; background: url("../../assets/img/v4/sand.webp") center / cover; }
/* the sand texture lightens the night, and darkens into the day sand like the hero's papyrus */
.stage__bg::before { opacity: calc((1 - var(--day)) * .09); mix-blend-mode: screen; }
.stage__bg::after { opacity: calc(var(--day) * .28); mix-blend-mode: multiply; }
.stage__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.b1 { position: relative; z-index: 1; height: 340vh; }
.b1__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }

.b1__marq { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: .04em; font-size: clamp(60px, 9.4vw, 168px); line-height: 1; pointer-events: none; }
.marq { display: flex; width: max-content; white-space: nowrap; animation: marq 50s linear infinite; }
.marq span { padding-right: .55em; }
.marq--serif { font-family: var(--serif); font-weight: 700; color: var(--gold); }
.marq--sans { font-family: var(--sans); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--cream); animation-direction: reverse; }
@keyframes marq { to { transform: translateX(-50%); } }

.b1__label { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; font: 600 12px/1 var(--sans); letter-spacing: .02em; color: var(--cream); opacity: 0; }

.b1__panel { position: absolute; inset: 0; background: var(--papyrus); color: var(--papyrus-ink); overflow: hidden; transform-origin: 50% 50%; will-change: transform; isolation: isolate; }
.b1__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../../assets/img/v4/sand.webp") center / cover; opacity: .28; mix-blend-mode: multiply; }
/* Depth stack inside the panel: far dunes, the Sphinx, the title, the near dune */
.b1__scene { position: absolute; inset: 0; transform-origin: 50% 70%; }
.b1__scene > * { will-change: transform; }
/* the far dunes run down behind the near crest, so no papyrus shows between them */
.b1__dune--back { position: absolute; left: -3%; width: 106%; max-width: none; bottom: 9%; }
.b1__dune--front { position: absolute; left: -4%; right: -4%; bottom: -2%; height: 28%; }
.b1__dune--front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* the base sits on the panel floor, always well under the near crest, so the stone never shows a cut edge */
.b1__sphinx { position: absolute; left: 50%; bottom: 0; height: 87%; aspect-ratio: 2400 / 1357; margin-left: calc(87vh * -2400 / 1357 / 2); }
.b1__sphinx > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.b1__title { position: absolute; inset: 0; pointer-events: none; font: 700 clamp(44px, 5.4vw, 100px)/.94 var(--serif); letter-spacing: .02em; text-transform: uppercase; color: var(--papyrus-ink); }
.b1__title em { font-style: normal; font-weight: 900; color: transparent; }
/* real gold leaf inside the letters (the sand sampler reads the same image) */
.b1__tl .ln:not(.b1__sub) .ln__in { color: transparent; background: url("../../assets/img/v4/gold-leaf.webp") center / cover; -webkit-background-clip: text; background-clip: text; }
.b1__tl { filter: drop-shadow(0 1px 0 rgba(90, 60, 10, .55)) drop-shadow(0 6px 10px rgba(60, 40, 10, .28)); }
.b1__tl { position: absolute; top: 27%; }
.b1__tl--l { left: var(--gut); }
.b1__tl--r { right: var(--gut); text-align: right; }
.b1__tl--r .ln { margin-left: auto; margin-right: 0; }
.b1__tl .ln { margin-inline: 0; }
.b1__title .ln__bar { background: var(--gold); }
.b1__sub { display: block; margin-top: 18px; font: 600 clamp(13px, 1vw, 16px)/1.45 var(--sans); letter-spacing: .01em; text-transform: none; color: var(--papyrus-ink); max-width: 26ch; }
.b1__tl--r .b1__sub { margin-left: auto; }
.b1.is-blown .b1__title { visibility: hidden; }
.b1__gl { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.b1.is-gl .b1__gl { visibility: visible; }
.b1.is-gl .b1__scene { visibility: hidden; }
.b1__props { position: absolute; right: 6%; bottom: 1%; width: 21vw; max-width: none; aspect-ratio: 900 / 809; object-fit: cover; object-position: left; }
.b1__grains { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.b1__widget { position: absolute; left: var(--gut); bottom: 70px; display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; font: 500 12px/1.45 var(--sans); color: var(--papyrus-ink); }
.b1__widget > p { grid-column: 2; }
.b1__widget > p + p { font-weight: 600; }
.b1__widget .mark { grid-column: 1; grid-row: 1 / 4; font-size: 50px; }
.b1__widget-t { font: 700 16px/1.1 var(--serif); margin-bottom: 3px; }
.b1__widget b { font-weight: 700; }
[data-ink] { transition: color .5s; }
[data-ink].is-night { color: var(--cream); }
.b1__hint { position: absolute; right: var(--gut); top: 66%; font: 600 12px/1 var(--sans); opacity: .55; transition: opacity .6s, color .5s; }
.b1__hint.is-gone { opacity: 0; }
.b1__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 22px; display: flex; justify-content: space-between; font: 600 12px/1.4 var(--sans); }

.b1__sig { position: absolute; left: 50%; top: 52%; width: min(64vw, 880px); transform: translate(-50%, -50%) rotate(-6deg); color: var(--gold); pointer-events: none; }
.b1__sig svg { width: 100%; height: auto; overflow: visible; }
.b1__sig svg { filter: drop-shadow(0 2px 3px rgba(13, 10, 8, .9)) drop-shadow(0 0 1px rgba(13, 10, 8, 1)); }
.b1__sig path { stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; }
/* the name under the signature comes in once the pen has finished */
.b1__sigsub { margin-top: 1%; text-align: right; padding-right: 6%; font: 600 clamp(18px, 1.8vw, 28px)/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 2px 4px rgba(13, 10, 8, .9); opacity: clamp(0, (var(--sk, 0) - .85) * 7, 1); }

/* ---------- Manifesto ---------- */
.mani { position: relative; z-index: 1; padding: clamp(80px, 10vw, 150px) var(--gut) clamp(110px, 14vw, 200px); text-align: center; }
.mani__badge { display: grid; justify-items: center; gap: 10px; margin-bottom: clamp(40px, 5vw, 72px); font: 600 12px/1 var(--sans); }
.mani__badge .mark { font-size: 54px; color: var(--gold); }
.mani__badge::after { content: ""; width: 44px; height: 3px; background: var(--gold); margin-top: 6px; }
.mani__h { font: 900 min(6vw, 100px)/.98 var(--sans); letter-spacing: -.015em; text-transform: uppercase; color: var(--cream); }
.mani__h em { font: 700 1em/1 var(--serif); letter-spacing: 0; color: var(--gold); }
.ln { display: block; position: relative; width: fit-content; margin-inline: auto; }
.js [data-fx="gild"] .ln__in, .js [data-title] .ln__in { opacity: 0; }
.ln__bar { position: absolute; inset: .02em -.06em; background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.after { height: 60vh; display: grid; place-items: center; background: var(--night); font: 600 14px/1 var(--sans); }

@media (max-width: 760px) {
  .hdr { padding: 12px 16px; gap: 12px; }
  .hdr__nav { display: none; }
  .hdr__sound { margin-left: auto; }
  .hdr__brand .mark { font-size: 38px; }
  .hdr__brand b { font-size: 14px; letter-spacing: .16em; }
  .hdr__brand small { font-size: 12px; }
  .b1 { height: 300vh; }
  .b1__marq { font-size: 64px; }
  .b1__sphinx { height: auto; width: 230%; margin-left: -115%; bottom: 2%; }
  .b1__dune--back { width: 260%; left: -80%; bottom: 13%; }
  .b1__dune--front { height: 21%; left: -30%; right: -30%; }
  .b1__title { font-size: 11.5vw; text-align: center; }
  .b1__tl, .b1__tl--r { position: static; display: block; text-align: center; }
  .b1__tl:first-child { padding-top: 15vh; }
  .b1__tl .ln, .b1__tl--r .ln { display: inline-block; margin: 0 .12em; }
  .b1__tl .b1__sub { display: block; margin: 8px auto 0; font-size: 12px; max-width: 34ch; }
  .b1__widget { display: none; }
  .b1__props { width: 42vw; right: 2%; bottom: 1%; }
  .b1__hint { top: auto; bottom: 64px; right: 16px; }
  .b1__foot { flex-direction: column; gap: 2px; bottom: 16px; }
  .b1__sig { width: 92vw; }
  .mani__h { font-size: 6.9vw; }
}
@media (prefers-reduced-motion: reduce) { .marq { animation: none; } }