/*
  traces — shared base styles
  Fonts, design tokens, and resets used by every screen.
  Keep this file and the assets/ folder together.
*/

/* ---------- Fonts ---------- */

/*
  All five custom faces below are Latin-only display/decorative fonts —
  none of them have real Hebrew (or Cyrillic, Arabic, etc.) glyphs. Without
  a unicode-range restriction, a browser still treats a font as "supporting"
  a character it has ANY glyph mapped to — including wrong/placeholder
  glyphs some of these font files define for non-Latin codepoints — so it
  never falls through to the Helvetica/Arial fallback for that character,
  and Hebrew user input (an annotation title, a capture name, etc.) renders
  as garbled, wrong-script-looking glyphs instead of legible Hebrew text.
  This is the standard "latin" unicode-range subset (matches Google Fonts'
  own latin subset definition) — restricting to it makes the browser
  correctly skip these fonts, per character, for anything outside it.
*/
@font-face {
  font-family: "Vito Extended";
  src: url("../assets/fonts/VitoExtended-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Vito Extended";
  src: url("../assets/fonts/VitoExtended-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Vito Wide";
  src: url("../assets/fonts/VitoWide-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Vito Wide";
  src: url("../assets/fonts/VitoWide-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Lumend Blur is used for the handwritten blue polaroid captions.
  Drop LumendBlur-Regular_demo.otf into assets/fonts/ and this rule
  will pick it up automatically; until then a script fallback is used.
*/
@font-face {
  font-family: "Lumend Blur Demo";
  src: url("../assets/fonts/LumendBlur-Regular_demo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lumend Demo";
  src: url("../assets/fonts/Lumend-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lumend Rounded Drawn Demo";
  src: url("../assets/fonts/LumendRoundedDrawn-Regular_demo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */

@font-face {
  font-family: "Narkiss Hebrew";
  src: url("https://use.typekit.net/af/e58500/00000000000000007754e4d6/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  /* HEBREW LETTERS ONLY — Latin text falls through to the site's own faces */
  unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA;
}

@font-face {
  font-family: "Narkiss Hebrew";
  src: url("https://use.typekit.net/af/dbe4c6/00000000000000007754e4d3/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
  /* HEBREW LETTERS ONLY — Latin text falls through to the site's own faces */
  unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA;
}

@font-face {
  font-family: "Narkiss Hebrew";
  src: url("https://use.typekit.net/af/014100/00000000000000007754e4d7/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  /* HEBREW LETTERS ONLY — Latin text falls through to the site's own faces */
  unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA;
}

:root {
  --color-bg: #161616;
  /* shared vertical anchor for the first-run flow screens (onboarding /
     capture-method): the heading is TOP-anchored at this exact distance below
     the top nav on every one of them, so their headings always line up at the
     same height no matter how much content sits underneath. Change it here,
     once, and every screen moves together — never tune them individually. */
  --flow-heading-top: clamp(56px, 12vh, 150px);
  --flow-heading-gap: clamp(28px, 5vh, 60px);
  --color-cream: #f0eeea;
  --color-caption-blue: #0a25b4;
  --color-polaroid: #f0eeea;
  --photo-backdrop: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    linear-gradient(180deg, rgba(29, 29, 61, 0.41), rgba(0, 0, 0, 0.41)),
    #8a8a8f;
  --color-ink-blue: #0a25b4;
  /* "narkiss-hadash-extended" is the Adobe kit's own family name — it sits
     AFTER the Latin faces (whose unicode-range keeps them Latin-only), so it
     can only ever catch Hebrew letters. The pinned "Narkiss Hebrew" faces
     above come first for font-display control; if Adobe rotates their URLs
     or serves a subset without Hebrew, the kit family takes over per-glyph. */
  --font-display: "Narkiss Hebrew", "Vito Extended", "narkiss-hadash-extended", "Helvetica Neue", Arial, sans-serif;
  --font-wide: "Narkiss Hebrew", "Vito Wide", "narkiss-hadash-extended", "Helvetica Neue", Arial, sans-serif;
  /* Lumend is the real design face; until its files are added, fall back to a
     clean neutral sans (never Courier / cursive, which aren't in the design). */
  --font-caption: "Lumend Blur Demo", "Narkiss Hebrew", "narkiss-hadash-extended", "Helvetica Neue", Arial, sans-serif;
  --font-ink: "Lumend Demo", "Narkiss Hebrew", "narkiss-hadash-extended", "Helvetica Neue", Arial, sans-serif;
  --font-drawn: "Lumend Rounded Drawn Demo", "Narkiss Hebrew", "narkiss-hadash-extended", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Shared type scale ----------
     One small "metadata" size used for every secondary line that sits around a
     title — the little label above a title, and the number + date above each
     polaroid — so that tier is identical on the archive, community and object
     screens instead of the several near-but-not-equal sizes that had crept in. */
  --fs-meta: 0.75rem;
  /* the two larger tiers, so a screen reads as just three sizes — a big
     display title (and the matching action link), a capture's name, and the
     small metadata — instead of the several ad-hoc sizes that had crept in */
  --fs-title: clamp(1.7rem, 2.6vw, 2.6rem);
  --fs-caption: 1.15rem;
}

/* ---------- Reset ---------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--color-bg);
  color: var(--color-cream);
  font-family: var(--font-display);
  /* Vito's built-in second uppercase J/W design, used consistently anywhere
     in the interface that renders through the display family. Fonts without
     this OpenType set simply ignore it. */
  font-feature-settings: "ss01" 1;
}

/* The horizontal clip lives on <html> ONLY. Putting it on <body> too turned
   <body> into its own scroll container (a non-visible overflow on one axis
   forces the other axis to auto), which silently detached every page's
   scrolling from the window: window.scrollY froze at 0 and window "scroll"
   listeners never fired — the archive's floating Add-Capture button computed
   itself off-screen after any late layout pass, and the About fan never
   tracked the scroll at all. With <html> alone clipping, page overflow
   reaches the viewport and scrolls it the normal way. */
html {
  overflow-x: hidden;
  /* stop a stray horizontal scroll / trackpad swipe from triggering the
     browser's back-navigation gesture */
  overscroll-behavior-x: none;
}

:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

/* ---------- Blue scroll bar on every scrolling screen ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-ink-blue) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-ink-blue);
}

/* The [hidden] attribute must win over any component's own display rule. */
[hidden] {
  display: none !important;
}

/* ---------- Custom cursor ---------- */

/* js/cursor.js adds .has-custom-cursor and the .cursor / .cursor-line elements */

.has-custom-cursor,
.has-custom-cursor * {
  cursor: none;
}

.cursor {
  position: fixed;
  left: -100px;
  top: -100px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

.cursor--active {
  background: var(--color-caption-blue);
}

.cursor--crosshair {
  width: 8px;
  height: 8px;
}

.cursor-line {
  position: fixed;
  display: none;
  background: rgba(240, 238, 234, 0.35);
  pointer-events: none;
  z-index: 9998;
}

.cursor-line--x {
  height: 1px;
}

.cursor-line--y {
  width: 1px;
}

.cursor-smear {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9998;
}

/* ---------- Animated film grain (js/grain.js) ---------- */

.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9997;
  /* screen blend lets the light specks read even over the near-black bg and
     over the 3D model, so the analog grain is visible everywhere */
  mix-blend-mode: screen;
  isolation: auto;
  opacity: 0.2;
  image-rendering: pixelated;
  animation: grain-flicker 3.4s steps(1) infinite;
}

/* the layer's strength gently breathes so it reads as a quiet flicker */
@keyframes grain-flicker {
  0%   { opacity: 0.15; }
  25%  { opacity: 0.22; }
  50%  { opacity: 0.14; }
  75%  { opacity: 0.2; }
  100% { opacity: 0.17; }
}

@media (prefers-reduced-motion: reduce) {
  .grain-overlay { animation: none; opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- One shared action-button height ----------
   Back/Proceed-style rectangles were each carrying their own vertical
   padding (9px on one screen, 12px on another, 15px on a third), so pairs
   sitting side by side rendered at visibly different heights. One fixed
   height, centred content, everywhere. The html prefix outranks each
   page's own class rule regardless of stylesheet order. */
html .onb-btn,
html .up-back,
html .up-btn,
html .proc-cancel,
html .proc-proceed,
html .phone-confirm-retake,
html .phone-confirm-cancel,
html .phone-confirm-process,
html .btn,
html .obj-white-btn,
html .obj-white-edit,
html .obj-blue-btn {
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}