/* The paper notification: a sheet of warm white paper on a white page, with a fine grain and a soft shadow. The
   shadow is painted by script.js on the canvas under it, in the colour below, and so are the light and shade on the
   paper while it folds. */
:root {
  --page: #ffffff;          /* the page */
  --paper: #fbf9f4;         /* the paper */
  --paper-low: #f6f2ea;     /* the paper at its bottom edge, a touch warmer */
  --ink: #1f1c17;           /* the words */
  --muted: #7a746a;         /* the quieter words */
  --button: #1f1c17;        /* the Open button */
  --button-hover: #3a352d;  /* the Open button under the pointer */
  --button-ink: #fbf9f4;    /* its word */
  --shadow: #3a2c16;        /* the shadow on the page, and the shade on the folds */
  --radius: 6px;            /* the corners of the sheet */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap, no zoom */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Hanken Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* the plane flies out of the window: the stage cuts it at its edges */
.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  overflow: hidden;
  overflow: clip;
}

/* the shadow of the paper, on the page */
.shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.note {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  height: 70px;
}

/* what a swipe moves: the card and its folds */
.note__mover {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- the sheet */
.card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 14px;
  border-radius: var(--radius);
  background:
    var(--grain, none) 0 0 / 128px 128px,
    linear-gradient(180deg, var(--paper) 30%, var(--paper-low));
  box-shadow: inset 0 0 0 0.5px rgba(80, 60, 30, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--ink);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* the creases left by the fold it arrived in: two soft valleys, in shade on their left and in the light on their
   right */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(33.333% - 5px), rgba(80, 60, 30, 0.028) 33.333%, rgba(255, 255, 255, 0.45) calc(33.333% + 1px), transparent calc(33.333% + 5px)),
    linear-gradient(90deg, transparent calc(66.667% - 5px), rgba(80, 60, 30, 0.028) 66.667%, rgba(255, 255, 255, 0.45) calc(66.667% + 1px), transparent calc(66.667% + 5px));
  pointer-events: none;
}

.card > * {
  position: relative;
}

/* while it arrives or leaves, the folds draw it: the real card waits unseen, and keeps the focus */
.card.is-hidden {
  opacity: 0;
}

.card__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tint, #e8d9c4);
  box-shadow: inset 0 0 0 0.5px rgba(80, 60, 30, 0.14);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.card__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.card__title,
.card__body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__title {
  font-size: 15px;
  line-height: 19px;
  font-weight: 480;
  letter-spacing: -0.005em;
}

.card__title b {
  font-weight: 680;
}

.card__body {
  font-size: 13px;
  line-height: 17px;
  font-weight: 450;
  color: var(--muted);
}

.card__open {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: 0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.18s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

.card__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

/* a finger gets a bigger target than the drawn cross */
.card__close::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

@media (hover: hover) and (pointer: fine) {
  .card__open:hover {
    background: var(--button-hover);
  }

  .card__close:hover {
    background: rgba(80, 60, 30, 0.07);
    color: var(--ink);
  }
}

.card__open:active,
.card__close:active {
  transform: scale(0.94);
}

.card__open:focus-visible,
.card__close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.card__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* the shadow a lifted corner casts on the sheet itself: over the card, under the corner */
.cast {
  position: absolute;
  left: -24px;
  top: -24px;
  z-index: 1;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}

/* on a phone the words get a little more room */
@media (max-width: 420px) {
  .card {
    gap: 10px;
    padding-left: 12px;
  }

  .card__title {
    font-size: 14.5px;
  }

  .card__open {
    padding: 0 12px;
  }
}

/* ---------------------------------------------------------------- the folds */
/* every face is a copy of the card, cut to its piece of paper and turned by script.js; the script also sorts them */
.folds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 900px;
}

.face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.face__front,
.face__back {
  position: absolute;
  inset: 0;
}

.face__back {
  display: none;
}

.face.is-back .face__front {
  display: none;
}

.face.is-back .face__back {
  display: block;
}

/* a copy turned over (the outside of the folded letter) turns about its corner */
.face .card {
  transform-origin: 0 0;
}

/* the back of the sheet: plain paper, with the print showing through faintly */
.face .is-through > * {
  opacity: 0.03;
}

.face .is-through::before {
  opacity: 0;
}

/* through the paper only the ink of the words shows, not the dark button or the coloured round */
.face .is-through .card__open,
.face .is-through .card__face {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.face__shade {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}