/* Barnat Labs studio page: a colour journey. Each full-screen scene repaints the whole page in
   its own colours as it reaches the middle of the screen (see the script in the page). */
:root { --bg: #0e0d0c; --fg: #f3ece0; --accent: #9aabff; --serif: 'Fraunces', Georgia, serif; --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--sans); transition: background-color .9s ease, color .9s ease; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Fixed chrome */
.top { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(16px, 4vw, 44px); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 22px/1 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 30; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent); }
.hello-link { font-weight: 700; font-size: 15px; text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--fg) 35%, transparent); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); }
.hello-link:hover { border-color: var(--fg); }
.dots { position: fixed; right: clamp(14px, 2.4vw, 32px); top: 50%; translate: 0 -50%; z-index: 10; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dots a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dots a span { opacity: 0; translate: 6px 0; transition: opacity .25s ease, translate .25s ease; }
.dots a:hover span, .dots a[aria-current] span { opacity: .85; translate: 0 0; }
.dots a::after { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg); transition: background-color .3s ease, scale .3s ease; }
.dots a[aria-current]::after { background: var(--fg); scale: 1.25; }
@media (max-width: 1024px) { .dots a span { display: none; } }
@media (max-width: 760px) { .dots { display: none; } }

/* Scenes (without JavaScript each scene simply keeps its own colours) */
.scene { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 110px clamp(18px, 6vw, 80px) 90px; text-align: center; overflow: hidden; background: var(--scene-bg); color: var(--scene-fg); }
.js .scene { background: transparent; color: inherit; }
.inner { position: relative; z-index: 2; max-width: 920px; }
.eyebrow, .k { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .72; margin: 0 0 22px; }
#intro .inner { max-width: 1160px; }
h1 { font: 380 clamp(46px, 7.8vw, 120px)/.98 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.025em; margin: 0 0 28px; text-wrap: balance; }
h1 em { font-style: italic; font-weight: 300; color: var(--accent); transition: color .9s ease; }
.sub { font-size: clamp(18px, 1.8vw, 22px); opacity: .8; margin: 0 auto; max-width: 30em; }
.w { display: inline-block; opacity: 0; translate: 0 .5em; filter: blur(6px); transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease; transition-delay: calc(var(--i) * 110ms + 150ms); }
.in .w { opacity: 1; translate: 0 0; filter: none; }
.cue { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; opacity: .7; }
.cue i { width: 1.5px; height: 46px; background: linear-gradient(var(--fg), transparent); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

.watermark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 700 clamp(120px, 26vw, 420px)/1 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.04em; white-space: nowrap; opacity: .06; pointer-events: none; user-select: none; z-index: 1; }
.app-icon { position: relative; width: clamp(140px, 17vw, 220px); aspect-ratio: 1; margin: 0 auto 34px; }
.app-icon img { position: relative; width: 100%; height: 100%; border-radius: 23%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); z-index: 1; }
.app-icon::before { content: ''; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 62%); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { scale: 1.12; opacity: .75; } }
h2 { font: 400 clamp(56px, 9vw, 120px)/.95 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.03em; margin: 0 0 12px; }
.tag { font: italic 300 clamp(24px, 3vw, 36px)/1.2 var(--serif); margin: 0 0 18px; }
.desc { max-width: 34em; margin: 0 auto 30px; opacity: .82; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.pill { padding: 10px 18px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); font-size: 14px; font-weight: 700; }
.btn { padding: 12px 22px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .2s ease, background-color .9s ease, color .9s ease; }
.btn:hover { transform: translateY(-2px); }
.rise > * { opacity: 0; translate: 0 28px; transition: opacity .9s ease, translate 1s cubic-bezier(.2, .7, .2, 1); }
.rise > *:nth-child(2) { transition-delay: .08s; } .rise > *:nth-child(3) { transition-delay: .16s; } .rise > *:nth-child(4) { transition-delay: .24s; } .rise > *:nth-child(5) { transition-delay: .32s; } .rise > *:nth-child(6) { transition-delay: .4s; }
.in .rise > * { opacity: 1; translate: 0 0; }

/* Goldmend: the game's own linen table, a gold seam and its artworks rocking at the sides */
#goldmend::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(255, 226, 170, .09), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 45%, rgba(17, 15, 13, .85) 100%),
    repeating-linear-gradient(0deg, rgba(75, 65, 56, .38) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(75, 65, 56, .3) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 11px); }
#goldmend.active::before { opacity: 1; }
.seam { position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: calc(50% - 80px); height: 160px; pointer-events: none; z-index: 0; }
.seam path { fill: none; stroke: #e3c27a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; transition: stroke-dashoffset 2.6s cubic-bezier(.5, 0, .2, 1) .3s; filter: drop-shadow(0 0 6px rgba(227, 194, 122, .6)); }
.in .seam path { stroke-dashoffset: 0; }
/* Above the content layer so the seam behind the icon passes behind the artworks; they never overlap the text. */
.relics { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.relic { position: absolute; top: var(--y); width: var(--w); opacity: 0; translate: var(--from) 0; transition: opacity 1.2s ease, translate 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--in); }
.relic .par { transform: translate(calc(var(--mx, 0) * var(--d) * -36px), calc(var(--my, 0) * var(--d) * -24px)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.relic.l { left: var(--x); --from: -60px; } .relic.r { right: var(--x); --from: 60px; }
.relic.down { top: auto; bottom: var(--y); }
.in .relic { opacity: 1; translate: 0 0; }
.relic .bob { animation: bob calc(var(--t) * 1.4) ease-in-out var(--s) infinite; }
.relic img { width: 100%; transform-origin: 50% 88%; animation: sway var(--t) ease-in-out var(--s) infinite; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .55)); }
@keyframes sway { 0%, 100% { rotate: calc(var(--tilt, 0deg) - 4deg); } 50% { rotate: calc(var(--tilt, 0deg) + 4deg); } }
@keyframes bob { 0%, 100% { translate: 0 -7px; } 50% { translate: 0 7px; } }
@media (max-width: 1180px) { .relic.far { display: none; } }
@media (max-width: 1024px) { .relic { width: calc(var(--w) * .68); } .relic.l { left: calc(var(--x) - 2%); } .relic.r { right: calc(var(--x) - 2%); } }
@media (max-width: 760px) {
  .relic.mid { display: none; }
  .relic { width: calc(var(--w) * .55); }
  .relic.l { left: calc(var(--x) - 6%); } .relic.r { right: calc(var(--x) - 6%); }
  .relic.up { top: 15%; } .relic.down { bottom: 2%; }
}

.mystery { width: clamp(130px, 15vw, 190px); aspect-ratio: 1; margin: 0 auto 34px; border-radius: 23%; border: 2.5px dashed currentColor; display: grid; place-items: center; font: italic 300 clamp(70px, 8vw, 110px)/1 var(--serif); animation: breathe 4s ease-in-out infinite; }

.principles { display: grid; gap: clamp(26px, 4vw, 44px); text-align: left; max-width: 820px; margin: 0 auto; }
.principles div { display: grid; grid-template-columns: auto 1fr; gap: 6px clamp(18px, 3vw, 36px); align-items: baseline; border-top: 1.5px solid color-mix(in srgb, currentColor 25%, transparent); padding-top: 18px; }
.principles b { font: 300 clamp(18px, 2vw, 22px)/1 var(--serif); opacity: .6; grid-row: span 2; }
.principles h3 { font: 400 clamp(34px, 5vw, 64px)/1 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.02em; margin: 0; }
.principles p { margin: 0; opacity: .75; max-width: 32em; }

.say { display: inline-flex; align-items: baseline; gap: .25em; font: italic 300 clamp(72px, 13vw, 190px)/1 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.03em; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 3px no-repeat; transition: background-size .5s ease; padding-bottom: .06em; }
.say:hover, .say:focus-visible { background-size: 100% 3px; }
.say span { font-style: normal; font-size: .6em; transition: translate .3s ease; }
.say:hover span { translate: .15em 0; }
footer.site { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 22px; padding: 18px clamp(16px, 4vw, 44px) 24px; font-size: 13px; opacity: .6; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.site a { text-decoration: none; } footer.site a:hover { text-decoration: underline; }
@media (max-width: 600px) { .scene { padding-top: 96px; } footer.site { position: static; margin-top: 60px; padding: 0; justify-content: center; } }

/* Not found */
.lost h1 { font-size: clamp(52px, 9vw, 120px); }
.lost .btn { display: inline-block; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  body { transition-duration: .01s; } html { scroll-behavior: auto; }
  .w, .rise > *, .relic { transition: none !important; opacity: 1 !important; translate: 0 0 !important; filter: none !important; }
  .seam path { transition: none; stroke-dashoffset: 0; }
  .app-icon::before, .mystery, .cue i, .relic img, .relic .bob { animation: none; }
}