/* ==========================================================================
   Boodka — AI photo booth by DuneForge
   The night panel of the DuneForge comic, opened up into a whole page:
   a booth at night, a rose curtain, a camera flash, a strip of photos.
   Palette and type are shared with duneforge.ae (tokens.css there).
   ========================================================================== */

/* ---- Brand fonts, self-hosted (latin + cyrillic) ------------------------ */
@font-face {
  font-family: 'Dela Gothic One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/dela-gothic-one-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Dela Gothic One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/dela-gothic-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shantell Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/shantell-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Shantell Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/shantell-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arabic faces of the DuneForge family: Lalezar (display), Readex Pro (text), Marhey (lettering).
   The browser fetches them only when Arabic glyphs are on the page. */
@font-face {
  font-family: 'Lalezar'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/lalezar-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Readex Pro'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/readex-pro-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Marhey'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/marhey-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* Metric-matched local fallbacks (measured for duneforge.ae), so lines don't
   jump when the web fonts swap in. Latin and Cyrillic are tuned separately. */
@font-face {
  font-family: "Shantell Fallback"; font-weight: 300 450; font-display: swap;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 110.5%; ascent-override: 92.3%; descent-override: 29%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 300 450; font-display: swap;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 106.5%; ascent-override: 95.8%; descent-override: 30%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 451 800; font-display: swap;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold");
  size-adjust: 108.5%; ascent-override: 94%; descent-override: 29.5%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 451 800; font-display: swap;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold");
  size-adjust: 105.5%; ascent-override: 96.7%; descent-override: 30.3%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}
@font-face {
  font-family: "Dela Fallback"; font-weight: 400; font-display: swap;
  src: local("Arial Black"), local("Arial-Black");
  size-adjust: 104%; ascent-override: 111.5%; descent-override: 27.9%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: "Dela Fallback"; font-weight: 400; font-display: swap;
  src: local("Arial Black"), local("Arial-Black");
  size-adjust: 106%; ascent-override: 109.4%; descent-override: 27.4%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --night:       #150F3A;  /* inside the booth */
  --night-2:     #231A55;
  --night-line:  #6E5BA8;
  --ink:         #241A4A;  /* outlines, text on paper */
  --ink-soft:    #4A3F75;
  --paper:       #FFF3DF;  /* panels */
  --paper-white: #FFFCF5;  /* photo paper */
  --paper-dim:   #D8CFF2;  /* body text on night, 12:1 */
  --lilac:       #9E86D1;  /* small print on night, 5.8:1 */
  --molten:      #FFD25E;  /* the flash, caption boxes */
  --rose:        #E06A86;  /* the curtain */
  --star:        255 240 194;

  /* Latin/Cyrillic face first, then the Arabic face: the browser falls back per glyph */
  --font-display: "Dela Gothic One", "Dela Fallback", "Lalezar", "Arial Black", system-ui, sans-serif;
  --font-text:    "Shantell Sans", "Shantell Fallback", "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --font-letter:  "Shantell Sans", "Shantell Fallback", "Marhey", "Segoe UI", system-ui, sans-serif;

  --fs-sm:   0.875rem;
  --fs-base: 1.125rem;
  --fs-md:   1.3125rem;
  --fs-lg:   1.5rem;
  --fs-h2:   clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --fs-tagline: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-masthead: clamp(3.25rem, 15.5vw, 7rem);

  --curtain-h: clamp(42px, 4.4vw, 60px);
  --bar-h:     calc(var(--curtain-h) + 60px);
  --booth-pt:  clamp(8px, 2.5vh, 32px);
  --page-pad:  clamp(16px, 4vw, 56px);
  --gutter:    clamp(10px, 1.6vw, 22px);
  --container: 1320px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.3, 1.6, .5, 1);

  /* where the booth lamp and the camera flash sit: mirrored for right-to-left */
  --lamp-x:  72%;
  --flash-x: 74%;
}
[dir="rtl"] { --lamp-x: 28%; --flash-x: 26%; }

/* Arabic: a touch more size and leading, never letter-spacing (as on duneforge.ae) */
:lang(ar) { --fs-base: 1.1875rem; }
html:lang(ar) body { line-height: 1.8; }
:lang(ar) .tagline { line-height: 1.4; }
:lang(ar) .section-title { line-height: 1.3; }
:lang(ar) .booth__text,
:lang(ar) .worlds__text,
:lang(ar) .maker__about p { line-height: 1.75; }

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.i18n-pending body { visibility: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  font: 400 var(--fs-base)/1.55 var(--font-text);
  background-color: var(--night);
  /* A sparse starfield tile, the same night as the DuneForge desert */
  background-image:
    radial-gradient(1.6px 1.6px at 7% 12%,  rgb(var(--star) / .9)  50%, transparent 56%),
    radial-gradient(1px 1px     at 23% 41%, rgb(var(--star) / .7)  50%, transparent 56%),
    radial-gradient(1.8px 1.8px at 38% 8%,  rgb(var(--star) / .8)  50%, transparent 56%),
    radial-gradient(1.2px 1.2px at 52% 66%, rgb(var(--star) / .55) 50%, transparent 56%),
    radial-gradient(1.5px 1.5px at 69% 27%, rgb(var(--star) / .8)  50%, transparent 56%),
    radial-gradient(1px 1px     at 81% 83%, rgb(var(--star) / .7)  50%, transparent 56%),
    radial-gradient(1.6px 1.6px at 93% 49%, rgb(var(--star) / .75) 50%, transparent 56%),
    radial-gradient(1.1px 1.1px at 14% 78%, rgb(var(--star) / .6)  50%, transparent 56%),
    radial-gradient(1.3px 1.3px at 61% 94%, rgb(var(--star) / .65) 50%, transparent 56%);
  background-size: 760px 760px;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--molten); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: -60px;
  inset-inline-start: 12px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---- The curtain and the bar under it ----------------------------------- */
.curtain {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: var(--curtain-h);
  background: url("../art/curtain.svg") repeat-x 0 0 / auto 100%;
}

.bar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--curtain-h) + 12px) var(--page-pad) 0;
}
.bar__home { display: block; border-radius: 50%; }
.bar__home img { width: 44px; height: 44px; }

.lang {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--night-line);
  border-radius: 999px;
  background: rgb(35 26 85 / .75);
}
.lang button {
  min-width: 44px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--paper-dim);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* "ع" sits low in its em box: the bottom padding lifts it to the optical centre (as in
   duneforge.ae base.css). English and Russian pages draw it with a system face that has
   Arabic, so they never download an Arabic web font for one letter. */
html[lang] .lang button[data-set-lang="ar"] {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  padding-block: 0 0.62em;
}
html:not([lang="ar"]) .lang button[data-set-lang="ar"] {
  font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, Arial, sans-serif;
  padding-block: 0 0.46em;
}
/* Touch screens: 44px targets */
@media (pointer: coarse) {
  .lang button { min-height: 44px; }
}

/* ---- The booth (hero) ---------------------------------------------------- */
.booth {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "masthead" "strip" "copy";
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--booth-pt) var(--page-pad) clamp(56px, 9vh, 104px);
}
/* The booth lamp: a warm pool of light where the strip hangs */
.booth::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: calc(-1 * var(--bar-h)) 0;
  inset-inline: 30% 0;
  background: radial-gradient(ellipse at var(--lamp-x) 30%, rgb(255 210 94 / .13), transparent 62%);
  pointer-events: none;
}

/* The name stays in Latin letters, left to right, in every language;
   justify-self puts it on the reading side of the page */
.masthead {
  grid-area: masthead;
  justify-self: start;
  position: relative;
  isolation: isolate;
  margin-block-start: clamp(12px, 4vh, 44px);
  color: var(--paper);
  font: 400 var(--fs-masthead)/0.92 var(--font-display);
  letter-spacing: 0.005em;
  white-space: nowrap;
  /* the comic print slips a little: rose ink under paper */
  text-shadow: 0.05em 0.05em 0 var(--rose);
}
/* The second O is the flash bulb of the booth camera */
.masthead__lens { position: relative; display: inline-block; }
.masthead__lens::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 1.55em;
  height: 1.55em;
  translate: -50% -50%;
  background: url("../art/flash-o.svg") center / contain no-repeat;
}

.booth__copy { grid-area: copy; max-width: 36rem; margin-block-start: 28px; }
.tagline {
  color: var(--paper);
  font-family: var(--font-letter);
  font-size: var(--fs-tagline);
  font-weight: 700;
  line-height: 1.12;
}
.tagline span { display: block; }
.booth__text {
  max-width: 50ch;
  margin-block-start: 16px;
  color: var(--paper-dim);
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* A comic caption box: narration, set on molten gold */
.caption-box {
  display: inline-block;
  padding: 7px 14px 8px;
  border: 2px solid var(--ink);
  background: var(--molten);
  color: var(--ink);
  font-family: var(--font-letter);
  font-weight: 600;
  line-height: 1.35;
  rotate: -1.5deg;
}
[dir="rtl"] .caption-box { rotate: 1.5deg; }
.booth__status { margin-block-start: 28px; }
.booth__actions { margin-block-start: 24px; }

.btn {
  --btn-shadow: var(--rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px 13px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-white);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--btn-shadow);
  transition: translate 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--btn-shadow); }
.btn:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--btn-shadow); }
.btn--small { --btn-shadow: var(--ink); padding: 8px 14px 9px; font-size: 0.9375rem; box-shadow: 3px 3px 0 var(--btn-shadow); }

/* The strip: on phones a 2x2 sheet, on wide screens it hangs from the curtain */
.strip {
  grid-area: strip;
  position: relative;
  z-index: 3;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(100%, 440px);
  margin-block-start: 28px;
  padding: 10px 10px 38px;
  border: 3px solid var(--ink);
  background: var(--paper-white);
  rotate: -2deg;
  box-shadow: 0 22px 44px rgb(6 3 24 / .55);
}
[dir="rtl"] .strip { rotate: 2deg; }
.strip__frame {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--night-2);
}
.strip__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.strip__stamp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  color: var(--ink);
  font: 400 0.8125rem/1 var(--font-display);
  letter-spacing: 0.04em;
  text-align: center;
}

@media (min-width: 900px) {
  :root { --fs-masthead: clamp(5rem, 9.4vw, 8rem); }
  /* The strip hangs through the bar on the far side, so the bar keeps to the reading side */
  .bar { justify-content: flex-start; gap: 20px; }
  .booth {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "masthead strip" "copy strip";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    padding-inline-end: calc(var(--page-pad) + clamp(16px, 4vw, 72px));
  }
  .strip {
    grid-template-columns: 1fr;
    gap: 10px;
    width: clamp(200px, 18vw, 248px);
    /* pull the strip up so its top edge disappears under the curtain;
       the paper above the first photo is as tall as the curtain, so the photo starts below it */
    margin-block-start: calc(-1 * (var(--bar-h) + var(--booth-pt)));
    padding: calc(var(--curtain-h) + 14px) 12px 40px;
    border-block-start: 0;
    rotate: -3deg;
    transform-origin: 50% 0;
  }
  [dir="rtl"] .strip { rotate: 3deg; }
}

/* ---- How it will work: one comic strip, three panels --------------------- */
.section-title {
  color: var(--paper);
  font: 400 var(--fs-h2)/1.05 var(--font-display);
  text-wrap: balance;
}

.how,
.worlds,
.maker {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.how { margin-block-start: clamp(8px, 3vw, 40px); }

.panels {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--gutter);
  margin-block-start: clamp(24px, 3vw, 36px);
}
.panel {
  position: relative;
  padding: 64px clamp(18px, 2vw, 28px) 26px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.panel__step {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  min-width: 52px;
  padding: 7px 12px 8px;
  border: 3px solid var(--ink);
  background: var(--molten);
  font: 400 1.375rem/1 var(--font-display);
  text-align: center;
}
.panel__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.panel p { margin-block-start: 8px; color: var(--ink-soft); font-size: 1.0625rem; }

/* ---- Worlds: prints taped to the wall ------------------------------------ */
.worlds { margin-block-start: clamp(72px, 10vw, 136px); }
.worlds__text {
  max-width: 48ch;
  margin-block-start: 12px;
  color: var(--paper-dim);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.prints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(34px, 4vw, 52px) clamp(16px, 2.6vw, 36px);
  margin-block-start: clamp(44px, 5vw, 64px);
}
.print {
  --tilt: -2.5deg;
  position: relative;
  width: clamp(148px, 16.5vw, 212px);
  padding: 10px 10px 0;
  border: 3px solid var(--ink);
  background: var(--paper-white);
  rotate: var(--tilt);
  box-shadow: 0 16px 32px rgb(6 3 24 / .45);
}
.print:nth-child(2) { --tilt: 2deg; }
.print:nth-child(3) { --tilt: -1deg; }
.print:nth-child(4) { --tilt: 2.5deg; }
.print:nth-child(5) { --tilt: -2deg; }
/* a strip of tape holding each print to the wall */
.print::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 60px;
  height: 24px;
  translate: -50% 0;
  rotate: calc(var(--tilt) * -2);
  background: rgb(255 210 94 / .82);
}
.print img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); }
.print__caption {
  display: block;
  padding: 9px 2px 11px;
  color: var(--ink);
  font-family: var(--font-letter);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.worlds__note {
  margin-block-start: clamp(36px, 4vw, 52px);
  color: var(--lilac);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---- Who makes Boodka ---------------------------------------------------- */
.maker { margin-block-start: clamp(80px, 11vw, 144px); }
.maker__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px clamp(24px, 4vw, 64px);
  padding: clamp(22px, 3vw, 36px);
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.maker__panel :focus-visible { outline-color: var(--ink); }
.maker__about p { max-width: 46ch; font-size: var(--fs-md); line-height: 1.5; }
.maker__about a { font-weight: 700; text-underline-offset: 3px; }
.maker__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.maker__email {
  border-block-end: 3px solid var(--molten);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.maker__email:hover { border-block-end-color: var(--rose); }
.maker__place { margin-block-start: 10px; color: var(--ink-soft); }

/* ---- Footer: the legal indicia ------------------------------------------ */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 28px var(--page-pad) calc(36px + env(safe-area-inset-bottom));
  color: var(--lilac);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.foot__legal { display: grid; justify-items: end; font-style: normal; text-align: end; }

@media (max-width: 760px) {
  .panels { grid-template-columns: 1fr; }
  .maker__panel { grid-template-columns: 1fr; }
  .foot__legal { justify-items: start; text-align: start; }
}

/* ---- 404: the wrong booth ------------------------------------------------ */
.lost {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(48px, 14vh, 160px) var(--page-pad) 96px;
}
.lost__text { margin-block-start: 16px; color: var(--paper-dim); font-size: var(--fs-md); }
.lost__actions { margin-block-start: 28px; }

/* ---- Toast -------------------------------------------------------------- */
.toast {
  position: fixed;
  z-index: 95;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
  transition: opacity 200ms, translate 200ms var(--ease-out);
}
.toast.is-on { opacity: 1; translate: 0 0; }

/* ---- Mail chooser -------------------------------------------------------
   mail.js is the same file as on duneforge.ae and duneforge.games: on a computer
   a click on any mailto: link opens this balloon (Gmail, Outlook, mail app, copy),
   on a phone the mail app opens as usual. Styled here in the booth's colours. */
.mailpick {
  position: absolute;
  z-index: 96;
  width: min(300px, calc(100vw - 24px));
  padding: 14px 12px 10px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper-white);
  color: var(--ink);
  font-family: var(--font-letter);
  text-align: start;
  box-shadow: 0 4px 0 var(--rose);
  animation: mailpick-in 220ms var(--ease-out);
}
.mailpick.is-above { animation-name: mailpick-in-above; }
@keyframes mailpick-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes mailpick-in-above { from { opacity: 0; transform: translateY(6px); } }
.mailpick :focus-visible { outline-color: var(--ink); }
.mailpick__to {
  margin: 0 0 8px;
  margin-inline-end: 2.4em;
  padding-inline: 6px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.mailpick__email {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  user-select: all;
}
.mailpick__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mailpick__opt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  min-height: 44px;
  padding: 0.45em 0.7em;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.mailpick__opt:hover { background: var(--molten); }
.mailpick__opt svg { width: 20px; height: 20px; flex: none; }
.mailpick__close {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.mailpick__close:hover { background: rgb(36 26 74 / .1); }

.mailpick-toast {
  position: fixed;
  z-index: 95;
  inset-inline: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - 32px);
  margin-inline: auto;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-letter);
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.mailpick-toast.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mailpick { animation: none; }
  .btn, .toast, .mailpick-toast { transition: none; }
}

/* ---- The one orchestrated moment: the booth takes your picture ----------- */
.flash {
  position: fixed;
  z-index: 90;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--flash-x) 16%, rgb(255 252 245 / .95), rgb(255 252 245 / .5) 26%, rgb(255 252 245 / 0) 68%);
}

@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flash 1.1s ease-out 0.35s both; }
  .masthead__lens::before { animation: bulb 0.7s var(--ease-pop) 0.3s both; }
  .strip__frame img { animation: develop 1.6s ease-out 0.45s both; }
  .strip__frame:nth-child(2) img { animation-delay: 0.6s; }
  .strip__frame:nth-child(3) img { animation-delay: 0.75s; }
  .strip__frame:nth-child(4) img { animation-delay: 0.9s; }
}
@keyframes flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bulb {
  from { opacity: 0; scale: 0.2; rotate: -40deg; }
  to   { opacity: 1; scale: 1;   rotate: 0deg; }
}
/* photos come out of the slot washed-out and settle into colour */
@keyframes develop {
  from { filter: brightness(2.2) saturate(0) contrast(0.55); }
  to   { filter: none; }
}