/* ShotShot — shotshot.app
   The page is a ShotShot canvas: a black ground, a fine grain, and one object
   mounted on it. Every colour on the page comes out of the product shot; the
   page itself never competes with it. */

@font-face {
  font-family: 'Nippo';
  src: url('/fonts/nippo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nippo';
  src: url('/fonts/nippo-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nippo';
  src: url('/fonts/nippo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink:      #000000;   /* the canvas, matched to the product shot's own black */
  --ink-warm: #0b0806;   /* the ground warms as the page falls away */
  --text:     #f3eee9;
  --muted:    #9c918a;
  --mark:     #776c65;
  --annot:    #e5453a;   /* the app's own annotation red — used once, on the drawn arrow */
  --emboss:   #191411;

  --display: 'Nippo', ui-sans-serif, system-ui, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(22px, 5.2vw, 76px);
  --measure: 1340px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  min-height: 100%;
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--ink);
  background-image: linear-gradient(180deg, #000 0%, #000 46%, #050403 72%, var(--ink-warm) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain sits on the substrate: above the mounted image (so the shot's black and
   the page's black are the same surface, with no seam at the image edge) and
   below every piece of text and every control, which stay crisp. */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.page {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* text and controls ride above the grain */
.brand, .stage__copy, .legend, .foot { position: relative; z-index: 2; }

img { max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── brand ─────────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: clamp(26px, 3.4vw, 46px);
}

.brand__icon {
  width: 30px;
  height: 30px;
  flex: none;
}

.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.005em;
}

.brand__what {
  margin-left: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* ── the stage ─────────────────────────────────────────────────────────── */

.stage {
  min-height: calc(100svh - 90px);
  display: flex;
  flex-direction: column;
}

.stage__copy {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: clamp(40px, 6vw, 104px);
  justify-content: start;
  padding: clamp(52px, 8vw, 108px) 0 clamp(46px, 6vw, 84px);
}

.lede {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.05rem, 4.35vw, 3.65rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
}

.lede__line { display: block; }

/* ── the one action ───────────────────────────────────────────────────── */

.act { position: relative; padding-bottom: 2px; }

.dl {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 21px 14px 23px;
  background: var(--text);
  color: #0a0705;
  border-radius: 9px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1;
  /* No shadow and no glow: near-white on pure black is already the brightest
     thing on the page, and a bloom around it would read as a halo. */
  transition: background-color 180ms ease;
}

.dl__mark { flex: none; display: block; }
.dl__fall { transition: transform 220ms cubic-bezier(0.32, 0.9, 0.3, 1); }

.dl:hover { background: #ffffff; }
.dl:hover .dl__fall { transform: translateY(1.9px); }
.dl:active { background: #e2dbd4; }

.req {
  margin: 15px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* the app annotating its own download button, in its own arrow style:
   it sweeps in from the upper right and lands pointing at the one action */
.annot {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 4px);
  width: 152px;
  height: 92px;
  color: var(--annot);
  pointer-events: none;
  /* pivot on the tip so the head aims down into the button */
  transform: rotate(26deg);
  transform-origin: 31% 90%;
}

/* Base state is fully drawn. The keyframe only runs when animation runs, so a
   page with no animation still shows the whole arrow. */
.annot__sweep { stroke-dasharray: 160; stroke-dashoffset: 0; }

/* ── the mounted shot ─────────────────────────────────────────────────── */

.shot {
  position: relative;
  z-index: 0;
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── the legend ───────────────────────────────────────────────────────── */

.legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: clamp(40px, 5vw, 62px);
  padding-top: clamp(76px, 10vw, 150px);
}

.entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
}

.entry__mark {
  width: 24px;
  height: 24px;
  grid-row: 1;
  margin-top: 1px;
  color: var(--mark);
  transition: color 220ms ease;
}

.entry:hover .entry__mark { color: var(--text); }

.entry__term {
  grid-row: 1;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.35;
  letter-spacing: -0.008em;
}

.entry__body {
  grid-row: 2;
  grid-column: 2;
  margin: 9px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}

.entry__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  color: #b9aea6;
}

/* ── the foot ─────────────────────────────────────────────────────────── */

.foot { padding-top: clamp(88px, 12vw, 168px); }

.foot__colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
  font-size: 13.5px;
  color: var(--muted);
}

.foot__colophon p { margin: 0; }

.foot__dl {
  text-decoration: none;
  color: var(--text);
  transition: color 180ms ease;
}
.foot__dl:hover { color: #ffffff; }

/* The signature: the word, flush to the very bottom edge of the page with no
   gap beneath it, sitting above the grain, tracked out and embossed into the
   ground rather than shouting off it. */
.sig {
  position: relative;
  display: block;
  margin-top: clamp(46px, 7vw, 92px);
  container-type: inline-size;   /* the word is sized off the content column */
}

/* The clip box runs full-bleed into the gutters: it trims the empty descender
   band under the baseline, and the extra width on each side means no glyph is
   ever cut off horizontally. */
.sig__clip {
  display: block;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow: hidden;
}

.sig__word {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20vw;            /* fallback where container units are missing */
  font-size: 21.15cqw;         /* the word spans the content column exactly */
  letter-spacing: 0.012em;
  line-height: 1;
  margin-left: -1.1cqw;      /* cancel the S's left side bearing so ink aligns to the column */
  margin-bottom: -0.128em;   /* baseline to the page edge, without slicing a glyph */    /* baseline lands on the page's bottom edge */
  color: var(--emboss);
  white-space: nowrap;
}

.sig__sparkle {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: clamp(16px, 2.1vw, 26px);
  height: clamp(16px, 2.1vw, 26px);
  color: #3b3129;
}

/* ── motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .lede, .act { animation: rise 620ms cubic-bezier(0.22, 0.68, 0.24, 1) backwards; }
  .act { animation-delay: 90ms; }
  @keyframes rise { from { transform: translateY(15px); } }

  .annot__sweep { animation: draw 900ms cubic-bezier(0.36, 0.72, 0.28, 1) 520ms backwards; }
  @keyframes draw { from { stroke-dashoffset: 160; } }

  .sig__sparkle { animation: twinkle 5.4s ease-in-out infinite; transform-origin: 50% 50%; }
  @keyframes twinkle {
    0%, 62%, 100% { transform: scale(1);    color: #3b3129; }
    78%           { transform: scale(1.13); color: #6b5a4d; }
  }
}

/* ── narrower ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .stage__copy { grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 5vw, 44px); }
  .act { justify-self: start; }
  .annot { display: none; }
}

@media (max-width: 760px) {
  .stage { min-height: 0; }
  /* hold the headline to two sentences over three lines, down to 320px */
  .lede { font-size: clamp(1.62rem, 7.3vw, 2.15rem); }
  .brand { flex-wrap: wrap; }
  .brand__what { margin-left: 0; flex-basis: 100%; }
  .legend { grid-template-columns: minmax(0, 1fr); row-gap: 38px; }
  .entry__body { max-width: none; }
  .foot__colophon { flex-direction: column; gap: 8px; }
}