/*
  Joveyra — shared styles

  Grounds   night (navy) · paper (pale, engraved ink) · ember (copper on black)
  Type      Felix Titling — headings and the wordmark
            IBM Plex Serif Light — everything that is read
            Hanken Grotesk — interface: navigation, counters, address, controls
  Movement  each section has one choreography, driven by scroll (see site.js)
*/
@font-face { font-family: "Felix Titling"; src: url("../fonts/FelixTitling.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBMPlexSerif-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --night:   #050a22;
  --night-2: #0b1440;
  --paper:   #eaebf0;
  --ink:     #0b1132;
  --ink-2:   #3b4472;
  --ember:   #120805;
  --copper:  #c8702f;
  --ivory:   #f3e8da;
  --vellum:  #e6e8f1;
  --mist:    #b9bfdc;
  --hatch:   #4c5ef2;

  --display: "Felix Titling", "Trajan Pro", "Cinzel", "Times New Roman", serif;
  --body:    "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  --ui:      "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-body:  clamp(1.0625rem, .98rem + .3vw, 1.25rem);
  --fs-lead:  clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
  --fs-h2:    clamp(2rem, 1.2rem + 2.6vw, 4rem);
  --fs-h1:    clamp(3.2rem, 1rem + 8.4vw, 11rem);

  --gutter: clamp(20px, 5vw, 80px);
  --radius: clamp(18px, 2.2vw, 32px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--night); color: var(--vellum);
  font-family: var(--body); font-weight: 300; font-size: var(--fs-body); line-height: 1.7;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--hatch); color: #fff; }
:focus-visible { outline: 1px solid var(--copper); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1.08; }
.h2 { font-size: var(--fs-h2); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.copy { text-wrap: pretty; }
.wrap {
  width: 100%;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* split text: each word is masked so it can rise into place */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- grounds ---------- */
.night { background: var(--night); color: var(--vellum); }
.paper { background: var(--paper); color: var(--ink); }
.ember {
  color: var(--ivory);
  background:
    radial-gradient(60% 45% at 80% 30%, rgba(200, 104, 40, .38), rgba(200, 104, 40, 0) 70%),
    radial-gradient(50% 50% at 10% 75%, rgba(140, 62, 22, .42), rgba(140, 62, 22, 0) 72%),
    radial-gradient(90% 35% at 50% 100%, rgba(84, 30, 10, .7), rgba(84, 30, 10, 0) 80%),
    linear-gradient(180deg, #0d0604 0%, #1c0c05 45%, #2a1307 70%, #0b0503 100%);
}
/* a section that slides over the one before it: rounded leading edge, its own shadow */
.slide {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--radius));     /* the rounded edge sits over the section before */
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -40px 80px -20px rgba(0, 0, 0, .55);
}

/* grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("../img/grain.png") repeat; background-size: 128px 128px;
}

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: grid; place-items: center;
}
.loader video {
  opacity: 0;
  /* the film's frame dissolves at its edges: no rectangle, no rounding */
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 1.2%, rgba(0,0,0,.8) 2.6%, #000 4%, #000 96%, rgba(0,0,0,.8) 97.4%, rgba(0,0,0,.35) 98.8%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 1.2%, rgba(0,0,0,.8) 2.6%, #000 4%, #000 96%, rgba(0,0,0,.8) 97.4%, rgba(0,0,0,.35) 98.8%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
          mask-composite: intersect;
  height: min(68vh, 130vw); width: auto; aspect-ratio: 9 / 16; translate: 0 -4.5vh;      /* sits a little above the centre; its shape known from the first frame */
  mix-blend-mode: screen;                     /* the film's black falls away; only the flowers and the grid remain */
}
.loader .count {
  position: absolute; left: 50%; bottom: max(7vh, 40px); transform: translateX(-50%);
  font: 500 12px/1 var(--ui); letter-spacing: .08em; color: var(--mist);
  padding: 10px 22px; font-variant-numeric: tabular-nums;
}
.loader .count::before, .loader .count::after {      /* corner brackets */
  content: ""; position: absolute; top: 0; bottom: 0; width: 8px;
  border: 1px solid rgba(185, 191, 220, .55);
}
.loader .count::before { left: 0; border-right: 0; }
.loader .count::after  { right: 0; border-left: 0; }
.is-loaded .loader { pointer-events: none; }

/* ---------- navigation ---------- */
.nav {
  position: fixed; z-index: 80; left: 50%; top: max(18px, env(safe-area-inset-top, 0px));
  transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px;
  background: rgba(10, 16, 48, .5); border: 1px solid rgba(230, 232, 241, .14);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  font: 500 13px/1 var(--ui); letter-spacing: .01em;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), background .5s, border-color .5s, color .5s;
}
.nav { visibility: hidden; }
.is-loaded .nav { transform: translate(-50%, 0); visibility: visible; }
.is-loaded .nav.is-away { transform: translate(-50%, -160%); }
.nav a { padding: 9px 15px; border-radius: 999px; color: rgba(230, 232, 241, .78); transition: background .25s, color .25s; white-space: nowrap; }
.nav a:hover { color: #fff; background: rgba(230, 232, 241, .08); }
.nav a[aria-current="page"] { background: var(--copper); color: #160903; }
.nav.on-paper { background: rgba(234, 235, 240, .62); border-color: rgba(11, 17, 50, .12); }
.nav.on-paper a { color: rgba(11, 17, 50, .72); }
.nav.on-paper a:hover { color: var(--ink); background: rgba(11, 17, 50, .06); }
.nav.on-paper a[aria-current="page"] { color: #160903; }

/* ---------- cursor: a small ring that is the pointer; a scroll hint when the page is still ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none;
  width: 0; height: 0; opacity: 0;
  color: #f3e8da; transition: opacity .3s, color .35s;      /* no blending: it costs the page nothing while scrolling */
}
.cursor.is-on { opacity: 1; }
.cursor.on-paper { color: #0b1132; }
.cursor .ring {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 9px;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  /* every change of shape is a glide: the ring becomes the capsule and returns to a ring */
  transition: width .55s cubic-bezier(.65, 0, .35, 1), height .55s cubic-bezier(.65, 0, .35, 1), left .55s cubic-bezier(.65, 0, .35, 1),
    top .55s cubic-bezier(.65, 0, .35, 1), border-radius .55s cubic-bezier(.65, 0, .35, 1), transform .45s cubic-bezier(.2, .8, .2, 1), border-width .3s;
}
.cursor .ring::after { content: ""; position: absolute; left: calc(50% - 2px); top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: transform .6s cubic-bezier(.33, 0, .25, 1), opacity .3s; }   /* placed exactly on the centre line */
.cursor .label {
  position: absolute; left: 50%; top: 18px; translate: -50% 0; white-space: nowrap;
  font: 500 10px/1 var(--ui); letter-spacing: .06em; opacity: 0; transform: translateY(-4px);
  transition: opacity .35s, transform .35s, top .55s cubic-bezier(.65, 0, .35, 1);
}
/* the scroll hint: a slim upright capsule, a standard size, its dot nodding down twice and coming softly to rest */
.cursor.is-hint .ring { left: -9px; top: -15px; width: 18px; height: 30px; border-radius: 9px; border-width: 1.4px; transform: none; }
.cursor.is-hint .ring::after { animation: hint 3s .45s both 1; }
.cursor.is-hint .label { opacity: 1; transform: none; top: 23px; font-size: 11px; }
.cursor.is-link .ring { transform: scale(2.2); border-width: 1px; }
.cursor.is-link .ring::after { opacity: 0; }
@keyframes hint {
  0%   { transform: translateY(-4px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  26%  { transform: translateY(4px);  animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  50%  { transform: translateY(-4px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76%  { transform: translateY(4px);  animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: translateY(-1px); }
}
.is-autoscroll .cursor .ring { transform: scale(1.4); }

/* ---------- pill button ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  font: 500 14px/1 var(--ui); letter-spacing: .01em;
  background: var(--ink); color: var(--paper);
  transition: background .25s, transform .25s;
}
.pill:hover { background: var(--hatch); }

/* ---------- footer (address + links) ---------- */
.foot { padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 72px); text-align: center; }
.foot .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; font: 500 13px/1 var(--ui); }
.foot .links a { padding: 9px 15px; border-radius: 999px; color: rgba(243, 232, 218, .7); transition: background .25s, color .25s; }
.foot .links a:hover { color: var(--ivory); background: rgba(243, 232, 218, .08); }
.foot .links a[aria-current="page"] { background: var(--copper); color: #160903; }
.address {
  display: inline-block; margin-top: clamp(22px, 3vw, 36px);
  font: 400 clamp(1.75rem, .6rem + 4.6vw, 5.25rem)/1.05 var(--ui); letter-spacing: -.02em;
  color: var(--ivory); white-space: nowrap; user-select: all;
}
.address .ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.address .ch > span { display: inline-block; will-change: transform; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ---------- scrollbar ---------- */
.has-bar { scrollbar-width: none; }
.has-bar::-webkit-scrollbar { display: none; }
.bar-track { position: fixed; z-index: 92; top: 0; right: 0; bottom: 0; width: 14px; opacity: 0; transition: opacity .5s; }
.bar-track.is-on, .bar-track:hover { opacity: 1; }
.bar-thumb {
  position: absolute; right: 4px; top: 0; width: 4px; border-radius: 4px;
  background: rgba(150, 156, 184, .55); box-shadow: 0 0 0 .5px rgba(5, 10, 34, .25); transition: width .25s, right .25s, background .25s;
}
.bar-track:hover .bar-thumb, .bar-track.is-drag .bar-thumb { width: 7px; right: 3px; background: rgba(230, 232, 241, .7); }

/* ---------- address: set like a signature. Serif letters rise, then a copper hairline is drawn out from the centre ---------- */
.address {
  position: relative; display: inline-block; padding-bottom: .32em;
  font: 300 clamp(1.7rem, .9rem + 2.8vw, 3.6rem)/1.1 var(--body); letter-spacing: .005em;
  color: var(--ivory); white-space: nowrap; transition: color .6s;
}
.address::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(200,112,47,0), var(--copper) 18%, var(--copper) 82%, rgba(200,112,47,0));
  transform: scaleX(0); transition: transform 1.6s cubic-bezier(.65, 0, .2, 1);
}
.address.is-drawn::after { transform: scaleX(1); }
.address .ch > span { transition: color .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.address:hover .ch > span { color: #e9a874; }
.rm .address::after { transform: scaleX(1); }

/* leaving a page: it sinks to black */
.leave { position: fixed; inset: 0; z-index: 200; background: #000; opacity: 0; pointer-events: all; }

/* the site's pictures, films and words are not for taking */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, video, canvas, svg { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
[role="link"] { cursor: pointer; }