/* The floating travel note - a little square message box that drops in and then
   stays where it lands (owner request, 2026-10-16).

   Two layers, on purpose:
     .note       the berth - fixed to the bottom right corner, never moved;
     .note-card  the square itself, which owns the drop-in animation.
   Keeping them apart means a future entrance tweak can never leave a stale
   offset behind on the berth.

   There is no scroll behaviour here. An earlier version slid the box between
   the two bottom corners as the page was scrolled and the owner rejected it
   ("it should zip in and stay in the same place"); see docs/DECISIONS.md. */

.note {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  pointer-events: none;          /* only the card itself is clickable */
  /* Defensive: this class name once collided with a `.note` rule in
     styles.css (the "Draft copy" callout, since renamed `.callout`), whose
     padding + 20px margin pushed the box up off its corner. These two lines
     mean a future name clash cannot move the box again. */
  margin: 0;
  border: 0;
}

.note-card {
  pointer-events: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  width: 224px;
  height: 224px;                 /* square, like hers */
  padding: 20px 18px 18px;
  background: #0f524c;
  background-image: linear-gradient(160deg, #14625a 0%, #0f524c 62%, #0b423d 100%);
  color: #fdfbf8;
  border: 1px solid #c9942f;
  box-shadow: 0 18px 40px rgba(8, 44, 41, .30);
  opacity: 0;
  transform: translateY(-150%);
  animation: note-drop 1.1s cubic-bezier(.22, 1.15, .36, 1) .6s forwards;
}

@keyframes note-drop {
  0%   { opacity: 0; transform: translateY(-150%) rotate(-4deg); }
  60%  { opacity: 1; transform: translateY(10px) rotate(1.5deg); }
  80%  { transform: translateY(-5px) rotate(-.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

.note-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font: 400 20px/1 "Red Hat Display", system-ui, sans-serif;
  color: #c9942f;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .8;
}

.note-close:hover,
.note-close:focus-visible { opacity: 1; }

.note-card { position: relative; }

.note-tag {
  font: 400 10px/1.4 "Red Hat Display", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c9942f;
}

.note-msg {
  margin: 0;
  font: 400 21px/1.25 "Bodoni Moda", Georgia, serif;
  color: #fdfbf8;
}

.note-sub {
  margin: 0;
  font: 400 12.5px/1.5 "Red Hat Display", system-ui, sans-serif;
  color: #cfe0dc;
}

.note-cta {
  font: 700 12px/1.6 "Red Hat Display", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c9942f;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 148, 47, .5);
  align-self: flex-start;
}

.note-cta:hover,
.note-cta:focus-visible { color: #f0c96a; border-color: #f0c96a; }

@media (max-width: 720px) {
  .note { right: 12px; bottom: 12px; }
  .note-card {
    width: 176px;
    height: 176px;
    padding: 15px 14px 14px;
    gap: 6px;
  }
  .note-msg { font-size: 17px; }
  .note-sub { font-size: 11.5px; }
}

/* Someone who has asked their device for less motion gets the note, still -
   it simply is there rather than falling in. */
@media (prefers-reduced-motion: reduce) {
  .note-card { animation: none; opacity: 1; transform: none; }
}