/* Satoshi Variable (Fontshare, ITF Free Font License): daffin's interface face (the kit: 400 for text, 500 for
   labels and actions); 300 for the landing's line, as jaunt.one's. The logo itself is the kit's SVG, never set
   in the face. */
@font-face {
  font-family: "Satoshi";
  font-weight: 300 900;
  font-display: block;
  src: url("fonts/satoshi-variable.woff2") format("woff2");
}

:root {
  --void: #0C0B0B; /* Aperture, dark: bg */
  --starlight: #F1EFEB; /* Aperture, dark: text */
  /* the symbol's vermilion (Aperture, dark: primary #FF573A) */
  --amber: 255 87 58;
  /* the lockup keeps the kit's proportions (geometry.json): the symbol 0.9 of the wordmark's height, the gap
     0.3 of it; the whole lockup 4.83 wordmark heights wide (814/519 x 0.9 + 0.3 + 2297/737). --wm is the
     wordmark's height; --icon the symbol's, which the warm light behind it is sized from */
  --wm: min(112px, 15vmin, calc((100vw - 40px) / 4.83));
  --icon: calc(var(--wm) * .9);
  --u: calc(var(--wm) / 29);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--void);
  color: var(--starlight);
}

body {
  font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

@media (pointer: fine) {
  body, a, button { cursor: none; }
}

main {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px 6vh;
  pointer-events: none;
}

/* a low warm light behind the icon, breathing slowly */
.lockup {
  display: flex;
  align-items: center;
  gap: calc(var(--wm) * .3);
}
.name {
  position: relative;
  display: block;
  height: var(--wm);
  width: auto;
  opacity: 0;
  transform: translateX(calc(var(--u) * -6));
  filter: blur(6px);
  transition: opacity 2s ease .5s, transform 2.6s cubic-bezier(.2, .7, .2, 1) .5s, filter 2.2s cubic-bezier(.2, .7, .2, 1) .5s;
}
.in .name { opacity: 1; transform: none; filter: blur(0); }

.halo { position: relative; }
.halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--icon) * 4);
  height: calc(var(--icon) * 4);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(var(--amber) / .13), rgb(var(--amber) / .04) 45%, transparent);
  opacity: 0;
  transition: opacity 3s ease 1s;
}
.in .halo::before { opacity: 1; animation: breathe 7s ease-in-out 4s infinite; }
@keyframes breathe {
  50% { opacity: .55; }
}

.icon {
  position: relative;
  display: block;
  height: var(--icon);
  width: auto;
  opacity: 0;
  filter: blur(14px);
  transform: scale(.94);
  transition: opacity 2.2s ease, filter 2.4s cubic-bezier(.2, .7, .2, 1), transform 2.8s cubic-bezier(.2, .7, .2, 1);
}
.in .icon { opacity: 1; filter: blur(0); transform: none; }

.line {
  position: relative;
  margin: calc(var(--icon) * .3 + 12px) 0 0;
  font-weight: 300;
  font-size: clamp(16px, 2.3vmin, 22px);
  letter-spacing: .06em;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 2s ease 1.1s, transform 2.4s cubic-bezier(.2, .7, .2, 1) 1.1s;
}
.in .line { opacity: .8; transform: none; }

/* a sheet over the landing (js/sheet.js: html.sheet-on): nothing of its text moves behind it. Its arrival goes
   straight to its end (js/main.js sets the nebul. mark at its own), and under a sheet the text is hidden
   (sheet.css), fading back in its .18 s once the sheet has gone. */
html.sheet-on :is(.name, .icon, .line) { transition: none; }
/* the glow behind the icon too, and from the first sheet on: a sheet closed early does not leave it rising */
html:is(.sheet-on, .sheet-seen) .halo::before { transition: none; }
main { transition: opacity .18s ease; }

#mark {
  position: fixed;
  left: 0;
  pointer-events: none;
}

.nebul {
  position: fixed;
  display: block;
  border-radius: 6px;
  outline: none;
}
.nebul:focus-visible { box-shadow: 0 0 0 1px rgb(238 240 246 / .25); }

/* ------------------------------------------------ the top bar: the logo home; the pricing sheet, early access, the language */

/* On the landing and above an open sheet (above it: its links stay live, and the sheet fits under it, js/main.js
   measuring the room it takes, --top-room); left the logo, right « Tarifs », « Accès anticipé », then the
   page's language (as jaunt.one's, whose owner's words were, 3 November: « à gauche le logo jaunt, les boutons
   Tarifs et Accès Anticipé PUIS la langue »; daffin.one has no early access). Its words in the page's language (js/legal-links.js, js/lang.js), on one line at every width,
   clear of the lockup. They come in early and quietly, under a second after the page (the way to the prices,
   not part of the lockup's arrival). */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: max(12px, calc(env(safe-area-inset-top) + 8px)) max(10px, calc(env(safe-area-inset-right) + 6px)) 0 max(12px, calc(env(safe-area-inset-left) + 8px));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
/* the logo, small: the icon and the name, home; only while a sheet is open (the owner, 4 November: on the
   bare landing, the landing itself says daffin), sliding down from above the screen's edge as the sheet comes
   (.28 s, easing out) and back up as it goes (easing in; « trop brutal on/off » as a fade), unseen and out of
   the focus order without one (under reduced motion: there, or not); over a sheet it closes it (js/sheet.js) */
.home {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  border-radius: 6px;
  color: #eceeea;
  text-decoration: none;
  opacity: .8;
  visibility: hidden;
  transform: translateY(calc(-100% - 28px));
  transition: transform .28s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .28s, opacity .3s ease;
}
html.sheet-up .home { visibility: visible; transform: none; transition: transform .28s cubic-bezier(0, 0, .2, 1), visibility 0s, opacity .3s ease; }
/* (the kit's lockup, small: the wordmark 18 px high, the symbol 0.9 of it, the gap 0.3 of it) */
.home { gap: 5px; }
.home .home-icon { display: block; width: auto; height: 16px; }
.home .home-word { display: block; width: auto; height: 18px; }
html.sheet-up .home:hover, html.sheet-up .home:focus-visible { opacity: 1; }
.home:focus-visible { outline: 1px solid rgb(238 240 246 / .55); outline-offset: 2px; }
.top-links {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}
.ea-open, .pr-link {
  display: block;
  padding: 8px 6px;
  white-space: nowrap;
  border: 0;
  background: none;
  font: 400 13px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  color: var(--starlight);
  text-decoration: none;
  /* (quiet; plain links to their sheets, so they fade in by CSS alone and work without the script) */
  opacity: .5;
  animation: pr-in .6s ease .4s backwards;
  transition: opacity .3s ease;
}
@keyframes pr-in { from { opacity: 0; } }
/* (the underline out of the flow, under the word: every item of the bar centred on one line) */
.ea-open, .pr-link { position: relative; }
.ea-open::after, .pr-link::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ea-open:hover, .ea-open:focus-visible, .pr-link:hover, .pr-link:focus-visible { opacity: 1; transition-delay: 0s; transition-duration: .3s; }
.ea-open:hover::after, .ea-open:focus-visible::after, .pr-link:hover::after, .pr-link:focus-visible::after { transform: none; transform-origin: left; }
/* the keyboard's ring, clear of the underline */
.ea-open:focus-visible, .pr-link:focus-visible { outline: 1px solid rgb(238 240 246 / .55); outline-offset: 2px; border-radius: 4px; }
/* pressed, its sheet still on its way (js/sheet.js: .sheet-pending, html.sheet-wait): lit and underlined at
   once, so a tap never looks dead */
:is(.pr-link, .ea-open).sheet-pending, .foot a.sheet-pending { opacity: 1; transition: none; }
:is(.pr-link, .ea-open).sheet-pending::after, .foot a.sheet-pending::after { transform: none; transition: none; }
html.sheet-wait, html.sheet-wait a, html.lang-switching, html.lang-switching a { cursor: progress; }

/* the page's language (js/lang.js): a quiet globe and the language's own name (its code on a phone), its list
   under it; the one on marked as the sheets' were */
.lang-pick { position: relative; flex: none; animation: pr-in .6s ease .4s backwards; }
.lang-pick summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 4px;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
  font: 400 13px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .06em;
  color: var(--starlight);
  opacity: .5;
  transition: opacity .3s ease;
}
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary::after { content: ""; width: 4px; height: 4px; margin-left: 1px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
/* open: the chevron turns (the list eases in, js/lang.js), as the page's other disclosures */
.lang-pick[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lang-pick ul { transform-origin: top right; }
.lang-pick summary:hover, .lang-pick summary:focus-visible, .lang-pick[open] summary { opacity: 1; }
.lang-pick summary:focus-visible { outline: 1px solid rgb(238 240 246 / .55); outline-offset: 2px; }
.lang-pick .globe { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lang-pick .lp-code { display: none; }
.lang-pick ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 176px;
  max-height: calc(100vh - var(--top-room, 56px) - 16px);
  max-height: calc(100dvh - var(--top-room, 56px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #161514;
  border: 1px solid #34312F;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .45);
  font: 400 13px/1.2 "Satoshi", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.lang-pick li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; color: #BCB8B3; text-decoration: none; }
.lang-pick li a:hover, .lang-pick li a:focus-visible { background: #201E1D; color: #F1EFEB; outline: none; }
.lang-pick li a[aria-current] { color: #F1EFEB; }
.lang-pick li a[aria-current]::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #FF573A; }
/* a short screen (a phone held sideways, 740 x 360): the languages in two columns of six, all of them within
   reach; scrolling the list (max-height above) is the safety net. (Column by column, as the arrows go: the 12
   languages make 6 rows) */
@media (max-height: 520px) {
  .lang-pick ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2px; min-width: 300px; touch-action: pan-y; }
}
/* a top link focused before its fade-in is over (a first Tab at once): shown at once, never focused unseen */
.pr-link:focus-visible, .ea-open:focus-visible, .lang-pick:focus-within { animation: none; }
/* a phone: the language's code for its name; under 360 px, the logo's symbol alone (its link says daffin) */
@media (max-width: 480px) {
  .lang-pick .lp-name { display: none; }
  .lang-pick .lp-code { display: inline; }
}
@media (max-width: 359px) {
  .home .home-word { display: none; }
  .top-links { gap: 0 2px; }
}
/* (the pricing sheet's line where one cannot buy, shown from the first paint, with or without the script, where
   the page says the visitor's zone is closed or sanctioned: html[data-zone], the worker's, then js/pricing.js's
   as the visitor picks another country; sheet.css) */
html:is([data-zone="closed"], [data-zone="sanctioned"]) .sheet .where-note { display: grid; }
html[data-zone="closed"] .sheet .where-note > [data-say="closed"], html[data-zone="sanctioned"] .sheet .where-note > [data-say="sanctioned"] { visibility: visible; }
/* (the pricing sheet's approximate amounts in the visitor's currency: their lines' room kept from the first
   paint where the page says it, html[data-currency], the worker's, then js/pricing.js's; sheet.css) */
html[data-currency] .sheet .fx { display: block; min-height: 1.5em; }
/* (index.html's head: the words held unseen until they are in the page's language) */
html.lang-wait :is(.top-links, main .line, .foot nav) { visibility: hidden; }


/* VHS: grain, and the faintest scanlines */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: screen;
  image-rendering: pixelated;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px);
}

/* ------------------------------------------------ cursor (nebul.earth's) */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity .4s ease;
}
.cursor i {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgb(238 240 246 / .32);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .5s ease;
}
.cursor::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(238 240 246 / .85);
}
.cursor.over i { transform: scale(1.45); border-color: rgb(143 211 214 / .4); }
.cursor.pulse i { animation: pulse .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes pulse {
  from { transform: scale(.4); border-color: rgb(238 240 246 / .9); }
}
.cursor.away { opacity: 0; }
@media (pointer: coarse) {
  .cursor { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fallback {
  position: fixed;
  left: 50%;
  /* above the footer's links (their row, then 30 px) */
  bottom: calc(max(10px, env(safe-area-inset-bottom) + 6px) + 30px);
  transform: translateX(-50%);
  color: var(--starlight);
  text-decoration: none;
  font-size: 22px;
  font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
  .icon, .name, .line, .halo::before { transition-duration: .01s; transition-delay: 0s; }
  .lang-pick summary::after { transition: none; }
  .in .halo::before { animation: none; }
  /* (the logo with a sheet: there or not, as the sheet) */
  .home, html.sheet-up .home { transition: none; }
}

/* ------------------------------------------------ footer: the legal links, a centred row under the nebul. mark */

/* at every width: js/main.js keeps 16 px from the mark's baseline to the links (--lift raises them under a
   baseline set high on a tall screen, or the baseline rises over links set low: a short screen, a second
   row of links). It fades in by CSS alone, so the links are there without the script too. */
.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(max(10px, env(safe-area-inset-bottom) + 6px) + var(--lift, 0px));
  z-index: 5;
  opacity: 0;
  animation: foot-in 1.6s ease 3.6s forwards;
}
@keyframes foot-in { to { opacity: 1; } }
.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.foot a {
  font: 400 12px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  color: var(--starlight);
  text-decoration: none;
  /* .5 as "Early access": 4.7:1 on the night, readable at 11-12 px */
  opacity: .5;
  transition: opacity .3s ease;
}
.foot a::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.foot a:hover, .foot a:focus-visible { opacity: 1; outline: none; }
.foot a:hover::after, .foot a:focus-visible::after { transform: none; transform-origin: left; }
@media (max-width: 720px) {
  .foot nav { gap: 8px 18px; }
  .foot a { font-size: 11px; }
}
@media (max-width: 400px) {
  .foot nav { gap: 8px 14px; }
  .top-links { gap: 4px 4px; }
  .ea-open, .pr-link, .lang-pick summary { font-size: 12px; letter-spacing: .05em; }
}